Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

refactoing radio input

Browse Source
This commit is contained in:
Alex Windett 2016-12-14 12:30:25 +00:00
parent 458d792a17
commit 0238d007b8
2 changed files with 59 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/components/radio-group/item.js
View File

@ -43,10 +43,6 @@ const RadioItem = styled.div`
} }
`; `;
const ItemContent = styled.div`
display: block;
float: left;
`;
const Item = ({ const Item = ({
children, children,
@ -65,9 +61,6 @@ const Item = ({
tabIndex={tabIndex} tabIndex={tabIndex}
> >
{children} {children}
<ItemContent>
{itemContent}
</ItemContent>
</RadioItem> </RadioItem>
); );
}; };

118
ui/src/components/radio/index.js
View File

@ -10,59 +10,61 @@ const {
default: styled, default: styled,
} = Styled; } = Styled;
let top;
const left = top = 5;
const CustomInputCircle = `
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgb(100, 100, 100);
top: ${top * 2}px;
left: ${left * 2}px;
border-radius: 100%;
`;
const StyledInput = styled.input` const StyledInput = styled.input`
visibility: hidden; visibility: hidden;
display: none;
&:checked + label::after { &:checked + span::after {
opacity: 1; ${CustomInputCircle}
} }
&:disabled + label { &:disabled + span {
background-color: rgb(249, 249, 249); background-color: rgb(249, 249, 249);
} }
&:disabled + label::after { &:disabled + span::after {
opacity: 0.3; opacity: 0.3;
${CustomInputCircle}
} }
`; `;
const border = 1;
const StyledLabel = styled.label` const StyledLabel = styled.label`
color: rgb(100, 100, 100); `;
const StyledSpan = styled.span`
color: rgb(100, 100, 100);
position: relative;
&::before {
content: '';
position: absolute; position: absolute;
width: ${24 - border}px; width: 16px;
height: ${24 - border}px; height: 16px;
top: 0;
border-radius: 100%;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
box-shadow: ${boxes.insetShaddow}; box-shadow: ${boxes.insetShaddow};
border: ${boxes.border.unchecked}; border: ${boxes.border.unchecked};
top: ${top}px;
left: ${left}px;
border-radius: 100%;
}
&:hover {
&::after { &::after {
opacity: 0; opacity: 0.3;
content: '';
position: absolute;
width: 8px;
height: 8px;
background: rgb(100, 100, 100);
top: ${(23 / 2) - 4}px;
left: ${(23 / 2) - 4}px;
border-radius: 100%;
transform: rotate(-45deg);
} }
}
&:hover {
&::after {
opacity: 0.3;
}
}
`;
const StyledDiv = styled.div`
width: 24px;
height: 24px;
position: relative;
`;
const TextLabel = styled.label`
`; `;
const Radio = ({ const Radio = ({
@ -83,32 +85,30 @@ const Radio = ({
tabIndex, tabIndex,
value value
}) => { }) => {
const _children = label && children ? children : null; // debugger
// const _children = label && children ? children : null;
return ( return (
<TextLabel> <StyledLabel>
<StyledDiv> <StyledInput
<StyledInput checked={checked}
checked={checked} defaultChecked={defaultChecked}
defaultChecked={defaultChecked} disabled={disabled}
disabled={disabled} form={form}
form={form} id={id}
id={id} name={name}
name={name} onChange={onChange}
onChange={onChange} readOnly={readOnly}
readOnly={readOnly} required={required}
required={required} selectionDirection={selectionDirection}
selectionDirection={selectionDirection} tabIndex={tabIndex}
tabIndex={tabIndex} type='radio'
type='radio' value={value}
value={value} />
/> <StyledSpan>
<StyledLabel /> {children}
</StyledDiv> </StyledSpan>
<span> </StyledLabel>
{_children}
</span>
</TextLabel>
); );
}; };