nice-ui
Version:
React design system, components, and utilities
172 lines (171 loc) • 5.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextItem = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Link_1 = require("../../1-inline/Link");
const FixedColumn_1 = require("../../3-list-item/FixedColumn");
const Ripple_1 = require("../../misc/Ripple");
const context_1 = require("../Popup/context");
const Split_1 = require("../../3-list-item/Split");
const Arrow_1 = require("../../icons/interactive/Arrow");
const context_2 = require("../../styles/context");
const styles_1 = require("../../styles");
const padding = 20;
const { createElement: h } = React;
const blockClass = (0, nano_theme_1.rule)({
d: 'block',
bd: 0,
w: '100%',
bxz: 'border-box',
bg: 'none',
ta: 'left',
us: 'none',
out: 'none',
});
const itemClass = (0, nano_theme_1.drule)({
...styles_1.fonts.get('ui', 'mid', 1),
bxz: 'border-box',
fz: '14px',
});
const iconClass = (0, nano_theme_1.rule)({
pad: 0,
w: '16px',
h: '16px',
mar: '0 0 0 -2px',
});
const smallTextClass = (0, nano_theme_1.drule)({
p: {
fz: '.82em',
pad: 0,
mar: 0,
},
a: {
'&:hover': {
col: '#0089ff',
bdb: '1px solid rgba(0,137,255,.4)',
},
},
});
const nestedClass = (0, nano_theme_1.rule)({
d: 'flex',
w: '20px',
h: '20px',
mr: '-2px -14px -2px -2px',
pdl: '4px',
});
const ContextItem = ({ big, grey, danger, className, icon, right, children, smallText, more, outline, bg, nested, compact, open, to, selected, disabled, inset, closePopup, ...rest }) => {
const styles = (0, context_2.useStyles)();
const popup = (0, context_1.usePopup)();
const bg_ = selected
? styles.col.accent(0, 'bg-2')
: grey
? styles.light
? styles.g(0.985)
: styles.g(0.92)
: bg
? styles.g(0, 0.02)
: 'transparent';
const mainClassName = (className || '') +
blockClass +
itemClass({
bg: bg_,
bdt: outline ? `1px solid ${styles.g(0, 0.05)}` : 0,
pd: `${compact ? 4 : 8}px ${padding}px`,
col: styles.g(0.2),
'&:hover': {
// col: danger ? theme.color.sem.negative[1] : theme.g(0),
col: danger ? styles.col.get('error', 'solid-1') : styles.g(0),
bg: disabled
? 'transparent'
: danger
? styles.col.get('error', 'el-1', 0, { A: 25 })
: rest.onClick || to
? styles.light
? styles.g(0, 0.05)
: styles.g(0, 0.08)
: 'transparent',
},
'&:active': {
col: danger ? styles.col.get('error', 'solid-1') : styles.g(0),
bg: disabled
? 'transparent'
: danger
? styles.col.get('error', 'el-2', 0, { A: 25 })
: rest.onClick || to
? styles.light
? styles.g(0, 0.05)
: styles.g(0, 0.08)
: 'transparent',
},
'&:focus': {
bg: disabled ? 'transparent' : styles.g(0, 0.02),
},
}) +
(smallText
? smallTextClass({
p: {
col: styles.g(0.5),
},
a: {
col: styles.g(0.5),
borderBottomColor: styles.g(0.9),
},
})
: '');
if (closePopup && popup && !disabled) {
const onClick0 = rest.onClick;
rest.onClick = (e) => (popup.close(), onClick0?.(e));
}
let element = children;
if (more) {
element = (React.createElement("span", null,
element,
React.createElement("span", { style: { opacity: 0.4 } },
" ",
nano_theme_1.SYMBOL.ELLIPSIS)));
}
if (right) {
element = (React.createElement(Split_1.Split, { as: "span" },
element,
right));
}
if (nested) {
element = (React.createElement(Split_1.Split, { as: "span" },
element,
React.createElement("span", { className: nestedClass, style: { opacity: open ? 1 : 0.7 } },
React.createElement(Arrow_1.default, { direction: open ? 'r' : 'd' }))));
}
if (icon) {
element = (React.createElement(FixedColumn_1.FixedColumn, { as: 'span', left: 26 },
React.createElement("span", { className: iconClass }, icon),
React.createElement("span", null, element)));
}
const buttonStyle = {};
if (disabled) {
buttonStyle.pointerEvents = 'none';
buttonStyle.opacity = 0.5;
}
if (inset) {
buttonStyle.paddingLeft = padding - 4;
buttonStyle.paddingRight = padding - 4;
buttonStyle.borderRadius = 4;
}
element = h(Ripple_1.Ripple, {
ms: 800,
color: danger ? styles.col.get('error', 'el-3', 0, { A: 40 }) : undefined,
children: h(to ? Link_1.Link : 'button', {
...rest,
a: to ? true : undefined,
to: disabled ? undefined : to,
disabled,
className: mainClassName,
style: buttonStyle,
}, element),
});
if (inset) {
element = React.createElement("span", { style: { padding: '0 4px', display: 'block' } }, element);
}
return element;
};
exports.ContextItem = ContextItem;