UNPKG

@coreui/react

Version:

UI Components Library for React.js

39 lines (36 loc) 2.1 kB
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js'; import React, { forwardRef, useRef, useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import classNames from '../../_virtual/index.js'; import { CCloseButton } from '../close-button/CCloseButton.js'; import { useForkedRef } from '../../hooks/useForkedRef.js'; import '@popperjs/core'; import { colorPropType } from '../../props.js'; import Transition from '../../node_modules/react-transition-group/esm/Transition.js'; var CAlert = forwardRef(function (_a, ref) { var children = _a.children, className = _a.className, _b = _a.color, color = _b === void 0 ? 'primary' : _b, dismissible = _a.dismissible, variant = _a.variant, _c = _a.visible, visible = _c === void 0 ? true : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "color", "dismissible", "variant", "visible", "onClose"]); var alertRef = useRef(null); var forkedRef = useForkedRef(ref, alertRef); var _d = useState(visible), _visible = _d[0], setVisible = _d[1]; useEffect(function () { setVisible(visible); }, [visible]); return (React.createElement(Transition, { in: _visible, mountOnEnter: true, nodeRef: alertRef, onExit: onClose, timeout: 150, unmountOnExit: true }, function (state) { return (React.createElement("div", __assign({ className: classNames('alert', variant === 'solid' ? "bg-".concat(color, " text-white") : "alert-".concat(color), { 'alert-dismissible fade': dismissible, show: state === 'entered', }, className), role: "alert" }, rest, { ref: forkedRef }), children, dismissible && React.createElement(CCloseButton, { onClick: function () { return setVisible(false); } }))); })); }); CAlert.propTypes = { children: PropTypes.node, className: PropTypes.string, color: colorPropType.isRequired, dismissible: PropTypes.bool, onClose: PropTypes.func, variant: PropTypes.string, visible: PropTypes.bool, }; CAlert.displayName = 'CAlert'; export { CAlert }; //# sourceMappingURL=CAlert.js.map