@amaui/ui-react
Version:
UI for React
303 lines (302 loc) • 15.8 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 });
exports.IconDoneAnimated = exports.IconMaterialDone = void 0;
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 Transition_1 = __importDefault(require("../Transition"));
const Line_1 = __importDefault(require("../Line"));
const utils_2 = require("../utils");
const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
const Icon_1 = __importDefault(require("../Icon"));
exports.IconMaterialDone = react_1.default.forwardRef((props, ref) => {
const { className } = props, other = __rest(props, ["className"]);
return ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ ref: ref, name: 'DoneSharp', short_name: 'Done' }, other, { children: (0, jsx_runtime_1.jsx)("path", { className: className, fill: 'none', d: 'M4.5 11.5L9.5 16.5L19.5 6.5' }) })));
});
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'relative',
borderRadius: theme.methods.shape.radius.value('xl', 'px')
},
orientation_horizontal_size_small: {
'&:not(.amaui-ToggleButtons-root) > *': {
height: '28px'
}
},
orientation_horizontal_size_regular: {
'&:not(.amaui-ToggleButtons-root) > *': {
height: '42px'
}
},
orientation_horizontal_size_large: {
'&:not(.amaui-ToggleButtons-root) > *': {
height: '63px'
}
},
orientation_vertical: {
flexDirection: 'column',
'& > *': {
width: '100% !important'
}
},
// Size
size_small: { borderRadius: `${theme.shape.radius.unit * 2}px` },
size_regular: { borderRadius: `${theme.shape.radius.unit * 2.5}px` },
size_large: { borderRadius: `${theme.shape.radius.unit * 3.5}px` },
// Size
chip_size_small: { borderRadius: `${theme.shape.radius.unit - (theme.shape.radius.unit / 4)}px` },
chip_size_regular: { borderRadius: `${theme.shape.radius.unit}px` },
chip_size_large: { borderRadius: `${theme.shape.radius.unit + (theme.shape.radius.unit / 4)}px` },
// Shadows
elevation: {
boxShadow: theme.shadows.values.neutral[1],
transition: theme.methods.transitions.make('box-shadow'),
'&:hover': {
boxShadow: theme.shadows.values.neutral[3]
}
},
start_orientation_horizontal: {
'&:not(:first-of-type)': {
borderStartStartRadius: '0px',
borderEndStartRadius: '0px',
'&$outlined': {
marginInlineStart: '-1px'
},
'&$border:not($outlined)': {
borderInlineStart: '1px solid currentColor'
}
}
},
end_orientation_horizontal: {
'&:not(:last-of-type)': {
borderStartEndRadius: '0px',
borderEndEndRadius: '0px'
}
},
start_orientation_vertical: {
'&:not(:first-of-type)': {
borderStartStartRadius: '0px',
borderStartEndRadius: '0px',
'&$outlined': {
marginBlockStart: '-1px'
},
'&$border:not($outlined)': {
borderBlockStart: '1px solid currentColor'
}
}
},
end_orientation_vertical: {
'&:not(:last-of-type)': {
borderEndEndRadius: '0px',
borderEndStartRadius: '0px'
}
},
path: {
strokeWidth: '1.5px',
strokeDasharray: '30',
strokeDashoffset: '30',
stroke: 'currentcolor',
transition: theme.methods.transitions.make('stroke-dashoffset', { duration: 'xxs', timing_function: 'accelerated' })
},
pathIn: {
strokeDashoffset: '0',
transition: theme.methods.transitions.make('stroke-dashoffset', { duration: 'xxs', delay: 45, timing_function: 'accelerated' })
},
fullWidth: {
width: '100%'
},
selected: {
zIndex: '1'
},
disabled: {}
}), { name: 'amaui-Buttons' });
const IconDoneAnimated = (props) => {
const { classes } = useStyle();
const theme = (0, style_react_1.useAmauiTheme)();
const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
const { in: inProp, simple, onExited, fullWidth, noExitAnimation, add, className, style } = props, other = __rest(props, ["in", "simple", "onExited", "fullWidth", "noExitAnimation", "add", "className", "style"]);
const styles = props.simple ? {} : {
adding: {
width: style === null || style === void 0 ? void 0 : style.fontSize
},
added: {
width: style === null || style === void 0 ? void 0 : style.fontSize
}
};
return ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: inProp, onExited: () => {
if ((0, utils_1.is)('function', onExited) && !simple)
onExited();
}, add: add, enterOnAdd: false }, { children: (status) => react_1.default.cloneElement((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: style }, { children: (0, jsx_runtime_1.jsx)(exports.IconMaterialDone, Object.assign({ className: (0, style_react_1.classNames)([
classes.path,
(['adding', 'added', 'enter', 'entering', 'entered'].includes(status) || noExitAnimation) && classes.pathIn
]), size: 'inherit' }, other)) })), {
style: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'inline-flex', overflow: 'hidden' }, (!simple ? { width: 0 } : {})), { transition: theme.methods.transitions.make('width', { duration: 'xs', timing_function: 'accelerated' }) }), styles[status]), style)
}) })));
};
exports.IconDoneAnimated = IconDoneAnimated;
const Buttons = 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.amauiButtons) === 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 { tonal = true, color = 'primary', version = 'outlined', colorSelected = props.color, size = 'regular', value, valueDefault, onChange, select, unselect = true, orientation: orientation_, noCheckIcon, elevation = true, border = true, chip, fullWidth, disabled, className, children: children_ } = props, other = __rest(props, ["tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "className", "children"]);
const { classes } = useStyle();
const [init, setInit] = react_1.default.useState(false);
const [preSelected, setPreSelected] = react_1.default.useState([]);
const [selected, setSelected] = react_1.default.useState(() => {
const valueNew = valueDefault !== undefined ? valueDefault : value;
return valueNew !== undefined ? (0, utils_1.is)('array', valueNew) ? valueNew : [valueNew] : [];
});
const refs = {
root: react_1.default.useRef(undefined),
noCheckIcon: react_1.default.useRef(noCheckIcon)
};
const keys = react_1.default.useMemo(() => {
const result = [];
const items = [orientation_];
items.forEach(item => {
if ((0, utils_1.is)('object', item))
Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
});
return (0, utils_1.unique)(result);
}, [orientation_]);
const breakpoints = {};
keys.forEach(key => {
breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
});
const orientation = (0, utils_2.valueBreakpoints)(orientation_, 'horizontal', breakpoints, theme);
refs.noCheckIcon.current = noCheckIcon;
react_1.default.useEffect(() => {
setInit(true);
}, []);
react_1.default.useEffect(() => {
if (init && value !== selected)
setSelected((0, utils_1.is)('array', value) ? value : [value]);
}, [value]);
const onSelect = (itemProps, start = false) => {
let valueNew;
if (start) {
if (selected.includes(itemProps.value)) {
valueNew = selected.filter(item => item !== itemProps.value);
}
else {
if (select === 'single')
valueNew = [itemProps.value];
if (select === 'multiple')
valueNew = (0, utils_1.unique)([...selected, itemProps.value]);
}
}
else {
// Unselect
if (selected.includes(itemProps.value) &&
(unselect ||
(select === 'multiple' && selected.length > 1))) {
if (!refs.noCheckIcon.current) {
setPreSelected(items => items.filter(item => item !== itemProps.value));
}
else {
valueNew = selected.filter(item => item !== itemProps.value);
}
}
else {
if (select === 'single') {
if (!refs.noCheckIcon.current) {
setPreSelected([itemProps.value]);
valueNew = [...selected, itemProps.value];
}
else
valueNew = [itemProps.value];
}
if (select === 'multiple') {
if (!refs.noCheckIcon.current) {
setPreSelected(items => (0, utils_1.unique)([...items, itemProps.value]));
valueNew = (0, utils_1.unique)([...selected, itemProps.value]);
}
else
valueNew = (0, utils_1.unique)([...selected, itemProps.value]);
}
}
}
if (valueNew !== undefined) {
// Update inner or controlled
if (!props.hasOwnProperty('value'))
setSelected(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(valueNew);
}
};
const updateSelected = (itemProps) => {
const valueNew = selected.filter(item => item !== itemProps.value);
// Update inner or controlled
if (!props.hasOwnProperty('value'))
setSelected(valueNew);
if ((0, utils_1.is)('function', onChange))
onChange(valueNew);
};
const children = react_1.default.Children
.toArray(children_)
// Clamp array to max of 5 values
// .slice(0, 5)
.map((item, index) => {
var _a, _b, _c, _d, _e, _f;
return react_1.default.cloneElement(item, Object.assign(Object.assign(Object.assign({ key: index, className: (0, style_react_1.classNames)([
item.className,
classes.item,
classes[version],
classes[`start_orientation_${orientation}`],
classes[`end_orientation_${orientation}`],
selected.includes(item.props.value) && classes.selected,
border && classes.border
]), onClick: () => {
onSelect(item.props, !!item.props.start);
// Invoke items on click method
if ((0, utils_1.is)('function', item.props.onClick))
item.props.onClick();
} }, (!refs.noCheckIcon.current && item.props.start && selected.includes(item.props.value) ? {
start: ((0, jsx_runtime_1.jsx)(exports.IconDoneAnimated, { simple: true, in: true, add: true }))
} : {})), (!refs.noCheckIcon.current && (!item.props.start && (selected.includes(item.props.value) || preSelected.includes(item.props.value))) ? {
start: ((0, jsx_runtime_1.jsx)(exports.IconDoneAnimated, { in: (item.props.start ? selected : preSelected).includes(index), onExited: () => updateSelected(item.props), add: true }))
} : {})), { version: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.version) !== undefined ? item.props.version : version, color: selected.includes(item.props.value) ? colorSelected || (((_b = item.props) === null || _b === void 0 ? void 0 : _b.color) !== undefined ? item.props.color : color) : (((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? item.props.color : color), size: ((_d = item.props) === null || _d === void 0 ? void 0 : _d.size) !== undefined ? item.props.size : size, tonal: ((_e = item.props) === null || _e === void 0 ? void 0 : _e.tonal) !== undefined ? item.props.tonal : tonal, elevation: false, selected: item.props.selected !== undefined ? item.props.selected : selected.includes(item.props.value), disabled: ((_f = item.props) === null || _f === void 0 ? void 0 : _f.disabled) !== undefined ? item.props.disabled : disabled }));
});
return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else
ref.current = item;
}
refs.root.current = item;
}, gap: 0, direction: 'row', display: 'inline-flex', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Buttons', theme) && [
'amaui-Buttons-root',
`amaui-Buttons-version-${version}`,
`amaui-Buttons-size-${size}`,
disabled && `amaui-Buttons-disabled`,
],
className,
classes.root,
classes[`size_${size}`],
chip && classes[`chip_size_${size}`],
classes[`orientation_${orientation}`],
classes[`orientation_${orientation}_size_${size}`],
fullWidth && classes.fullWidth,
elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation,
disabled && classes.disabled
]) }, other, { children: children })));
});
Buttons.displayName = 'amaui-Buttons';
exports.default = Buttons;