Dev/v3.0 (#8883)

* feat: add valueType map for table * fix: test case * feat: add await for test * feat: table继承外部的valueTypeMap设置 * fix: test * fix: 快照修复 * fix: descriptions test * fix: field test * fix: layout test * fix: fieldSet test * fix: formList test * feat: update snap * feat: update snap & schemaForm fix * feat: change to jsdom fix test --------- Co-authored-by: liquanwei.lqw <[email protected]>
ant-design · Nov 26, 2024 · c512055 · c512055
1 parent fa96660
commit c512055
Show file tree

Hide file tree

Showing 21 changed files with 628 additions and 419 deletions.
diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx
@@ -28,8 +28,9 @@ import type { RequestData } from './useFetchData';
 import useFetchData from './useFetchData';
 
 import type { ProFieldFCMode } from '@ant-design/pro-provider';
-import { proTheme } from '@ant-design/pro-provider';
+import ProConfigContext, { ProConfigProvider, proTheme } from '@ant-design/pro-provider';
 import type { DescriptionsItemType } from 'antd/es/descriptions';
+import ValueTypeToComponent from '../../field/src/ValueTypeToComponent';
 
 // todo remove it
 export interface DescriptionsItemProps {
@@ -496,6 +497,7 @@ const ProDescriptions = <
     ...rest
   } = props;
 
+  const proContext = useContext(ProConfigContext);
   const context = useContext(ConfigProvider.ConfigContext);
 
   const action = useFetchData<RequestData>(
@@ -616,35 +618,37 @@ const ProDescriptions = <
   const className = context.getPrefixCls('pro-descriptions');
   return (
     <ErrorBoundary>
-      <FormComponent
-        key="form"
-        form={props.editable?.form}
-        component={false}
-        submitter={false}
-        {...formProps}
-        onFinish={undefined}
-      >
-        <Descriptions
-          className={className}
-          {...rest}
-          contentStyle={{
-            minWidth: 0,
-            ...(contentStyle || {}),
-          }}
-          extra={
-            rest.extra ? (
-              <Space>
-                {options}
-                {rest.extra}
-              </Space>
-            ) : (
-              options
-            )
-          }
-          title={title}
-          items={children as DescriptionsItemType[]}
-        />
-      </FormComponent>
+      <ProConfigProvider valueTypeMap={{...proContext.valueTypeMap, ...ValueTypeToComponent}}>
+        <FormComponent
+          key="form"
+          form={props.editable?.form}
+          component={false}
+          submitter={false}
+          {...formProps}
+          onFinish={undefined}
+        >
+          <Descriptions
+            className={className}
+            {...rest}
+            contentStyle={{
+              minWidth: 0,
+              ...(contentStyle || {}),
+            }}
+            extra={
+              rest.extra ? (
+                <Space>
+                  {options}
+                  {rest.extra}
+                </Space>
+              ) : (
+                options
+              )
+            }
+            title={title}
+            items={children as DescriptionsItemType[]}
+          />
+        </FormComponent>
+      </ProConfigProvider>
     </ErrorBoundary>
   );
 };

diff --git a/packages/field/src/ValueTypeToComponent.tsx b/packages/field/src/ValueTypeToComponent.tsx
@@ -52,15 +52,15 @@ const ValueTypeToComponentMap: Record<string, ProRenderFieldPropsType> = {
       {...props}
       text={text}
       fieldProps={{
-        status: props.status ? props.status : undefined,
+        ...props?.status && {status: props.status},
         ...pickProProps(props.fieldProps),
       }}
     />,
     formItemRender: (text, props) => <FieldProgress
       {...props}
       text={text}
       fieldProps={{
-        status: props.status ? props.status : undefined,
+        ...props?.status && {status: props.status},
         ...pickProProps(props.fieldProps),
       }}
     />,

diff --git a/packages/form/src/components/Rate/index.tsx b/packages/form/src/components/Rate/index.tsx
@@ -2,6 +2,8 @@ import type { RateProps } from 'antd';
 import React from 'react';
 import type { ProFormFieldItemProps } from '../../typing';
 import ProField from '../Field';
+import { ProConfigProvider } from '@ant-design/pro-provider';
+import { FieldRate } from '@ant-design/pro-field';
 /**
  * 评分组件
  *
@@ -12,16 +14,25 @@ const ProFormRate: React.ForwardRefRenderFunction<
   ProFormFieldItemProps<RateProps>
 > = ({ fieldProps, proFieldProps, ...rest }, ref) => {
   return (
-    <ProField
-      valueType="rate"
-      fieldProps={fieldProps}
-      ref={ref}
-      proFieldProps={proFieldProps}
-      filedConfig={{
-        ignoreWidth: true,
+    <ProConfigProvider
+      valueTypeMap={{
+        rate: {
+          render: (text, props) => <FieldRate {...props} text={text} />,
+          formItemRender: (text, props) => <FieldRate {...props} text={text} />,
+        },
       }}
-      {...rest}
-    />
+    >
+      <ProField
+        valueType="rate"
+        fieldProps={fieldProps}
+        ref={ref}
+        proFieldProps={proFieldProps}
+        filedConfig={{
+          ignoreWidth: true,
+        }}
+        {...rest}
+      />
+    </ProConfigProvider>
   );
 };
 

diff --git a/packages/form/src/components/SchemaForm/index.tsx b/packages/form/src/components/SchemaForm/index.tsx
@@ -12,6 +12,7 @@ import type { FormProps } from 'antd';
 import { Form } from 'antd';
 import React, {
   useCallback,
+  useContext,
   useImperativeHandle,
   useRef,
   useState,
@@ -32,6 +33,8 @@ import type {
   ProFormRenderValueTypeHelpers,
 } from './typing';
 import { renderValueType } from './valueType';
+import ProConfigContext, { ProConfigProvider } from '@ant-design/pro-provider';
+import ValueTypeToComponent from '../../../../field/src/ValueTypeToComponent';
 
 export * from './typing';
 
@@ -217,24 +220,28 @@ function BetaSchemaForm<T, ValueType = 'text'>(
     [formRef.current],
   );
 
+  const context = useContext(ProConfigContext);
+
   return (
-    <FormRenderComponents
-      {...specificProps}
-      {...restProps}
-      onInit={(_, initForm) => {
-        if (propsFormRef) {
-          (propsFormRef as React.MutableRefObject<ProFormInstance<T>>).current =
-            initForm;
-        }
-        restProps?.onInit?.(_, initForm);
-        formRef.current = initForm;
-      }}
-      form={props.form || form}
-      formRef={formRef}
-      onValuesChange={onValuesChange}
-    >
-      {formChildrenDoms}
-    </FormRenderComponents>
+    <ProConfigProvider valueTypeMap={{...context.valueTypeMap, ...ValueTypeToComponent}}>
+      <FormRenderComponents
+        {...specificProps}
+        {...restProps}
+        onInit={(_, initForm) => {
+          if (propsFormRef) {
+            (propsFormRef as React.MutableRefObject<ProFormInstance<T>>).current =
+              initForm;
+          }
+          restProps?.onInit?.(_, initForm);
+          formRef.current = initForm;
+        }}
+        form={props.form || form}
+        formRef={formRef}
+        onValuesChange={onValuesChange}
+      >
+        {formChildrenDoms}
+      </FormRenderComponents>
+    </ProConfigProvider>
   );
 }
 

diff --git a/tests/descriptions/__snapshots__/index.test.tsx.snap b/tests/descriptions/__snapshots__/index.test.tsx.snap
@@ -49,7 +49,34 @@ exports[`descriptions > 🏊 ProDescriptions support order 1`] = `
                   class="ant-descriptions-item-content"
                   style="min-width: 0;"
                 >
-                  40
+                  <div
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="40"
+                    class="ant-progress ant-progress-status-active ant-progress-line ant-progress-line-align-end ant-progress-line-position-outer ant-progress-show-info ant-progress-small"
+                    role="progressbar"
+                    style="min-width: 100px; max-width: 320px;"
+                  >
+                    <div
+                      class="ant-progress-outer"
+                      style="width: 100%;"
+                    >
+                      <div
+                        class="ant-progress-inner"
+                      >
+                        <div
+                          class="ant-progress-bg ant-progress-bg-outer"
+                          style="width: 40%; height: 6px; --progress-percent: 0.4;"
+                        />
+                      </div>
+                      <span
+                        class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+                        title="40%"
+                      >
+                        40%
+                      </span>
+                    </div>
+                  </div>
                 </span>
               </div>
             </td>
@@ -69,7 +96,51 @@ exports[`descriptions > 🏊 ProDescriptions support order 1`] = `
                   class="ant-descriptions-item-content"
                   style="min-width: 0;"
                 >
-                  100
+                  <div
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="100"
+                    class="ant-progress ant-progress-status-success ant-progress-line ant-progress-line-align-end ant-progress-line-position-outer ant-progress-show-info ant-progress-small"
+                    role="progressbar"
+                    style="min-width: 100px; max-width: 320px;"
+                  >
+                    <div
+                      class="ant-progress-outer"
+                      style="width: 100%;"
+                    >
+                      <div
+                        class="ant-progress-inner"
+                      >
+                        <div
+                          class="ant-progress-bg ant-progress-bg-outer"
+                          style="width: 100%; height: 6px; --progress-percent: 1;"
+                        />
+                      </div>
+                      <span
+                        class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+                      >
+                        <span
+                          aria-label="check-circle"
+                          class="anticon anticon-check-circle"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="check-circle"
+                            fill="currentColor"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <path
+                              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </div>
+                  </div>
                 </span>
               </div>
             </td>
@@ -93,7 +164,52 @@ exports[`descriptions > 🏊 ProDescriptions support order 1`] = `
                   class="ant-descriptions-item-content"
                   style="min-width: 0;"
                 >
-                  -1
+                  <div
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    aria-valuenow="-1"
+                    class="ant-progress ant-progress-status-exception ant-progress-line ant-progress-line-align-end ant-progress-line-position-outer ant-progress-show-info ant-progress-small"
+                    role="progressbar"
+                    style="min-width: 100px; max-width: 320px;"
+                  >
+                    <div
+                      class="ant-progress-outer"
+                      style="width: 100%;"
+                    >
+                      <div
+                        class="ant-progress-inner"
+                      >
+                        <div
+                          class="ant-progress-bg ant-progress-bg-outer"
+                          style="width: 0%; height: 6px; --progress-percent: 0;"
+                        />
+                      </div>
+                      <span
+                        class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
+                      >
+                        <span
+                          aria-label="close-circle"
+                          class="anticon anticon-close-circle"
+                          role="img"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-icon="close-circle"
+                            fill="currentColor"
+                            fill-rule="evenodd"
+                            focusable="false"
+                            height="1em"
+                            viewBox="64 64 896 896"
+                            width="1em"
+                          >
+                            <path
+                              d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+                            />
+                          </svg>
+                        </span>
+                      </span>
+                    </div>
+                  </div>
                 </span>
               </div>
             </td>