json-joy
Version:
Collection of libraries for building collaborative editing apps.
90 lines (89 loc) • 2.91 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicButton = exports.blockClass = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const Link_1 = require("nice-ui/lib/1-inline/Link");
exports.blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.lightTheme.font.ui1.mid,
fz: '14px',
cur: 'pointer',
us: 'none',
trs: 'background .12s ease-in 0s, opacity .12s ease-in 0s',
d: 'inline-flex',
ai: 'center',
jc: 'center',
fls: 0,
bdrad: '3px',
bg: 'transparent',
bd: 0,
mr: 0,
pd: 0,
out: 0,
ov: 'visible',
'&:hover': {
bxsh: 'none',
},
'&:active': {
bxsh: 'none',
},
});
const handleDragStart = (e) => e.preventDefault();
const BasicButton = ({ to, border, fill, size = 24, width = size, height = size, round, title, positive, noOutline, transparent, onClick, children, compact, spacious, radius, className = '', ...rest }) => {
const theme = (0, nano_theme_1.useTheme)();
const { isLight } = theme;
const bgFactor = isLight ? 1 : 1.1;
const dynamicBlockClass = (0, nano_theme_1.useRule)(({ g }) => ({
// col: g(0.2),
// svg: {
// fill: g(0.5),
// col: g(0.5),
// },
'&:hover': {
// col: g(0.2),
bg: g(0, 0.08 * bgFactor),
},
'&:active': {
bg: g(0, 0.16 * bgFactor),
},
}));
const fillBlockClass = (0, nano_theme_1.useRule)(({ g }) => ({
bg: transparent ? 'transparent' : g(0, 0.04 * bgFactor),
'&:hover': {
bg: g(0, 0.08 * bgFactor),
},
'&:active': {
bg: g(0, 0.16 * bgFactor),
},
}));
const borderClass = (0, nano_theme_1.useRule)(({ g }) => ({
bd: `1px solid ${g(0, 0.16 * bgFactor)}`,
boxShadow: `0 0 2px ${g(0, 0.04 * bgFactor)}`,
}));
const style = {
height,
};
style.width = width;
if (typeof width !== 'number') {
if (spacious) {
style.padding = '8px 16px';
}
else {
style.paddingLeft = compact ? 8 : 16;
style.paddingRight = compact ? 8 : 16;
}
}
if (round) {
style.borderRadius = '50%';
}
if (noOutline) {
style.boxShadow = 'none';
}
if (radius !== undefined) {
style.borderRadius = radius;
}
return (React.createElement(Link_1.Link, { ...rest, a: !!to, className: className + exports.blockClass + dynamicBlockClass + (border ? borderClass : '') + (fill ? fillBlockClass : ''), style: style, title: title, onClick: to ? undefined : onClick, onDragStart: handleDragStart, to: to, "data-testid": "BasicButton" }, children));
};
exports.BasicButton = BasicButton;