zent
Version:
一套前端设计语言和基于React的实现
46 lines (45 loc) • 2.34 kB
JavaScript
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;