creevey
Version:
Cross-browser screenshot testing tool for Storybook with fancy UI Runner
86 lines • 3.27 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Checkbox = exports.CheckboxContainer = void 0;
const react_1 = __importDefault(require("react"));
const theming_1 = require("@storybook/theming");
const components_1 = require("@storybook/components");
const polished_1 = require("polished");
const Label = (0, theming_1.withTheme)(theming_1.styled.label(({ theme, disabled }) => ({
display: 'inline-flex',
alignItems: 'baseline',
position: 'relative',
whiteSpace: 'nowrap',
cursor: 'pointer',
fontSize: theme.typography.size.s1,
padding: '0px',
pointerEvents: disabled ? 'none' : 'auto',
input: {
display: 'inline-block',
opacity: '0',
width: 0,
height: 0,
position: 'absolute',
zIndex: -1,
'&:focus + span': {
outline: 'none',
boxShadow: `${(0, polished_1.transparentize)(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
},
},
})));
const Box = (0, theming_1.withTheme)(theming_1.styled.span(({ theme }) => ({
display: 'inline-block',
width: '16px',
height: '16px',
border: theme.appBorderColor,
borderRadius: theme.input.borderRadius,
margin: '2px',
boxShadow: `${(0, polished_1.transparentize)(0.8, theme.color.defaultText)} 0 0 0 1px inset`,
color: (0, polished_1.transparentize)(0.3, theme.color.defaultText),
background: theme.background.content,
'&:hover, &:focus': {
outline: 'none',
boxShadow: `${(0, polished_1.transparentize)(0.5, theme.color.defaultText)} 0 0 0 1px inset`,
},
})));
const CircleIcon = (0, theming_1.styled)(components_1.Icons)({
margin: '4px',
verticalAlign: 'baseline',
});
const CheckIcon = (0, theming_1.styled)(components_1.Icons)({
margin: '2px',
verticalAlign: 'baseline',
});
exports.CheckboxContainer = theming_1.styled.span({
paddingLeft: '8px',
verticalAlign: 'middle',
alignSelf: 'center',
lineHeight: '18px',
});
class Checkbox extends react_1.default.Component {
state = { indeterminate: false };
handleIndeterminateChange = (value) => {
this.setState({
indeterminate: value,
});
};
setIndeterminate = () => {
this.handleIndeterminateChange(true);
};
resetIndeterminate = () => {
this.handleIndeterminateChange(false);
};
render() {
const { checked, disabled, onValueChange } = this.props;
const { indeterminate } = this.state;
return (react_1.default.createElement(Label, { disabled: disabled },
react_1.default.createElement("input", { type: "checkbox", onChange: (e) => {
onValueChange(e.target.checked);
}, checked: checked ?? false }),
react_1.default.createElement(Box, null, indeterminate ? (react_1.default.createElement(CircleIcon, { icon: "circle", width: "8", height: "8" })) : checked ? (react_1.default.createElement(CheckIcon, { icon: "check", width: "12", height: "12" })) : (' '))));
}
}
exports.Checkbox = Checkbox;
//# sourceMappingURL=Checkbox.js.map