zent
Version:
一套前端设计语言和基于React的实现
47 lines (46 loc) • 3.29 kB
JavaScript
import { __assign } from "tslib";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, useRef } from 'react';
import cx from 'classnames';
import Icon from '../../icon';
import InlineLoading from '../../loading/InlineLoading';
var iconTypeMap = {
info: 'info-circle',
warning: 'warning',
success: 'check-circle',
error: 'close-circle',
};
export var AlertItem = forwardRef(function (props, ref) {
var extraContent = props.extraContent, classItemName = props.classItemName, title = props.title, description = props.description, children = props.children, loading = props.loading, type = props.type, closable = props.closable, icon = props.icon, closeIconColor = props.closeIconColor, closeContent = props.closeContent, onAlertItemClose = props.onAlertItemClose;
var propsRef = useRef(props);
propsRef.current = props;
var renderContent = useMemo(function () {
return children ? (children) : (_jsxs(_Fragment, { children: [title && _jsx("h3", __assign({ className: "zent-alert-item-content__title", "data-zv": '10.0.17' }, { children: title }), void 0), description && (_jsx("p", __assign({ className: "zent-alert-item-content__description", "data-zv": '10.0.17' }, { children: description }), void 0))] }, void 0));
}, [children, description, title]);
var renderCloseNode = useMemo(function () {
var onClose = propsRef.current.onClose;
var colorStyle = closeIconColor ? { color: closeIconColor } : {};
return closable ? (_jsx("div", __assign({ className: "zent-alert-item-close-wrapper", onClick: function (e) {
onClose === null || onClose === void 0 ? void 0 : onClose();
onAlertItemClose && onAlertItemClose();
e.stopPropagation();
}, "data-zv": '10.0.17' }, { children: closeContent !== null && closeContent !== void 0 ? closeContent : (_jsx(Icon, { type: "close", className: "zent-alert-item-close-btn", style: colorStyle }, void 0)) }), void 0)) : null;
}, [closable, closeContent, closeIconColor, onAlertItemClose]);
var renderIcon = useMemo(function () {
if (loading) {
return (_jsx(InlineLoading, { className: "zent-alert-item-icon", loading: true, icon: "circle", iconSize: 16 }, void 0));
}
if (icon === null || icon === false)
return null;
if (icon) {
return _jsx("span", __assign({ className: "zent-alert-item-custom-icon", "data-zv": '10.0.17' }, { children: icon }), void 0);
}
if (type in iconTypeMap) {
return (_jsx(Icon, { className: "zent-alert-item-icon", type: iconTypeMap[type] }, void 0));
}
return null;
}, [loading, type, icon]);
return (_jsxs("div", __assign({ className: cx('zent-alert-item', classItemName), ref: ref, "data-zv": '10.0.17' }, { children: [renderIcon, _jsx("div", __assign({ className: "zent-alert-item-content", "data-zv": '10.0.17' }, { children: renderContent }), void 0), extraContent && (_jsx("div", __assign({ className: "zent-alert-item-extra-content", "data-zv": '10.0.17' }, { children: extraContent }), void 0)), renderCloseNode] }), void 0));
});
AlertItem.displayName = 'AlertItem';
export default AlertItem;