nice-ui
Version:
React design system, components, and utilities
87 lines (86 loc) • 3.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListItem = void 0;
const React = require("react");
const Link_1 = require("../../1-inline/Link");
const BasicButtonMore_1 = require("../../2-inline-block/BasicButton/BasicButtonMore");
const Popup_1 = require("../../4-card/Popup");
const Ripple_1 = require("../../misc/Ripple");
const nano_theme_1 = require("nano-theme");
const FixedColumn_1 = require("../FixedColumn");
const highlightClass_1 = require("./highlightClass");
const padding = 16;
const blockClass = (0, nano_theme_1.rule)({
d: 'block',
bxz: 'border-box',
cur: 'pointer',
bdrad: '4px',
'&+&': {
mart: '8px',
},
});
const useBlockClass = (0, nano_theme_1.makeRule)((theme) => ({
bg: theme.g(0, 0.02),
'&:hover': {
bg: theme.g(0, 0.06),
},
}));
const linkClass = (0, nano_theme_1.rule)({
d: 'block',
bxz: 'border-box',
cur: 'pointer',
bdrad: '4px',
pad: `${padding}px`,
});
const iconClass = (0, nano_theme_1.rule)({
w: '32px',
h: '32px',
bdrad: '50%',
// bd: `1px solid ${theme.blueColor(.5)}`,
// bd: `1px solid ${theme.blue}`,
bxz: 'border-box',
d: 'flex',
justifyContent: 'center',
alignItems: 'center',
svg: {
fill: nano_theme_1.theme.color.sem.blue[0],
stroke: nano_theme_1.theme.color.sem.blue[0],
},
});
const titleClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui1.mid,
d: 'block',
});
const ListItem = ({ title, subtitle, icon, to, isNew, renderContext }) => {
const dynamicBlockClass = useBlockClass();
const dynamicTitleClass = (0, nano_theme_1.useRule)((theme) => ({
col: theme.g(0.3),
}));
let element = React.createElement("span", { className: titleClass + dynamicTitleClass }, title);
if (subtitle) {
element = (React.createElement("span", null,
element,
React.createElement("span", { style: { display: 'block', fontSize: '.9em' } }, subtitle)));
}
if (icon) {
element = (React.createElement(FixedColumn_1.FixedColumn, { as: 'span', left: 48 },
React.createElement("span", { style: { display: 'flex', alignItems: 'center' } },
React.createElement("span", { className: iconClass }, icon)),
element));
}
if (to) {
element = (React.createElement(Ripple_1.Ripple, null,
React.createElement(Link_1.Link, { a: true, to: to, className: linkClass }, element)));
}
if (renderContext) {
element = (React.createElement(FixedColumn_1.FixedColumn, { as: 'span', right: 32 + padding },
React.createElement("span", null, element),
React.createElement("span", { style: { display: 'flex', alignItems: 'center' } },
React.createElement("span", { style: { width: 32, display: 'inline-block' } },
React.createElement(Popup_1.Popup, { renderContext: renderContext },
React.createElement(BasicButtonMore_1.BasicButtonMore, { size: 32 }))))));
}
element = React.createElement("div", { className: blockClass + dynamicBlockClass + (isNew ? highlightClass_1.highlightClass : '') }, element);
return element;
};
exports.ListItem = ListItem;