| 1 | {"version":3,"file":"Switch.js","sources":["../src/components/Switch/Switch.js"],"sourcesContent":["import React, { useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { Spring, animated } from 'react-spring'\n\nimport { useTheme } from '../../theme'\nimport { noop } from '../../utils'\nimport { springs, GU } from '../../style'\nimport FocusVisible from '../FocusVisible/FocusVisible'\n\nconst BORDER = 1\nconst WRAPPER_WIDTH = 5 * GU\nconst WRAPPER_HEIGHT = 2.25 * GU\n\nfunction Switch({ checked, disabled, onChange }) {\n const theme = useTheme()\n const [isFocused, setIsFocused] = useState(false)\n\n const handleChange = disabled ? noop : () => onChange(!checked)\n\n return (\n <FocusVisible>\n {({ focusVisible, onFocus }) => (\n <span\n onClick={e => {\n e.preventDefault()\n handleChange()\n }}\n css={`\n position: relative;\n display: inline-block;\n width: ${WRAPPER_WIDTH}px;\n height: ${WRAPPER_HEIGHT}px;\n border: ${BORDER}px solid ${theme.border};\n border-radius: ${WRAPPER_HEIGHT}px;\n background-color: ${disabled\n ? theme.controlBorder\n : checked\n ? theme.selected\n : theme.control};\n cursor: ${disabled ? 'default' : 'pointer'};\n\n ${disabled\n ? ''\n : `\n &:active {\n border-color: ${theme.controlBorderPressed};\n }\n `}\n\n ${isFocused && focusVisible\n ? `\n &:after {\n content: '';\n position: absolute;\n left: ${-BORDER * 2}px;\n top: ${-BORDER * 2}px;\n width: ${WRAPPER_WIDTH + BORDER * 2}px;\n height: ${WRAPPER_HEIGHT + BORDER * 2}px;\n border-radius: ${WRAPPER_HEIGHT}px;\n border: 2px solid ${theme.focus};\n }\n `\n : ''};\n `}\n >\n <input\n type=\"checkbox\"\n onFocus={() => {\n setIsFocused(true)\n onFocus()\n }}\n onBlur={() => setIsFocused(false)}\n checked={checked}\n disabled={disabled}\n onChange={handleChange}\n css={`\n opacity: 0;\n pointer-events: none;\n `}\n />\n <Spring\n to={{\n progress: checked\n ? WRAPPER_WIDTH - WRAPPER_HEIGHT + BORDER\n : BORDER,\n }}\n config={springs.smooth}\n native\n >\n {({ progress }) => (\n <animated.span\n style={{\n transform: progress.interpolate(\n v => `translate3d(${v}px, 0, 0)`\n ),\n }}\n css={`\n position: absolute;\n left: 0;\n z-index: 1;\n top: ${BORDER}px;\n width: ${WRAPPER_HEIGHT - BORDER * 4}px;\n height: ${WRAPPER_HEIGHT - BORDER * 4}px;\n border-radius: ${WRAPPER_HEIGHT - BORDER * 4}px;\n background-color: ${theme.controlSurface};\n box-shadow: ${disabled\n ? 'none'\n : '0px 1px 3px rgba(0, 0, 0, 0.15)'};\n `}\n />\n )}\n </Spring>\n </span>\n )}\n </FocusVisible>\n )\n}\n\nSwitch.propTypes = {\n checked: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n}\n\nSwitch.defaultProps = {\n checked: false,\n disabled: false,\n onChange: noop,\n}\n\nexport default Switch\n"],"names":["BORDER","WRAPPER_WIDTH","GU","WRAPPER_HEIGHT","Switch","checked","disabled","onChange","theme","useTheme","useState","isFocused","setIsFocused","handleChange","noop","React","FocusVisible","focusVisible","onFocus","e","preventDefault","border","controlBorder","selected","control","controlBorderPressed","focus","Spring","progress","springs","smooth","transform","interpolate","v","controlSurface","propTypes","PropTypes","bool","func","defaultProps"],"mappings":"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"} |