UNPKG

@amaui/ui-react

Version:
165 lines (164 loc) 6.88 kB
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", "version", "size", "value", "valueDefault", "onChange", "justify", "border", "header", "fixed", "NavigationBarProps", "DividerProps", "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 LineElement from '../Line'; import SurfaceElement from '../Surface'; import DividerElement from '../Divider'; import NavigationBarElement from '../NavigationBar'; import { staticClassName } from '../utils'; const useStyle = styleMethod(theme => ({ root: { position: 'relative', height: '100%', width: '80px', padding: `${theme.methods.space.value(5, 'px')} 0`, overflow: 'auto', zIndex: theme.z_index.app_bar }, size_small: { width: '72px' }, size_regular: { width: '80px' }, size_large: { width: '88px' }, fixed: { position: 'fixed', insetBlock: '0', insetInlineStart: '0' }, header: { marginBottom: '70px' }, main: { width: '100%', flex: '1 1 auto', '&.amaui-NavigationBar-root': { background: 'transparent' } }, divider: { position: 'absolute', height: '100%', insetBlock: '0', insetInlineEnd: '0', '&.amaui-Divider-root': { margin: '0', opacity: theme.palette.light ? '0.07' : '0.11' } } }), { name: 'amaui-NavigationRail' }); const NavigationRail = /*#__PURE__*/React.forwardRef((props_, ref) => { const theme = useAmauiTheme(); const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiNavigationRail?.props?.default), props_), [props_]); const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]); const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]); const Divider = React.useMemo(() => theme?.elements?.Divider || DividerElement, [theme]); const NavigationBar = React.useMemo(() => theme?.elements?.NavigationBar || NavigationBarElement, [theme]); const { tonal = true, color = 'primary', version = 'regular', size = 'regular', value, valueDefault, onChange, justify = 'center', border, header: header_, fixed, NavigationBarProps, DividerProps, className, style, children: children_ } = props, other = _objectWithoutProperties(props, _excluded); const { classes } = useStyle(); const [init, setInit] = React.useState(false); const [selected, setSelected] = React.useState(() => { const valueNew = valueDefault !== undefined ? valueDefault : value; return valueNew !== undefined ? is('array', valueNew) ? valueNew : [valueNew] : []; }); const styles = { root: {}, icon: {} }; React.useEffect(() => { setInit(true); }, []); React.useEffect(() => { if (init && value !== selected) setSelected(is('array', value) ? value : [value]); }, [value]); const onSelect = itemProps => { // Only one item at the time is selectable, // and it cannot be unselected by clicking on the same item const valueNew = [itemProps.value]; if (valueNew !== undefined) { // Update inner or controlled if (!props.hasOwnProperty('value')) setSelected(valueNew); if (is('function', onChange)) onChange(valueNew); } }; const header = React.Children.toArray(header_).map((item, index) => /*#__PURE__*/React.cloneElement(item, { key: index, color: item.props.color !== undefined ? item.props.color : color, tonal: item.props.tonal !== undefined ? item.props.tonal : tonal && ['amaui-Fab'].includes(item.type?.displayName) ? 'secondary' : tonal })); const children = React.Children.toArray(children_).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({ key: index }, ['amaui-NavigationItem'].includes(item.type?.displayName) ? { vertical: true } : {}), {}, { selected: selected.includes(item.props.value), onClick: () => { if (!item.props.disabled) { onSelect(item.props); // Invoke items on click method if (is('function', item.props.onClick)) item.props.onClick(); } } }))); return /*#__PURE__*/React.createElement(Surface, _extends({ ref: ref, Component: Line, color: color, tonal: tonal, direction: "column", align: "initial", justify: "initial", gap: 0, className: classNames([staticClassName('NavigationRail', theme) && ['amaui-NavigationRail-root', `amaui-NavigationRail-version-${version}`, `amaui-NavigationRail-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && classes.fixed]), style: _objectSpread(_objectSpread({}, style), styles.root) }, other), header && /*#__PURE__*/React.createElement(Line, { align: "center", className: classNames([staticClassName('NavigationRail', theme) && ['amaui-NavigationRail-header'], classes.header]) }, header), children && /*#__PURE__*/React.createElement(NavigationBar, _extends({ version: version, direction: "column", justify: justify, gap: 2, color: color, tonal: tonal }, NavigationBarProps, { className: classNames([staticClassName('NavigationRail', theme) && ['amaui-NavigationRail-main'], NavigationBarProps?.className, classes.main]) }), children), border && /*#__PURE__*/React.createElement(Divider, _extends({ orientation: "vertical" }, DividerProps, { className: classNames([staticClassName('NavigationRail', theme) && ['amaui-NavigationRail-divider'], DividerProps?.className, classes.divider]) }))); }); NavigationRail.displayName = 'amaui-NavigationRail'; export default NavigationRail;