migrate boolean widget

This commit is contained in:
Shawn Erquhart
2018-07-24 09:18:36 -04:00
parent 0e25b76bb7
commit 6be3c7a839
9 changed files with 91 additions and 63 deletions

View File

@ -1,67 +1,67 @@
import React from 'react'
import styled, { css, cx } from 'react-emotion';
import styled, { css } from 'react-emotion';
import ReactToggled from 'react-toggled';
import { colors, colorsRaw, shadows, transitions } from './styles';
const styles = {
switch: css`
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 20px;
cursor: pointer;
`,
switchHandle: css`
${shadows.dropDeep};
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: ${colorsRaw.white};
transition: transform ${transitions.main};
`,
switchHandleActive: css`
const ToggleContainer = styled.span`
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 20px;
cursor: pointer;
`
const ToggleHandle = styled.span`
${shadows.dropDeep};
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: ${colorsRaw.white};
transition: transform ${transitions.main};
${props => props.isActive && css`
transform: translateX(20px);
`,
switchBackground: css`
width: 34px;
height: 14px;
border-radius: 10px;
background-color: ${colors.active};
`,
};
`}
`
const ToggleBackground = styled.span`
width: 34px;
height: 14px;
border-radius: 10px;
background-color: ${colors.active};
`
const Toggle = ({
active,
onChange,
className,
classNameBackground,
classNameSwitch,
renderBackground,
onFocus,
onBlur
}) =>
onBlur,
Container = ToggleContainer,
Background = ToggleBackground,
Handle = ToggleHandle,
}) => (
<ReactToggled on={active} onToggle={onChange}>
{({on, getElementTogglerProps}) => (
<span
className={cx(styles.switch, className)}
<Container
role="switch"
aria-checked={on.toString()}
onFocus={onFocus}
onBlur={onBlur}
{...getElementTogglerProps()}
>
<span className={cx(styles.switchBackground, classNameBackground)}/>
<span className={cx(
styles.switchHandle,
classNameSwitch,
{ [styles.switchHandleActive]: on },
)}/>
</span>
<Background isActive={on}/>
<Handle isActive={on}/>
</Container>
)}
</ReactToggled>;
</ReactToggled>
);
export default styled(Toggle)``
const StyledToggle = styled(Toggle)``;
export { StyledToggle as default, ToggleContainer, ToggleBackground, ToggleHandle };

View File

@ -2,7 +2,7 @@ export Dropdown, { DropdownItem, DropdownButton, StyledDropdownButton } from './
export Icon from './Icon';
export ListItemTopBar from './ListItemTopBar';
export Loader from './Loader';
export Toggle from './Toggle';
export Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggle';
export AuthenticationPage from './AuthenticationPage';
export WidgetPreviewContainer from './WidgetPreviewContainer';
export {