chore(antd/next): improve array table ui (#2373)

alibaba · Nov 1, 2021 · 831ba8b · 831ba8b
1 parent fee4af0
commit 831ba8b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 15 deletions.
diff --git a/packages/antd/src/array-table/index.tsx b/packages/antd/src/array-table/index.tsx
@@ -13,7 +13,7 @@ import {
   useFieldSchema,
   RecursionField,
 } from '@formily/react'
-import { FormPath, isArr, isBool } from '@formily/shared'
+import { isArr, isBool } from '@formily/shared'
 import { Schema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
 import { ArrayBase, ArrayBaseMixins } from '../array-base'
@@ -149,15 +149,20 @@ const StatusSelect: React.FC<IStatusSelectProps> = observer((props) => {
     type: 'error',
     address: `${field.address}.*`,
   })
-  const createIndexPattern = (page: number) => {
-    const pattern = `${field.address}.*[${(page - 1) * props.pageSize}:${
-      page * props.pageSize
-    }].*`
-    return FormPath.parse(pattern)
+  const parseIndex = (address: string) => {
+    return Number(
+      address
+        .slice(address.indexOf(field.address.toString()) + 1)
+        .match(/(\d+)/)?.[1]
+    )
   }
+
   const options = props.options?.map(({ label, value }) => {
     const hasError = errors.some(({ address }) => {
-      return createIndexPattern(value).match(address)
+      const currentIndex = parseIndex(address)
+      const startIndex = (value - 1) * props.pageSize
+      const endIndex = value * props.pageSize
+      return currentIndex >= startIndex && currentIndex <= endIndex
     })
     return {
       label: hasError ? <Badge dot>{label}</Badge> : label,

diff --git a/packages/antd/src/array-table/style.less b/packages/antd/src/array-table/style.less
@@ -32,6 +32,9 @@
           z-index: 1;
           border-radius: 3px;
           box-shadow: 0 0 10px #eee;
+          animation: none;
+          transform: translateY(0);
+          opacity: 1;
         }
       }
     }

diff --git a/packages/next/src/array-table/index.tsx b/packages/next/src/array-table/index.tsx
@@ -12,7 +12,7 @@ import {
   useFieldSchema,
   RecursionField,
 } from '@formily/react'
-import { FormPath, isArr, isBool } from '@formily/shared'
+import { isArr, isBool } from '@formily/shared'
 import { Schema } from '@formily/json-schema'
 import { usePrefixCls } from '../__builtins__'
 import { ArrayBase, ArrayBaseMixins } from '../array-base'
@@ -149,15 +149,19 @@ const StatusSelect: React.FC<IStatusSelectProps> = observer(
       type: 'error',
       address: `${field.address}.*`,
     })
-    const createIndexPattern = (page: number) => {
-      const pattern = `${field.address}.*[${(page - 1) * pageSize}:${
-        page * pageSize
-      }].*`
-      return FormPath.parse(pattern)
+    const parseIndex = (address: string) => {
+      return Number(
+        address
+          .slice(address.indexOf(field.address.toString()) + 1)
+          .match(/(\d+)/)?.[1]
+      )
     }
     const options = props.dataSource?.map(({ label, value }) => {
       const hasError = errors.some(({ address }) => {
-        return createIndexPattern(value).match(address)
+        const currentIndex = parseIndex(address)
+        const startIndex = (value - 1) * pageSize
+        const endIndex = value * pageSize
+        return currentIndex >= startIndex && currentIndex <= endIndex
       })
       return {
         label: hasError ? <Badge dot>{label}</Badge> : label,

diff --git a/packages/next/src/array-table/main.scss b/packages/next/src/array-table/main.scss
@@ -53,7 +53,8 @@ $array-table-prefix-cls: '#{$css-prefix}formily-array-table';
           color: #fff;
           padding: 6px 8px;
           margin-top: 6px;
-
+          transform: translateY(0);
+          opacity: 1;
           &:after {
             content: ' ';
             background: $form-error-color;