feat: improve kanban initializer

2022-03-11 09:19:53 +08:00 · 2022-03-11 09:19:53 +08:00 · a28b69326b
commit a28b69326b
parent 3d5817e0b3
7 changed files with 91 additions and 57 deletions
--- a/packages/client/src/schema-component/antd/action/Action.Designer.tsx
+++ b/packages/client/src/schema-component/antd/action/Action.Designer.tsx
@ -3,14 +3,14 @@ import React from 'react';
 import { useDesignable } from '../..';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';

-export const ActionDesigner = () => {
+export const ActionDesigner = (props) => {
  const initialValue = {};
  const field = useField();
  const fieldSchema = useFieldSchema();
  const { dn } = useDesignable();
  const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
  return (
-    <GeneralSchemaDesigner>
+    <GeneralSchemaDesigner {...props}>
      <SchemaSettings.ModalItem
        title={'编辑'}
        schema={
--- a/packages/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/client/src/schema-component/antd/action/Action.tsx
@ -80,6 +80,7 @@ export const Action: ComposedAction = observer((props: any) => {
  const field = useField();
  const { run } = useAction();
  const fieldSchema = useFieldSchema();
+  const designerProps = fieldSchema['x-designer-props'];
  const renderButton = () => (
    <SortableItem
      {...others}
@ -103,7 +104,7 @@ export const Action: ComposedAction = observer((props: any) => {
      component={component || Button}
      className={classnames(className, actionDesignerCss)}
    >
-      <Designer />
+      <Designer {...designerProps} />
      {field.title}
    </SortableItem>
  );
--- a/packages/client/src/schema-component/antd/grid/Grid.tsx
+++ b/packages/client/src/schema-component/antd/grid/Grid.tsx
@ -120,7 +120,14 @@ const useColProperties = () => {
  }, []);
 };

-export const Grid: any = observer((props) => {
+const DndWrapper = (props) => {
+  if (props.dndContext === false) {
+    return <>{props.children}</>;
+  }
+  return <DndContext {...props.dndContext}>{props.children}</DndContext>;
+};
+
+export const Grid: any = observer((props: any) => {
  const field = useField();
  const fieldSchema = useFieldSchema();
  const { render } = useSchemaInitializer(fieldSchema['x-initializer']);
@ -128,7 +135,7 @@ export const Grid: any = observer((props) => {
  const rows = useRowProperties();
  return (
    <div className={'nb-grid'} style={{ position: 'relative' }}>
-      <DndContext>
+      <DndWrapper dndContext={props.dndContext}>
        <RowDivider
          id={`${addr}_0`}
          data={{ wrapSchema: wrapRowSchema, insertAdjacent: 'afterBegin', schema: fieldSchema }}
@ -144,7 +151,7 @@ export const Grid: any = observer((props) => {
            </React.Fragment>
          );
        })}
-      </DndContext>
+      </DndWrapper>
      <div>{render()}</div>
    </div>
  );
--- a/packages/client/src/schema-component/antd/kanban/Kanban.Card.Designer.tsx
+++ b/packages/client/src/schema-component/antd/kanban/Kanban.Card.Designer.tsx
@ -1,10 +1,12 @@
 import { MenuOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
-import { useField, useFieldSchema } from '@formily/react';
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import { uid } from '@formily/shared';
 import { Space } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useCompile, useDesignable } from '../../../schema-component';
+import { useAPIClient } from '../../../api-client';
+import { createDesignable, useDesignable } from '../../../schema-component';
 import { SchemaInitializer } from '../../../schema-initializer';
 import { useFormItemInitializerFields } from '../../../schema-initializer/Initializers/utils';

@ -23,26 +25,39 @@ const titleCss = css`
  left: 2px;
 `;

-export const removeGridFormItem = (schema, cb) => {
-  cb(schema, {
-    removeParentsIfNoChildren: true,
-    breakRemoveOn: {
-      'x-component': 'Kanban.Card',
+const gridRowColWrap = (schema: ISchema) => {
+  schema['x-read-pretty'] = true;
+  return {
+    type: 'void',
+    'x-component': 'Grid.Row',
+    properties: {
+      [uid()]: {
+        type: 'void',
+        'x-component': 'Grid.Col',
+        properties: {
+          [schema.name || uid()]: schema,
+        },
+      },
    },
-  });
+  };
 };

+// export const removeGridFormItem = (schema, cb) => {
+//   cb(schema, {
+//     removeParentsIfNoChildren: true,
+//     breakRemoveOn: {
+//       'x-component': 'Kanban.Card',
+//     },
+//   });
+// };
+
 export const KanbanCardDesigner = (props: any) => {
  const { dn, designable } = useDesignable();
  const { t } = useTranslation();
+  const api = useAPIClient();
+  const { refresh } = useDesignable();
  const field = useField();
  const fieldSchema = useFieldSchema();
-  const compile = useCompile();
-  const schemaSettingsProps = {
-    dn,
-    field,
-    fieldSchema,
-  };
  const fields = useFormItemInitializerFields();
  if (!designable) {
    return null;
@ -52,21 +67,30 @@ export const KanbanCardDesigner = (props: any) => {
      <div className={'general-schema-designer-icons'}>
        <Space size={2} align={'center'}>
          <SchemaInitializer.Button
-            wrap={(s) => {
-              s['type'] = 'string';
-              s['x-read-pretty'] = true;
-              return s;
+            wrap={gridRowColWrap}
+            insert={(schema) => {
+              const gridSchema = fieldSchema.reduceProperties((buf, schema) => {
+                if (schema['x-component'] === 'Grid') {
+                  return schema;
+                }
+                return buf;
+              }, null);
+              if (!gridSchema) {
+                return;
+              }
+              const dn = createDesignable({
+                api,
+                refresh,
+                current: gridSchema,
+              });
+              dn.loadAPIClientEvents();
+              dn.insertBeforeEnd(schema);
            }}
            items={[
              {
                type: 'itemGroup',
                title: t('Display fields'),
-                children: fields.map((field) => {
-                  return {
-                    ...field,
-                    remove: removeGridFormItem,
-                  };
-                }),
+                children: fields,
              },
            ]}
            component={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}
--- a/packages/client/src/schema-component/antd/kanban/Kanban.Card.tsx
+++ b/packages/client/src/schema-component/antd/kanban/Kanban.Card.tsx
@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { FormLayout } from '@formily/antd';
 import { observer, RecursionField, useFieldSchema } from '@formily/react';
 import { Card } from 'antd';
 import React, { useContext, useState } from 'react';
@ -23,25 +23,10 @@ export const KanbanCard: any = observer((props: any) => {
        onClick={(e) => {
          setVisible(true);
        }}
-        className={css`
-          /* .ant-description-input {
-            line-height: 1.15;
-          } */
-          .ant-formily-item-label {
-            display: none;
-          }
-          .ant-formily-item-feedback-layout-loose {
-            margin-bottom: 12px;
-          }
-          .nb-block-item:last-child {
-            .ant-formily-item {
-              margin-bottom: 0;
-            }
-          }
-        `}
        bordered={false}
        hoverable
        style={{ cursor: 'pointer', overflow: 'hidden' }}
+        bodyStyle={{ paddingBottom: 0 }}
      >
        <SchemaComponentOptions components={{}}>
          <DndContext
@ -52,11 +37,13 @@ export const KanbanCard: any = observer((props: any) => {
              setDisableCardDrag(false);
            }}
          >
-            <RecursionField
-              basePath={cardField.address.concat(`${columnIndex}.cards.${cardIndex}`)}
-              schema={fieldSchema}
-              onlyRenderProperties
-            />
+            <FormLayout layout={'vertical'}>
+              <RecursionField
+                basePath={cardField.address.concat(`${columnIndex}.cards.${cardIndex}`)}
+                schema={fieldSchema}
+                onlyRenderProperties
+              />
+            </FormLayout>
          </DndContext>
        </SchemaComponentOptions>
      </Card>
--- a/packages/client/src/schema-initializer/Initializers/Items/KanbanBlockInitializer.tsx
+++ b/packages/client/src/schema-initializer/Initializers/Items/KanbanBlockInitializer.tsx
@ -47,12 +47,25 @@ const createSchema = (collectionName, { groupField, sortName }) => {
            'x-decorator': 'BlockItem',
            'x-designer': 'Kanban.Card.Designer',
            'x-read-pretty': true,
-            properties: {},
+            properties: {
+              grid: {
+                type: 'void',
+                'x-component': 'Grid',
+                'x-read-pretty': true,
+                'x-component-props': {
+                  dndContext: false,
+                },
+                properties: {},
+              },
+            },
          },
          cardAdder: {
            type: 'void',
            'x-component': 'Kanban.CardAdder',
            'x-designer': 'Action.Designer',
+            'x-designer-props': {
+              draggable: false,
+            },
            'x-component-props': {
              type: 'text',
              openMode: 'drawer',
--- a/packages/client/src/schema-settings/GeneralSchemaDesigner.tsx
+++ b/packages/client/src/schema-settings/GeneralSchemaDesigner.tsx
@ -23,7 +23,7 @@ const titleCss = css`
 `;

 export const GeneralSchemaDesigner = (props: any) => {
-  const { title } = props;
+  const { title, draggable = true } = props;
  const { dn, designable } = useDesignable();
  const field = useField();
  const fieldSchema = useFieldSchema();
@ -41,9 +41,11 @@ export const GeneralSchemaDesigner = (props: any) => {
      {title && <div className={classNames('general-schema-designer-title', titleCss)}>{compile(title)}</div>}
      <div className={'general-schema-designer-icons'}>
        <Space size={2} align={'center'}>
-          <DragHandler>
-            <DragOutlined />
-          </DragHandler>
+          {draggable && (
+            <DragHandler>
+              <DragOutlined />
+            </DragHandler>
+          )}
          <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}>
            {props.children}
          </SchemaSettings>