Merge branch 'master' into fix/transform

ant-design · Aug 8, 2023 · c6d86f7 · c6d86f7
2 parents b4b8464 + 481d7a2
commit c6d86f7
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 50 deletions.
diff --git a/packages/field/src/components/Cascader/index.tsx b/packages/field/src/components/Cascader/index.tsx
@@ -121,7 +121,11 @@ const FieldCascader: ProFieldFC<GroupProps> = (
 
     if (renderFormItem) {
       dom =
-        renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) ?? null;
+        renderFormItem(
+          rest.text,
+          { mode, ...rest.fieldProps, options, loading },
+          dom,
+        ) ?? null;
     }
 
     if (light) {

diff --git a/packages/field/src/components/Checkbox/index.tsx b/packages/field/src/components/Checkbox/index.tsx
@@ -128,7 +128,11 @@ const FieldCheckbox: ProFieldFC<GroupProps> = (
     );
     if (renderFormItem) {
       return (
-        renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) ?? null
+        renderFormItem(
+          rest.text,
+          { mode, ...rest.fieldProps, options, loading },
+          dom,
+        ) ?? null
       );
     }
     return dom;

diff --git a/packages/field/src/components/ColorPicker/index.tsx b/packages/field/src/components/ColorPicker/index.tsx
@@ -1,9 +1,9 @@
 import { compareVersions } from '@ant-design/pro-utils';
 import { ConfigProvider, version } from 'antd';
+import classNames from 'classnames';
 import React, { useContext, useMemo } from 'react';
 import type { ProFieldFC } from '../../index';
 import { ColorPicker as ColorPickerV4 } from './old';
-import classNames from 'classnames';
 // https://ant.design/components/color-picker-cn 示例颜色
 const DEFAULT_PRESETS = {
   label: 'Recommended',
@@ -29,25 +29,25 @@ const DEFAULT_PRESETS = {
     '#722ED14D',
     '#EB2F964D',
   ],
-}
+};
 /**
  * 判断是否是 5.5.0 以上的版本
- * @returns 
+ * @returns
  */
 function IsIt_Render_V5() {
-  return compareVersions(version, '5.5.0') > -1
+  return compareVersions(version, '5.5.0') > -1;
 }
 /**
  * 获取颜色组件
  * @param {boolean} [old=false] 是否使用旧版本
- * @return {*} 
+ * @return {*}
  */
 function getColorPicker(old: boolean = false) {
   if ((typeof old === 'undefined' || old === false) && IsIt_Render_V5()) {
     const { ColorPicker } = require('antd');
     return ColorPicker;
   }
-  return ColorPickerV4
+  return ColorPickerV4;
 }
 // const ColorPicker = getColorPicker();
 /**
@@ -61,30 +61,43 @@ const FieldColorPicker: ProFieldFC<{
   text: string;
   /** 是否使用旧版本 */
   old?: boolean;
-}> = ({ text, mode: type, render, renderFormItem, fieldProps, old }, ref: any) => {
+}> = (
+  { text, mode: type, render, renderFormItem, fieldProps, old },
+  ref: any,
+) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const ColorPicker = React.useMemo(() => getColorPicker(old), [old]);
   const prefixCls = getPrefixCls('pro-field-color-picker');
   // 5.5.0 以上版本追加 className
   const className = useMemo(() => {
     if (old) return '';
-    return classNames({ [prefixCls]: IsIt_Render_V5() })
+    return classNames({ [prefixCls]: IsIt_Render_V5() });
   }, [prefixCls, old]);
   if (type === 'read') {
-    const dom = <ColorPicker
-      value={text}
-      mode="read"
-      ref={ref}
-      className={className}
-      // 设置无法 open 
-      open={false} />;
+    const dom = (
+      <ColorPicker
+        value={text}
+        mode="read"
+        ref={ref}
+        className={className}
+        // 设置无法 open
+        open={false}
+      />
+    );
     if (render) {
       return render(text, { mode: type, ...fieldProps }, dom);
     }
     return dom;
   }
   if (type === 'edit' || type === 'update') {
-    const dom = <ColorPicker ref={ref} presets={[DEFAULT_PRESETS]} {...fieldProps} className={className} />;
+    const dom = (
+      <ColorPicker
+        ref={ref}
+        presets={[DEFAULT_PRESETS]}
+        {...fieldProps}
+        className={className}
+      />
+    );
     if (renderFormItem) {
       return renderFormItem(text, { mode: type, ...fieldProps }, dom);
     }

diff --git a/packages/field/src/components/ColorPicker/old.tsx b/packages/field/src/components/ColorPicker/old.tsx
@@ -17,7 +17,7 @@ export const DEFAULT_COLORS = [
   '#667796', // 8 - 黛蓝色
   '#F6BD16', // 9 - 黄色
 ];
-export  const ColorPicker = React.forwardRef(
+export const ColorPicker = React.forwardRef(
   (
     {
       mode,
@@ -118,4 +118,4 @@ export  const ColorPicker = React.forwardRef(
       </Popover>
     );
   },
-);
+);
diff --git a/packages/field/src/components/Radio/index.tsx b/packages/field/src/components/Radio/index.tsx
@@ -108,7 +108,11 @@ const FieldRadio: ProFieldFC<GroupProps> = (
     );
     if (renderFormItem) {
       return (
-        renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) ?? null
+        renderFormItem(
+          rest.text,
+          { mode, ...rest.fieldProps, options, loading },
+          dom,
+        ) ?? null
       );
     }
     return dom;

diff --git a/packages/field/src/components/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx
@@ -72,7 +72,11 @@ const FieldSegmented: ProFieldFC<
     );
 
     if (renderFormItem) {
-      return renderFormItem(rest.text, { mode, ...fieldProps, options }, dom);
+      return renderFormItem(
+        rest.text,
+        { mode, ...fieldProps, options, loading },
+        dom,
+      );
     }
     return dom;
   }

diff --git a/packages/field/src/components/Select/LightSelect/index.tsx b/packages/field/src/components/Select/LightSelect/index.tsx
@@ -162,7 +162,7 @@ const LightSelect: React.ForwardRefRenderFunction<
                 <div style={{ margin: '4px 8px' }}>
                   <Input
                     value={keyword}
-                    allowClear={allowClear}
+                    allowClear={!!allowClear}
                     onChange={(e) => {
                       setKeyword(e.target.value);
                       onSearch?.(e.target.value);
@@ -220,7 +220,7 @@ const LightSelect: React.ForwardRefRenderFunction<
         placeholder={placeholder}
         disabled={disabled}
         bordered={bordered}
-        allowClear={allowClear}
+        allowClear={!!allowClear}
         value={filterValue || value?.label || value}
         onClear={() => {
           onChange?.(undefined, undefined as any);

diff --git a/packages/field/src/components/Select/index.tsx b/packages/field/src/components/Select/index.tsx
@@ -638,7 +638,11 @@ const FieldSelect: ProFieldFC<
     const dom = renderDom();
     if (renderFormItem) {
       return (
-        renderFormItem(rest.text, { mode, ...fieldProps, options }, dom) ?? null
+        renderFormItem(
+          rest.text,
+          { mode, ...fieldProps, options, loading },
+          dom,
+        ) ?? null
       );
     }
     return dom;

diff --git a/packages/field/src/components/TreeSelect/index.tsx b/packages/field/src/components/TreeSelect/index.tsx
@@ -211,8 +211,11 @@ const FieldTreeSelect: ProFieldFC<GroupProps> = (
 
     if (renderFormItem) {
       dom =
-        renderFormItem(rest.text, { mode, ...(fieldProps as any) }, dom) ??
-        null;
+        renderFormItem(
+          rest.text,
+          { mode, ...(fieldProps as any), options, loading },
+          dom,
+        ) ?? null;
     }
 
     if (light) {

diff --git a/packages/table/src/utils/useDragSort.tsx b/packages/table/src/utils/useDragSort.tsx
@@ -17,7 +17,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import type { TableComponents } from 'rc-table/lib/interface';
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useCallback, useContext, useMemo } from 'react';
 
 const SortableItemContextValue = createContext<{
   handle: React.ReactNode;
@@ -124,7 +124,7 @@ export function useDragSort<T>(props: UseDragSortOptions<T>) {
 
   const sensors = useSensors(useSensor(PointerSensor), useSensor(MouseSensor));
 
-  function handleDragEnd(event: DragEndEvent) {
+  const handleDragEnd = useCallback((event: DragEndEvent) => {
     const { active, over } = event;
     if (over?.id?.toString() && active.id !== over?.id) {
       const newData = arrayMove<T>(
@@ -134,7 +134,7 @@ export function useDragSort<T>(props: UseDragSortOptions<T>) {
       );
       onDragSortEnd?.(newData || []);
     }
-  }
+  }, [dataSource, onDragSortEnd])
 
   const DraggableContainer = useRefFunction((p: any) => (
     <SortableContext
@@ -177,19 +177,21 @@ export function useDragSort<T>(props: UseDragSortOptions<T>) {
     };
   }
 
+  const memoDndContext = useMemo(() => (contextProps: any) => {
+    return (
+      <DndContext
+        modifiers={[restrictToVerticalAxis]}
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
+        {contextProps.children}
+      </DndContext>
+    );
+  }, [handleDragEnd, sensors])
+
   return {
-    DndContext: (contextProps: any) => {
-      return (
-        <DndContext
-          modifiers={[restrictToVerticalAxis]}
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragEnd={handleDragEnd}
-        >
-          {contextProps.children}
-        </DndContext>
-      );
-    },
+    DndContext: memoDndContext,
     components,
   };
 }
diff --git a/tests/form/base.test.tsx b/tests/form/base.test.tsx
@@ -860,8 +860,9 @@ describe('ProForm', () => {
                 width="md"
                 name="useMode"
                 label={
-                  <span id="label_text">{`与《${values?.name || ''}》 与 《${values?.name2?.text || ''
-                    }》合同约定生效方式`}</span>
+                  <span id="label_text">{`与《${values?.name || ''}》 与 《${
+                    values?.name2?.text || ''
+                  }》合同约定生效方式`}</span>
                 }
               />
             );
@@ -1461,9 +1462,9 @@ describe('ProForm', () => {
     act(() => {
       fireEvent.mouseDown(
         wrapper.baseElement.querySelectorAll('.ant-select-selector')[
-        wrapper.baseElement.querySelectorAll<HTMLElement>(
-          'span.ant-select-clear',
-        ).length - 1
+          wrapper.baseElement.querySelectorAll<HTMLElement>(
+            'span.ant-select-clear',
+          ).length - 1
         ],
       );
     });
@@ -3116,9 +3117,9 @@ describe('ProForm', () => {
         wrapper.baseElement.querySelectorAll<HTMLElement>(
           'span.ant-select-clear',
         )[
-        wrapper.baseElement.querySelectorAll<HTMLElement>(
-          'span.ant-select-clear',
-        ).length - 1
+          wrapper.baseElement.querySelectorAll<HTMLElement>(
+            'span.ant-select-clear',
+          ).length - 1
         ],
       );
     });