nice-ui/lib/2-inline-block/Button/Button.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = 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 SpinnerCircle_1 = require("../SpinnerCircle");
const context_1 = require("../../styles/context");
const styles_1 = require("../../styles");
const defaultHeight = 36;
const defaultFontSize = 16;
const h = React.createElement;
const buttonClass = (0, nano_theme_1.drule)({
    ...styles_1.fonts.get('ui', 'mid', 2),
    d: 'inline-flex',
    w: 'auto',
    fz: defaultFontSize + 'px',
    h: defaultHeight + 'px',
    td: 'none',
    boxSizing: 'border-box',
    justifyContent: 'center',
    alignItems: 'center',
    letterSpacing: '0.6px',
    lh: '24px',
    trs: 'background .2s, box-shadow .2s, color .2s',
    mar: 0,
    bd: 0,
    pad: '0px 15px',
    minWidth: '50px',
    whiteSpace: 'nowrap',
});
const iconClass = (0, nano_theme_1.rule)({
    alignItems: 'center',
    d: 'flex',
});
const Button = (props) => {
    /* eslint-disable */
    let { block, children, color = 'neutral', primary, colorStep = primary ? 6 : 2, disabled, icon, iconRight, ghost, href, lite, loading, outline, size = 0, radius = 0, onClick, submit, dashed, } = props;
    /* eslint-enable */
    const theme = (0, context_1.useStyles)();
    let tag = 'button';
    if (loading) {
        disabled = true;
        icon = React.createElement(SpinnerCircle_1.SpinnerCircle, null);
    }
    if (ghost) {
        outline = true;
        lite = true;
    }
    const colorStepNum = theme.col.stepNum(colorStep);
    const bg = color
        ? color[0] === '#'
            ? color
            : theme.col.get(color, colorStepNum, 0)
        : theme.col.get('neutral', colorStepNum, 0);
    const bgHover = outline
        ? bg
        : color
            ? color[0] === '#'
                ? color
                : theme.col.get(color, ((colorStepNum + 1) % 12), 0)
            : theme.col.get('neutral', ((colorStepNum + 1) % 12), 0);
    const col = colorStepNum > 3 ? theme.g(0.98, 0.96) : theme.col.get('neutral', 'txt-1') + '';
    const buttonStyle = {
        height: `${size * 4 + defaultHeight}px`,
        fontSize: defaultFontSize + size * (size < 0 ? 0.5 : 2) + 'px',
        border: `1px solid ${lite || outline ? bg : 'transparent'}`,
        borderRadius: radius < 0 ? 0 : !radius ? 4 : 8,
    };
    const buttonProps = {
        className: (props.className || '') +
            buttonClass({
                bg: lite || outline ? 'transparent' : bg,
                col: outline ? (colorStepNum > 4 ? bg : theme.col.get('neutral', 'txt-1')) : !lite ? col : theme.g(0.08),
                '&:hover': {
                    col: outline || lite ? (outline && colorStepNum > 4 ? theme.g(0.98, 0.96) : theme.g(0.08)) : col,
                    bg: bgHover,
                    // boxShadow: disabled ? '0' : `0 0 0 3px ${theme.g(0, .1)}`,
                },
            }),
        onClick,
        style: buttonStyle,
    };
    if (disabled) {
        buttonProps.disabled = true;
        buttonStyle.opacity = 0.7;
        buttonStyle.cursor = 'not-allowed';
    }
    if (href) {
        tag = Link_1.Link;
        buttonProps.to = href;
        buttonProps.a = true;
    }
    else {
        if (submit) {
            buttonProps.type = 'submit';
        }
    }
    if (block) {
        buttonStyle.width = '100%';
    }
    if (props.pointer) {
        buttonStyle.cursor = 'pointer';
    }
    if (props.dashed) {
        buttonStyle.borderStyle = 'dashed';
    }
    let left = null;
    let right = null;
    if (icon) {
        if (iconRight) {
            right = h('span', { className: iconClass, style: { paddingLeft: 8 } }, icon);
        }
        else {
            left = h('span', { className: iconClass, style: { paddingRight: 8 } }, icon);
        }
    }
    let buttonElement = h(tag, buttonProps, left, children, right);
    Object.assign(buttonStyle, props.style);
    if (typeof tag !== 'string') {
        buttonElement = h('div', {}, buttonElement);
    }
    return h(Ripple_1.Ripple, {
        ms: block ? 400 : 1000,
        color: disabled ? 'transparent' : lite || outline ? 'rgba(0,0,0,.1)' : 'rgba(255,255,255,.85)',
        children: buttonElement,
    });
};
exports.Button = Button;