| 1 | {"version":3,"file":"Checkbox.js","sources":["../src/components/Input/Checkbox.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Spring, animated } from 'react-spring'\nimport { useTheme } from '../../theme'\nimport { noop } from '../../utils'\nimport { springs, GU, RADIUS } from '../../style'\nimport FocusVisible from '../FocusVisible/FocusVisible'\n\nconst SIZE = 18\nconst CHECKBOX_RADIUS = 2\nconst RADIO_BULLET_SIZE = 10\n\nclass Checkbox extends React.PureComponent {\n static propTypes = {\n checked: PropTypes.bool,\n disabled: PropTypes.bool,\n indeterminate: PropTypes.bool,\n onChange: PropTypes.func,\n tabIndex: PropTypes.string,\n theme: PropTypes.object,\n variant: PropTypes.oneOf(['checkbox', 'radio']),\n }\n static defaultProps = {\n checked: false,\n disabled: false,\n indeterminate: false,\n onChange: noop,\n tabIndex: '0',\n variant: 'checkbox',\n }\n _element = React.createRef()\n getAriaChecked() {\n const { checked, indeterminate } = this.props\n if (indeterminate) return 'mixed'\n if (checked) return 'true'\n return 'false'\n }\n handleClick = () => {\n const { onChange, checked, indeterminate } = this.props\n onChange(indeterminate ? false : !checked)\n }\n focus = () => {\n this._element.current.focus()\n }\n renderCheck(visible, Icon) {\n const { disabled, theme } = this.props\n return (\n <Spring\n from={{ progress: 0 }}\n to={{ progress: Number(visible) }}\n config={springs.instant}\n native\n >\n {({ progress }) => (\n <animated.span\n css={`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transform-origin: 50% 50%;\n `}\n style={{\n opacity: progress,\n transform: progress.interpolate(v => `scale(${v})`),\n }}\n >\n <Icon color={disabled ? theme.selectedDisabled : theme.selected} />\n </animated.span>\n )}\n </Spring>\n )\n }\n render() {\n const {\n checked,\n disabled,\n indeterminate,\n tabIndex,\n theme,\n variant,\n ...props\n } = this.props\n return (\n <FocusVisible>\n {({ focusVisible, onFocus }) => (\n <button\n type=\"button\"\n ref={this._element}\n role={variant}\n tabIndex={tabIndex}\n aria-checked={this.getAriaChecked()}\n onClick={this.handleClick}\n onFocus={onFocus}\n disabled={disabled}\n css={`\n display: inline-flex;\n position: relative;\n width: ${SIZE}px;\n height: ${SIZE}px;\n margin: ${0.5 * GU}px;\n padding: 0;\n background: ${disabled ? theme.controlDisabled : theme.control};\n border: 1px solid ${theme.controlBorder};\n border-radius: ${variant === 'radio'\n ? '50%'\n : `${CHECKBOX_RADIUS}px`};\n outline: 0;\n &::-moz-focus-inner {\n border: 0;\n }\n\n ${!disabled\n ? `\n cursor: pointer;\n &:active {\n border-color: ${theme.controlBorderPressed};\n }\n &:focus .focus-ring {\n display: ${focusVisible ? 'block' : 'none'};\n }\n `\n : ''};\n `}\n {...props}\n >\n {variant === 'checkbox' &&\n this.renderCheck(checked && !indeterminate, Check)}\n {variant === 'checkbox' && this.renderCheck(indeterminate, Dash)}\n {variant === 'radio' && this.renderCheck(checked, Bullet)}\n\n <span\n className=\"focus-ring\"\n css={`\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border: 2px solid ${theme.focus};\n border-radius: ${variant === 'radio' ? '50%' : `${RADIUS}px`};\n display: none;\n `}\n />\n </button>\n )}\n </FocusVisible>\n )\n }\n}\n\n/* eslint-disable react/prop-types */\n\nconst Dash = ({ color }) => (\n /* Use SVG to have subpixels (strokeWidth=\"1.5\") on Chrome */\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\">\n <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke={color} strokeWidth=\"1.5\" />\n </svg>\n)\n\nconst Check = ({ color }) => (\n <svg width=\"12\" height=\"8\" viewBox=\"0 0 12 8\">\n <path\n d={`\n M11.059 1.393\n L4.335 7.395\n L0.944 3.260\n L2.104 2.309\n L4.503 5.234\n L10.060 0.274\n L11.059 1.393\n Z\n `}\n fill={color}\n />\n </svg>\n)\n\nconst Bullet = ({ color }) => (\n <span\n css={`\n display: block;\n width: ${RADIO_BULLET_SIZE}px;\n height: ${RADIO_BULLET_SIZE}px;\n border-radius: 50%;\n background: ${color};\n `}\n />\n)\n\nconst CheckBoxWithTheme = React.forwardRef((props, ref) => {\n const theme = useTheme()\n return <Checkbox theme={theme} ref={ref} {...props} />\n})\n\n/* eslint-enable react/prop-types */\n\nexport default CheckBoxWithTheme\n"],"names":["SIZE","CHECKBOX_RADIUS","RADIO_BULLET_SIZE","Checkbox","React","createRef","props","onChange","checked","indeterminate","_element","current","focus","visible","Icon","disabled","theme","Spring","progress","Number","springs","instant","opacity","transform","interpolate","v","selectedDisabled","selected","tabIndex","variant","FocusVisible","focusVisible","onFocus","getAriaChecked","handleClick","GU","controlDisabled","control","controlBorder","controlBorderPressed","renderCheck","Check","Dash","Bullet","RADIUS","PureComponent","PropTypes","bool","func","string","object","oneOf","noop","color","CheckBoxWithTheme","forwardRef","ref","useTheme"],"mappings":"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"} |