@onesy/ui-react
Version:
UI for React
455 lines (452 loc) • 16.1 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _compilerRuntime = require("react/compiler-runtime");
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Buttons = require("../Buttons/Buttons");
var _utils2 = require("../utils");
var _Icon = _interopRequireDefault(require("../Icon"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["noFontSizeDownScale", "Component", "className", "style", "children"],
_excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
const IconMaterialIndeterminateCheckBox = props => {
const $ = (0, _compilerRuntime.c)(3);
let t0;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t0 = /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
d: "M7 13H17V11H7V13Z"
});
$[0] = t0;
} else {
t0 = $[0];
}
let t1;
if ($[1] !== props) {
t1 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, _objectSpread(_objectSpread({
name: "IndeterminateCheckBox",
short_name: "IndeterminateCheckBox"
}, props), {}, {
children: t0
}));
$[1] = props;
$[2] = t1;
} else {
t1 = $[2];
}
return t1;
};
const useStyle = (0, _styleReact.style)(theme => ({
root: {
position: 'relative',
'& *': {
boxSizing: 'border-box'
}
},
input: {
position: 'absolute',
inset: '0',
width: '100%',
height: '100%',
opacity: '0',
cursor: 'inherit',
zIndex: '1'
},
icon: {
zIndex: '1',
pointerEvents: 'none'
},
iconBox: {
width: '1em',
height: '1em',
border: '0.125em solid currentColor',
background: 'transparent',
transition: theme.methods.transitions.make('background', {
duration: 0,
delay: 'xxs'
}),
borderRadius: `calc(${theme.shape.radius.unit / 8} * 0.11em)`
},
iconBox_checked: {
background: 'currentColor',
transition: theme.methods.transitions.make('background', {
duration: 0
})
},
iconBox_checked_version_filled: {
border: 'none'
},
iconBox_checked_version_outlined: {
border: 'none'
},
iconBox_checked_disabled: {
background: 'currentColor',
border: 'none'
},
iconBox_indeterminate: {
background: 'currentColor',
transition: theme.methods.transitions.make('background', {
duration: 0
})
},
iconBox_indeterminate_version_filled: {
border: 'none'
},
iconBox_indeterminate_version_outlined: {
border: 'none'
},
iconBox_indeterminate_disabled: {
background: 'currentColor',
border: 'none'
},
iconItem: {
position: 'absolute',
width: 'calc(100% - 0.3em)',
height: 'calc(100% - 0.3em)',
insetInline: '0',
insetInlineStart: '0.16em',
top: '0.15em',
zIndex: '2',
pointerEvents: 'none',
'&::before': {
content: "''",
display: 'inline-flex',
width: '100%',
height: '100%',
position: 'absolute',
inset: '0',
background: 'currentColor',
transform: 'scale(1)',
opacity: '0',
transition: `${theme.methods.transitions.make('transform', {
duration: 'xxs'
})}, ${theme.methods.transitions.make('opacity', {
duration: 0,
delay: 'xxs'
})}`
}
},
iconItem_checked: {
'&::before': {
transform: 'scale(0)',
opacity: '1',
transition: `${theme.methods.transitions.make('transform', {
duration: 'xxs'
})}, ${theme.methods.transitions.make('opacity', {
duration: 0
})}`
}
},
'iconItem_checked_disabled': {
'&::before': {
display: 'none'
}
},
iconItem_indeterminate: {
'&::before': {
transform: 'scale(0)',
opacity: '1',
transition: `${theme.methods.transitions.make('transform', {
duration: 'xxs'
})}, ${theme.methods.transitions.make('opacity', {
duration: 0
})}`
}
},
iconDone: {
display: 'inline-flex',
justifyContent: 'center',
alignItems: 'center',
position: 'absolute',
inset: '0',
width: '100% !important',
height: '100%',
zIndex: '3',
'&:not($indeterminate) > svg': {
padding: '0.14em'
}
},
disabled: {
cursor: 'default'
}
}), {
name: 'onesy-Checkbox'
});
const IconItem = props => {
const $ = (0, _compilerRuntime.c)(21);
let children;
let className;
let noFontSizeDownScale;
let other;
let style;
let t0;
if ($[0] !== props) {
var _props = props;
({
noFontSizeDownScale,
Component: t0,
className,
style,
children
} = _props);
other = (0, _objectWithoutProperties2.default)(_props, _excluded);
_props;
$[0] = props;
$[1] = children;
$[2] = className;
$[3] = noFontSizeDownScale;
$[4] = other;
$[5] = style;
$[6] = t0;
} else {
children = $[1];
className = $[2];
noFontSizeDownScale = $[3];
other = $[4];
style = $[5];
t0 = $[6];
}
const Component = t0 === undefined ? "span" : t0;
let styles;
if ($[7] !== noFontSizeDownScale || $[8] !== props.size) {
styles = {
root: {}
};
const size = ["very small", "small", "regular", "medium", "large", "very large"].includes(props.size) ? props.size : "small";
let fontSize = "1.5rem";
if (size === "very small") {
fontSize = "0.75rem";
} else {
if (size === "small") {
fontSize = "1.125rem";
} else {
if (size === "regular") {
fontSize = "1.5rem";
} else {
if (size === "medium") {
fontSize = "2.25rem";
} else {
if (size === "large") {
fontSize = "3rem";
} else {
if (size === "very large") {
fontSize = "3.75rem";
}
}
}
}
}
}
styles.root.fontSize = `calc(${fontSize} * 0.75)`;
if (noFontSizeDownScale) {
styles.root.fontSize = fontSize;
}
$[7] = noFontSizeDownScale;
$[8] = props.size;
$[9] = styles;
} else {
styles = $[9];
}
let t1;
if ($[10] !== style || $[11] !== styles.root) {
t1 = _objectSpread(_objectSpread({}, style), styles.root);
$[10] = style;
$[11] = styles.root;
$[12] = t1;
} else {
t1 = $[12];
}
let t2;
if ($[13] !== children || $[14] !== other) {
t2 = children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread({}, other));
$[13] = children;
$[14] = other;
$[15] = t2;
} else {
t2 = $[15];
}
let t3;
if ($[16] !== Component || $[17] !== className || $[18] !== t1 || $[19] !== t2) {
t3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
className: className,
style: t1,
children: t2
});
$[16] = Component;
$[17] = className;
$[18] = t1;
$[19] = t2;
$[20] = t3;
} else {
t3 = $[20];
}
return t3;
};
const Checkbox = props_ => {
var _theme$ui, _theme$elements;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread({}, props_), theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.onesyCheckbox) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default);
const IconButton = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.IconButton) || _IconButton.default;
const {
tonal = true,
color = 'primary',
version = 'text',
size = 'regular',
colorIndeterminate = props.color || 'primary',
colorUnchecked = 'default',
valueDefault: valueDefault_,
checkedDefault: checkedDefault_,
value: value_,
checked: checked_,
onChange,
indeterminate: indeterminate_,
disabled,
inputRef,
Component = 'span',
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded2);
const {
classes
} = useStyle();
const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
const checked = value_ !== undefined ? value_ : checked_;
const [value, setValue] = _react.default.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
const [indeterminate, setIndeterminate] = _react.default.useState(!value && indeterminate_);
const refs = {
value: _react.default.useRef(undefined),
input: _react.default.useRef(undefined),
indeterminate: _react.default.useRef(undefined)
};
refs.value.current = value;
refs.indeterminate.current = indeterminate;
const styles = {
iconItem: {},
iconBox: {},
iconDone: {}
};
_react.default.useEffect(() => {
if (indeterminate_ !== undefined && indeterminate_ !== refs.indeterminate.current) {
setIndeterminate(indeterminate_);
if (indeterminate_) setValue(false);
}
}, [indeterminate_]);
_react.default.useEffect(() => {
if (checked !== undefined && checked !== refs.value.current) {
setValue(checked);
if (refs.indeterminate.current) setIndeterminate(false);
}
}, [checked]);
const onUpdate = event => {
if (!disabled) {
// Inner controlled value
if (!props.hasOwnProperty('checked')) {
setValue(event.target.checked);
if (indeterminate) setIndeterminate(false);
}
if ((0, _utils.is)('function', onChange)) onChange(event.target.checked, event);
}
};
const onKeyDown = event_0 => {
switch (event_0.key) {
case 'Enter':
if (refs.input.current) refs.input.current.click();
break;
default:
break;
}
};
const color_ = indeterminate ? colorIndeterminate : color;
let palette;
if (!theme.palette.color[color]) palette = theme.methods.color(color_);
if (tonal) {
// Text
// Outlined
if (['text', 'outlined', undefined].includes(version)) {
styles.iconBox.color = theme.methods.palette.color.value(color_, 30, true, palette);
styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
}
// Outlined
if (version === 'outlined') styles.iconBox.color = theme.methods.palette.color.value(color_, 40, true, palette);
// Filled
if (version === 'filled') styles.iconDone.color = theme.methods.palette.color.value(color_, 90, true, palette);
} else {
if (!theme.palette.light && disabled) styles.iconDone.color = theme.palette.background.default.primary;else {
var _ref, _ref2;
if (version === 'filled') styles.iconDone.color = (_ref = palette || theme.palette.color[color_]) === null || _ref === void 0 ? void 0 : _ref.main;else styles.iconDone.color = theme.methods.palette.color.text(color_ === 'default' ? theme.palette.text.default.primary : (_ref2 = palette || theme.palette.color[color_]) === null || _ref2 === void 0 ? void 0 : _ref2.main, true, 'light');
}
}
if (['text', 'filled', undefined].includes(version)) {
if (['default', 'inherit', 'inverted', 'themed'].includes(color_)) styles.iconDone.color = theme.palette.background.default.primary;
}
styles.iconItem.color = styles.iconDone.color;
if (['text', 'outlined', undefined].includes(version)) styles.iconItem.color = theme.palette.background.default.primary;
let colorValue = color;
if (!value && tonal) colorValue = colorUnchecked;
if (indeterminate) colorValue = colorIndeterminate;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(IconButton, _objectSpread(_objectSpread({
tabIndex: !disabled ? 0 : -1,
color: colorValue,
tonal: tonal,
version: version,
size: size,
onKeyDown: onKeyDown,
firstLevelChildren: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
ref: item => {
if (inputRef) {
if ((0, _utils.is)('function', inputRef)) inputRef(item);else inputRef.current = item;
}
refs.input.current = item;
},
tabIndex: -1,
type: "checkbox",
checked: value,
onChange: onUpdate,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-input'], classes.input]),
disabled: disabled
}),
role: "checkbox",
"aria-checked": indeterminate ? 'mixed' : value,
"aria-disabled": disabled,
disabled: disabled,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
size: size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon-item'], classes.iconItem, value && classes.iconItem_checked, indeterminate && classes.iconItem_indeterminate, value && disabled && classes.iconItem_checked_disabled]),
style: styles.iconItem
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
Component: "div",
size: size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon-box'], classes.icon, classes.iconBox, value && [classes.iconBox_checked, classes[`iconBox_checked_version_${version}`]], indeterminate && [classes.iconBox_indeterminate, classes[`iconBox_indeterminate_version_${version}`]], disabled && [value && classes.iconBox_checked_disabled, indeterminate && classes.iconBox_indeterminate_disabled]]),
style: styles.iconBox
}), indeterminate && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconItem, {
size: size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
style: styles.iconDone,
noFontSizeDownScale: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconMaterialIndeterminateCheckBox, {
size: "inherit"
})
}), value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
size: size === 'large' ? '3rem' : size,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-done'], classes.icon, classes.iconDone]),
style: styles.iconDone,
in: value,
add: true
})]
}));
};
Checkbox.displayName = 'onesy-Checkbox';
var _default = exports.default = Checkbox;