github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: notification support configprovider.config

pull/4675/head
tangjinzhou 2021-09-18 22:48:44 +08:00
parent 322158d2be
commit 456c35361c
8 changed files with 98 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/_util/util.js → components/_util/util.ts
View File

@ -1,3 +1,4 @@
import type { VueNode } from './type';
export const isFunction = val => typeof val === 'function'; export const isFunction = val => typeof val === 'function';
export const isArray = Array.isArray; export const isArray = Array.isArray;
@ -67,4 +68,15 @@ export function toPx(val) {
return val; return val;
} }
export function renderHelper<T = Record<string, any>>(
v: VueNode | ((arg0: T) => VueNode),
props: T = {} as T,
defaultV?: any,
) {
if (typeof v === 'function') {
return v(props);
}
return v ?? defaultV;
}
export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue }; export { isOn, cacheStringFunction, camelize, hyphenate, capitalize, resolvePropValue };

3
components/config-provider/index.tsx
View File

@ -58,7 +58,7 @@ export const configConsumerProps = [
]; ];
export const defaultPrefixCls = 'ant'; export const defaultPrefixCls = 'ant';
let globalPrefixCls = ref<string>(); const globalPrefixCls = ref<string>();
type GlobalConfigProviderProps = { type GlobalConfigProviderProps = {
prefixCls?: MaybeRef<ConfigProviderProps['prefixCls']>; prefixCls?: MaybeRef<ConfigProviderProps['prefixCls']>;
@ -154,6 +154,7 @@ export type ConfigProviderProps = Partial<ExtractPropTypes<typeof configProvider
const ConfigProvider = defineComponent({ const ConfigProvider = defineComponent({
name: 'AConfigProvider', name: 'AConfigProvider',
inheritAttrs: false,
props: configProviderProps, props: configProviderProps,
setup(props, { slots }) { setup(props, { slots }) {
const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => { const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {

3
components/message/index.tsx
View File

@ -23,12 +23,14 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: any) => void)
} }
Notification.newInstance( Notification.newInstance(
{ {
appContext: args.appContext,
prefixCls: args.prefixCls || localPrefixCls, prefixCls: args.prefixCls || localPrefixCls,
rootPrefixCls: args.rootPrefixCls, rootPrefixCls: args.rootPrefixCls,
transitionName, transitionName,
style: { top: defaultTop }, // 覆盖原来的样式 style: { top: defaultTop }, // 覆盖原来的样式
getContainer, getContainer,
maxCount, maxCount,
name: 'message',
}, },
(instance: any) => { (instance: any) => {
if (messageInstance) { if (messageInstance) {
@ -92,7 +94,6 @@ function notice(args: MessageArgsProps): MessageType {
duration, duration,
style: args.style || {}, style: args.style || {},
class: args.class, class: args.class,
appContext: args.appContext,
content: ({ prefixCls }) => { content: ({ prefixCls }) => {
const Icon = iconMap[args.type]; const Icon = iconMap[args.type];
const iconNode = Icon ? <Icon /> : ''; const iconNode = Icon ? <Icon /> : '';

13
components/modal/confirm.tsx
View File

@ -6,7 +6,7 @@ import { destroyFns } from './Modal';
import Omit from 'omit.js'; import Omit from 'omit.js';
import ConfigProvider, { globalConfig } from '../config-provider'; import ConfigProvider, { globalConfig } from '../config-provider';
let defaultRootPrefixCls = ''; const defaultRootPrefixCls = '';
function getRootPrefixCls() { function getRootPrefixCls() {
return defaultRootPrefixCls; return defaultRootPrefixCls;
@ -42,7 +42,8 @@ const confirm = (config: ModalFuncProps) => {
} }
function destroy(...args: any[]) { function destroy(...args: any[]) {
if (confirmDialogInstance && div.parentNode) { if (confirmDialogInstance && div.parentNode) {
Object.assign(confirmDialogInstance.component.props, { vIf: false }); // hack destroy // destroy
vueRender(null, div);
confirmDialogInstance.component.update(); confirmDialogInstance.component.update();
confirmDialogInstance = null; confirmDialogInstance = null;
div.parentNode.removeChild(div); div.parentNode.removeChild(div);
@ -59,18 +60,18 @@ const confirm = (config: ModalFuncProps) => {
} }
} }
} }
const Wrapper = (p: ModalFuncProps & { vIf: boolean }) => { const Wrapper = (p: ModalFuncProps) => {
const { getPrefixCls } = globalConfig(); const { getPrefixCls } = globalConfig();
const rootPrefixCls = getPrefixCls(undefined, getRootPrefixCls()); const rootPrefixCls = getPrefixCls(undefined, getRootPrefixCls());
const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`; const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`;
return p.vIf ? ( return (
<ConfigProvider prefixCls={rootPrefixCls}> <ConfigProvider prefixCls={rootPrefixCls}>
<ConfirmDialog {...p} prefixCls={prefixCls}></ConfirmDialog> <ConfirmDialog {...p} prefixCls={prefixCls}></ConfirmDialog>
</ConfigProvider> </ConfigProvider>
) : null; );
}; };
function render(props: ModalFuncProps) { function render(props: ModalFuncProps) {
const vm = createVNode(Wrapper, { ...props, vIf: true }); const vm = createVNode(Wrapper, { ...props });
vm.appContext = config.parentContext || config.appContext || vm.appContext; vm.appContext = config.parentContext || config.appContext || vm.appContext;
vueRender(vm, div); vueRender(vm, div);
return vm; return vm;

2
components/notification/__tests__/index.test.js
View File

@ -11,7 +11,7 @@ describe('notification', () => {
notification.destroy(); notification.destroy();
}); });
it('should be able to hide manually', async () => { fit('should be able to hide manually', async () => {
notification.open({ notification.open({
message: 'Notification Title', message: 'Notification Title',
duration: 0, duration: 0,

111
components/notification/index.tsx
View File

@ -1,10 +1,13 @@
import type { VNodeTypes, CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import Notification from '../vc-notification'; import Notification from '../vc-notification';
import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined'; import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined'; import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined'; import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined'; import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined'; import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import type { VueNode } from '../_util/type';
import { renderHelper } from '../_util/util';
import { globalConfig } from '../config-provider';
export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'; export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
@ -14,21 +17,26 @@ export interface ConfigProps {
top?: string | number; top?: string | number;
bottom?: string | number; bottom?: string | number;
duration?: number; duration?: number;
prefixCls?: string;
placement?: NotificationPlacement; placement?: NotificationPlacement;
getContainer?: () => HTMLElement; getContainer?: () => HTMLElement;
closeIcon?: VNodeTypes; closeIcon?: VueNode | (() => VueNode);
} }
const notificationInstance: { [key: string]: any } = {}; const notificationInstance: { [key: string]: any } = {};
let defaultDuration = 4.5; let defaultDuration = 4.5;
let defaultTop = '24px'; let defaultTop = '24px';
let defaultBottom = '24px'; let defaultBottom = '24px';
let defaultPrefixCls = '';
let defaultPlacement: NotificationPlacement = 'topRight'; let defaultPlacement: NotificationPlacement = 'topRight';
let defaultGetContainer = () => document.body; let defaultGetContainer = () => document.body;
let defaultCloseIcon = null; let defaultCloseIcon = null;
function setNotificationConfig(options: ConfigProps) { function setNotificationConfig(options: ConfigProps) {
const { duration, placement, bottom, top, getContainer, closeIcon } = options; const { duration, placement, bottom, top, getContainer, closeIcon, prefixCls } = options;
if (prefixCls !== undefined) {
defaultPrefixCls = prefixCls;
}
if (duration !== undefined) { if (duration !== undefined) {
defaultDuration = duration; defaultDuration = duration;
} }
@ -88,26 +96,20 @@ function getPlacementStyle(
return style; return style;
} }
type NotificationInstanceProps = {
prefixCls: string;
placement?: NotificationPlacement;
getContainer?: () => HTMLElement;
top?: string;
bottom?: string;
closeIcon?: VNodeTypes;
};
function getNotificationInstance( function getNotificationInstance(
{ {
prefixCls, prefixCls: customizePrefixCls,
placement = defaultPlacement, placement = defaultPlacement,
getContainer = defaultGetContainer, getContainer = defaultGetContainer,
top, top,
bottom, bottom,
closeIcon = defaultCloseIcon, closeIcon = defaultCloseIcon,
}: NotificationInstanceProps, appContext,
}: NotificationArgsProps,
callback: (n: any) => void, callback: (n: any) => void,
) { ) {
const { getPrefixCls } = globalConfig();
const prefixCls = getPrefixCls('notification', customizePrefixCls || defaultPrefixCls);
const cacheKey = `${prefixCls}-${placement}`; const cacheKey = `${prefixCls}-${placement}`;
if (notificationInstance[cacheKey]) { if (notificationInstance[cacheKey]) {
callback(notificationInstance[cacheKey]); callback(notificationInstance[cacheKey]);
@ -115,14 +117,16 @@ function getNotificationInstance(
} }
Notification.newInstance( Notification.newInstance(
{ {
prefixCls, name: 'notification',
prefixCls: customizePrefixCls || defaultPrefixCls,
class: `${prefixCls}-${placement}`, class: `${prefixCls}-${placement}`,
style: getPlacementStyle(placement, top, bottom), style: getPlacementStyle(placement, top, bottom),
appContext,
getContainer, getContainer,
closeIcon: () => { closeIcon: ({ prefixCls }) => {
const closeIconToRender = ( const closeIconToRender = (
<span class={`${prefixCls}-close-x`}> <span class={`${prefixCls}-close-x`}>
{closeIcon || <CloseOutlined class={`${prefixCls}-close-icon`} />} {renderHelper(closeIcon, {}, <CloseOutlined class={`${prefixCls}-close-icon`} />)}
</span> </span>
); );
return closeIconToRender; return closeIconToRender;
@ -143,13 +147,13 @@ const typeToIcon = {
}; };
export interface NotificationArgsProps { export interface NotificationArgsProps {
message: VNodeTypes; message: VueNode | (() => VueNode);
description?: VNodeTypes; description?: VueNode | (() => VueNode);
btn?: VNodeTypes; btn?: VueNode | (() => VueNode);
key?: string; key?: string;
onClose?: () => void; onClose?: () => void;
duration?: number | null; duration?: number | null;
icon?: VNodeTypes; icon?: VueNode | (() => VueNode);
placement?: NotificationPlacement; placement?: NotificationPlacement;
style?: CSSProperties; style?: CSSProperties;
prefixCls?: string; prefixCls?: string;
@ -159,57 +163,46 @@ export interface NotificationArgsProps {
top?: string; top?: string;
bottom?: string; bottom?: string;
getContainer?: () => HTMLElement; getContainer?: () => HTMLElement;
closeIcon?: VNodeTypes; closeIcon?: VueNode | (() => VueNode);
appContext?: any;
} }
function notice(args: NotificationArgsProps) { function notice(args: NotificationArgsProps) {
const { icon, type, description, message, btn } = args; const { icon, type, description, message, btn } = args;
const outerPrefixCls = args.prefixCls || 'ant-notification';
const prefixCls = `${outerPrefixCls}-notice`;
const duration = args.duration === undefined ? defaultDuration : args.duration; const duration = args.duration === undefined ? defaultDuration : args.duration;
getNotificationInstance(args, notification => {
let iconNode = null; notification.notice({
if (icon) { content: ({ prefixCls }) => {
iconNode = () => <span class={`${prefixCls}-icon`}>{icon}</span>; let iconNode = null;
} else if (type) { if (icon) {
const Icon = typeToIcon[type]; iconNode = () => <span class={`${prefixCls}-icon`}>{renderHelper(icon)}</span>;
iconNode = () => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} />; } else if (type) {
} const Icon = typeToIcon[type];
const { placement, top, bottom, getContainer, closeIcon } = args; iconNode = () => <Icon class={`${prefixCls}-icon ${prefixCls}-icon-${type}`} />;
getNotificationInstance( }
{ return (
prefixCls: outerPrefixCls,
placement,
top,
bottom,
getContainer,
closeIcon,
},
notification => {
notification.notice({
content: () => (
<div class={iconNode ? `${prefixCls}-with-icon` : ''}> <div class={iconNode ? `${prefixCls}-with-icon` : ''}>
{iconNode && iconNode()} {iconNode && iconNode()}
<div class={`${prefixCls}-message`}> <div class={`${prefixCls}-message`}>
{!description && iconNode ? ( {!description && iconNode ? (
<span class={`${prefixCls}-message-single-line-auto-margin`} /> <span class={`${prefixCls}-message-single-line-auto-margin`} />
) : null} ) : null}
{message} {renderHelper(message)}
</div> </div>
<div class={`${prefixCls}-description`}>{description}</div> <div class={`${prefixCls}-description`}>{renderHelper(description)}</div>
{btn ? <span class={`${prefixCls}-btn`}>{btn}</span> : null} {btn ? <span class={`${prefixCls}-btn`}>{renderHelper(btn)}</span> : null}
</div> </div>
), );
duration, },
closable: true, duration,
onClose: args.onClose, closable: true,
onClick: args.onClick, onClose: args.onClose,
key: args.key, onClick: args.onClick,
style: args.style || {}, key: args.key,
class: args.class, style: args.style || {},
}); class: args.class,
}, });
); });
} }
const apiBase = { const apiBase = {

8
components/tag/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/tag/demo/basic.vue correctly 1`] = `<div><span class="ant-tag">Tag 1<!----></span><span class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a><!----></span><span class="ant-tag">Tag 2<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close [object Object]-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><span class="ant-tag">Prevent Default<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close [object Object]-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>`; exports[`renders ./components/tag/demo/basic.vue correctly 1`] = `<div><span class="ant-tag">Tag 1<!----></span><span class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a><!----></span><span class="ant-tag">Tag 2<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><span class="ant-tag">Prevent Default<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>`;
exports[`renders ./components/tag/demo/checkable.vue correctly 1`] = `<div><span class="ant-tag ant-tag-checkable">Tag1</span><span class="ant-tag ant-tag-checkable">Tag2</span><span class="ant-tag ant-tag-checkable">Tag3</span></div>`; exports[`renders ./components/tag/demo/checkable.vue correctly 1`] = `<div><span class="ant-tag ant-tag-checkable">Tag1</span><span class="ant-tag ant-tag-checkable">Tag2</span><span class="ant-tag ant-tag-checkable">Tag3</span></div>`;
@ -12,13 +12,13 @@ exports[`renders ./components/tag/demo/colorful.vue correctly 1`] = `
`; `;
exports[`renders ./components/tag/demo/control.vue correctly 1`] = ` exports[`renders ./components/tag/demo/control.vue correctly 1`] = `
<span class="ant-tag">Unremovable<!----></span><span class="ant-tag">Tag 2<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close [object Object]-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span> <span class="ant-tag">Unremovable<!----></span><span class="ant-tag">Tag 2<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span>
<!----><span class="ant-tag">Tag 3Tag 3Tag 3Tag 3...<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close [object Object]-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><span class="ant-tag" style="background: rgb(255, 255, 255); border-style: dashed;"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span> New Tag <!----><span class="ant-tag">Tag 3Tag 3Tag 3Tag 3...<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><span class="ant-tag" style="background: rgb(255, 255, 255); border-style: dashed;"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span> New Tag
<!----></span> <!----></span>
`; `;
exports[`renders ./components/tag/demo/controlled.vue correctly 1`] = ` exports[`renders ./components/tag/demo/controlled.vue correctly 1`] = `
<span class="ant-tag ant-tag-hidden">Movies<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close [object Object]-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><br><button class="ant-btn ant-btn-sm" type="button"> <span class="ant-tag ant-tag-hidden">Movies<span tabindex="-1" role="img" aria-label="close" class="anticon anticon-close ant-tag-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span><br><button class="ant-btn ant-btn-sm" type="button">
<!----><span>Toggle</span> <!----><span>Toggle</span>
</button> </button>
`; `;

38
components/vc-notification/Notification.jsx
View File

@ -1,4 +1,4 @@
import { defineComponent, createVNode, render as vueRender, onMounted, ref, nextTick } from 'vue'; import { defineComponent, createVNode, render as vueRender, onMounted, ref } from 'vue';
import PropTypes from '../_util/vue-types'; import PropTypes from '../_util/vue-types';
import { getComponent } from '../_util/props-util'; import { getComponent } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin'; import BaseMixin from '../_util/BaseMixin';
@ -88,7 +88,7 @@ const Notification = defineComponent({
duration, duration,
closable, closable,
update, update,
closeIcon: getComponent(this, 'closeIcon'), closeIcon: getComponent(this, 'closeIcon', { prefixCls }),
onClose: close, onClose: close,
onClick: notice.onClick || noop, onClick: notice.onClick || noop,
style, style,
@ -124,6 +124,7 @@ const Notification = defineComponent({
Notification.newInstance = function newNotificationInstance(properties, callback) { Notification.newInstance = function newNotificationInstance(properties, callback) {
const { const {
name = 'notification',
getContainer, getContainer,
appContext, appContext,
prefixCls: customizePrefixCls, prefixCls: customizePrefixCls,
@ -137,31 +138,28 @@ Notification.newInstance = function newNotificationInstance(properties, callback
} else { } else {
document.body.appendChild(div); document.body.appendChild(div);
} }
let vm = null;
const Wrapper = defineComponent({ const Wrapper = defineComponent({
setup(_props, { attrs }) { setup(_props, { attrs }) {
const notiRef = ref(); const notiRef = ref();
onMounted(() => { onMounted(() => {
nextTick(() => { callback({
callback({ notice(noticeProps) {
notice(noticeProps) { notiRef.value?.add(noticeProps);
notiRef.value?.add(noticeProps); },
}, removeNotice(key) {
removeNotice(key) { notiRef.value?.remove(key);
notiRef.value?.remove(key); },
}, destroy() {
destroy() { vueRender(null, div);
vm?.unmount(div); if (div.parentNode) {
if (div.parentNode) { div.parentNode.removeChild(div);
div.parentNode.removeChild(div); }
} },
},
});
}); });
}); });
return () => { return () => {
const { getPrefixCls, getRootPrefixCls } = globalConfig(); const { getPrefixCls, getRootPrefixCls } = globalConfig();
const prefixCls = getPrefixCls('message', customizePrefixCls); const prefixCls = getPrefixCls(name, customizePrefixCls);
const rootPrefixCls = getRootPrefixCls(customRootPrefixCls, prefixCls); const rootPrefixCls = getRootPrefixCls(customRootPrefixCls, prefixCls);
return ( return (
<ConfigProvider prefixCls={rootPrefixCls}> <ConfigProvider prefixCls={rootPrefixCls}>
@ -172,7 +170,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback
}, },
}); });
vm = createVNode(Wrapper, props); const vm = createVNode(Wrapper, props);
vm.appContext = appContext || vm.appContext; vm.appContext = appContext || vm.appContext;
vueRender(vm, div); vueRender(vm, div);
}; };