feat(Kanban): the card support open mode (#1601)

2023-03-29 16:45:21 +08:00 · 2023-03-29 16:45:21 +08:00 · bb9b72e0d7
commit bb9b72e0d7
parent 22498d8fc6
7 changed files with 102 additions and 64 deletions
--- a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx
@ -8,6 +8,7 @@ import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings'
 import { useCollection, useCollectionManager } from '../../../collection-manager';
 import { useRecord } from '../../../record-provider';
 import { useFormBlockContext } from '../../../block-provider/FormBlockProvider';
+import { OpenModeSchemaItems } from '../../../schema-items';

 import { requestSettingsSchema } from './utils';

@ -139,62 +140,7 @@ export const ActionDesigner = (props) => {
          }}
        />
        {isLinkageAction && <SchemaSettings.LinkageRules collectionName={name} />}
-        {isPopupAction && (
-          <SchemaSettings.SelectItem
-            title={t('Open mode')}
-            options={[
-              { label: t('Drawer'), value: 'drawer' },
-              { label: t('Dialog'), value: 'modal' },
-            ]}
-            value={fieldSchema?.['x-component-props']?.['openMode']}
-            onChange={(value) => {
-              field.componentProps.openMode = value;
-              fieldSchema['x-component-props']['openMode'] = value;
-
-              // when openMode change, set openSize value to default
-              delete fieldSchema['x-component-props']['openSize'];
-
-              dn.emit('patch', {
-                schema: {
-                  'x-uid': fieldSchema['x-uid'],
-                  'x-component-props': fieldSchema['x-component-props'],
-                },
-              });
-              dn.refresh();
-            }}
-          />
-        )}
-        {isPopupAction && ['modal', 'drawer'].includes(fieldSchema?.['x-component-props']?.['openMode']) && (
-          <SchemaSettings.Item>
-            <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
-              {t('Popup size')}
-              <Select
-                bordered={false}
-                options={[
-                  { label: t('Small'), value: 'small' },
-                  { label: t('Middle'), value: 'middle' },
-                  { label: t('Large'), value: 'large' },
-                ]}
-                value={
-                  fieldSchema?.['x-component-props']?.['openSize'] ??
-                  (fieldSchema?.['x-component-props']?.['openMode'] == 'modal' ? 'large' : 'middle')
-                }
-                onChange={(value) => {
-                  field.componentProps.openSize = value;
-                  fieldSchema['x-component-props']['openSize'] = value;
-                  dn.emit('patch', {
-                    schema: {
-                      'x-uid': fieldSchema['x-uid'],
-                      'x-component-props': fieldSchema['x-component-props'],
-                    },
-                  });
-                  dn.refresh();
-                }}
-                style={{ textAlign: 'right', minWidth: 100 }}
-              />
-            </div>
-          </SchemaSettings.Item>
-        )}
+        <OpenModeSchemaItems openMode={isPopupAction} openSize={isPopupAction}></OpenModeSchemaItems>
        {isUpdateModePopupAction && (
          <SchemaSettings.SelectItem
            title={t('Data will be updated')}
--- 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
@ -12,6 +12,7 @@ import {
  useAssociatedFormItemInitializerFields,
  useFormItemInitializerFields,
 } from '../../../schema-initializer/utils';
+import { OpenModeSchemaItems } from '../../../schema-items';

 const titleCss = css`
  pointer-events: none;
@ -97,6 +98,10 @@ export const KanbanCardDesigner = (props: any) => {
      component: 'Kanban.Card.Designer.TitleSwitch',
      enable: true,
    } as SchemaInitializerItemOptions,
+    {
+      type: 'item',
+      component: OpenModeSchemaItems,
+    } as SchemaInitializerItemOptions,
  );

  if (!designable) {
--- a/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx
+++ b/packages/core/client/src/schema-component/antd/kanban/Kanban.Card.tsx
@ -4,16 +4,12 @@ import { observer, RecursionField, useFieldSchema } from '@formily/react';
 import { Card } from 'antd';
 import React, { useContext, useState } from 'react';
 import cls from 'classnames';
-import { ActionContext, BlockItem } from '..';
+import { ActionContext } from '..';
 import { DndContext } from '../..';
 import { RecordProvider } from '../../../record-provider';
 import { SchemaComponentOptions } from '../../core/SchemaComponentOptions';
 import { KanbanCardContext } from './context';

-const FormItem = observer((props) => {
-  return <BlockItem {...props} />;
-});
-
 export const KanbanCard: any = observer((props: any) => {
  const { setDisableCardDrag, cardViewerSchema, card, cardField, columnIndex, cardIndex } =
    useContext(KanbanCardContext);
@ -89,7 +85,14 @@ export const KanbanCard: any = observer((props: any) => {
        </DndContext>
      </Card>
      {cardViewerSchema && (
-        <ActionContext.Provider value={{ openMode: 'drawer', visible, setVisible }}>
+        <ActionContext.Provider
+          value={{
+            openMode: fieldSchema['x-component-props']?.['openMode'] || 'drawer',
+            openSize: fieldSchema['x-component-props']?.['openSize'],
+            visible,
+            setVisible,
+          }}
+        >
          <RecordProvider record={card}>
            <RecursionField
              basePath={cardField.address.concat(`${columnIndex}.cardViewer.${cardIndex}`)}
--- a/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
+++ b/packages/core/client/src/schema-initializer/SchemaInitializer.tsx
@ -10,7 +10,7 @@ import {
  SchemaInitializerButtonProps,
  SchemaInitializerItemComponent,
  SchemaInitializerItemOptions,
-  SchemaInitializerItemProps
+  SchemaInitializerItemProps,
 } from './types';

 const defaultWrap = (s: ISchema) => s;
@ -56,7 +56,7 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
          return <Menu.Divider key={item.key || `item-${indexA}`} />;
        }
        if (item.type === 'item' && item.component) {
-          const Component = findComponent(item.component);
+          const Component = typeof item.component === 'string' ? findComponent(item.component) : item.component;
          item.key = `${item.key || item.title}-${indexA}`;
          return (
            Component && (
--- a/packages/core/client/src/schema-initializer/utils.ts
+++ b/packages/core/client/src/schema-initializer/utils.ts
@ -1339,6 +1339,9 @@ export const createKanbanBlockSchema = (options) => {
            'x-label-disabled': true,
            'x-decorator': 'BlockItem',
            'x-component': 'Kanban.Card',
+            'x-component-props': {
+              openMode: 'drawer',
+            },
            'x-designer': 'Kanban.Card.Designer',
            properties: {
              grid: {
@ -1353,6 +1356,7 @@ export const createKanbanBlockSchema = (options) => {
            title: '{{ t("View") }}',
            'x-designer': 'Action.Designer',
            'x-component': 'Kanban.CardViewer',
+            'x-action': 'view',
            'x-component-props': {
              openMode: 'drawer',
            },
--- a/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
+++ b/packages/core/client/src/schema-items/OpenModeSchemaItems.tsx
@ -0,0 +1,79 @@
+import React from 'react';
+import { useField, useFieldSchema } from '@formily/react';
+import { SchemaSettings } from '../schema-settings';
+import { useTranslation } from 'react-i18next';
+import { Select } from 'antd';
+import { useDesignable } from '../schema-component';
+
+interface Options {
+  openMode?: boolean;
+  openSize?: boolean;
+}
+export const OpenModeSchemaItems: React.FC<Options> = (options) => {
+  const { openMode = true, openSize = true } = options;
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+  const { t } = useTranslation();
+  const { dn } = useDesignable();
+  const openModeValue = fieldSchema?.['x-component-props']?.['openMode'] || 'drawer';
+
+  return (
+    <>
+      {openMode ? (
+        <SchemaSettings.SelectItem
+          title={t('Open mode')}
+          options={[
+            { label: t('Drawer'), value: 'drawer' },
+            { label: t('Dialog'), value: 'modal' },
+          ]}
+          value={openModeValue}
+          onChange={(value) => {
+            field.componentProps.openMode = value;
+            fieldSchema['x-component-props'] = field.componentProps;
+
+            // when openMode change, set openSize value to default
+            Reflect.deleteProperty(fieldSchema['x-component-props'], 'openSize');
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-component-props': fieldSchema['x-component-props'],
+              },
+            });
+            dn.refresh();
+          }}
+        />
+      ) : null}
+      {openSize && ['modal', 'drawer'].includes(openModeValue) ? (
+        <SchemaSettings.Item>
+          <div style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
+            {t('Popup size')}
+            <Select
+              bordered={false}
+              options={[
+                { label: t('Small'), value: 'small' },
+                { label: t('Middle'), value: 'middle' },
+                { label: t('Large'), value: 'large' },
+              ]}
+              value={
+                fieldSchema?.['x-component-props']?.['openSize'] ??
+                (fieldSchema?.['x-component-props']?.['openMode'] == 'modal' ? 'large' : 'middle')
+              }
+              onChange={(value) => {
+                field.componentProps.openSize = value;
+                fieldSchema['x-component-props'] = field.componentProps;
+                dn.emit('patch', {
+                  schema: {
+                    'x-uid': fieldSchema['x-uid'],
+                    'x-component-props': fieldSchema['x-component-props'],
+                  },
+                });
+                dn.refresh();
+              }}
+              style={{ textAlign: 'right', minWidth: 100 }}
+            />
+          </div>
+        </SchemaSettings.Item>
+      ) : null}
+    </>
+  );
+};
--- a/packages/core/client/src/schema-items/index.ts
+++ b/packages/core/client/src/schema-items/index.ts
@ -0,0 +1 @@
+export * from './OpenModeSchemaItems';