@onesy/ui-react
Version:
UI for React
348 lines (345 loc) • 16 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialExpandMoreW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialExpandMoreW100"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _Fade = _interopRequireDefault(require("../Fade"));
var _Expand = _interopRequireDefault(require("../Expand"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Grid = _interopRequireDefault(require("../Grid"));
var _Line = _interopRequireDefault(require("../Line"));
var _Type = _interopRequireDefault(require("../Type"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
const useStyle = (0, _styleReact.style)(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_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7;
const theme = (0, _styleReact.useOnesyTheme)();
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyAccordion) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.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 === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
const Fade = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Fade) || _Fade.default;
const Expand = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Expand) || _Expand.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
const Grid = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Grid) || _Grid.default;
const Line = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Line) || _Line.default;
const Type = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Type) || _Type.default;
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 = _IconMaterialExpandMoreW.default,
TransitionComponent: TransitionComponent_ = Fade,
Component = 'div',
ExpandProps,
TransitionComponentProps: TransitionComponentProps_,
WrapperHeaderProps,
HeaderProps,
IconButtonProps,
StartProps,
EndProps,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const [open, setOpen] = _react.default.useState(openDefault !== undefined ? openDefault : open_);
const [parent, setParent] = _react.default.useState();
const refs = {
root: _react.default.useRef(undefined),
ids: {
button: _react.default.useId(),
data: _react.default.useId()
},
expandInProgress: _react.default.useRef(null)
};
const {
classes
} = useStyle();
let TransitionComponent = TransitionComponent_;
let TransitionComponentProps = _objectSpread({
add: true,
delay: {
enter: AccordionDelays.Transition.enter
}
}, TransitionComponentProps_);
_react.default.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 ((0, _utils.is)('function', onChange)) onChange(valueNew);
}
};
if (!noTransition) TransitionComponentProps.in = open;else {
TransitionComponent = _react.default.Fragment;
TransitionComponentProps = {};
}
const main = /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Accordion', theme) && ['onesy-Accordion-main'], classes.main, classes[`main_padding_vertical_${mainPaddingVertical}`], classes[`main_padding_horizontal_${mainPaddingHorizontal}`]]),
children: children
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
}
refs.root.current = item;
setParent(item);
},
tonal: tonal,
color: color,
elevation: elevation,
Component: Component,
className: (0, _styleReact.classNames)([(0, _utils2.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__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 3,
direction: "row",
align: "center",
onClick: onClick
}, WrapperHeaderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Accordion', theme) && ['onesy-Accordion-wrapper-header'], WrapperHeaderProps === null || WrapperHeaderProps === void 0 ? void 0 : WrapperHeaderProps.className, classes.wrapperHeader, classes[`header_padding_vertical_${headerPaddingVertical}`], classes[`header_padding_horizontal_${headerPaddingHorizontal}`], open && [classes[`expanded_header_padding_vertical_${expandedHeaderPaddingVertical}`]]]),
children: [start, /*#__PURE__*/(0, _jsxRuntime.jsxs)(Grid, _objectSpread(_objectSpread({
gap: {
default: 3,
700: 0.5
},
direction: {
default: 'row',
700: 'column'
}
}, HeaderProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Accordion', theme) && ['onesy-Accordion-header'], HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header]),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Grid, {
values: {
sm: !secondary ? 12 : 3
},
children: (0, _utils.is)('simple', primary) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b1",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Accordion', theme) && ['onesy-Accordion-primary'], classes.primary]),
children: primary
}) : _react.default.Children.toArray(primary).filter(Boolean).map((item_0, index) => {
if ((0, _utils.is)('simple', item_0)) return item_0;
return /*#__PURE__*/_react.default.cloneElement(item_0, {
key: index
});
})
}), secondary && /*#__PURE__*/(0, _jsxRuntime.jsx)(Grid, {
values: {
sm: 7
},
children: (0, _utils.is)('simple', secondary) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b1",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Accordion', theme) && ['onesy-Accordion-secondary'], classes.secondary]),
children: secondary
}) : _react.default.Children.toArray(secondary).filter(Boolean).map((item_1, index_0) => {
if ((0, _utils.is)('simple', item_1)) return item_1;
return /*#__PURE__*/_react.default.cloneElement(item_1, {
key: index_0
});
})
})]
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 0,
direction: "row",
align: "center"
}, EndProps), {}, {
children: [end, !noExpandButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
color: "inherit",
"aria-label": primary || secondary,
"aria-controls": refs.ids.data,
"aria-expanded": open,
id: refs.ids.button
}, IconButtonProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Accordion', theme) && ['onesy-Accordion-icon-button'], IconButtonProps === null || IconButtonProps === void 0 ? void 0 : IconButtonProps.className, classes.iconButton]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandIcon, {
className: (0, _styleReact.classNames)([classes.icon, open && classes.icon_open])
})
}))]
}))]
})), noExpand ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: open && main
}) : /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
children: main
}))
}))]
}));
};
Accordion.displayName = 'onesy-Accordion';
var _default = exports.default = Accordion;