feat: improve kanban initializer

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={

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>
   );

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>
   );

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) => {
+const gridRowColWrap = (schema: ISchema) => {
-  cb(schema, {
+  schema['x-read-pretty'] = true;
-    removeParentsIfNoChildren: true,
+  return {
-    breakRemoveOn: {
+    type: 'void',
-      'x-component': 'Kanban.Card',
+    '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) => {
+            wrap={gridRowColWrap}
-              s['type'] = 'string';
+            insert={(schema) => {
-              s['x-read-pretty'] = true;
+              const gridSchema = fieldSchema.reduceProperties((buf, schema) => {
-              return s;
+                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) => {
+                children: fields,
-                  return {
-                    ...field,
-                    remove: removeGridFormItem,
-                  };
-                }),
               },
             ]}
             component={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />}

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);
             }}
           >
+            <FormLayout layout={'vertical'}>
               <RecursionField
                 basePath={cardField.address.concat(`${columnIndex}.cards.${cardIndex}`)}
                 schema={fieldSchema}
                 onlyRenderProperties
               />
+            </FormLayout>
           </DndContext>
         </SchemaComponentOptions>
       </Card>

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: {
+              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',

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'}>
+          {draggable && (
             <DragHandler>
               <DragOutlined />
             </DragHandler>
+          )}
           <SchemaSettings title={<MenuOutlined style={{ cursor: 'pointer', fontSize: 12 }} />} {...schemaSettingsProps}>
             {props.children}
           </SchemaSettings>