From d38ecce22c63adc5e8e52657fcbbef89e048b621 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 5 Mar 2022 14:13:04 +0800 Subject: [PATCH] feat: modal method add wrapClassName --- .../generatePicker/generateRangePicker.tsx | 5 +- components/menu/src/InlineSubMenuList.tsx | 11 +--- components/message/index.tsx | 5 +- components/modal/ConfirmDialog.tsx | 6 ++- components/modal/Modal.tsx | 3 +- .../__tests__/__snapshots__/demo.test.js.snap | 52 +++++++++++++------ components/modal/demo/async.vue | 7 ++- components/modal/demo/confirm.vue | 24 ++++++++- components/modal/demo/info.vue | 4 +- components/modal/index.en-US.md | 1 + components/modal/index.zh-CN.md | 1 + .../vc-picker/panels/TimePanel/index.tsx | 2 +- 12 files changed, 84 insertions(+), 37 deletions(-) diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index c8c3be3d4..5aacf1ddd 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -17,6 +17,7 @@ import type { PanelMode, RangeValue } from '../../vc-picker/interface'; import type { RangePickerSharedProps } from '../../vc-picker/RangePicker'; import devWarning from '../../vc-util/devWarning'; import { useInjectFormItemContext } from '../../form/FormItemContext'; +import omit from '../../_util/omit'; export default function generateRangePicker( generateConfig: GenerateConfig, @@ -160,7 +161,9 @@ export default function generateRangePicker( additionalOverrideProps = { ...additionalOverrideProps, ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), - ...(picker === 'time' ? getTimeProps({ format, ...restProps, picker }) : {}), + ...(picker === 'time' + ? getTimeProps({ format, ...omit(restProps, ['disabledTime']), picker }) + : {}), }; const pre = prefixCls.value; return ( diff --git a/components/menu/src/InlineSubMenuList.tsx b/components/menu/src/InlineSubMenuList.tsx index 3931d64af..c8a94f546 100644 --- a/components/menu/src/InlineSubMenuList.tsx +++ b/components/menu/src/InlineSubMenuList.tsx @@ -31,12 +31,10 @@ export default defineComponent({ }, { flush: 'post' }, ); - const style = ref({}); - const className = ref(''); const mergedMotion = computed(() => { const m = motion.value || defaultMotions.value?.[fixedMode.value] || defaultMotions.value?.other; - const res = typeof m === 'function' ? m(undefined, style, className) : m; + const res = typeof m === 'function' ? m() : m; return { ...res, appear: props.keyPath.length <= 1 }; }); return () => { @@ -46,12 +44,7 @@ export default defineComponent({ return ( - + {slots.default?.()} diff --git a/components/message/index.tsx b/components/message/index.tsx index 2532250cc..1d7a2f76a 100644 --- a/components/message/index.tsx +++ b/components/message/index.tsx @@ -76,7 +76,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationIn transitionName, hasTransitionName, style: { top: defaultTop }, // 覆盖原来的样式 - getContainer, + getContainer: getContainer || args.getPopupContainer, maxCount, name: 'message', }, @@ -91,7 +91,7 @@ function getMessageInstance(args: MessageArgsProps, callback: (i: NotificationIn ); } -type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'; +export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading'; export interface ThenableArgument { (val: any): void; @@ -115,6 +115,7 @@ export interface MessageArgsProps { type?: NoticeType; prefixCls?: string; rootPrefixCls?: string; + getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; onClose?: () => void; icon?: (() => VueNode) | VueNode; key?: string | number; diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx index 97226393b..7a889a208 100644 --- a/components/modal/ConfirmDialog.tsx +++ b/components/modal/ConfirmDialog.tsx @@ -91,6 +91,7 @@ export default defineComponent({ focusTriggerAfterClose, rootPrefixCls, bodyStyle, + wrapClassName, } = props; const okType = props.okType || 'primary'; const prefixCls = props.prefixCls || 'ant-modal'; @@ -127,7 +128,10 @@ export default defineComponent({ close({ triggerCancel: true }, e)} visible={visible} title="" diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index d38c7129b..5d554a3f2 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -98,6 +98,7 @@ export interface ModalFuncProps { okType?: LegacyButtonType; cancelText?: string | (() => VueNode) | VueNode; icon?: (() => VueNode) | VueNode; + wrapClassName?: String; /* Deprecated */ iconType?: string; mask?: boolean; @@ -108,7 +109,7 @@ export interface ModalFuncProps { maskStyle?: CSSProperties; type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm'; keyboard?: boolean; - getContainer?: string | HTMLElement | getContainerFunc | false; + getContainer?: string | HTMLElement | getContainerFunc | false | null; autoFocusButton?: null | 'ok' | 'cancel'; transitionName?: string; maskTransitionName?: string; diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap index eb9639249..3acc823df 100644 --- a/components/modal/__tests__/__snapshots__/demo.test.js.snap +++ b/components/modal/__tests__/__snapshots__/demo.test.js.snap @@ -25,13 +25,24 @@ exports[`renders ./components/modal/demo/button-props.vue correctly 1`] = ` `; exports[`renders ./components/modal/demo/confirm.vue correctly 1`] = ` -
+
+
+ +
+ +
+ +
+ +
`; exports[`renders ./components/modal/demo/confirm-promise.vue correctly 1`] = ` @@ -63,15 +74,24 @@ exports[`renders ./components/modal/demo/fullscreen.vue correctly 1`] = ` `; exports[`renders ./components/modal/demo/info.vue correctly 1`] = ` -
+
+
+ +
+ +
+ +
+ +
`; exports[`renders ./components/modal/demo/locale.vue correctly 1`] = ` diff --git a/components/modal/demo/async.vue b/components/modal/demo/async.vue index 809ff5e5b..db9f1aea9 100644 --- a/components/modal/demo/async.vue +++ b/components/modal/demo/async.vue @@ -12,8 +12,11 @@ title: ## en-US -Asynchronously close a modal dialog when a user clicked OK button, for example, -you can use this pattern when you submit a form. + +Asynchronously close a modal dialog when the OK button is pressed. + +For example, you can use this pattern when you submit a form. + diff --git a/components/modal/demo/confirm.vue b/components/modal/demo/confirm.vue index 0014391c0..858a26655 100644 --- a/components/modal/demo/confirm.vue +++ b/components/modal/demo/confirm.vue @@ -17,11 +17,12 @@ To use `confirm()` to show a confirmation modal dialog.