fix: 修复元祖无数据不展示问题 (#112)

jd-opensource · Jan 7, 2022 · a67ae0e · a67ae0e
1 parent 2ca6f67
commit a67ae0e
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 70 deletions.
diff --git a/packages/drip-form/src/container/ArrayContainer/index.tsx b/packages/drip-form/src/container/ArrayContainer/index.tsx
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-11 15:25:43
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2022-01-07 11:18:18
+ * @Last Modified time: 2022-01-07 16:54:47
  */
 import React, { useMemo, useState, useEffect, memo } from 'react'
 import cx from 'classnames'
@@ -23,8 +23,14 @@ type ArrayProps = {
   uiProp: {
     // 点击增加按钮文案
     addTitle?: string
-    // 是否为加减模式，默认为加减模式
-    mode?: 'add' | 'normal'
+    //
+    /**
+     * 数组容器模式
+     * add: 数组加减模式  可以点击新增一行数据，根据fiedlData渲染
+     * normal、tuple：元祖模式 不展示索引、不展示新增删除按钮 展示数组中所有表单（normal即将废弃，使用tuple）
+     * fixed：数组非加减模式 不可以点击新增，根据fieldData渲染
+     */
+    mode?: 'add' | 'normal' | 'tuple' | 'fixed'
     serialText?: {
       afterText: string
       beforeText: string
@@ -95,7 +101,7 @@ const ArrayContainer: FC<Props & RenderFnProps & ArrayProps> = ({
       : undefined
 
   const newContainerStyle = useContainerStyle(formMode, containerStyle)
-  // 默认ArrayContainer模式为加减 normal不展示用于元祖
+  // 默认ArrayContainer模式为加减模式
   const {
     mode = 'add',
     addTitle = '添加一行数据',
@@ -108,6 +114,8 @@ const ArrayContainer: FC<Props & RenderFnProps & ArrayProps> = ({
   } = uiProp
   // 是否为add加减模式
   const isAdd = useMemo(() => mode === 'add', [mode])
+  // 是否是元祖模式
+  const isTuple = useMemo(() => ['normal', 'tuple'].includes(mode), [mode])
   const { addItem, deltItem } = useArray({ fieldKey, dispatch, fieldData })
   /**
    * title组件
@@ -186,59 +194,62 @@ const ArrayContainer: FC<Props & RenderFnProps & ArrayProps> = ({
           minWidth: '200px',
         }}
       >
-        {(formMode === 'generator' ? [''] : fieldData).map((item, i, array) => {
-          return (
-            <div
-              key={(arrayKey[fieldKey] && arrayKey[fieldKey][i]) || i}
-              className={cx('array-item--field', {
-                'array-item--field_last-child': isAdd && i === array.length - 1,
-              })}
-            >
-              <div className="array-item--header">
-                {showNo ? (
-                  <div className="array-item--number">
-                    {serialText.beforeText}
-                    {serialText.serialLang === 'CN'
-                      ? number2Chinese(i + 1)
-                      : i + 1}
-                    {serialText.afterText}
-                  </div>
-                ) : (
-                  <div />
-                )}
-                {isAdd && (
-                  <FontAwesomeIcon
-                    icon={faTrashAlt}
-                    onClick={deltItem.bind(this, i)}
-                  />
-                )}
-              </div>
-              <div className="array-item--case">
-                {renderCoreFn({
-                  hasDefault,
-                  uiComponents,
-                  dataSchema,
-                  uiSchema,
-                  errors,
-                  formData,
-                  onQuery,
-                  onValidate,
-                  dispatch,
-                  containerHoc,
-                  containerMap,
-                  parentUiSchemaKey,
-                  parentDataSchemaKey,
-                  parentFormDataKey: fieldKey,
-                  customComponents,
-                  currentArrayKey: i,
-                  get,
-                  getKey,
-                  arrayKey,
+        {(formMode === 'generator' || isTuple ? [''] : fieldData).map(
+          (item, i, array) => {
+            return (
+              <div
+                key={(arrayKey[fieldKey] && arrayKey[fieldKey][i]) || i}
+                className={cx('array-item--field', {
+                  'array-item--field_last-child':
+                    isAdd && i === array.length - 1,
                 })}
+              >
+                <div className="array-item--header">
+                  {showNo ? (
+                    <div className="array-item--number">
+                      {serialText.beforeText}
+                      {serialText.serialLang === 'CN'
+                        ? number2Chinese(i + 1)
+                        : i + 1}
+                      {serialText.afterText}
+                    </div>
+                  ) : (
+                    <div />
+                  )}
+                  {isAdd && (
+                    <FontAwesomeIcon
+                      icon={faTrashAlt}
+                      onClick={deltItem.bind(this, i)}
+                    />
+                  )}
+                </div>
+                <div className="array-item--case">
+                  {renderCoreFn({
+                    hasDefault,
+                    uiComponents,
+                    dataSchema,
+                    uiSchema,
+                    errors,
+                    formData,
+                    onQuery,
+                    onValidate,
+                    dispatch,
+                    containerHoc,
+                    containerMap,
+                    parentUiSchemaKey,
+                    parentDataSchemaKey,
+                    parentFormDataKey: fieldKey,
+                    customComponents,
+                    currentArrayKey: i,
+                    get,
+                    getKey,
+                    arrayKey,
+                  })}
+                </div>
               </div>
-            </div>
-          )
-        })}
+            )
+          }
+        )}
         {isAdd && (
           <div
             className="array-item--add"

diff --git a/packages/drip-form/src/reducers/addField.ts b/packages/drip-form/src/reducers/addField.ts
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-26 15:29:06
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-11-04 17:36:58
+ * @Last Modified time: 2022-01-07 16:46:50
  */
 import { produce } from 'immer'
 import { setDeepProp, parseUnitedSchema } from '@jdfed/utils'
@@ -47,7 +47,7 @@ const addField = ({
     const { uiSchema: addGrandParentUiSchema } = get(grandParentPath)
     // 待添加表单 祖父级元素类型 默认对象类型
     if (addGrandParentUiSchema.type === 'array') {
-      if (addGrandParentUiSchema.mode === 'normal') {
+      if (['normal', 'tuple'].includes(addGrandParentUiSchema.mode)) {
         // 元祖
       } else {
         // 自增数组
@@ -77,7 +77,7 @@ const addField = ({
   // 待添加表单 父级元素类型 默认对象类型
   let addParentType = 'object'
   if (addParentUiSchema.type === 'array') {
-    if (addParentUiSchema.mode === 'normal') {
+    if (['normal', 'tuple'].includes(addParentUiSchema.mode)) {
       // 元祖
       addParentType = 'tuple'
     } else {

diff --git a/packages/drip-form/src/reducers/deleteField.ts b/packages/drip-form/src/reducers/deleteField.ts
@@ -4,7 +4,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-26 19:25:56
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-11-04 17:37:02
+ * @Last Modified time: 2022-01-07 16:47:08
  */
 import { produce, original } from 'immer'
 import { deleteDeepProp, parseUnitedSchema, setDeepProp } from '@jdfed/utils'
@@ -31,7 +31,7 @@ const deleteField = ({
   // 待删除表单 父级元素类型 默认对象类型
   let deleteParentType = 'object'
   if (deleteParentUiSchema.type === 'array') {
-    if (deleteParentUiSchema.mode === 'normal') {
+    if (['normal', 'tuple'].includes(deleteParentUiSchema.mode)) {
       // 元祖
       deleteParentType = 'tuple'
     } else {
@@ -83,7 +83,7 @@ const deleteField = ({
         const { uiSchema: addGrandParentUiSchema } = get(grandParentPath)
         // 待添加表单 祖父级元素类型 默认对象类型
         if (addGrandParentUiSchema.type === 'array') {
-          if (addGrandParentUiSchema.mode === 'normal') {
+          if (['normal', 'tuple'].includes(addGrandParentUiSchema.mode)) {
             grandUiType = 'tuple'
             // 元祖
           } else {

diff --git a/packages/generator/src/fields/common/checkConfig/Number/index.ts b/packages/generator/src/fields/common/checkConfig/Number/index.ts
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-08-16 15:01:23
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-08-17 19:26:34
+ * @Last Modified time: 2022-01-07 16:47:35
  */
 // TODO 添加integer
 const numberDataSchema = {
@@ -56,7 +56,7 @@ const ajvKeywordsSchema = {
     fieldKey: 'range',
     ui: {
       type: 'array',
-      mode: 'normal',
+      mode: 'tuple',
     },
     items: [
       {
@@ -87,7 +87,7 @@ const ajvKeywordsSchema = {
     fieldKey: 'exclusiveRange',
     ui: {
       type: 'array',
-      mode: 'normal',
+      mode: 'tuple',
     },
     items: [
       {

diff --git a/packages/generator/src/fields/container/array.field.ts b/packages/generator/src/fields/container/array.field.ts
@@ -63,7 +63,8 @@ const config: Field = {
           type: 'radio',
           options: [
             { label: '加减模式', value: 'add' },
-            { label: '不可变模式', value: 'normal' },
+            { label: '不可变模式', value: 'fixed' },
+            { label: '元祖模式', value: 'tuple' },
           ],
         },
       },

diff --git a/packages/generator/src/hooks/useAddField.tsx b/packages/generator/src/hooks/useAddField.tsx
@@ -3,7 +3,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-08 10:20:13
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-12-27 16:40:13
+ * @Last Modified time: 2022-01-07 16:52:36
  */
 import { useCallback, useContext } from 'react'
 import { nanoid } from 'nanoid'
@@ -56,7 +56,7 @@ const useAddField = (): AddField => {
       // 拖拽之后是否应该删除拖拽的元素
       let shouldDelete = true
 
-      if (type === 'array' && mode === 'normal') {
+      if (type === 'array' && mode && ['normal', 'tuple'].includes(mode)) {
         type = 'tuple'
       }
       switch (type) {

diff --git a/packages/generator/src/hooks/useCanDrop.tsx b/packages/generator/src/hooks/useCanDrop.tsx
@@ -4,7 +4,7 @@
  * @Author: jiangxiaowei
  * @Date: 2021-10-14 14:35:52
  * @Last Modified by: jiangxiaowei
- * @Last Modified time: 2021-11-03 18:04:36
+ * @Last Modified time: 2022-01-07 16:50:42
  */
 import { useMemo, useContext } from 'react'
 import { useRecoilValue } from 'recoil'
@@ -53,7 +53,7 @@ const useTupleNestObject: CanDrop = ({
 }) => {
   return useMemo(() => {
     return (
-      parentMode !== 'normal' &&
+      parentMode === 'add' &&
       parentType === 'array' &&
       type === 'object' &&
       !hasEmptyEle

diff --git a/packages/utils/src/schemaHandle/types.ts b/packages/utils/src/schemaHandle/types.ts
@@ -56,7 +56,7 @@ type Properties = {
  */
 export type UiSchema = {
   formMode?: 'edit' | 'view' | 'generator'
-  mode: 'add' | 'normal' | 'collapse'
+  mode: 'add' | 'normal' | 'collapse' | 'tuple' | 'fixed'
   theme: Theme
   type: string
   properties: Properties