nice-ui
Version:
React design system, components, and utilities
53 lines (52 loc) • 1.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItem = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const react_router_lite_1 = require("react-router-lite");
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui1.mid,
fz: '15px',
d: 'flex',
w: '100%',
bxz: 'border-box',
alignItems: 'center',
bdrad: '6px',
bd: 0,
pad: '10px 8px',
bg: 'none',
cur: 'pointer',
mar: 0,
out: 0,
'&+&': {
mart: '2px',
},
});
const useBlockClass = (0, nano_theme_1.makeRule)((theme) => ({
col: theme.g(0, 0.9),
'&:hover': {
bg: theme.g(0.96),
col: '#000',
},
}));
const useBlockActiveChildClass = (0, nano_theme_1.makeRule)((theme) => ({
bg: theme.g(0, 0.01),
}));
const useBlockActiveClass = (0, nano_theme_1.makeRule)((theme) => ({
cur: 'default',
col: theme.color.sem.blue[0],
bg: 'rgba(0,128,255,.04)',
}));
const MenuItem = ({ active, activeChild, to, onClick, onMouseDown, children, hasMore }) => {
const dynamicBlockClass = useBlockClass();
const activeChildClass = useBlockActiveChildClass();
const activeBlockClass = useBlockActiveClass();
let element = children;
if (hasMore && !activeChild) {
element = (React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
children,
React.createElement("div", { style: { marginLeft: 8, color: nano_theme_1.theme.g(0, 0.5) } }, "...")));
}
return (React.createElement(react_router_lite_1.Link, { a: !!to, to: to, onClick: onClick, onMouseDown: onMouseDown, className: blockClass + dynamicBlockClass + (activeChild ? activeChildClass : '') + (active ? activeBlockClass : '') }, element));
};
exports.MenuItem = MenuItem;