@coreui/react-pro
Version:
UI Components Library for React.js
40 lines (37 loc) • 1.88 kB
JavaScript
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../node_modules/classnames/index.js';
import { CButton } from '../button/CButton.js';
import { CSpinner } from '../spinner/CSpinner.js';
var CLoadingButton = forwardRef(function (_a, ref) {
var children = _a.children, className = _a.className, disabledOnLoading = _a.disabledOnLoading, loading = _a.loading, onClick = _a.onClick, _b = _a.spinnerType, spinnerType = _b === void 0 ? 'border' : _b, timeout = _a.timeout, rest = __rest(_a, ["children", "className", "disabledOnLoading", "loading", "onClick", "spinnerType", "timeout"]);
var _c = useState(), _loading = _c[0], setLoading = _c[1];
useEffect(function () {
setLoading(loading);
}, [loading]);
var handleOnClick = function () {
onClick && onClick();
if (timeout) {
setLoading(true);
setTimeout(function () {
setLoading(false);
}, timeout);
}
};
return (React.createElement(CButton, __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