@coreui/react-pro/dist/esm/components/loading-button/CLoadingButton.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CButton } from '../button/CButton.js';
import { CSpinner } from '../spinner/CSpinner.js';

const CLoadingButton = forwardRef((_a, ref) => {
    var { children, className, disabledOnLoading, loading, onClick, spinnerType = 'border', timeout } = _a, rest = __rest(_a, ["children", "className", "disabledOnLoading", "loading", "onClick", "spinnerType", "timeout"]);
    const [_loading, setLoading] = useState();
    useEffect(() => {
        setLoading(loading);
    }, [loading]);
    const handleOnClick = () => {
        onClick && onClick();
        if (timeout) {
            setLoading(true);
            setTimeout(() => {
                setLoading(false);
            }, timeout);
        }
    };
    return (React.createElement(CButton, Object.assign({ className: classNames('btn-loading', _loading && 'is-loading', className) }, (disabledOnLoading && _loading && { disabled: true }), { onClick: handleOnClick }, rest, { ref: ref }),
        React.createElement(CSpinner, { className: "btn-loading-spinner", size: "sm", variant: spinnerType }),
        children));
});
CLoadingButton.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    disabledOnLoading: PropTypes.bool,
    loading: PropTypes.bool,
    onClick: PropTypes.func,
    spinnerType: PropTypes.oneOf(['border', 'grow']),
    timeout: PropTypes.number,
};
CLoadingButton.displayName = 'CLoadingButton';

export { CLoadingButton };
//# sourceMappingURL=CLoadingButton.js.map