nice-ui
Version:
React design system, components, and utilities
88 lines (87 loc) • 3.54 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToastCard = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const Paper_1 = require("../Paper");
const Code_1 = require("../../1-inline/Code");
const Progress_1 = require("../../3-list-item/Progress");
const BasicButtonClose_1 = require("../../2-inline-block/BasicButton/BasicButtonClose");
const Split_1 = require("../../3-list-item/Split");
const Flex_1 = require("../../3-list-item/Flex");
const RunningBackground_1 = require("../../3-list-item/RunningBackground");
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
d: 'inline-block',
maxW: '480px',
w: 'auto',
ov: 'hidden',
animation: 'fadeInScaleOut .3s',
});
const mainClass = (0, nano_theme_1.rule)({
pos: 'relative',
d: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
bxz: 'border-box',
// pad: '24px',
pad: '16px',
h2: {
...nano_theme_1.theme.font.ui2.bold,
fz: '24px',
mar: 0,
pad: 0,
},
p: {
pad: 0,
mar: 0,
},
svg: {
// fill: theme.blue,
fill: nano_theme_1.theme.g(0.6),
col: nano_theme_1.theme.blue,
},
'&:hover svg': {
col: nano_theme_1.theme.color.sem.negative[0],
},
});
const headerClass = (0, nano_theme_1.rule)({
// marl: '-2px',
// pad: '0 0 16px',
});
const contentClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui2.mid,
fz: '13px',
pad: '12px 0 0',
lh: '1.6em',
col: nano_theme_1.theme.g(0.45),
'@media only screen and (max-width: 800px)': {
fz: '14px',
},
});
const titleClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui1.mid,
fz: '15px',
col: nano_theme_1.theme.g(0.25),
});
const ToastCard = ({ type = 'info', title, message, progress, glow = true, onClose, }) => {
const [t] = (0, use_t_1.useT)();
const header = (React.createElement(Split_1.Split, { style: { alignItems: 'center' } },
React.createElement(Flex_1.Flex, { style: { alignItems: 'center' } },
!!type && (React.createElement("span", { style: { fontSize: '0.8em', opacity: 0.7, userSelect: 'none', marginRight: 12 } },
React.createElement(Code_1.Code, { gray: true, spacious: true, alt: true }, t(type)))),
React.createElement("span", { className: titleClass }, title)),
React.createElement("div", { style: { margin: '-7px -7px -11px 16px' } }, !!onClose && React.createElement(BasicButtonClose_1.BasicButtonClose, { size: 32, onClick: () => onClose() }))));
const style = {};
return (React.createElement(Paper_1.default, { fill: 0, contrast: true, className: blockClass },
typeof progress === 'number' && (React.createElement("div", { style: { position: 'relative', marginBottom: '-2px' } },
React.createElement(RunningBackground_1.RunningBackground, null),
React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, right: 0 } },
React.createElement(Progress_1.Progress, { glow: glow, value: progress })))),
React.createElement("div", { className: mainClass, style: style },
React.createElement("div", null,
React.createElement("div", { className: headerClass }, header),
!!message && React.createElement("div", { className: contentClass }, message)))));
};
exports.ToastCard = ToastCard;