@amaui/ui-react
Version:
UI for React
103 lines (102 loc) • 7.06 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 Type_1 = __importDefault(require("../Type"));
const Line_1 = __importDefault(require("../Line"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {},
label_disabled: {
opacity: theme.palette.visual_contrast.default.opacity.disabled
},
disabled: {
cursor: 'default',
userSelect: 'none'
}
}), { name: 'amaui-Labels' });
const Labels = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_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.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiLabels) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const { tonal = true, color = 'primary', colorUnchecked, version = 'text', size = 'regular', name, label: label_, direction = 'column', align = 'center', justify = 'center', valueDefault: valueDefault_, checkedDefault: checkedDefault_, value: value_, checked: checked_, onChange, disabled, WrapperProps, LabelProps, Component = 'div', className, children: children_ } = props, other = __rest(props, ["tonal", "color", "colorUnchecked", "version", "size", "name", "label", "direction", "align", "justify", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "WrapperProps", "LabelProps", "Component", "className", "children"]);
const { classes } = useStyle();
const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
const checked = value_ !== undefined ? value_ : checked_;
const valueDefault__ = (checkedDefault !== undefined ? checkedDefault : value_) || [];
const [value, setValue] = react_1.default.useState((0, utils_1.is)('array', valueDefault__) ? valueDefault__ : [valueDefault__]);
const refs = {
value: react_1.default.useRef(undefined),
ids: {
label: react_1.default.useId()
}
};
refs.value.current = value;
const label = name !== undefined ? name : label_;
react_1.default.useEffect(() => {
if (checked !== undefined && checked !== refs.value.current)
setValue(checked);
}, [checked]);
const children = react_1.default.Children.toArray(children_);
const onUpdate = react_1.default.useCallback((valueNew_) => {
const valueNew = valueNew_;
const value__ = [...refs.value.current];
const index = value__.findIndex(item => item === valueNew);
if (index > -1)
value__.splice(index, 1);
else
value__.push(valueNew);
if (!props.hasOwnProperty('value'))
setValue(value__);
if ((0, utils_1.is)('function', onChange))
onChange(value__);
}, []);
return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 1, direction: direction, align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start', justify: justify, role: 'radiogroup', "aria-labelledby": refs.ids.label, Component: Component, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Labels', theme) && [
'amaui-Labels-root',
`amaui-Labels-version-${version}`,
`amaui-Labels-size-${size}`,
`amaui-Labels-version-${version}`,
disabled && `amaui-Labels-disabled`
],
className,
classes.root,
disabled && classes.disabled
]) }, other, { children: [label && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'regular' ? 'l2' : size === 'large' ? 'l1' : 'l3', id: refs.ids.label }, LabelProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Labels', theme) && [
'amaui-Labels-label'
],
LabelProps === null || LabelProps === void 0 ? void 0 : LabelProps.className,
classes.label,
disabled && classes.label_disabled
]) }, { children: label }))), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: direction, align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start', justify: justify }, WrapperProps, { children: children.map((item, index) => (react_1.default.cloneElement(item, {
key: index,
checked: value.includes(item.props.value),
onChange: () => onUpdate(item.props.value),
tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
color: item.props.color !== undefined ? item.props.color : color,
colorUnchecked: item.props.colorUnchecked !== undefined ? item.props.colorUnchecked : colorUnchecked,
version: item.props.version !== undefined ? item.props.version : version,
size: item.props.size !== undefined ? item.props.size : size,
disabled: item.props.disabled !== undefined ? item.props.disabled : disabled
}))) }))] })));
});
Labels.displayName = 'amaui-Labels';
exports.default = Labels;