nice-ui/lib/2-inline-block/BasicButton/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BasicButton = exports.blockClass = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Link_1 = require("../../1-inline/Link");
const Ripple_1 = require("../../misc/Ripple");
const context_1 = require("../../styles/context");
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, skewed, fill, size = 24, width = size, height = size, round, rounder, roundest, title, positive, noOutline, transparent, onClick, children, compact, spacious, disabled, selected, className = '', ...rest }) => {
    const styles = (0, context_1.useStyles)();
    const g = styles.g;
    const bgFactor = styles.light ? 1 : 1.1;
    const dynamicBlockClass = (0, nano_theme_1.useRule)(() => ({
        col: g(0.2),
        bg: selected ? styles.col.accent(0, 'bg-2') : transparent || !fill ? 'transparent' : g(0, 0.04 * bgFactor),
        // svg: {
        //   fill: g(0.5),
        //   col: g(0.5),
        // },
        '&:hover': {
            col: disabled ? void 0 : g(0.2),
            bg: disabled ? void 0 : g(0, 0.08 * bgFactor),
        },
        '&:active': {
            bg: disabled ? void 0 : g(0, 0.16 * bgFactor),
        },
    }));
    const borderClass = (0, nano_theme_1.useRule)(() => ({
        // bg: g(0, 0.08 * bgFactor),
        bd: `1px solid ${g(0, 0.08 * 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%';
    }
    else if (skewed) {
        style.borderRadius = '18% / 25%';
    }
    else if (rounder) {
        style.borderRadius = '6px';
    }
    else if (roundest) {
        style.borderRadius = '1em';
    }
    if (noOutline) {
        style.boxShadow = 'none';
    }
    if (disabled) {
        style.opacity = 0.7;
    }
    return (React.createElement(Ripple_1.Ripple, { ms: 1500, color: positive ? styles.col.get('success') : styles.g(0, 0.08), disabled: disabled },
        React.createElement(Link_1.Link, { ...rest, a: !!to, className: className + exports.blockClass + dynamicBlockClass + (border ? borderClass : ''), style: style, title: title, onClick: to ? undefined : onClick, onDragStart: handleDragStart, to: to, "data-testid": "BasicButton" }, children)));
};
exports.BasicButton = BasicButton;
exports.default = exports.BasicButton;