@amaui/ui-react
Version:
UI for React
321 lines (320 loc) • 14.6 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconButton_1 = __importDefault(require("../IconButton"));
const Buttons_1 = require("../Buttons/Buttons");
const utils_2 = require("../utils");
const Icon_1 = __importDefault(require("../Icon"));
const IconMaterialIndeterminateCheckBox = react_1.default.forwardRef((props, ref) => {
return ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ ref: ref, name: 'IndeterminateCheckBox', short_name: 'IndeterminateCheckBox' }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: 'M7 13H17V11H7V13Z' }) })));
});
const useStyle = (0, style_react_1.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: 'amaui-Checkbox' });
const IconItem = (props) => {
const { noFontSizeDownScale, size, Component = 'span', className, style, children } = props, other = __rest(props, ["noFontSizeDownScale", "size", "Component", "className", "style", "children"]);
const styles = {
root: {}
};
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';
else if (size !== undefined)
fontSize = `${size}${!String(size).includes('px') ? 'px' : ''}`;
styles.root.fontSize = `calc(${fontSize} * 0.75)`;
if (noFontSizeDownScale)
styles.root.fontSize = fontSize;
return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: className, style: Object.assign(Object.assign({}, style), styles.root) }, { children: children && react_1.default.cloneElement(children, Object.assign({}, other)) })));
};
const Checkbox = react_1.default.forwardRef((props_, ref) => {
var _a, _b;
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d; return (Object.assign(Object.assign({}, props_), (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.amauiCheckbox) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default)); }, [props_]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
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 = __rest(props, ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"]);
const { classes } = useStyle();
const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
const checked = value_ !== undefined ? value_ : checked_;
const [value, setValue] = react_1.default.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
const [indeterminate, setIndeterminate] = react_1.default.useState(!value && indeterminate_);
const refs = {
value: react_1.default.useRef(undefined),
input: react_1.default.useRef(undefined),
indeterminate: react_1.default.useRef(undefined)
};
refs.value.current = value;
refs.indeterminate.current = indeterminate;
const styles = {
iconItem: {},
iconBox: {},
iconDone: {}
};
react_1.default.useEffect(() => {
if (indeterminate_ !== undefined && indeterminate_ !== refs.indeterminate.current) {
setIndeterminate(indeterminate_);
if (indeterminate_)
setValue(false);
}
}, [indeterminate_]);
react_1.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_1.is)('function', onChange))
onChange(event.target.checked, event);
}
};
const onKeyDown = (event) => {
switch (event.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 {
if (version === 'filled')
styles.iconDone.color = (_a = (palette || theme.palette.color[color_])) === null || _a === void 0 ? void 0 : _a.main;
else
styles.iconDone.color = theme.methods.palette.color.text(color_ === 'default' ? theme.palette.text.default.primary : (_b = (palette || theme.palette.color[color_])) === null || _b === void 0 ? void 0 : _b.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)
colorValue = colorUnchecked;
if (indeterminate)
colorValue = colorIndeterminate;
return ((0, jsx_runtime_1.jsxs)(IconButton, Object.assign({ ref: ref, tabIndex: !disabled ? 0 : -1, color: colorValue, tonal: tonal, version: version, size: size, onKeyDown: onKeyDown, firstLevelChildren: ((0, jsx_runtime_1.jsx)("input", { ref: item => {
if (inputRef) {
if ((0, utils_1.is)('function', inputRef))
inputRef(item);
else
inputRef.current = item;
}
refs.input.current = item;
}, tabIndex: -1, type: 'checkbox', checked: value, onChange: onUpdate, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Checkbox', theme) && [
'amaui-Checkbox-input'
],
classes.input
]), disabled: disabled })), role: 'checkbox', "aria-checked": indeterminate ? 'mixed' : value, "aria-disabled": disabled, disabled: disabled, Component: Component, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Checkbox', theme) && [
'amaui-Checkbox-root',
`amaui-Checkbox-version-${version}`,
`amaui-Checkbox-size-${size}`,
value && `amaui-Checkbox-checked`,
disabled && `amaui-Checkbox-disabled`
],
className,
classes.root,
disabled && classes.disabled
]) }, other, { children: [(0, jsx_runtime_1.jsx)(IconItem, { className: (0, style_react_1.classNames)([
classes.iconItem,
value && classes.iconItem_checked,
indeterminate && classes.iconItem_indeterminate,
(value && disabled) && classes.iconItem_checked_disabled
]), style: styles.iconItem }), (0, jsx_runtime_1.jsx)(IconItem, { Component: 'div', className: (0, style_react_1.classNames)([
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 && ((0, jsx_runtime_1.jsx)(IconItem, Object.assign({ className: (0, style_react_1.classNames)([
classes.icon,
classes.iconDone,
indeterminate && classes.indeterminate
]), style: styles.iconDone, noFontSizeDownScale: true }, { children: (0, jsx_runtime_1.jsx)(IconMaterialIndeterminateCheckBox, { size: 'inherit' }) }))), value && ((0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { className: (0, style_react_1.classNames)([
classes.icon,
classes.iconDone
]), style: styles.iconDone, in: value, add: true }))] })));
});
Checkbox.displayName = 'amaui-Checkbox';
exports.default = Checkbox;