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>
2024-11-15 13:26:44 +00:00 · 2022-06-23 22:23:45 +08:00 · 2022-06-23 22:23:45 +08:00 · 33a08288c0
commit 33a08288c0
parent e65ed6dfa1
13 changed files with 102 additions and 59 deletions
--- a/packages/core/client/src/collection-manager/CollectionField.tsx
+++ b/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
--- a/packages/core/client/src/collection-manager/interfaces/attachment.ts
+++ b/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';
    }
--- a/packages/core/client/src/collection-manager/interfaces/m2m.tsx
+++ b/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 }}',
--- a/packages/core/client/src/collection-manager/interfaces/m2o.tsx
+++ b/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 }}',
--- a/packages/core/client/src/collection-manager/interfaces/o2m.tsx
+++ b/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',
--- a/packages/core/client/src/collection-manager/interfaces/o2o.tsx
+++ b/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 }}',
--- a/packages/core/client/src/schema-component/antd/input/EllipsisWithTooltip.tsx
+++ b/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>
  );
-};
+});
--- a/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.Designer.tsx
+++ b/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;
  }
--- a/packages/core/client/src/schema-component/antd/kanban/demos/demo1.tsx
+++ b/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',
--- a/packages/core/client/src/schema-component/antd/kanban/index.md
+++ b/packages/core/client/src/schema-component/antd/kanban/index.md
@ -5,7 +5,7 @@ group:
  path: /schema-components
 ---

-# KanbanV2
+# Kanban

 ## 示例

--- a/packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx
+++ b/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, { useState } from 'react';
+import React, { useRef, 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>}>
-            {toArr(field.value).map((record, index) => {
-              return (
-                <span>
-                  <a
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                      setVisible(true);
-                      setRecord(record);
-                    }}
-                  >
-                    {compile(record?.[fieldNames?.label || 'label'])}
-                  </a>
-                </span>
-              );
-            })}
-          </Space>
+          <EllipsisWithTooltip ellipsis={ellipsis} ref={ellipsisWithTooltipRef}>
+            {renderRecords()}
+          </EllipsisWithTooltip>
          <ActionContext.Provider value={{ visible, setVisible, openMode: 'drawer' }}>
            <RecordProvider record={record}>
              <WithoutTableFieldResource.Provider value={true}>
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.Column.Designer.tsx
+++ b/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>
--- a/packages/core/client/src/schema-initializer/utils.ts
+++ b/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-designer': 'KanbanV2.Card.Designer',
+            'x-component': 'Kanban.Card',
+            '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',
            },