@neo4j-ndl/react/lib/cjs/button/Button.js

React implementation of Neo4j Design System

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Button = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
const react_1 = __importDefault(require("react"));
const defaultImports_1 = require("../_common/defaultImports");
const utils_1 = require("../_common/utils");
const loading_spinner_1 = require("../loading-spinner");
exports.Button = react_1.default.forwardRef(function Button(_a, ref) {
    var { children, as, type = 'button', isLoading = false, color = 'primary', isDisabled = false, fill = 'filled', size = 'medium', onClick, isFloating = false, className, style, htmlAttributes } = _a, restProps = __rest(_a, ["children", "as", "type", "isLoading", "color", "isDisabled", "fill", "size", "onClick", "isFloating", "className", "style", "htmlAttributes"]);
    const Component = as || 'button';
    const isInteractable = !isDisabled && !isLoading;
    const classes = (0, defaultImports_1.classNames)('ndl-btn', {
        'ndl-small': size === 'small',
        'ndl-medium': size === 'medium',
        'ndl-large': size === 'large',
        'ndl-filled': fill === 'filled',
        'ndl-outlined': fill === 'outlined',
        'ndl-text': fill === 'text',
        'ndl-disabled': isDisabled,
        'ndl-loading': isLoading,
        'ndl-floating-btn': isFloating,
        /** Now check button is outlined or filled */
        /**
         * Notice:
         * "Hover" here does not exist for "warning" and "success"
         * and is custom for Neutral
         */
        [`
      ${color === 'neutral'
            ? `n-bg-palette-${color}-bg-strongest`
            : `n-bg-palette-${color}-bg-strong`}
      ${isInteractable &&
            `hover:n-bg-palette-${color}-hover-strong
         active:n-bg-palette-${color}-pressed-strong`}
      `]: fill === 'filled',
        [`
      n-text-palette-${color}-text
      ${isInteractable &&
            `hover:n-bg-palette-${color}-hover-weak
        active:n-bg-palette-${color}-pressed-weak`}
      n-border-palette-${color}-bg-strong
      `]: fill === 'outlined' && color !== 'neutral',
        /**
         * Neutral needs overriding as it doesn't follow
         * the same principles with colored variations
         */
        [`
    n-text-palette-neutral-text-weak
      n-bg-palette-${color}-weak
      ${isInteractable && color === 'primary' && `hover:n-bg-palette-primary-hover-weak`}
      ${isInteractable && color === 'danger' && `hover:n-bg-palette-danger-hover-weak`}
      ${isInteractable && color === 'neutral' && `hover:n-bg-palette-neutral-hover`}
      n-border-palette-neutral-border-strong
      active:n-bg-palette-neutral-pressed
      `]: fill === 'outlined' && color === 'neutral',
        [`
      n-text-palette-${color}-text
      ${isInteractable &&
            `hover:n-bg-palette-${color}-hover-weak
         active:n-bg-palette-${color}-pressed-weak
      `}
      `]: fill === 'text' && color !== 'neutral',
        [`
     n-text-palette-neutral-text-weak
      ${isInteractable && `hover:n-bg-palette-neutral-bg-default`}
      `]: fill === 'text' && color === 'neutral',
    });
    const sanitizedClasses = (0, utils_1.removeSpaces)((0, utils_1.removeNewlines)(classes));
    const handleClick = (e) => {
        if (!isInteractable) {
            // By default, a <button /> element with disabled set to true will not get its
            // on click handler called. To support the same behavior on <a /> tags we
            // swallow the event here when disabled, since the <a /> tag with disabled set to
            // true will have its onClick handler called
            e.preventDefault();
            e.stopPropagation();
            return;
        }
        if (onClick) {
            onClick(e);
        }
    };
    return ((0, jsx_runtime_1.jsxs)(Component
    /** Add button type prop only for button components */
    , Object.assign({}, (Component === 'button' ? { type } : {}), { onClick: handleClick, disabled: isDisabled, "aria-disabled": !isInteractable, className: [sanitizedClasses, className].join(' '), style: style, ref: ref }, restProps, htmlAttributes, { children: [isLoading ? ((0, jsx_runtime_1.jsx)(loading_spinner_1.LoadingSpinner, { className: "n-my-auto n-mr-token-3", size: "small" })) : null, children] })));
});
//# sourceMappingURL=Button.js.map