collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
67 lines (66 loc) • 2.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CardLayout = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const Flex_1 = require("nice-ui/lib/3-list-item/Flex");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const BasicButtonClose_1 = require("nice-ui/lib/2-inline-block/BasicButton/BasicButtonClose");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const use_t_1 = require("use-t");
const css = {
block: (0, nano_theme_1.drule)({
...nano_theme_1.theme.font.mono,
d: 'block',
bdrad: '5px',
trs: 'background 0.6s ease 0s',
fz: '.9em',
lh: 1.3,
bd: '1px solid transparent',
pd: 0,
mr: 0,
'&+&': {
mrt: '8px',
},
}),
header: (0, nano_theme_1.drule)({
pd: '8px 8px 8px 16px',
bxz: 'border-box',
ai: 'center',
}),
body: (0, nano_theme_1.drule)({
pd: '8px 8px 8px 16px',
bxz: 'border-box',
ovy: 'auto',
}),
};
const CardLayout = ({ left, right, footer, children, onClose, onTitleClick }) => {
const [t] = (0, use_t_1.useT)();
const theme = (0, nano_theme_1.useTheme)();
let header = null;
if (left || right || onClose) {
header = (React.createElement(Split_1.Split, { className: css.header({ bdb: !children ? undefined : `1px solid ${theme.g(0, 0.05)}` }), onClick: onTitleClick },
React.createElement("div", null, left),
React.createElement("div", null,
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
right,
!!onClose && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { horizontal: true, size: 0 }),
React.createElement(BasicTooltip_1.BasicTooltip, { renderTooltip: () => t('Close') },
React.createElement(BasicButtonClose_1.BasicButtonClose, { onClick: onClose }))))))));
}
return (React.createElement("div", { className: css.block({
col: theme.g(0.3),
bg: theme.g(0, 0.02),
'&:hover': {
bg: theme.bg,
bd: `1px solid ${theme.g(0, 0.04)}`,
},
}) },
header,
!!children && React.createElement("div", { className: css.body() }, children),
footer));
};
exports.CardLayout = CardLayout;