@dynamic-labs/sdk-react-core/src/lib/components/Button/Button.cjs

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _tslib = require('../../../../_virtual/_tslib.cjs');
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var classNames = require('../../utils/functions/classNames/classNames.cjs');
var spinner = require('../Spinner/spinner.cjs');
var BaseButton = require('../BaseButton/BaseButton.cjs');

const defaultButtonVariant = 'primary';
/**
 * A Button component with options for different variants, padding, and more.
 */
const Button = ({ buttonClassName = '', className, style, buttonPadding = 'medium', buttonVariant = defaultButtonVariant, buttonRef, children, feedback, expanded, dataTestId, disabled = false, showInternalLoading = true, loading = false, onClick, type, startSlot, endSlot, }) => {
    const [internalButtonLoading, setInternalButtonLoading] = React.useState(false);
    const [isFeedbackVisible, setIsFeedbackVisible] = React.useState(false);
    const buttonEffectiveClassName = classNames.classNames('button', {
        'button--expanded': Boolean(expanded),
        'button--loading': Boolean(loading),
    }, buttonPadding ? `button--padding-${buttonPadding}` : '', buttonVariant ? `button--${buttonVariant}` : '', buttonClassName, className);
    const handleClick = (e) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
        if (onClick) {
            const onClickResult = onClick(e);
            if (onClickResult instanceof Promise) {
                if (showInternalLoading) {
                    setInternalButtonLoading(true);
                }
                try {
                    yield onClickResult;
                }
                finally {
                    setInternalButtonLoading(false);
                }
            }
        }
        if (feedback) {
            setIsFeedbackVisible(true);
            setTimeout(() => {
                setIsFeedbackVisible(false);
            }, 2000);
        }
    });
    const buttonContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [startSlot && jsxRuntime.jsx("div", { className: 'button__start-slot', children: startSlot }), (feedback || children) &&
                (isFeedbackVisible && feedback ? feedback : children), endSlot && jsxRuntime.jsx("div", { className: 'button__end-slot', children: endSlot })] }));
    return (jsxRuntime.jsxs(BaseButton.BaseButton, { type: type, buttonRef: buttonRef, onClick: handleClick, className: buttonEffectiveClassName, disabled: disabled || internalButtonLoading || loading, dataTestId: dataTestId, style: style, ariaExpanded: expanded, children: [(internalButtonLoading || loading) && (jsxRuntime.jsx("div", { className: 'button__spinner-container', "data-testid": 'button__spinner', children: jsxRuntime.jsx(spinner.Spinner, { className: 'button__spinner' }) })), buttonContent] }));
};

exports.Button = Button;
exports.defaultButtonVariant = defaultButtonVariant;