refactoring toggle component
This commit is contained in:
Alex Windett
parent
0b8b1ee379
commit
98933873c1
|
|
@ -1,136 +0,0 @@
|
|||
const constants = require('../../shared/constants');
|
||||
const composers = require('../../shared/composers');
|
||||
const fns = require('../../shared/functions');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
boxes,
|
||||
colors,
|
||||
typography
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
pseudoEl
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
remcalc,
|
||||
rndId
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const classNames = {
|
||||
label: rndId()
|
||||
};
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
border-radius: ${boxes.borderRadius};
|
||||
color: #464646;
|
||||
height: 2.5rem;
|
||||
width: ${remcalc(110)};
|
||||
`;
|
||||
|
||||
const StyledToggleLabel = styled.div`
|
||||
background-color: #E6E6E6;
|
||||
border: solid 1px #D8D8D8;
|
||||
border-radius: ${boxes.borderRadius};
|
||||
color: #000000;
|
||||
height: ${remcalc(54)};
|
||||
margin: 0.125rem;
|
||||
padding-left: ${remcalc(12)};
|
||||
position: relative;
|
||||
text-align: right;
|
||||
width: ${remcalc(106)};
|
||||
|
||||
&::before {
|
||||
content: "${props => props.labelRight}";
|
||||
font-family: ${typography.fontPrimary};
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 19px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "${props => props.labelLeft}";
|
||||
background-color: #FFFFFF;
|
||||
border-radius: ${boxes.borderRadius};
|
||||
height: ${remcalc(46)};
|
||||
width: ${remcalc(46)};
|
||||
|
||||
${pseudoEl({
|
||||
top: '3px',
|
||||
left: '3px',
|
||||
})}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input`
|
||||
display: none;
|
||||
|
||||
&:checked {
|
||||
& + .${classNames.label} {
|
||||
background: ${colors.confirmation};
|
||||
border: ${boxes.border.confirmed};
|
||||
color: #FFFFFF;
|
||||
padding-left: 0;
|
||||
padding-right: ${remcalc(12)};
|
||||
text-align: left;
|
||||
|
||||
&::before {
|
||||
content: "${props => props.labelLeft}";
|
||||
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: auto;
|
||||
right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Toggle = ({
|
||||
checked,
|
||||
className,
|
||||
defaultChecked,
|
||||
labelLeft = "On",
|
||||
labelRight = "Off",
|
||||
id = rndId(),
|
||||
style
|
||||
}) => {
|
||||
return (
|
||||
<StyledLabel
|
||||
className={className}
|
||||
htmlFor={id}
|
||||
style={style}
|
||||
>
|
||||
<StyledInput
|
||||
id={id}
|
||||
labelLeft={labelLeft}
|
||||
type='checkbox'
|
||||
/>
|
||||
<StyledToggleLabel
|
||||
className={classNames.label}
|
||||
labelRight={labelRight}
|
||||
/>
|
||||
</StyledLabel>
|
||||
);
|
||||
};
|
||||
|
||||
Toggle.propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
defaultChecked: React.PropTypes.bool,
|
||||
id: React.PropTypes.string,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = Toggle;
|
||||
|
|
@ -5,13 +5,10 @@ const React = require('react');
|
|||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
boxes,
|
||||
colors,
|
||||
typography
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
pseudoEl,
|
||||
baseBox
|
||||
} = composers;
|
||||
|
||||
|
|
@ -22,36 +19,22 @@ const {
|
|||
|
||||
const {
|
||||
default: styled,
|
||||
keyframes
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
const classNames = {
|
||||
label: rndId()
|
||||
};
|
||||
|
||||
const slide = (
|
||||
direction = 'left'
|
||||
) => {
|
||||
keyframes`
|
||||
from {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
/*
|
||||
const backgroundGradient = (index) => {
|
||||
const colorDefault = index === 1 ? 'red' : 'blue';
|
||||
const colorAlt = index === 1 ? 'blue' : 'red';
|
||||
debugger
|
||||
// debugger
|
||||
return css`
|
||||
background: linear-gradient(to right, ${colorDefault} 50%, ${colorAlt} 50%);
|
||||
// background: linear-gradient(to right,
|
||||
${colorDefault} 50%,
|
||||
${colorAlt} 50%);
|
||||
background: linear-gradient(to right, red 50%, blue 50%);
|
||||
`;
|
||||
}
|
||||
|
||||
};
|
||||
*/
|
||||
|
||||
const StyledText = styled.span`
|
||||
padding: 1rem;
|
||||
|
|
@ -61,77 +44,104 @@ const StyledText = styled.span`
|
|||
const StyledDiv = styled.div`
|
||||
display: inline-block;
|
||||
background-color: ${colors.brandInactive};
|
||||
animation: ${slide} 0.5s forwards;
|
||||
|
||||
${baseBox()}
|
||||
`;
|
||||
|
||||
const inputStyled = css`
|
||||
background-size: 200% 100%;
|
||||
transition:all .5s ease;
|
||||
min-width: ${remcalc(120)};
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
const StyledInput_1 = styled.input`
|
||||
|
||||
const StyledInput0 = styled.input`
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
background: #ff3232;
|
||||
background: linear-gradient(to right, red 50%, blue 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position:left bottom;
|
||||
transition:all .5s ease;
|
||||
background: linear-gradient(to right,
|
||||
transparent 50%,
|
||||
${colors.brandSecondary} 50%);
|
||||
background-position: left bottom;
|
||||
|
||||
${inputStyled}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
|
||||
|
||||
& + span {
|
||||
background-position: right bottom;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledInput_2 = styled.input`
|
||||
const StyledInput1 = styled.input`
|
||||
display: none;
|
||||
|
||||
& + span {
|
||||
background: #ff3232;
|
||||
background: linear-gradient(to right, blue 50%, red 50%);
|
||||
background-size: 200% 100%;
|
||||
background-position:right bottom;
|
||||
transition:all .5s ease;
|
||||
& + span {
|
||||
background: linear-gradient(to right,
|
||||
${colors.brandSecondary} 50%,
|
||||
transparent 50%);
|
||||
background-position: right bottom;
|
||||
|
||||
${inputStyled}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
|
||||
|
||||
& + span {
|
||||
background-position: left bottom;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
`;
|
||||
|
||||
|
||||
const Toggle = ({
|
||||
checked,
|
||||
className,
|
||||
defaultChecked,
|
||||
options = [
|
||||
"On",
|
||||
"Off"
|
||||
{
|
||||
label: 'On',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
label: 'Off',
|
||||
checked: false
|
||||
}
|
||||
],
|
||||
id = rndId(),
|
||||
style
|
||||
}) => {
|
||||
return (
|
||||
<StyledDiv>
|
||||
<StyledLabel>
|
||||
<StyledInput_1 defaultChecked name="toggler" type="radio" value={options[0]} index={1} />
|
||||
<StyledText>{options[0]}</StyledText>
|
||||
</StyledLabel>
|
||||
<StyledLabel>
|
||||
<StyledInput_2 name="toggler" type="radio" value={options[1]} index={2} />
|
||||
<StyledText>{options[1]}</StyledText>
|
||||
</StyledLabel>
|
||||
{options.map( (option, index) => {
|
||||
|
||||
if ( index > 2 ) return;
|
||||
|
||||
const customProps = {
|
||||
defaultChecked: option.checked,
|
||||
name: 'toggler',
|
||||
type: 'radio',
|
||||
value: option.label,
|
||||
id: rndId()
|
||||
};
|
||||
|
||||
const InputVarients = {
|
||||
input_0: (<StyledInput0 {...customProps} />),
|
||||
input_1: (<StyledInput1 {...customProps} />)
|
||||
};
|
||||
|
||||
return (
|
||||
<label
|
||||
htmlFor={customProps.id}
|
||||
key={index}
|
||||
>
|
||||
{InputVarients[`input_${index}`]}
|
||||
<StyledText>{option.label}</StyledText>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</StyledDiv>
|
||||
);
|
||||
};
|
||||
|
|
@ -141,6 +151,7 @@ Toggle.propTypes = {
|
|||
className: React.PropTypes.string,
|
||||
defaultChecked: React.PropTypes.bool,
|
||||
id: React.PropTypes.string,
|
||||
options: React.PropTypes.array,
|
||||
style: React.PropTypes.object
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -339,16 +339,20 @@ storiesOf('Toggle', module)
|
|||
.add('checked', () => (
|
||||
<Toggle
|
||||
defaultChecked
|
||||
labelLeft='Topology'
|
||||
labelRight='List'
|
||||
options={[
|
||||
{
|
||||
label: 'Topology',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
label: 'List',
|
||||
checked: false
|
||||
}
|
||||
]}
|
||||
/>
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle
|
||||
checked
|
||||
labelLeft='Topology'
|
||||
labelRight='List'
|
||||
/>
|
||||
<Toggle />
|
||||
));
|
||||
|
||||
storiesOf('Tooltip', module)
|
||||
|
|
|
|||
Loading…
Reference in New Issue