From 15daa48f7d57817a35b2edbb30cbc83a583876ee Mon Sep 17 00:00:00 2001 From: Amour1688 <31695475+Amour1688@users.noreply.github.com> Date: Tue, 24 Mar 2020 16:58:53 +0800 Subject: [PATCH] feat: modal, alert and message use new icon (#1932) * feat: modal and alert use new icon * chore: icons without treeShaking * chore: message icon support h => VNode; remove warning in ConfirmDialog --- components/alert/index.jsx | 81 ++++++++++++++---------------- components/message/index.js | 32 ++++++------ components/modal/ConfirmDialog.jsx | 13 +---- components/modal/Modal.jsx | 4 +- components/modal/index.js | 13 +++-- components/vc-dialog/Dialog.jsx | 4 +- 6 files changed, 67 insertions(+), 80 deletions(-) diff --git a/components/alert/index.jsx b/components/alert/index.jsx index f22bd54c7..094997369 100644 --- a/components/alert/index.jsx +++ b/components/alert/index.jsx @@ -1,4 +1,12 @@ -import Icon from '../icon'; +import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; +import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined'; +import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined'; +import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined'; +import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined'; +import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'; +import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'; +import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'; +import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import classNames from 'classnames'; import BaseMixin from '../_util/BaseMixin'; import PropTypes from '../_util/vue-types'; @@ -9,6 +17,21 @@ import { ConfigConsumerProps } from '../config-provider'; import Base from '../base'; function noop() {} + +const iconMapFilled = { + success: CheckCircleFilled, + info: InfoCircleFilled, + error: CloseCircleFilled, + warning: ExclamationCircleFilled, +}; + +const iconMapOutlined = { + success: CheckCircleOutlined, + info: InfoCircleOutlined, + error: CloseCircleOutlined, + warning: ExclamationCircleOutlined, +}; + export const AlertProps = { /** * Type of Alert styles, options:`success`, `info`, `warning`, `error` @@ -28,7 +51,6 @@ export const AlertProps = { afterClose: PropTypes.func.def(noop), /** Whether to show icon */ showIcon: PropTypes.bool, - iconType: PropTypes.string, prefixCls: PropTypes.string, banner: PropTypes.bool, icon: PropTypes.any, @@ -70,12 +92,12 @@ const Alert = { }, }, - render() { + render(h) { const { prefixCls: customizePrefixCls, banner, closing, closed } = this; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('alert', customizePrefixCls); - let { closable, type, showIcon, iconType } = this; + let { closable, type, showIcon } = this; const closeText = getComponentFromProp(this, 'closeText'); const description = getComponentFromProp(this, 'description'); const message = getComponentFromProp(this, 'message'); @@ -84,31 +106,8 @@ const Alert = { showIcon = banner && showIcon === undefined ? true : showIcon; // banner模式默认为警告 type = banner && type === undefined ? 'warning' : type || 'info'; - let iconTheme = 'filled'; - - if (!iconType) { - switch (type) { - case 'success': - iconType = 'check-circle'; - break; - case 'info': - iconType = 'info-circle'; - break; - case 'error': - iconType = 'close-circle'; - break; - case 'warning': - iconType = 'exclamation-circle'; - break; - default: - iconType = 'default'; - } - - // use outline icon in alert with description - if (description) { - iconTheme = 'outlined'; - } - } + + const iconType = (description ? iconMapOutlined : iconMapFilled)[type] || null; // closeable when closeText is assigned if (closeText) { @@ -126,22 +125,20 @@ const Alert = { const closeIcon = closable ? ( - {closeText ? ( - {closeText} - ) : ( - - )} + {closeText ? {closeText} : } ) : null; - const iconNode = (icon && - (isValidElement(icon) ? ( - cloneElement(icon, { - class: `${prefixCls}-icon`, - }) - ) : ( - {icon} - ))) || ; + const iconNode = + (icon && + (isValidElement(icon) ? ( + cloneElement(icon, { + class: `${prefixCls}-icon`, + }) + ) : ( + {icon} + ))) || + h(iconType, { class: `${prefixCls}-icon` }); const transitionProps = getTransitionProps(`${prefixCls}-slide-up`, { appear: false, diff --git a/components/message/index.js b/components/message/index.js index 6f0f56182..e10883641 100644 --- a/components/message/index.js +++ b/components/message/index.js @@ -1,5 +1,9 @@ import Notification from '../vc-notification'; -import Icon from '../icon'; +import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined'; +import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'; +import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; +import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'; +import InfoCircleFilled from '@ant-design/icons-vue/InfoCircleFilled'; let defaultDuration = 3; let defaultTop; @@ -34,17 +38,17 @@ function getMessageInstance(callback) { ); } -// type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'; +const iconMap = { + info: InfoCircleFilled, + success: CheckCircleFilled, + error: CloseCircleFilled, + warning: ExclamationCircleFilled, + loading: LoadingOutlined, +}; function notice(args) { const duration = args.duration !== undefined ? args.duration : defaultDuration; - const iconType = { - info: 'info-circle', - success: 'check-circle', - error: 'close-circle', - warning: 'exclamation-circle', - loading: 'loading', - }[args.type]; + const Icon = iconMap[args.type]; const target = args.key || key++; const closePromise = new Promise(resolve => { @@ -60,19 +64,11 @@ function notice(args) { duration, style: {}, content: h => { - const iconNode = ( - - ); - const switchIconNode = iconType ? iconNode : ''; return (
- {args.icon - ? typeof args.icon === 'function' - ? args.icon(h) - : args.icon - : switchIconNode} + {args.icon ? typeof args.icon === 'function' ? args.icon(h) : args.icon : } {typeof args.content === 'function' ? args.content(h) : args.content}
); diff --git a/components/modal/ConfirmDialog.jsx b/components/modal/ConfirmDialog.jsx index 4fd38e848..a7162237d 100644 --- a/components/modal/ConfirmDialog.jsx +++ b/components/modal/ConfirmDialog.jsx @@ -1,15 +1,14 @@ import classNames from 'classnames'; -import Icon from '../icon'; import Dialog from './Modal'; import ActionButton from './ActionButton'; import { getConfirmLocale } from './locale'; -import warning from '../_util/warning'; export default { functional: true, render(h, context) { const { props } = context; const { + icon, onCancel, onOk, close, @@ -22,15 +21,8 @@ export default { maskStyle, okButtonProps, cancelButtonProps, - iconType = 'question-circle', closable = false, } = props; - warning( - !('iconType' in props), - 'Modal', - `The property 'iconType' is deprecated. Use the property 'icon' instead.`, - ); - const icon = props.icon ? props.icon : iconType; const okType = props.okType || 'primary'; const prefixCls = props.prefixCls || 'ant-modal'; const contentPrefixCls = `${prefixCls}-confirm`; @@ -65,7 +57,6 @@ export default { {cancelText} ); - const iconNode = typeof icon === 'string' ? : icon(h); return (
- {iconNode} + {typeof icon === 'function' ? icon(h) : icon} {props.title === undefined ? null : ( {props.title} )} diff --git a/components/modal/Modal.jsx b/components/modal/Modal.jsx index 13ca61328..16e08f41a 100644 --- a/components/modal/Modal.jsx +++ b/components/modal/Modal.jsx @@ -3,7 +3,7 @@ import Dialog from '../vc-dialog'; import PropTypes from '../_util/vue-types'; import addEventListener from '../vc-util/Dom/addEventListener'; import { getConfirmLocale } from './locale'; -import Icon from '../icon'; +import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import Button from '../button'; import buttonTypes from '../button/buttonTypes'; const ButtonType = buttonTypes().type; @@ -186,7 +186,7 @@ export default { const closeIcon = getComponentFromProp(this, 'closeIcon'); const closeIconToRender = ( - {closeIcon || } + {closeIcon || } ); const footer = getComponentFromProp(this, 'footer'); diff --git a/components/modal/index.js b/components/modal/index.js index bbf989ca6..e2b5e3dbe 100644 --- a/components/modal/index.js +++ b/components/modal/index.js @@ -1,6 +1,9 @@ import Modal, { destroyFns } from './Modal'; import modalConfirm from './confirm'; -import Icon from '../icon'; +import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined'; +import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined'; +import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined'; +import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined'; import Base from '../base'; // export { ActionButtonProps } from './ActionButton' @@ -10,7 +13,7 @@ const info = function(props) { const config = { type: 'info', icon: h => { - return ; + return ; }, okCancel: false, ...props, @@ -22,7 +25,7 @@ const success = function(props) { const config = { type: 'success', icon: h => { - return ; + return ; }, okCancel: false, ...props, @@ -34,7 +37,7 @@ const error = function(props) { const config = { type: 'error', icon: h => { - return ; + return ; }, okCancel: false, ...props, @@ -46,7 +49,7 @@ const warning = function(props) { const config = { type: 'warning', icon: h => { - return ; + return ; }, okCancel: false, ...props, diff --git a/components/vc-dialog/Dialog.jsx b/components/vc-dialog/Dialog.jsx index 87541abed..2d6165647 100644 --- a/components/vc-dialog/Dialog.jsx +++ b/components/vc-dialog/Dialog.jsx @@ -1,4 +1,4 @@ -import { getComponentFromProp, initDefaultProps } from '../_util/props-util'; +import { initDefaultProps } from '../_util/props-util'; import KeyCode from '../_util/KeyCode'; import contains from '../vc-util/Dom/contains'; import LazyRenderBox from './LazyRenderBox'; @@ -218,6 +218,7 @@ export default { visible, bodyProps, forceRender, + closeIcon, } = this; const dest = {}; if (width !== undefined) { @@ -249,7 +250,6 @@ export default { let closer; if (closable) { - const closeIcon = getComponentFromProp(this, 'closeIcon'); closer = (