UNPKG

zent

Version:

一套前端设计语言和基于React的实现

46 lines (45 loc) 2.34 kB
import { __assign } from "tslib"; import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; import { useContext, useCallback } from 'react'; import cx from 'classnames'; import { Icon } from '../icon'; import uniqueId from '../utils/uniqueId'; import { getContainer, remove } from './Container'; import { NoticeContext } from './Wrap'; import { isElement } from 'react-is'; function renderIcon(type) { switch (type) { case 'info': return (_jsx(Icon, { className: "zent-notice-icon zent-notice-icon-info", type: "info-circle" }, void 0)); case 'success': return (_jsx(Icon, { className: "zent-notice-icon zent-notice-icon-success", type: "check-circle" }, void 0)); case 'warning': return (_jsx(Icon, { className: "zent-notice-icon zent-notice-icon-warning", type: "warning" }, void 0)); case 'error': return (_jsx(Icon, { className: "zent-notice-icon zent-notice-icon-error", type: "close-circle" }, void 0)); default: return null; } } export function Notice(_a) { var children = _a.children, title = _a.title, type = _a.type, _b = _a.closable, closable = _b === void 0 ? true : _b, onClose = _a.onClose, className = _a.className, style = _a.style; var ctx = useContext(NoticeContext); var onCloseClick = useCallback(function () { ctx && ctx.onClose(); onClose && onClose(); }, [ctx, onClose]); return (_jsxs("div", __assign({ className: cx('zent-notice', { 'zent-notice-with-icon': !!type }, className), style: style, "data-zv": '10.0.17' }, { children: [renderIcon(type), _jsx("div", __assign({ className: "zent-notice-title", "data-zv": '10.0.17' }, { children: title }), void 0), closable ? (_jsx(Icon, { type: "close", className: "zent-notice-close", onClick: onCloseClick }, void 0)) : null, _jsx("div", __assign({ className: "zent-notice-content", "data-zv": '10.0.17' }, { children: children }), void 0)] }), void 0)); } Notice.push = function push(node) { var position = 'right-top'; if (isElement(node) && node.props) { position = node.props.position || position; } var id = uniqueId('zent-notice-'); getContainer(position, function (container) { container.push(node, id); }); return id; }; Notice.close = remove; export default Notice;