@amaui/ui-react
Version:
UI for React
364 lines (363 loc) • 23.4 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 Surface_1 = __importDefault(require("../Surface"));
const Interaction_1 = __importDefault(require("../Interaction"));
const Type_1 = __importDefault(require("../Type"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => {
const overflow = {
width: '100%',
overflow: 'hidden',
textOverflow: 'ellipsis'
};
return {
wrapper: {
width: '100%'
},
root: {
// Reset
margin: '0',
padding: '0',
'-webkit-appearance': 'none',
appearance: 'none',
border: 'none',
textDecoration: 'none',
color: 'inherit',
boxSizing: 'border-box',
position: 'relative',
display: 'inline-flex',
width: '100%'
},
shape_round_position_both: {
borderRadius: theme.methods.shape.radius.value(40, 'px')
},
shape_round_position_start: {
borderEndStartRadius: theme.methods.shape.radius.value(40, 'px'),
borderStartStartRadius: theme.methods.shape.radius.value(40, 'px')
},
shape_round_position_end: {
borderStartEndRadius: theme.methods.shape.radius.value(40, 'px'),
borderEndEndRadius: theme.methods.shape.radius.value(40, 'px')
},
shape_round_position_none: {
borderRadius: '0'
},
button: {
cursor: 'pointer',
userSelect: 'none'
},
size_small: {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(1.5, 'px')}`,
minHeight: '24px'
},
size_regular: {
padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(2, 'px')}`,
minHeight: '40px'
},
size_large: {
padding: `${theme.methods.space.value(3, 'px')} ${theme.methods.space.value(2.5, 'px')}`,
minHeight: '56px'
},
menuItem_size_small: {
padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(1.5, 'px')}`
},
menuItem_size_regular: {
padding: `${theme.methods.space.value(0.75, 'px')} ${theme.methods.space.value(2, 'px')}`
},
menuItem_size_large: {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2.5, 'px')}`
},
inset_size_small: {
paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 0.75}px`
},
inset_size_regular: {
paddingInlineStart: `${56 + theme.methods.space.value('rg')}px`
},
inset_size_large: {
paddingInlineStart: `${(56 + theme.methods.space.value('rg')) * 1.25}px`
},
menuItem_inset_size_small: {
paddingInlineStart: theme.methods.space.value(7, 'px')
},
menuItem_inset_size_regular: {
paddingInlineStart: theme.methods.space.value(7, 'px')
},
menuItem_inset_size_large: {
paddingInlineStart: theme.methods.space.value(7, 'px')
},
middle: {
position: 'relative',
display: 'inline-flex',
flex: '1 1 auto',
width: '100%',
flexDirection: 'column',
// Fix for white-space: nowrap & flex: 1 1 auto
minWidth: '0',
alignSelf: 'center'
},
menuItem_middle: {
marginInlineEnd: '44px'
},
text: Object.assign(Object.assign({}, overflow), { whiteSpace: 'pre-wrap', textAlign: 'start' }),
text_primary: {
opacity: '1'
},
text_primary_weight: {
fontWeight: '500'
},
text_secondary: {
opacity: theme.palette.visual_contrast.default.opacity.primary
},
text_tertiary: {
opacity: theme.palette.visual_contrast.default.opacity.secondary
},
aside: {
position: 'relative',
display: 'inline-flex',
flex: '0 0 auto',
alignSelf: 'flex-start'
},
align_start: {
alignSelf: 'flex-start'
},
align_center: {
alignSelf: 'center'
},
align_end: {
alignSelf: 'flex-end'
},
start_icon: {
paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
},
start_button: {
paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
},
start_switch: {
paddingInline: `0 ${theme.methods.space.value(1.5, 'px')}`
},
menuItem_start_icon_size_small: {
paddingInlineEnd: theme.methods.space.value(1.5, 'px')
},
menuItem_start_icon_size_regular: {
paddingInlineEnd: theme.methods.space.value(2, 'px')
},
menuItem_start_icon_size_large: {
paddingInlineEnd: theme.methods.space.value(2.5, 'px')
},
menuItem_start_button_size_small: {
paddingInlineEnd: theme.methods.space.value(1.5, 'px')
},
menuItem_start_button_size_regular: {
paddingInlineEnd: theme.methods.space.value(2, 'px')
},
menuItem_start_button_size_large: {
paddingInlineEnd: theme.methods.space.value(2.5, 'px')
},
menuItem_start_switch_size_small: {
paddingInlineEnd: theme.methods.space.value(1.5, 'px')
},
menuItem_start_switch_size_regular: {
paddingInlineEnd: theme.methods.space.value(2, 'px')
},
menuItem_start_switch_size_large: {
paddingInlineEnd: theme.methods.space.value(2.5, 'px')
},
end_icon: {
paddingInlineStart: theme.methods.space.value(1.5, 'px'),
paddingInlineEnd: theme.methods.space.value(1, 'px')
},
end_button: {
paddingInlineStart: theme.methods.space.value(1.5, 'px'),
paddingInlineEnd: '0'
},
end_switch: {
paddingInlineStart: theme.methods.space.value(1.5, 'px'),
paddingInlineEnd: '0'
},
menuItem_end_icon: {
paddingInlineStart: theme.methods.space.value(1.5, 'px')
},
menuItem_end_button: {
paddingInlineStart: theme.methods.space.value(1.5, 'px')
},
menuItem_end_switch: {
paddingInlineStart: theme.methods.space.value(1.5, 'px')
},
middle_disabled: {
opacity: theme.palette.visual_contrast.default.opacity.disabled
},
noPadding: {
padding: '0px'
},
noBackground: {
'&.amaui-Surface-root': {
background: 'none'
}
},
disabled: {
pointerEvents: 'none',
userSelect: 'none',
cursor: 'default'
}
};
}, { name: 'amaui-ListItem' });
const ListItem = react_1.default.forwardRef((props_, ref) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
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.amauiListItem) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Interaction = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Interaction) || Interaction_1.default; }, [theme]);
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_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 = 'default', colorSelected = props.color, inset, primary = props.children, secondary, tertiary, preselected, selected, start, startAlign = 'center', end, endAlign = 'center', size = 'regular', noPadding, href, button, shape = 'round', shapePosition = 'none', menuItem, footer, tabIndex, interaction, noOutline, noBackground, disabled, onClick, onFocus, onBlur, onMouseEnter, onMouseLeave, onClose: onClose_, RootComponent: RootComponent_ = 'div', WrapperProps, RootProps, InteractionProps, PrimaryProps, SecondaryProps, TertiaryProps, MainProps, AsideProps, AsideStartProps, AsideEndProps, Component = 'li', className, style, children } = props, other = __rest(props, ["tonal", "color", "colorSelected", "inset", "primary", "secondary", "tertiary", "preselected", "selected", "start", "startAlign", "end", "endAlign", "size", "noPadding", "href", "button", "shape", "shapePosition", "menuItem", "footer", "tabIndex", "interaction", "noOutline", "noBackground", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "onClose", "RootComponent", "WrapperProps", "RootProps", "InteractionProps", "PrimaryProps", "SecondaryProps", "TertiaryProps", "MainProps", "AsideProps", "AsideStartProps", "AsideEndProps", "Component", "className", "style", "children"]);
const { classes } = useStyle();
const refs = {
root: react_1.default.useRef(undefined),
props: react_1.default.useRef(undefined),
ids: {
primary: react_1.default.useId(),
secondary: react_1.default.useId()
}
};
refs.props.current = props;
const styles = {
root: {},
icon: { color: 'default' },
wrapper: {},
primary: {},
secondary: {},
tertiary: {}
};
let RootComponent = RootComponent_;
if (href)
RootComponent = 'a';
const colorToUse = selected ? colorSelected : color;
return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else if (ref === null || ref === void 0 ? void 0 : ref.current)
ref.current = item;
}
refs.root.current = item;
}, tonal: tonal, color: colorToUse, tabIndex: tabIndex !== undefined ? tabIndex : (button && !disabled) ? 0 : undefined, "aria-labelledby": refs.ids.primary, "aria-describedby": refs.ids.secondary, "aria-selected": selected, Component: Component }, WrapperProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-wrapper'
],
WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className,
className,
classes.wrapper,
noBackground && classes.noBackground
]), noOutline: noOutline, style: styles.wrapper }, other, { children: [(0, jsx_runtime_1.jsxs)(RootComponent, Object.assign({ href: href, onClick: onClick, onFocus: onFocus, onBlur: onBlur, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, RootProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-root',
`amaui-ListItem-size-${size}`,
preselected && `amaui-ListItem-preselected`,
selected && `amaui-ListItem-selected`,
disabled && `amaui-ListItem-disabled`,
inset && !start && `amaui-ListItem-inset`
],
RootProps === null || RootProps === void 0 ? void 0 : RootProps.className,
classes.root,
!menuItem && classes[`size_${size}`],
classes[`shape_${shape}_position_${shapePosition}`],
inset && !start && classes[`inset_size_${size}`],
menuItem && [
classes[`menuItem_size_${size}`],
inset && classes[`menuItem_inset_size_${size}`]
],
(href || button) && classes.button,
noPadding && classes.noPadding,
disabled && classes.disabled
]), style: Object.assign(Object.assign({}, style), styles.root), disabled: disabled }, { children: [(href || button || interaction) && ((0, jsx_runtime_1.jsx)(Interaction, Object.assign({ border: false, preselected: (InteractionProps === null || InteractionProps === void 0 ? void 0 : InteractionProps.focus) || preselected || undefined, selected: selected, disabled: disabled }, InteractionProps))), start && ((0, jsx_runtime_1.jsx)("span", Object.assign({}, AsideProps, AsideStartProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-aside',
'amaui-ListItem-start',
`amaui-ListItem-start-${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes((_a = start === null || start === void 0 ? void 0 : start.type) === null || _a === void 0 ? void 0 : _a.displayName) ? 'button' : ['amaui-Switch'].includes((_b = start === null || start === void 0 ? void 0 : start.type) === null || _b === void 0 ? void 0 : _b.displayName) ? 'switch' : 'icon'}`
],
AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className,
AsideStartProps === null || AsideStartProps === void 0 ? void 0 : AsideStartProps.className,
classes.aside,
classes.start,
classes[`align_${startAlign}`],
classes[`${menuItem ? 'menuItem_' : ''}start_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes((_c = start === null || start === void 0 ? void 0 : start.type) === null || _c === void 0 ? void 0 : _c.displayName) ? 'button' : ['amaui-Switch'].includes((_d = start === null || start === void 0 ? void 0 : start.type) === null || _d === void 0 ? void 0 : _d.displayName) ? 'switch' : 'icon'}`],
classes[`${menuItem ? 'menuItem_' : ''}start_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes((_e = start === null || start === void 0 ? void 0 : start.type) === null || _e === void 0 ? void 0 : _e.displayName) ? 'button' : ['amaui-Switch'].includes((_f = start === null || start === void 0 ? void 0 : start.type) === null || _f === void 0 ? void 0 : _f.displayName) ? 'switch' : 'icon'}_size_${size}`]
]) }, { children: (0, utils_1.is)('string', start) ? start : react_1.default.cloneElement(start, {
color: ((_g = start.props) === null || _g === void 0 ? void 0 : _g.color) || 'inherit',
size: ((_h = start.props) === null || _h === void 0 ? void 0 : _h.size) !== undefined ? (_j = start.props) === null || _j === void 0 ? void 0 : _j.size : ['amaui-Switch'].includes((_k = start === null || start === void 0 ? void 0 : start.type) === null || _k === void 0 ? void 0 : _k.displayName) ? 'small' : 'regular',
disabled
}) }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({}, MainProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-middle'
],
MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
classes.middle,
menuItem && classes.menuItem_middle,
disabled && classes.middle_disabled
]) }, { children: [primary !== undefined && ((0, utils_1.is)('simple', primary) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', id: refs.ids.primary }, PrimaryProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-text',
'amaui-ListItem-text-primary'
],
PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.className,
classes.text,
classes.text_primary,
!menuItem && classes.text_primary_weight
]), style: Object.assign(Object.assign({}, styles.primary), PrimaryProps === null || PrimaryProps === void 0 ? void 0 : PrimaryProps.style) }, { children: primary }))) : react_1.default.cloneElement(primary, {
id: refs.ids.primary
})), secondary !== undefined && ((0, utils_1.is)('simple', secondary) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', id: refs.ids.secondary }, SecondaryProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-text',
'amaui-ListItem-text-secondary'
],
SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.className,
classes.text,
classes.text_secondary
]), style: Object.assign(Object.assign({}, styles.secondary), SecondaryProps === null || SecondaryProps === void 0 ? void 0 : SecondaryProps.style) }, { children: secondary }))) : react_1.default.cloneElement(secondary, {
id: refs.ids.secondary
})), tertiary !== undefined && ((0, utils_1.is)('simple', tertiary) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2' }, TertiaryProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-text',
'amaui-ListItem-text-tertiary'
],
TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.className,
classes.text,
classes.text_tertiary
]), style: Object.assign(Object.assign({}, styles.tertiary), TertiaryProps === null || TertiaryProps === void 0 ? void 0 : TertiaryProps.style) }, { children: tertiary }))) : tertiary)] })), end && ((0, jsx_runtime_1.jsx)("span", Object.assign({}, AsideProps, AsideEndProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('ListItem', theme) && [
'amaui-ListItem-aside',
'amaui-ListItem-end',
`amaui-ListItem-end-${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes((_l = end === null || end === void 0 ? void 0 : end.type) === null || _l === void 0 ? void 0 : _l.displayName) ? 'button' : ['amaui-Switch'].includes((_m = end === null || end === void 0 ? void 0 : end.type) === null || _m === void 0 ? void 0 : _m.displayName) ? 'switch' : 'icon'}`
],
AsideProps === null || AsideProps === void 0 ? void 0 : AsideProps.className,
AsideEndProps === null || AsideEndProps === void 0 ? void 0 : AsideEndProps.classname,
classes.aside,
classes.end,
classes[`align_${endAlign}`],
classes[`${menuItem ? 'menuItem_' : ''}end_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes((_o = end === null || end === void 0 ? void 0 : end.type) === null || _o === void 0 ? void 0 : _o.displayName) ? 'button' : ['amaui-Switch'].includes((_p = end === null || end === void 0 ? void 0 : end.type) === null || _p === void 0 ? void 0 : _p.displayName) ? 'switch' : 'icon'}`],
classes[`${menuItem ? 'menuItem_' : ''}end_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes((_q = end === null || end === void 0 ? void 0 : end.type) === null || _q === void 0 ? void 0 : _q.displayName) ? 'button' : ['amaui-Switch'].includes((_r = end === null || end === void 0 ? void 0 : end.type) === null || _r === void 0 ? void 0 : _r.displayName) ? 'switch' : 'icon'}_size_${size}`]
]) }, { children: (0, utils_1.is)('string', end) ? end : react_1.default.cloneElement(end, {
color: ((_s = end.props) === null || _s === void 0 ? void 0 : _s.color) || 'inherit',
size: ((_t = end.props) === null || _t === void 0 ? void 0 : _t.size) !== undefined ? (_u = end.props) === null || _u === void 0 ? void 0 : _u.size : ['amaui-Switch'].includes((_v = end === null || end === void 0 ? void 0 : end.type) === null || _v === void 0 ? void 0 : _v.displayName) ? 'small' : 'regular',
disabled
}) })))] })), footer] })));
});
ListItem.displayName = 'amaui-ListItem';
exports.default = ListItem;