@amaui/ui-react
Version:
UI for React
157 lines (156 loc) • 8.91 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const Line_1 = __importDefault(require("../Line"));
const Surface_1 = __importDefault(require("../Surface"));
const Divider_1 = __importDefault(require("../Divider"));
const NavigationBar_1 = __importDefault(require("../NavigationBar"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(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 = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiNavigationRail) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
const NavigationBar = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NavigationBar) || NavigationBar_1.default; }, [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 = __rest(props, ["tonal", "color", "version", "size", "value", "valueDefault", "onChange", "justify", "border", "header", "fixed", "NavigationBarProps", "DividerProps", "className", "style", "children"]);
const { classes } = useStyle();
const [init, setInit] = react_1.default.useState(false);
const [selected, setSelected] = react_1.default.useState(() => {
const valueNew = valueDefault !== undefined ? valueDefault : value;
return valueNew !== undefined ? (0, utils_1.is)('array', valueNew) ? valueNew : [valueNew] : [];
});
const styles = {
root: {},
icon: {}
};
react_1.default.useEffect(() => {
setInit(true);
}, []);
react_1.default.useEffect(() => {
if (init && value !== selected)
setSelected((0, utils_1.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 ((0, utils_1.is)('function', onChange))
onChange(valueNew);
}
};
const header = react_1.default.Children
.toArray(header_)
.map((item, index) => {
var _a;
return react_1.default.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((_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) ? 'secondary' : tonal
});
});
const children = react_1.default.Children
.toArray(children_)
.map((item, index) => {
var _a;
return react_1.default.cloneElement(item, Object.assign(Object.assign({ key: index }, (['amaui-NavigationItem'].includes((_a = item.type) === null || _a === void 0 ? void 0 : _a.displayName) ? {
vertical: true
} : {})), { selected: selected.includes(item.props.value), onClick: () => {
if (!item.props.disabled) {
onSelect(item.props);
// Invoke items on click method
if ((0, utils_1.is)('function', item.props.onClick))
item.props.onClick();
}
} }));
});
return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: ref, Component: Line, color: color, tonal: tonal, direction: 'column', align: 'initial', justify: 'initial', gap: 0, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationRail', theme) && [
'amaui-NavigationRail-root',
`amaui-NavigationRail-version-${version}`,
`amaui-NavigationRail-size-${size}`
],
className,
classes.root,
classes[`size_${size}`],
fixed && classes.fixed
]), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: [header && ((0, jsx_runtime_1.jsx)(Line, Object.assign({ align: 'center', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationRail', theme) && [
'amaui-NavigationRail-header'
],
classes.header
]) }, { children: header }))), children && ((0, jsx_runtime_1.jsx)(NavigationBar, Object.assign({ version: version, direction: 'column', justify: justify, gap: 2, color: color, tonal: tonal }, NavigationBarProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationRail', theme) && [
'amaui-NavigationRail-main'
],
NavigationBarProps === null || NavigationBarProps === void 0 ? void 0 : NavigationBarProps.className,
classes.main
]) }, { children: children }))), border && ((0, jsx_runtime_1.jsx)(Divider, Object.assign({ orientation: 'vertical' }, DividerProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('NavigationRail', theme) && [
'amaui-NavigationRail-divider'
],
DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
classes.divider
]) })))] })));
});
NavigationRail.displayName = 'amaui-NavigationRail';
exports.default = NavigationRail;