migrate boolean widget
This commit is contained in:
@ -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 };
|
||||
|
@ -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 {
|
||||
|
Reference in New Issue
Block a user