fix: add ellipsis property to record picker (#527)

* fix: the association fields of table text is overflow

* fix: add m2o ellipsis

* fix: add Kanban ellipsis

* fix: change KanbanV2 to Kanban

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/core/client/src/collection-manager/CollectionField.tsx

@@ -23,7 +23,7 @@ const InternalField: React.FC = (props) => {
     }
   };
   const ctx = useFormBlockContext();
-  
+
   useEffect(() => {
     if (ctx?.field) {
       ctx.field.added = ctx.field.added || new Set();
@@ -46,7 +46,7 @@ const InternalField: React.FC = (props) => {
       field.disabled = true;
     }
     if (fieldSchema['x-read-pretty'] === true) {
-      field.readPretty = true;  
+      field.readPretty = true;
     }
     setRequired();
     // @ts-ignore

packages/core/client/src/collection-manager/interfaces/attachment.ts

@@ -23,7 +23,7 @@ export const attachment: IField = {
     },
   },
   schemaInitialize(schema: ISchema, { block }) {
-    if (['Table', 'KanbanV2'].includes(block)) {
+    if (['Table', 'Kanban'].includes(block)) {
       schema['x-component-props'] = schema['x-component-props'] || {};
       schema['x-component-props']['size'] = 'small';
     }

packages/core/client/src/collection-manager/interfaces/m2m.tsx

@@ -45,7 +45,7 @@ export const m2m: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { readPretty }) {
+  schemaInitialize(schema: ISchema, { readPretty, block }) {
     if (readPretty) {
       schema['properties'] = {
         viewer: cloneDeep(recordPickerViewer),
@@ -55,6 +55,10 @@ export const m2m: IField = {
         selector: cloneDeep(recordPickerSelector),
       };
     }
+    if (['Table', 'Kanban'].includes(block)) {
+      schema['x-component-props'] = schema['x-component-props'] || {};
+      schema['x-component-props']['ellipsis'] = true;
+    }
   },
   initialize: (values: any) => {
     if (values.type === 'belongsToMany') {
@@ -161,7 +165,7 @@ export const m2m: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
@@ -171,9 +175,7 @@ export const m2m: IField = {
             col23: {
               type: 'void',
               'x-component': 'Grid.Col',
-              properties: {
+              properties: {},
-
-              },
             },
           },
         },
@@ -196,7 +198,7 @@ export const m2m: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',

packages/core/client/src/collection-manager/interfaces/m2o.tsx

@@ -44,7 +44,7 @@ export const m2o: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { readPretty }) {
+  schemaInitialize(schema: ISchema, { readPretty, block }) {
     if (readPretty) {
       schema['properties'] = {
         viewer: cloneDeep(recordPickerViewer),
@@ -54,6 +54,10 @@ export const m2o: IField = {
         selector: cloneDeep(recordPickerSelector),
       };
     }
+    if (['Table', 'Kanban'].includes(block)) {
+      schema['x-component-props'] = schema['x-component-props'] || {};
+      schema['x-component-props']['ellipsis'] = true;
+    }
   },
   properties: {
     'uiSchema.title': {
@@ -126,7 +130,7 @@ export const m2o: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',

packages/core/client/src/collection-manager/interfaces/o2m.tsx

@@ -43,7 +43,7 @@ export const o2m: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { field, readPretty }) {
+  schemaInitialize(schema: ISchema, { field, readPretty, block }) {
     const association = `${field.collectionName}.${field.name}`;
     schema['type'] = 'void';
     schema['x-component'] = 'TableField';
@@ -93,6 +93,10 @@ export const o2m: IField = {
     //     selector: cloneDeep(recordPickerSelector),
     //   };
     // }
+    if (['Table', 'Kanban'].includes(block)) {
+      schema['x-component-props'] = schema['x-component-props'] || {};
+      schema['x-component-props']['ellipsis'] = true;
+    }
   },
   properties: {
     'uiSchema.title': {
@@ -178,7 +182,7 @@ export const o2m: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
@@ -194,8 +198,7 @@ export const o2m: IField = {
             col21: {
               type: 'void',
               'x-component': 'Grid.Col',
-              properties: {
+              properties: {},
-              },
             },
             col22: {
               type: 'void',

packages/core/client/src/collection-manager/interfaces/o2o.tsx

@@ -45,7 +45,7 @@ export const o2o: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { readPretty }) {
+  schemaInitialize(schema: ISchema, { readPretty, block }) {
     if (readPretty) {
       schema['properties'] = {
         viewer: cloneDeep(recordPickerViewer),
@@ -55,6 +55,10 @@ export const o2o: IField = {
         selector: cloneDeep(recordPickerSelector),
       };
     }
+    if (['Table', 'Kanban'].includes(block)) {
+      schema['x-component-props'] = schema['x-component-props'] || {};
+      schema['x-component-props']['ellipsis'] = true;
+    }
   },
   properties: {
     'uiSchema.title': {
@@ -139,7 +143,7 @@ export const o2o: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
@@ -213,7 +217,7 @@ export const oho: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { readPretty }) {
+  schemaInitialize(schema: ISchema, { readPretty, block }) {
     if (readPretty) {
       schema['properties'] = {
         viewer: cloneDeep(recordPickerViewer),
@@ -223,6 +227,10 @@ export const oho: IField = {
         selector: cloneDeep(recordPickerSelector),
       };
     }
+    if (['Table', 'Kanban'].includes(block)) {
+      schema['x-component-props'] = schema['x-component-props'] || {};
+      schema['x-component-props']['ellipsis'] = true;
+    }
   },
   properties: {
     'uiSchema.title': {
@@ -307,7 +315,7 @@ export const oho: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',
@@ -380,7 +388,7 @@ export const obo: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { readPretty }) {
+  schemaInitialize(schema: ISchema, { readPretty, block }) {
     if (readPretty) {
       schema['properties'] = {
         viewer: cloneDeep(recordPickerViewer),
@@ -390,6 +398,10 @@ export const obo: IField = {
         selector: cloneDeep(recordPickerSelector),
       };
     }
+    if (['Table', 'Kanban'].includes(block)) {
+      schema['x-component-props'] = schema['x-component-props'] || {};
+      schema['x-component-props']['ellipsis'] = true;
+    }
   },
   properties: {
     'uiSchema.title': {
@@ -462,7 +474,7 @@ export const obo: IField = {
                   required: true,
                   default: '{{ useNewId("f_") }}',
                   description:
-        "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
+                    "{{t('Randomly generated and can be modified. Support letters, numbers and underscores, must start with an letter.')}}",
                   'x-decorator': 'FormItem',
                   'x-component': 'Input',
                   'x-disabled': '{{ !createOnly }}',

packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx

@@ -1,5 +1,5 @@
 import { Popover } from 'antd';
-import React, { CSSProperties, useState } from 'react';
+import React, { CSSProperties, forwardRef, useImperativeHandle, useState } from 'react';
 
 const ellipsisDefaultStyle: CSSProperties = {
   overflow: 'hidden',
@@ -9,9 +9,19 @@ const ellipsisDefaultStyle: CSSProperties = {
   wordBreak: 'break-all',
 };
 
-export const EllipsisWithTooltip = (props) => {
+interface IEllipsisWithTooltipProps {
+  ellipsis: boolean;
+  popoverContent: unknown;
+  children: any;
+}
+export const EllipsisWithTooltip = forwardRef((props: Partial<IEllipsisWithTooltipProps>, ref: any) => {
   const [ellipsis, setEllipsis] = useState(false);
   const [visible, setVisible] = useState(false);
+  useImperativeHandle(ref, () => {
+    return {
+      setPopoverVisible: setVisible,
+    };
+  });
   if (!props.ellipsis) {
     return <>{props.children}</>;
   }
@@ -44,4 +54,4 @@ export const EllipsisWithTooltip = (props) => {
       </div>
     </Popover>
   );
-};
+});

packages/core/client/src/schema-component/antd/kanban/Kanban.Card.Designer.tsx

@@ -58,7 +58,7 @@ export const KanbanCardDesigner = (props: any) => {
   const { refresh } = useDesignable();
   const field = useField();
   const fieldSchema = useFieldSchema();
-  const fields = useFormItemInitializerFields({ readPretty: true, block: 'KanbanV2' });
+  const fields = useFormItemInitializerFields({ readPretty: true, block: 'Kanban' });
   if (!designable) {
     return null;
   }

packages/core/client/src/schema-component/antd/kanban/demos/demo1.tsx

@@ -31,14 +31,14 @@ const schema: ISchema = {
       properties: {
         kanban: {
           type: 'array',
-          'x-component': 'KanbanV2',
+          'x-component': 'Kanban',
           'x-component-props': {
             useProps: '{{ useKanbanBlockProps }}',
           },
           properties: {
             card: {
               type: 'void',
-              'x-component': 'KanbanV2.Card',
+              'x-component': 'Kanban.Card',
               properties: {
                 f_g8j5jvalqh0: {
                   'x-decorator': 'FormItem',

packages/core/client/src/schema-component/antd/kanban/index.md

@@ -5,7 +5,7 @@ group:
   path: /schema-components
 ---
 
-# KanbanV2
+# Kanban
 
 ## 示例
 

packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -1,47 +1,59 @@
 import { Field } from '@formily/core';
 import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
 import { toArr } from '@formily/shared';
-import { Space } from 'antd';
+import React, { useRef, useState } from 'react';
-import React, { useState } from 'react';
 import { BlockAssociationContext, WithoutTableFieldResource } from '../../../block-provider';
 import { CollectionProvider, useCollection } from '../../../collection-manager';
 import { RecordProvider } from '../../../record-provider';
 import { FormProvider } from '../../core';
 import { useCompile } from '../../hooks';
 import { ActionContext } from '../action';
+import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
 import { useFieldNames } from './useFieldNames';
 
+interface IEllipsisWithTooltipRef {
+  setPopoverVisible: (boolean) => void;
+}
 export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
+  const { ellipsis } = props;
   const fieldSchema = useFieldSchema();
   const field = useField<Field>();
   const fieldNames = useFieldNames(props);
   const [visible, setVisible] = useState(false);
+  const [popoverVisible, setPopoverVisible] = useState<boolean>();
   const { getField } = useCollection();
   const collectionField = getField(fieldSchema.name);
   const [record, setRecord] = useState({});
   const compile = useCompile();
+  const ellipsisWithTooltipRef = useRef<IEllipsisWithTooltipRef>();
+  const renderRecords = () =>
+    toArr(field.value).map((record, index, arr) => {
+      return (
+        <>
+          <span>
+            <a
+              onClick={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setVisible(true);
+                setRecord(record);
+                ellipsisWithTooltipRef?.current?.setPopoverVisible(false);
+              }}
+            >
+              {compile(record?.[fieldNames?.label || 'label'])}
+            </a>
+          </span>
+          {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>, </span> : null}
+        </>
+      );
+    });
   return collectionField ? (
     <div>
       <BlockAssociationContext.Provider value={`${collectionField.collectionName}.${collectionField.name}`}>
         <CollectionProvider name={collectionField.target}>
-          <Space size={0} split={<span style={{ marginRight: 4, color: '#aaa' }}>, </span>}>
+          <EllipsisWithTooltip ellipsis={ellipsis} ref={ellipsisWithTooltipRef}>
-            {toArr(field.value).map((record, index) => {
+            {renderRecords()}
-              return (
+          </EllipsisWithTooltip>
-                <span>
-                  <a
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      setVisible(true);
-                      setRecord(record);
-                    }}
-                  >
-                    {compile(record?.[fieldNames?.label || 'label'])}
-                  </a>
-                </span>
-              );
-            })}
-          </Space>
           <ActionContext.Provider value={{ visible, setVisible, openMode: 'drawer' }}>
             <RecordProvider record={record}>
               <WithoutTableFieldResource.Provider value={true}>

packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx

@@ -74,12 +74,12 @@ export const TableColumnDesigner = (props) => {
           };
           columnSchema['x-component-props'] = {
             ...columnSchema['x-component-props'],
-            sorter: v
+            sorter: v,
-          }
+          };
           schema['x-component-props'] = columnSchema['x-component-props'];
           field.componentProps.sorter = v;
           dn.emit('patch', {
-            schema
+            schema,
           });
           dn.refresh();
         }}
@@ -102,7 +102,7 @@ export const TableColumnDesigner = (props) => {
               schema: {
                 'x-uid': fieldSchema['x-uid'],
                 'x-component-props': {
-                  fieldNames,
+                  ...fieldSchema['x-component-props'],
                 },
               },
             });
@@ -117,7 +117,7 @@ export const TableColumnDesigner = (props) => {
           'x-component': 'Grid',
         }}
         confirm={{
-          title: t('Delete table column')
+          title: t('Delete table column'),
         }}
       />
     </GeneralSchemaDesigner>

packages/core/client/src/schema-initializer/utils.ts

@@ -1,7 +1,7 @@
 import { ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
 import { useTranslation } from 'react-i18next';
-import { SchemaInitializerItemOptions, useTableBlockContext } from '../';
+import { SchemaInitializerItemOptions } from '../';
 import { useCollection, useCollectionManager } from '../collection-manager';
 import { useDesignable } from '../schema-component';
 import { useSchemaTemplateManager } from '../schema-templates';
@@ -757,7 +757,7 @@ export const createKanbanBlockSchema = (options) => {
       },
       ...others,
     },
-    'x-designer': 'KanbanV2.Designer',
+    'x-designer': 'Kanban.Designer',
     'x-component': 'CardItem',
     properties: {
       actions: {
@@ -773,7 +773,7 @@ export const createKanbanBlockSchema = (options) => {
       },
       [uid()]: {
         type: 'array',
-        'x-component': 'KanbanV2',
+        'x-component': 'Kanban',
         'x-component-props': {
           useProps: '{{ useKanbanBlockProps }}',
         },
@@ -782,8 +782,8 @@ export const createKanbanBlockSchema = (options) => {
             type: 'void',
             'x-read-pretty': true,
             'x-decorator': 'BlockItem',
-            'x-component': 'KanbanV2.Card',
+            'x-component': 'Kanban.Card',
-            'x-designer': 'KanbanV2.Card.Designer',
+            'x-designer': 'Kanban.Card.Designer',
             properties: {
               grid: {
                 type: 'void',
@@ -796,7 +796,7 @@ export const createKanbanBlockSchema = (options) => {
             type: 'void',
             title: '{{ t("View") }}',
             'x-designer': 'Action.Designer',
-            'x-component': 'KanbanV2.CardViewer',
+            'x-component': 'Kanban.CardViewer',
             'x-component-props': {
               openMode: 'drawer',
             },