@onesy/ui-react
Version:
UI for React
340 lines (338 loc) • 13.1 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { is } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialExpandMore from '@onesy/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';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
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: {
'&.onesy-Surface-root': {
background: 'transparent'
}
},
disabled: {
cursor: 'pointer',
pointerEvents: 'none',
opacity: theme.palette.visual_contrast.default.opacity.disabled
}
}), {
name: 'onesy-Accordion'
});
const AccordionDelays = {
Transition: {
enter: 70
}
};
const Accordion = props_ => {
const theme = useOnesyTheme();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAccordion?.props?.default), 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 = theme?.elements?.Surface || SurfaceElement;
const Fade = theme?.elements?.Fade || FadeElement;
const Expand = theme?.elements?.Expand || ExpandElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const Grid = theme?.elements?.Grid || GridElement;
const Line = theme?.elements?.Line || LineElement;
const Type = theme?.elements?.Type || TypeElement;
const {
ref,
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(null)
};
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 = () => {
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);
}
};
if (!noTransition) TransitionComponentProps.in = open;else {
TransitionComponent = React.Fragment;
TransitionComponentProps = {};
}
const main = /*#__PURE__*/_jsx(Line, {
className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-main'], classes.main, classes[`main_padding_vertical_${mainPaddingVertical}`], classes[`main_padding_horizontal_${mainPaddingHorizontal}`]]),
children: children
});
return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
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) && ['onesy-Accordion-root', disabled && `onesy-Accordion-disabled`], className, classes.root, open && classes[`expanded_margin_vertical_${expandedMarginVertical}`], noBackground && classes.noBackground, disabled && classes.disabled])
}, other), {}, {
children: [/*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 3,
direction: "row",
align: "center",
onClick: onClick
}, WrapperHeaderProps), {}, {
className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-wrapper-header'], WrapperHeaderProps?.className, classes.wrapperHeader, classes[`header_padding_vertical_${headerPaddingVertical}`], classes[`header_padding_horizontal_${headerPaddingHorizontal}`], open && [classes[`expanded_header_padding_vertical_${expandedHeaderPaddingVertical}`]]]),
children: [start, /*#__PURE__*/_jsxs(Grid, _objectSpread(_objectSpread({
gap: {
default: 3,
700: 0.5
},
direction: {
default: 'row',
700: 'column'
}
}, HeaderProps), {}, {
className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-header'], HeaderProps?.className, classes.header]),
children: [/*#__PURE__*/_jsx(Grid, {
values: {
sm: !secondary ? 12 : 3
},
children: is('simple', primary) ? /*#__PURE__*/_jsx(Type, {
version: "b1",
className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-primary'], classes.primary]),
children: primary
}) : React.Children.toArray(primary).filter(Boolean).map((item_0, index) => {
if (is('simple', item_0)) return item_0;
return /*#__PURE__*/React.cloneElement(item_0, {
key: index
});
})
}), secondary && /*#__PURE__*/_jsx(Grid, {
values: {
sm: 7
},
children: is('simple', secondary) ? /*#__PURE__*/_jsx(Type, {
version: "b1",
className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-secondary'], classes.secondary]),
children: secondary
}) : React.Children.toArray(secondary).filter(Boolean).map((item_1, index_0) => {
if (is('simple', item_1)) return item_1;
return /*#__PURE__*/React.cloneElement(item_1, {
key: index_0
});
})
})]
})), /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "row",
align: "center"
}, EndProps), {}, {
children: [end, !noExpandButton && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
color: "inherit",
"aria-label": primary || secondary,
"aria-controls": refs.ids.data,
"aria-expanded": open,
id: refs.ids.button
}, IconButtonProps), {}, {
className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-icon-button'], IconButtonProps?.className, classes.iconButton]),
children: /*#__PURE__*/_jsx(ExpandIcon, {
className: classNames([classes.icon, open && classes.icon_open])
})
}))]
}))]
})), noExpand ? /*#__PURE__*/_jsx(_Fragment, {
children: open && main
}) : /*#__PURE__*/_jsx(Expand, _objectSpread(_objectSpread({
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), {}, {
children: /*#__PURE__*/_jsx(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
children: main
}))
}))]
}));
};
Accordion.displayName = 'onesy-Accordion';
export default Accordion;