fix(components): fix open props warning

ant-design · Sep 8, 2022 · 77703c8 · 77703c8
1 parent d434b85
commit 77703c8
Show file tree

Hide file tree

Showing 20 changed files with 371 additions and 106 deletions.
diff --git a/packages/field/src/components/TimePicker/index.tsx b/packages/field/src/components/TimePicker/index.tsx
@@ -134,7 +134,7 @@ const FieldTimePicker: ProFieldFC<
 const FieldTimeRangePickerComponents: ProFieldFC<{
   text: string[] | number[];
   format: string;
-}> = ({ text, mode, format, render, renderFormItem, plain, fieldProps }) => {
+}> = ({ text, mode, format, render, renderFormItem, plain, fieldProps }, ref) => {
   const finalFormat = fieldProps?.format || format || 'HH:mm:ss';
   const [startText, endText] = Array.isArray(text) ? text : [];
   const startTextIsNumberOrMoment = dayjs.isDayjs(startText) || typeof startText === 'number';
@@ -149,7 +149,7 @@ const FieldTimeRangePickerComponents: ProFieldFC<{
 
   if (mode === 'read') {
     const dom = (
-      <div>
+      <div ref={ref}>
         <div>{parsedStartText || '-'}</div>
         <div>{parsedEndText || '-'}</div>
       </div>
@@ -165,6 +165,7 @@ const FieldTimeRangePickerComponents: ProFieldFC<{
 
     const dom = (
       <TimePicker.RangePicker
+        ref={ref}
         format={format}
         bordered={plain === undefined ? true : !plain}
         {...fieldProps}

diff --git a/packages/form/src/BaseForm/LightWrapper/index.tsx b/packages/form/src/BaseForm/LightWrapper/index.tsx
@@ -86,9 +86,9 @@ const LightWrapper: React.ForwardRefRenderFunction<any, LightWrapperProps> = (pr
   return wrapSSR(
     <FilterDropdown
       disabled={disabled}
-      onVisibleChange={setOpen}
+      open={open}
+      onOpenChange={setOpen}
       placement={placement}
-      visible={open}
       label={
         <FieldLabel
           ellipsis

diff --git a/packages/form/src/components/ModalForm/demos/modal-form-reset.tsx b/packages/form/src/components/ModalForm/demos/modal-form-reset.tsx
@@ -21,7 +21,7 @@ export default () => {
       <ModalForm
         title="新建表单"
         formRef={restFormRef}
-        visible={modalVisible}
+        open={modalVisible}
         trigger={
           <Button
             type="primary"

diff --git a/packages/form/src/components/ModalForm/demos/visible-on-visible-change.tsx b/packages/form/src/components/ModalForm/demos/visible-on-visible-change.tsx
@@ -37,7 +37,7 @@ export default () => {
       </Space>
       <ModalForm
         title="新建表单"
-        visible={modalVisit}
+        open={modalVisit}
         onFinish={async () => {
           message.success('提交成功');
           return true;
@@ -90,7 +90,7 @@ export default () => {
       <DrawerForm
         onVisibleChange={setDrawerVisit}
         title="新建表单"
-        visible={drawerVisit}
+        open={drawerVisit}
         onFinish={async () => {
           message.success('提交成功');
           return true;

diff --git a/packages/form/src/layouts/DrawerForm/index.tsx b/packages/form/src/layouts/DrawerForm/index.tsx
@@ -1,6 +1,6 @@
-import { useRefFunction } from '@ant-design/pro-utils';
+import { compareVersions, useRefFunction } from '@ant-design/pro-utils';
 import type { DrawerProps, FormProps } from 'antd';
-import { ConfigProvider, Drawer } from 'antd';
+import { ConfigProvider, version, Drawer } from 'antd';
 import merge from 'lodash.merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { noteOnce } from 'rc-util/lib/warning';
@@ -31,19 +31,20 @@ export type DrawerFormProps<T = Record<string, any>> = Omit<FormProps, 'onFinish
     trigger?: JSX.Element;
 
     /**
-     * @name 受控的打开关闭
-     * */
-    visible?: DrawerProps['open'];
+     * @deprecated use onOpenChange replace
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @deprecated use open replace
+     */
+    visible?: boolean;
 
     /** @name 受控的打开关闭 */
     open?: DrawerProps['open'];
 
     /**
      * @name 打开关闭的事件 */
-    onVisibleChange?: (visible: boolean) => void;
-    /**
-     * @name 打开关闭的事件 */
-    afterOpenChange?: (visible: boolean) => void;
+    onOpenChange?: (visible: boolean) => void;
     /**
      * 不支持 'visible'，请使用全局的 visible
      *
@@ -67,8 +68,9 @@ function DrawerForm<T = Record<string, any>>({
   submitTimeout,
   title,
   width,
+  onOpenChange,
   visible: propVisible,
-  open: propOpen,
+  open: propsOpen,
   ...rest
 }: DrawerFormProps<T>) {
   noteOnce(
@@ -81,9 +83,9 @@ function DrawerForm<T = Record<string, any>>({
   const [, forceUpdate] = useState([]);
   const [loading, setLoading] = useState(false);
 
-  const [visible, setVisible] = useMergedState<boolean>(!!propVisible, {
-    value: propOpen || propVisible,
-    onChange: onVisibleChange,
+  const [open, setOpen] = useMergedState<boolean>(!!propVisible, {
+    value: propsOpen || propVisible,
+    onChange: onOpenChange || onVisibleChange,
   });
 
   const footerRef = useRef<HTMLDivElement | null>(null);
@@ -106,11 +108,12 @@ function DrawerForm<T = Record<string, any>>({
   }, [drawerProps?.destroyOnClose, rest.form, rest.formRef]);
 
   useEffect(() => {
-    if (visible && propVisible) {
+    if (open && (propsOpen || propVisible)) {
+      onOpenChange?.(true);
       onVisibleChange?.(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propVisible, visible]);
+  }, [propVisible, open]);
 
   const triggerDom = useMemo(() => {
     if (!trigger) {
@@ -121,11 +124,11 @@ function DrawerForm<T = Record<string, any>>({
       key: 'trigger',
       ...trigger.props,
       onClick: async (e: any) => {
-        setVisible(!visible);
+        setOpen(!open);
         trigger.props?.onClick?.(e);
       },
     });
-  }, [setVisible, trigger, visible]);
+  }, [setOpen, trigger, open]);
 
   const submitterConfig = useMemo(() => {
     if (rest.submitter === false) {
@@ -143,7 +146,7 @@ function DrawerForm<T = Record<string, any>>({
           // 提交表单loading时，不可关闭弹框
           disabled: submitTimeout ? loading : undefined,
           onClick: (e: any) => {
-            setVisible(false);
+            setOpen(false);
             resetFields();
             drawerProps?.onClose?.(e);
           },
@@ -157,7 +160,7 @@ function DrawerForm<T = Record<string, any>>({
     context.locale?.Modal?.cancelText,
     submitTimeout,
     loading,
-    setVisible,
+    setOpen,
     resetFields,
     drawerProps,
   ]);
@@ -184,24 +187,32 @@ function DrawerForm<T = Record<string, any>>({
     const result = await response;
     // 返回真值，关闭弹框
     if (result) {
-      setVisible(false);
+      setOpen(false);
     }
     return result;
   });
 
+  const drawerOpenProps = compareVersions(version, '4.23.0')
+    ? {
+        open: open,
+        onOpenChange: onVisibleChange,
+      }
+    : {
+        visible: open,
+        onVisibleChange: onVisibleChange,
+      };
+
   return (
     <>
       <Drawer
         title={title}
         width={width || 800}
         {...drawerProps}
-        // @ts-expect-error
-        visible={visible}
-        open={visible}
+        {...drawerOpenProps}
         onClose={(e) => {
           // 提交表单loading时，阻止弹框关闭
           if (submitTimeout && loading) return;
-          setVisible(false);
+          setOpen(false);
           drawerProps?.onClose?.(e);
           resetFields();
         }}
@@ -236,7 +247,9 @@ function DrawerForm<T = Record<string, any>>({
             submitter={submitterConfig}
             onFinish={async (values) => {
               const result = await onFinishHandle(values);
-              resetFields();
+              if (result === true) {
+                resetFields();
+              }
               return result;
             }}
             contentRender={contentRender}

diff --git a/packages/form/src/layouts/LightFilter/index.tsx b/packages/form/src/layouts/LightFilter/index.tsx
@@ -160,8 +160,8 @@ const LightFilterContainer: React.FC<{
           <div className={`${lightFilterClassName}-item ${hashId}`} key="more">
             <FilterDropdown
               padding={24}
-              onVisibleChange={setOpen}
-              visible={open}
+              open={open}
+              onOpenChange={setOpen}
               placement={placement}
               label={collapseLabelRender()}
               footerRender={footerRender}

diff --git a/packages/form/src/layouts/ModalForm/index.tsx b/packages/form/src/layouts/ModalForm/index.tsx
@@ -1,4 +1,6 @@
-import type { FormProps, ModalProps } from 'antd';
+import { compareVersions } from '@ant-design/pro-utils';
+import type { FormProps, ModalProps } from 'antd';
+import { version } from 'antd';
 import { ConfigProvider, Modal } from 'antd';
 import merge from 'lodash.merge';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
@@ -29,14 +31,20 @@ export type ModalFormProps<T = Record<string, any>> = Omit<FormProps<T>, 'onFini
     /** @name 用于触发抽屉打开的 dom */
     trigger?: JSX.Element;
 
-    /** @name 受控的打开关闭 */
-    visible?: ModalProps['open'];
     /** @name 受控的打开关闭 */
     open?: ModalProps['open'];
 
-    /** @name 打开关闭的事件 */
+    /**
+     * @deprecated use onOpenChange replace
+     */
     onVisibleChange?: (visible: boolean) => void;
+    /**
+     * @deprecated use open replace
+     */
+    visible?: boolean;
 
+    /** @name 打开关闭的事件 */
+    onOpenChange?: (visible: boolean) => void;
     /**
      * 不支持 'visible'，请使用全局的 visible
      *
@@ -55,6 +63,7 @@ function ModalForm<T = Record<string, any>>({
   children,
   trigger,
   onVisibleChange,
+  onOpenChange,
   modalProps,
   onFinish,
   submitTimeout,
@@ -77,7 +86,7 @@ function ModalForm<T = Record<string, any>>({
 
   const [open, setOpen] = useMergedState<boolean>(!!propVisible, {
     value: propsOpen || propVisible,
-    onChange: onVisibleChange,
+    onChange: onOpenChange || onVisibleChange,
   });
 
   const footerRef = useRef<HTMLDivElement | null>(null);
@@ -100,11 +109,12 @@ function ModalForm<T = Record<string, any>>({
   }, [modalProps?.destroyOnClose, rest.form, rest.formRef]);
 
   useEffect(() => {
-    if (open && propVisible) {
+    if (open && (propsOpen || propVisible)) {
+      onOpenChange?.(true);
       onVisibleChange?.(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propVisible, open]);
+  }, [propVisible, propsOpen, open]);
 
   const triggerDom = useMemo(() => {
     if (!trigger) {
@@ -188,15 +198,21 @@ function ModalForm<T = Record<string, any>>({
     [onFinish, setOpen, submitTimeout],
   );
 
+  const modalOpenProps = compareVersions(version, '4.23.0')
+    ? {
+        open,
+      }
+    : {
+        visible: open,
+      };
+
   return (
     <>
       <Modal
         title={title}
         width={width || 800}
         {...modalProps}
-        // @ts-expect-error
-        visible={open}
-        open={open}
+        {...modalOpenProps}
         onCancel={(e) => {
           // 提交表单loading时，阻止弹框关闭
           if (submitTimeout && loading) return;
@@ -205,6 +221,7 @@ function ModalForm<T = Record<string, any>>({
         }}
         afterClose={() => {
           resetFields();
+          setOpen(false);
           modalProps?.afterClose?.();
         }}
         footer={
@@ -227,7 +244,9 @@ function ModalForm<T = Record<string, any>>({
           submitter={submitterConfig}
           onFinish={async (values) => {
             const result = await onFinishHandle(values);
-            resetFields();
+            if (result === true) {
+              resetFields();
+            }
             return result;
           }}
           contentRender={contentRender}

diff --git a/packages/layout/src/components/AppsLogoComponents/index.tsx b/packages/layout/src/components/AppsLogoComponents/index.tsx
@@ -1,4 +1,5 @@
-import { Popover } from 'antd';
+import { compareVersions } from '@ant-design/pro-utils';
+import { Popover, version } from 'antd';
 import classNames from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { AppsLogo } from './AppsLogo';
@@ -67,6 +68,14 @@ export const AppsLogoComponents: React.FC<{
 
   if (!props?.appList?.length) return null;
 
+  const popoverOpenProps = compareVersions(version, '4.23.0')
+    ? {
+        onOpenChange: setOpen,
+      }
+    : {
+        onVisibleChange: () => setOpen,
+      };
+
   return wrapSSR(
     <>
       <div ref={ref} />
@@ -75,8 +84,7 @@ export const AppsLogoComponents: React.FC<{
         trigger={['click']}
         zIndex={9999}
         arrowPointAtCenter
-        onVisibleChange={setOpen}
-        onOpenChange={setOpen}
+        {...popoverOpenProps}
         overlayClassName={`${baseClassName}-popover ${hashId}`}
         content={popoverContent}
         getPopupContainer={() => ref.current || document.body}