@coreui/react
Version:
UI Components Library for React.js
47 lines (44 loc) • 2.17 kB
JavaScript
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 { colorPropType } from '../../props.js';
const CButton = forwardRef((_a, ref) => {
var { children, active, as = 'button', className, color, disabled, href, onClick, shape, size, toggle, type = 'button', variant } = _a, rest = __rest(_a, ["children", "active", "as", "className", "color", "disabled", "href", "onClick", "shape", "size", "toggle", "type", "variant"]);
const Component = href ? 'a' : as;
const [_active, setActive] = useState(active);
useEffect(() => {
setActive(active);
}, [active]);
return (React.createElement(Component, Object.assign({ className: classNames('btn', {
[`btn-${variant}-${color}`]: variant && color,
[`btn-${variant}`]: variant && !color,
[`btn-${color}`]: !variant && color,
[`btn-${size}`]: size,
active: _active,
disabled,
}, shape, className) }, ((Component === 'button' || Component === 'input') && { type, disabled }), (toggle && { 'aria-pressed': !!_active }), (Component === 'a' && href && { href }), (Component === 'a' && disabled && { 'aria-disabled': true, tabIndex: -1 }), { onClick: (event) => {
if (!disabled) {
if (toggle) {
event.preventDefault();
setActive((prevActive) => !prevActive);
}
onClick === null || onClick === void 0 ? void 0 : onClick(event);
}
} }, rest, { ref: ref }), children));
});
CButton.propTypes = {
active: PropTypes.bool,
as: PropTypes.elementType,
children: PropTypes.node,
className: PropTypes.string,
color: colorPropType,
shape: PropTypes.string,
size: PropTypes.oneOf(['sm', 'lg']),
toggle: PropTypes.bool,
type: PropTypes.oneOf(['button', 'submit', 'reset']),
variant: PropTypes.oneOf(['outline', 'ghost']),
};
CButton.displayName = 'CButton';
export { CButton };
//# sourceMappingURL=CButton.js.map