refactoing radio input
This commit is contained in:
parent
458d792a17
commit
0238d007b8
@ -43,10 +43,6 @@ const RadioItem = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const ItemContent = styled.div`
|
||||
display: block;
|
||||
float: left;
|
||||
`;
|
||||
|
||||
const Item = ({
|
||||
children,
|
||||
@ -65,9 +61,6 @@ const Item = ({
|
||||
tabIndex={tabIndex}
|
||||
>
|
||||
{children}
|
||||
<ItemContent>
|
||||
{itemContent}
|
||||
</ItemContent>
|
||||
</RadioItem>
|
||||
);
|
||||
};
|
||||
|
@ -10,43 +10,54 @@ const {
|
||||
default: styled,
|
||||
} = Styled;
|
||||
|
||||
const StyledInput = styled.input`
|
||||
visibility: hidden;
|
||||
let top;
|
||||
const left = top = 5;
|
||||
|
||||
&:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
&:disabled + label {
|
||||
background-color: rgb(249, 249, 249);
|
||||
}
|
||||
&:disabled + label::after {
|
||||
opacity: 0.3;
|
||||
}
|
||||
`;
|
||||
|
||||
const border = 1;
|
||||
const StyledLabel = styled.label`
|
||||
color: rgb(100, 100, 100);
|
||||
position: absolute;
|
||||
width: ${24 - border}px;
|
||||
height: ${24 - border}px;
|
||||
top: 0;
|
||||
border-radius: 100%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: ${boxes.insetShaddow};
|
||||
border: ${boxes.border.unchecked};
|
||||
|
||||
&::after {
|
||||
opacity: 0;
|
||||
const CustomInputCircle = `
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: rgb(100, 100, 100);
|
||||
top: ${(23 / 2) - 4}px;
|
||||
left: ${(23 / 2) - 4}px;
|
||||
top: ${top * 2}px;
|
||||
left: ${left * 2}px;
|
||||
border-radius: 100%;
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input`
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
|
||||
&:checked + span::after {
|
||||
${CustomInputCircle}
|
||||
}
|
||||
&:disabled + span {
|
||||
background-color: rgb(249, 249, 249);
|
||||
}
|
||||
&:disabled + span::after {
|
||||
opacity: 0.3;
|
||||
${CustomInputCircle}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
`;
|
||||
|
||||
const StyledSpan = styled.span`
|
||||
color: rgb(100, 100, 100);
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: ${boxes.insetShaddow};
|
||||
border: ${boxes.border.unchecked};
|
||||
top: ${top}px;
|
||||
left: ${left}px;
|
||||
border-radius: 100%;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -56,15 +67,6 @@ const StyledLabel = styled.label`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledDiv = styled.div`
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const TextLabel = styled.label`
|
||||
`;
|
||||
|
||||
const Radio = ({
|
||||
checked,
|
||||
children,
|
||||
@ -83,11 +85,11 @@ const Radio = ({
|
||||
tabIndex,
|
||||
value
|
||||
}) => {
|
||||
const _children = label && children ? children : null;
|
||||
// debugger
|
||||
// const _children = label && children ? children : null;
|
||||
|
||||
return (
|
||||
<TextLabel>
|
||||
<StyledDiv>
|
||||
<StyledLabel>
|
||||
<StyledInput
|
||||
checked={checked}
|
||||
defaultChecked={defaultChecked}
|
||||
@ -103,12 +105,10 @@ const Radio = ({
|
||||
type='radio'
|
||||
value={value}
|
||||
/>
|
||||
<StyledLabel />
|
||||
</StyledDiv>
|
||||
<span>
|
||||
{_children}
|
||||
</span>
|
||||
</TextLabel>
|
||||
<StyledSpan>
|
||||
{children}
|
||||
</StyledSpan>
|
||||
</StyledLabel>
|
||||
);
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user