@amaui/ui-react
Version:
UI for React
369 lines • 16.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["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"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { is } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import SurfaceElement from '../Surface';
import InteractionElement from '../Interaction';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
const useStyle = styleMethod(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: _objectSpread(_objectSpread({}, 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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiListItem?.props?.default), props_), [props_]);
const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [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 = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: React.useRef(undefined),
props: React.useRef(undefined),
ids: {
primary: React.useId(),
secondary: React.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 /*#__PURE__*/React.createElement(Surface, _extends({
ref: item => {
if (ref) {
if (is('function', ref)) ref(item);else if (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: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-wrapper'], WrapperProps?.className, className, classes.wrapper, noBackground && classes.noBackground]),
noOutline: noOutline,
style: styles.wrapper
}, other), /*#__PURE__*/React.createElement(RootComponent, _extends({
href: href,
onClick: onClick,
onFocus: onFocus,
onBlur: onBlur,
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave
}, RootProps, {
className: classNames([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?.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: _objectSpread(_objectSpread({}, style), styles.root),
disabled: disabled
}), (href || button || interaction) && /*#__PURE__*/React.createElement(Interaction, _extends({
border: false,
preselected: InteractionProps?.focus || preselected || undefined,
selected: selected,
disabled: disabled
}, InteractionProps)), start && /*#__PURE__*/React.createElement("span", _extends({}, AsideProps, AsideStartProps, {
className: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-aside', 'amaui-ListItem-start', `amaui-ListItem-start-${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes(start?.type?.displayName) ? 'button' : ['amaui-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideStartProps?.className, classes.aside, classes.start, classes[`align_${startAlign}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes(start?.type?.displayName) ? 'button' : ['amaui-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}start_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes(start?.type?.displayName) ? 'button' : ['amaui-Switch'].includes(start?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]])
}), is('string', start) ? start : /*#__PURE__*/React.cloneElement(start, {
color: start.props?.color || 'inherit',
size: start.props?.size !== undefined ? start.props?.size : ['amaui-Switch'].includes(start?.type?.displayName) ? 'small' : 'regular',
disabled
})), /*#__PURE__*/React.createElement("span", _extends({}, MainProps, {
className: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-middle'], MainProps?.className, classes.middle, menuItem && classes.menuItem_middle, disabled && classes.middle_disabled])
}), primary !== undefined && (is('simple', primary) ? /*#__PURE__*/React.createElement(Type, _extends({
version: "b2",
id: refs.ids.primary
}, PrimaryProps, {
className: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-text', 'amaui-ListItem-text-primary'], PrimaryProps?.className, classes.text, classes.text_primary, !menuItem && classes.text_primary_weight]),
style: _objectSpread(_objectSpread({}, styles.primary), PrimaryProps?.style)
}), primary) : /*#__PURE__*/React.cloneElement(primary, {
id: refs.ids.primary
})), secondary !== undefined && (is('simple', secondary) ? /*#__PURE__*/React.createElement(Type, _extends({
version: "b2",
id: refs.ids.secondary
}, SecondaryProps, {
className: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-text', 'amaui-ListItem-text-secondary'], SecondaryProps?.className, classes.text, classes.text_secondary]),
style: _objectSpread(_objectSpread({}, styles.secondary), SecondaryProps?.style)
}), secondary) : /*#__PURE__*/React.cloneElement(secondary, {
id: refs.ids.secondary
})), tertiary !== undefined && (is('simple', tertiary) ? /*#__PURE__*/React.createElement(Type, _extends({
version: "b2"
}, TertiaryProps, {
className: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-text', 'amaui-ListItem-text-tertiary'], TertiaryProps?.className, classes.text, classes.text_tertiary]),
style: _objectSpread(_objectSpread({}, styles.tertiary), TertiaryProps?.style)
}), tertiary) : tertiary)), end && /*#__PURE__*/React.createElement("span", _extends({}, AsideProps, AsideEndProps, {
className: classNames([staticClassName('ListItem', theme) && ['amaui-ListItem-aside', 'amaui-ListItem-end', `amaui-ListItem-end-${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes(end?.type?.displayName) ? 'button' : ['amaui-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], AsideProps?.className, AsideEndProps?.classname, classes.aside, classes.end, classes[`align_${endAlign}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes(end?.type?.displayName) ? 'button' : ['amaui-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}`], classes[`${menuItem ? 'menuItem_' : ''}end_${['amaui-Avatar', 'amaui-IconButton', 'amaui-Checkbox', 'amaui-Radio'].includes(end?.type?.displayName) ? 'button' : ['amaui-Switch'].includes(end?.type?.displayName) ? 'switch' : 'icon'}_size_${size}`]])
}), is('string', end) ? end : /*#__PURE__*/React.cloneElement(end, {
color: end.props?.color || 'inherit',
size: end.props?.size !== undefined ? end.props?.size : ['amaui-Switch'].includes(end?.type?.displayName) ? 'small' : 'regular',
disabled
}))), footer);
});
ListItem.displayName = 'amaui-ListItem';
export default ListItem;