@amaui/ui-react
Version:
UI for React
321 lines (319 loc) • 12.9 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", "elevation", "primary", "secondary", "start", "end", "openDefault", "open", "onChange", "noBackground", "noExpandButton", "expandedMarginVertical", "expandedHeaderPaddingVertical", "headerPaddingVertical", "headerPaddingHorizontal", "mainPaddingVertical", "mainPaddingHorizontal", "noExpand", "noTransition", "disabled", "ExpandIcon", "TransitionComponent", "Component", "ExpandProps", "TransitionComponentProps", "WrapperHeaderProps", "HeaderProps", "IconButtonProps", "StartProps", "EndProps", "className", "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 IconMaterialExpandMore from '@amaui/icons-material-rounded-react/IconMaterialExpandMoreW100';
import SurfaceElement from '../Surface';
import FadeElement from '../Fade';
import ExpandElement from '../Expand';
import IconButtonElement from '../IconButton';
import GridElement from '../Grid';
import LineElement from '../Line';
import TypeElement from '../Type';
import { staticClassName } from '../utils';
const useStyle = styleMethod(theme => ({
root: {
position: 'relative',
display: 'flex',
flexDirection: 'column',
transition: theme.methods.transitions.make(['margin', 'boxShadow']),
width: '100%',
'&:first-of-type': {
marginTop: '0px',
borderTopLeftRadius: `${theme.shape.radius.unit / 2}px`,
borderTopRightRadius: `${theme.shape.radius.unit / 2}px`
},
'&:last-of-type': {
marginBottom: '0px',
borderBottomLeftRadius: `${theme.shape.radius.unit / 2}px`,
borderBottomRightRadius: `${theme.shape.radius.unit / 2}px`
}
},
expanded_margin_vertical_start: {
marginBlockStart: '16px'
},
expanded_margin_vertical_both: {
marginBlock: '16px'
},
expanded_margin_vertical_end: {
marginBlockEnd: '16px'
},
expanded_margin_vertical_none: {
marginBlock: '0px'
},
wrapperHeader: {
cursor: 'pointer',
transition: theme.methods.transitions.make('padding'),
userSelect: 'none'
},
header: {},
expanded_header_padding_vertical_start: {
paddingBlockStart: `${theme.methods.space.value(2, 'px')} !important`
},
expanded_header_padding_vertical_both: {
paddingBlock: `${theme.methods.space.value(2, 'px')} !important`
},
expanded_header_padding_vertical_end: {
paddingBlockEnd: `${theme.methods.space.value(2, 'px')} !important`
},
expanded_header_padding_vertical_none: {
paddingBlock: '0px !important'
},
header_padding_vertical_start: {
paddingBlockStart: theme.methods.space.value(1, 'px')
},
header_padding_vertical_both: {
paddingBlock: theme.methods.space.value(1, 'px')
},
header_padding_vertical_end: {
paddingBlockEnd: theme.methods.space.value(1, 'px')
},
header_padding_vertical_none: {
paddingBlock: '0px'
},
header_padding_horizontal_start: {
paddingInlineStart: theme.methods.space.value(2, 'px')
},
header_padding_horizontal_both: {
paddingInline: theme.methods.space.value(2, 'px')
},
header_padding_horizontal_end: {
paddingInlineEnd: theme.methods.space.value(2, 'px')
},
header_padding_horizontal_none: {
paddingInline: '0px'
},
main: {
width: '100%'
},
main_padding_vertical_start: {
paddingBlockStart: theme.methods.space.value(2, 'px')
},
main_padding_vertical_both: {
paddingBlock: theme.methods.space.value(2, 'px')
},
main_padding_vertical_end: {
paddingBlockEnd: theme.methods.space.value(2, 'px')
},
main_padding_vertical_none: {
paddingBlock: '0px'
},
main_padding_horizontal_start: {
paddingInlineStart: theme.methods.space.value(2, 'px')
},
main_padding_horizontal_both: {
paddingInline: theme.methods.space.value(2, 'px')
},
main_padding_horizontal_end: {
paddingInlineEnd: theme.methods.space.value(2, 'px')
},
main_padding_horizontal_none: {
paddingInline: '0px'
},
secondary: {
opacity: theme.palette.visual_contrast.default.opacity.primary
},
icon: {
transition: theme.methods.transitions.make('transform')
},
icon_open: {
transform: 'rotate(-180deg)'
},
iconButton: {
flex: '0 0 auto'
},
noBackground: {
'&.amaui-Surface-root': {
background: 'transparent'
}
},
disabled: {
cursor: 'pointer',
pointerEvents: 'none',
opacity: theme.palette.visual_contrast.default.opacity.disabled
}
}), {
name: 'amaui-Accordion'
});
const AccordionDelays = {
Transition: {
enter: 70
}
};
const Accordion = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiAccordion?.props?.default), props_), [props_]);
// Why
// By providing option for a theme to override an entire element
// with a value stored in elements
// we can override entire element's content
// not just customize an element using css
const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
const Grid = React.useMemo(() => theme?.elements?.Grid || GridElement, [theme]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
const {
tonal = true,
color = 'primary',
elevation = 0,
primary,
secondary,
start,
end,
openDefault,
open: open_,
onChange,
noBackground,
noExpandButton,
expandedMarginVertical = 'both',
expandedHeaderPaddingVertical = 'both',
headerPaddingVertical = 'both',
headerPaddingHorizontal = 'both',
mainPaddingVertical = 'both',
mainPaddingHorizontal = 'both',
noExpand,
noTransition,
disabled,
ExpandIcon = IconMaterialExpandMore,
TransitionComponent: TransitionComponent_ = Fade,
Component = 'div',
ExpandProps,
TransitionComponentProps: TransitionComponentProps_,
WrapperHeaderProps,
HeaderProps,
IconButtonProps,
StartProps,
EndProps,
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const [open, setOpen] = React.useState(openDefault !== undefined ? openDefault : open_);
const [parent, setParent] = React.useState();
const refs = {
root: React.useRef(undefined),
ids: {
button: React.useId(),
data: React.useId()
},
expandInProgress: React.useRef()
};
const {
classes
} = useStyle();
let TransitionComponent = TransitionComponent_;
let TransitionComponentProps = _objectSpread({
add: true,
delay: {
enter: AccordionDelays.Transition.enter
}
}, TransitionComponentProps_);
React.useEffect(() => {
if (open_ !== undefined && open_ !== open) setOpen(open_);
}, [open_, open]);
const onClick = React.useCallback(() => {
if (refs.expandInProgress.current) return;
if (!disabled) {
const valueNew = !open;
// Update inner or controlled
if (!props.hasOwnProperty('open')) setOpen(valueNew);
if (is('function', onChange)) onChange(valueNew);
}
}, [open, disabled]);
if (!noTransition) TransitionComponentProps.in = open;else {
TransitionComponent = React.Fragment;
TransitionComponentProps = {};
}
const main = /*#__PURE__*/React.createElement(Line, {
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-main'], classes.main, classes[`main_padding_vertical_${mainPaddingVertical}`], classes[`main_padding_horizontal_${mainPaddingHorizontal}`]])
}, children);
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;
setParent(item);
},
tonal: tonal,
color: color,
elevation: elevation,
Component: Component,
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-root', disabled && `amaui-Accordion-disabled`], className, classes.root, open && classes[`expanded_margin_vertical_${expandedMarginVertical}`], noBackground && classes.noBackground, disabled && classes.disabled])
}, other), /*#__PURE__*/React.createElement(Line, _extends({
gap: 3,
direction: "row",
align: "center",
onClick: onClick
}, WrapperHeaderProps, {
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-wrapper-header'], WrapperHeaderProps?.className, classes.wrapperHeader, classes[`header_padding_vertical_${headerPaddingVertical}`], classes[`header_padding_horizontal_${headerPaddingHorizontal}`], open && [classes[`expanded_header_padding_vertical_${expandedHeaderPaddingVertical}`]]])
}), start, /*#__PURE__*/React.createElement(Grid, _extends({
gap: {
default: 3,
700: 0.5
},
direction: {
default: 'row',
700: 'column'
}
}, HeaderProps, {
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-header'], HeaderProps?.className, classes.header])
}), /*#__PURE__*/React.createElement(Grid, {
values: {
sm: !secondary ? 12 : 3
}
}, is('simple', primary) ? /*#__PURE__*/React.createElement(Type, {
version: "b1",
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-primary'], classes.primary])
}, primary) : React.Children.toArray(primary).filter(Boolean).map((item, index) => {
if (is('simple', item)) return item;
return /*#__PURE__*/React.cloneElement(item, {
key: index
});
})), secondary && /*#__PURE__*/React.createElement(Grid, {
values: {
sm: 7
}
}, is('simple', secondary) ? /*#__PURE__*/React.createElement(Type, {
version: "b1",
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-secondary'], classes.secondary])
}, secondary) : React.Children.toArray(secondary).filter(Boolean).map((item, index) => {
if (is('simple', item)) return item;
return /*#__PURE__*/React.cloneElement(item, {
key: index
});
}))), /*#__PURE__*/React.createElement(Line, _extends({
gap: 0,
direction: "row",
align: "center"
}, EndProps), end, !noExpandButton && /*#__PURE__*/React.createElement(IconButton, _extends({
color: "inherit",
"aria-label": primary || secondary,
"aria-controls": refs.ids.data,
"aria-expanded": open,
id: refs.ids.button
}, IconButtonProps, {
className: classNames([staticClassName('Accordion', theme) && ['amaui-Accordion-icon-button'], IconButtonProps?.className, classes.iconButton])
}), /*#__PURE__*/React.createElement(ExpandIcon, {
className: classNames([classes.icon, open && classes.icon_open])
})))), noExpand ? /*#__PURE__*/React.createElement(React.Fragment, null, open && main) : /*#__PURE__*/React.createElement(Expand, _extends({
in: open,
parent: parent,
onTransition: (element, status) => {
refs.expandInProgress.current = !['appended', 'entered', 'exited', 'removed'].includes(status);
},
role: "region",
"aria-labelledby": refs.ids.button,
id: refs.ids.data
}, ExpandProps), /*#__PURE__*/React.createElement(TransitionComponent, TransitionComponentProps, main)));
});
Accordion.displayName = 'amaui-Accordion';
export default Accordion;