fix(form): fix Cascader and TreeSelect no has light lable error (ant-…

…design#5310)

* fix(form): fix Cascader and TreeSelect no has light lable error

* remove unuse code

* remove unuse code

* merge

* merge

* merge

* merge

* remove unuse code

* fix

packages/field/src/components/Cascader/index.tsx

@@ -1,9 +1,10 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { useIntl } from '@ant-design/pro-provider';
+import { FieldLabel } from '@ant-design/pro-utils';
 import type { RadioGroupProps } from 'antd';
 import { Cascader, ConfigProvider } from 'antd';
 import classNames from 'classnames';
-import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import type { ProFieldFC } from '../../index';
 import type { FieldSelectProps } from '../Select';
 import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
@@ -20,15 +21,16 @@ export type GroupProps = {
  * @param ref
  */
 const FieldCascader: ProFieldFC<GroupProps> = (
-  { radioType, renderFormItem, mode, render, light, ...rest },
+  { radioType, renderFormItem, mode, render, label, light, ...rest },
   ref,
 ) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const layoutClassName = getPrefixCls('pro-field-cascader');
-  const coreStyleClassName = getPrefixCls('pro-core-field-label');
   const [loading, options, fetchData] = useFieldFetchData(rest);
   const intl = useIntl();
   const cascaderRef = useRef();
+  const size = useContext(ConfigProvider.SizeContext);
+  const [open, setOpen] = useState(false);
 
   useImperativeHandle(ref, () => ({
     ...(cascaderRef.current || {}),
@@ -78,22 +80,40 @@ const FieldCascader: ProFieldFC<GroupProps> = (
   }
 
   if (mode === 'edit') {
-    const dom = (
+    let dom = (
       <Cascader
         bordered={!light}
         ref={cascaderRef}
-        suffixIcon={loading ? <LoadingOutlined /> : undefined}
+        open={open}
+        onDropdownVisibleChange={setOpen}
+        suffixIcon={loading ? <LoadingOutlined /> : light ? null : undefined}
         placeholder={intl.getMessage('tableForm.selectPlaceholder', '请选择')}
+        allowClear={light ? false : undefined}
         {...rest.fieldProps}
-        className={classNames(rest.fieldProps?.className, layoutClassName, {
-          [`${coreStyleClassName}-active`]: rest?.fieldProps?.value && light,
-        })}
+        className={classNames(rest.fieldProps?.className, layoutClassName)}
         options={options}
       />
     );
 
     if (renderFormItem) {
-      return renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) || null;
+      dom = renderFormItem(rest.text, { mode, ...rest.fieldProps }, dom) || null;
+    }
+
+    if (light) {
+      const { disabled, allowClear, placeholder } = rest.fieldProps;
+      return (
+        <FieldLabel
+          label={label}
+          disabled={disabled}
+          placeholder={placeholder}
+          size={size}
+          allowClear={allowClear}
+          bordered={rest.bordered}
+          value={dom}
+          onLabelClick={() => setOpen(!open)}
+          onClear={() => rest.fieldProps?.onChange?.(undefined, [], {} as any)}
+        />
+      );
     }
     return dom;
   }

packages/field/src/components/TreeSelect/index.tsx

@@ -1,9 +1,10 @@
+import { FieldLabel } from '@ant-design/pro-utils';
 import type { RadioGroupProps, TreeSelectProps } from 'antd';
 import { ConfigProvider, Spin, TreeSelect } from 'antd';
 import type { DataNode } from 'antd/lib/tree';
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import type { ProFieldFC } from '../../index';
 import type { FieldSelectProps } from '../Select';
 import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
@@ -19,13 +20,13 @@ export type GroupProps = {
  * @param ref
  */
 const FieldTreeSelect: ProFieldFC<GroupProps> = (
-  { radioType, renderFormItem, mode, light, render, ...rest },
+  { radioType, renderFormItem, mode, light, label, render, ...rest },
   ref,
 ) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const layoutClassName = getPrefixCls('pro-field-tree-select');
-  const coreStyleClassName = getPrefixCls('pro-core-field-label');
   const treeSelectRef = useRef(null);
+  const [open, setOpen] = useState(false);
 
   const {
     onSearch,
@@ -38,6 +39,7 @@ const FieldTreeSelect: ProFieldFC<GroupProps> = (
     searchValue: propsSearchValue,
     ...fieldProps
   } = (rest.fieldProps as TreeSelectProps<any>) || {};
+  const size = useContext(ConfigProvider.SizeContext);
 
   const [loading, options, fetchData] = useFieldFetchData({
     ...rest,
@@ -106,9 +108,11 @@ const FieldTreeSelect: ProFieldFC<GroupProps> = (
 
   if (mode === 'edit') {
     const valuesLength = Array.isArray(fieldProps?.value) ? fieldProps?.value?.length : 0;
-    const dom = (
+    let dom = (
       <Spin spinning={loading}>
         <TreeSelect
+          open={open}
+          onDropdownVisibleChange={setOpen}
           ref={treeSelectRef}
           dropdownMatchSelectWidth={!light}
           tagRender={
@@ -156,14 +160,30 @@ const FieldTreeSelect: ProFieldFC<GroupProps> = (
             fetchData('');
             onBlur?.(event);
           }}
-          className={classNames(fieldProps?.className, layoutClassName, {
-            [`${coreStyleClassName}-active`]: fieldProps?.value && light,
-          })}
+          className={classNames(fieldProps?.className, layoutClassName)}
         />
       </Spin>
     );
+
     if (renderFormItem) {
-      return renderFormItem(rest.text, { mode, ...(fieldProps as any) }, dom) || null;
+      dom = renderFormItem(rest.text, { mode, ...(fieldProps as any) }, dom) || null;
+    }
+
+    if (light) {
+      const { disabled, allowClear, placeholder } = fieldProps;
+      return (
+        <FieldLabel
+          label={label}
+          disabled={disabled}
+          placeholder={placeholder}
+          size={size}
+          onLabelClick={() => setOpen(!open)}
+          allowClear={allowClear}
+          bordered={rest.bordered}
+          value={dom}
+          onClear={() => propsOnChange?.(undefined, [], {} as any)}
+        />
+      );
     }
     return dom;
   }

packages/form/src/components/QueryFilter/demos/light-filter-bordered.tsx

@@ -1,12 +1,52 @@
 import { FilterOutlined } from '@ant-design/icons';
 import {
   LightFilter,
+  ProFormCascader,
   ProFormDatePicker,
   ProFormRadio,
   ProFormSelect,
+  ProFormTreeSelect,
 } from '@ant-design/pro-components';
+import { TreeSelect } from 'antd';
 import React from 'react';
 
+const treeData = [
+  {
+    title: 'Node1',
+    value: '0-0',
+    key: '0-0',
+    children: [
+      {
+        title: 'Child Node1',
+        value: '0-0-0',
+        key: '0-0-0',
+      },
+    ],
+  },
+  {
+    title: 'Node2',
+    value: '0-1',
+    key: '0-1',
+    children: [
+      {
+        title: 'Child Node3',
+        value: '0-1-0',
+        key: '0-1-0',
+      },
+      {
+        title: 'Child Node4',
+        value: '0-1-1',
+        key: '0-1-1',
+      },
+      {
+        title: 'Child Node5',
+        value: '0-1-2',
+        key: '0-1-2',
+      },
+    ],
+  },
+];
+
 export default () => {
   return (
     <LightFilter
@@ -49,6 +89,57 @@ export default () => {
         ]}
       />
       <ProFormDatePicker name="time" placeholder="日期" />
+      <ProFormTreeSelect
+        initialValue={['0-0', '0-1']}
+        request={async () => treeData}
+        fieldProps={{
+          fieldNames: {
+            label: 'title',
+          },
+          treeCheckable: true,
+          showCheckedStrategy: TreeSelect.SHOW_PARENT,
+          placeholder: 'Please select',
+        }}
+        name="treeSelect"
+      />
+      <ProFormCascader
+        request={async () => [
+          {
+            value: 'zhejiang',
+            label: '浙江',
+            children: [
+              {
+                value: 'hangzhou',
+                label: '杭州',
+                children: [
+                  {
+                    value: 'xihu',
+                    label: '西湖',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [
+              {
+                value: 'nanjing',
+                label: 'Nanjing',
+                children: [
+                  {
+                    value: 'zhonghuamen',
+                    label: 'Zhong Hua Men',
+                  },
+                ],
+              },
+            ],
+          },
+        ]}
+        name="area"
+        initialValue={['zhejiang', 'hangzhou', 'xihu']}
+      />
     </LightFilter>
   );
 };

packages/form/src/components/QueryFilter/demos/light-filter.tsx

@@ -1,6 +1,7 @@
 import {
   LightFilter,
   ProFormCascader,
+  ProFormCheckbox,
   ProFormDatePicker,
   ProFormDateRangePicker,
   ProFormDateTimePicker,
@@ -126,6 +127,11 @@ export default () => {
             long: '这是一个很长的用来测试溢出的项目',
           }}
         />
+        <ProFormCheckbox.Group
+          name="checkbox-group"
+          label="Checkbox.Group"
+          options={['A', 'B', 'C', 'D', 'E', 'F']}
+        />
         <ProFormTreeSelect
           initialValue={['0-0', '0-1']}
           label="树形下拉选择器"

packages/form/src/layouts/LoginForm/index.tsx

@@ -69,9 +69,6 @@ function LoginForm<T = Record<string, any>>(props: Partial<LoginFormProps<T>>) {
           ...proFormProps.submitter,
           render: (_, dom) => {
             const loginButton = dom.pop();
-            if ((proFormProps?.submitter as any)?.render === undefined) {
-              return loginButton;
-            }
             if (typeof (proFormProps?.submitter as any)?.render === 'function') {
               return (proFormProps?.submitter as any)?.render?.(_, dom);
             }

packages/table/src/Table.tsx

@@ -347,7 +347,9 @@ function TableRender<T extends Record<string, any>, U, ValueType>(
   }
   return (
     <ConfigProvider
-      getPopupContainer={() => (counter.rootDomRef.current || document.body) as any as HTMLElement}
+      getPopupContainer={() => {
+        return (counter.rootDomRef.current || document.body) as any as HTMLElement;
+      }}
     >
       {proTableDom}
     </ConfigProvider>

packages/table/src/utils/cellRenderToFromItem.tsx

@@ -93,10 +93,7 @@ const CellRenderFromItem = <T,>(props: CellRenderFromItemProps<T>) => {
       prefixName ? index : key,
       columnProps?.key ?? columnProps?.dataIndex ?? index,
     );
-
-    if (value.join('-') !== formItemName.join('-')) {
-      setName(value);
-    }
+    if (value.join('-') !== formItemName.join('-')) setName(value);
   }, [
     columnProps?.dataIndex,
     columnProps?.key,
@@ -214,9 +211,7 @@ const CellRenderFromItem = <T,>(props: CellRenderFromItemProps<T>) => {
     props.editableUtils,
   ]);
 
-  if (formItemName.length === 0) {
-    return null;
-  }
+  if (formItemName.length === 0) return null;
 
   if (
     typeof columnProps?.renderFormItem === 'function' ||

packages/utils/src/components/FieldLabel/index.less

@@ -4,7 +4,9 @@
 @pro-core-field-label: ~'@{ant-prefix}-pro-core-field-label';
 
 .@{pro-core-field-label} {
-  display: inline-block;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
   height: 30px;
   padding: 0 4px;
   font-size: @font-size-base;
@@ -30,22 +32,19 @@
   }
 
   &-icon {
-    margin-top: -2px;
-    margin-left: 4px;
+    height: 12px;
     padding: 1px;
     color: fade(@black, 45%);
     font-size: 12px;
     vertical-align: middle;
-
     &.@{pro-core-field-label}-close {
       display: none;
-      margin-top: -4px;
+      height: 14px;
       padding: 3px;
       color: @white;
       font-size: 8px;
       background-color: fade(@black, 25%);
       border-radius: 50%;
-
       &:hover {
         background-color: fade(@black, 45%);
       }