feat(client): action schema settings

packages/client/src/schema-component/antd/action/Action.Designer.tsx

@@ -0,0 +1,78 @@
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import React from 'react';
+import { useDesignable } from '../..';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
+
+export const ActionDesigner = () => {
+  const initialValue = {};
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { dn } = useDesignable();
+  const isPopupAction = ['create', 'update', 'view'].includes(fieldSchema['x-action'] || '');
+  return (
+    <GeneralSchemaDesigner>
+      <SchemaSettings.ModalItem
+        title={'编辑'}
+        schema={
+          {
+            type: 'object',
+            title: '编辑按钮',
+            properties: {
+              title: {
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                title: '按钮标题',
+                'x-component-props': {},
+                // description: `原字段标题：${collectionField?.uiSchema?.title}`,
+              },
+            },
+          } as ISchema
+        }
+        initialValues={{ title: field.title }}
+        onSubmit={({ title }) => {
+          if (title) {
+            fieldSchema.title = title;
+            field.title = title;
+            dn.emit('patch', {
+              schema: {
+                ['x-uid']: fieldSchema['x-uid'],
+                title,
+              },
+            });
+            dn.refresh();
+          }
+        }}
+      />
+      {isPopupAction && (
+        <SchemaSettings.SelectItem
+          title={'打开方式'}
+          options={[
+            { label: '抽屉', value: 'drawer' },
+            { label: '对话框', value: 'modal' },
+          ]}
+          value={field.componentProps.openMode}
+          onChange={(value) => {
+            field.componentProps.openMode = value;
+            fieldSchema['x-component-props']['openMode'] = value;
+            dn.emit('patch', {
+              schema: {
+                'x-uid': fieldSchema['x-uid'],
+                'x-component-props': {
+                  openMode: value,
+                },
+              },
+            });
+            dn.refresh();
+          }}
+        />
+      )}
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={(s) => {
+          return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};

packages/client/src/schema-component/antd/action/Action.Link.tsx

@@ -4,7 +4,5 @@ import Action from './Action';
 import { ComposedAction } from './types';
 
 export const ActionLink: ComposedAction = observer((props: any) => {
-  return <Action {...props} component={'a'} className={'nb-action-link'}/>;
+  return <Action {...props} component={'a'} className={'nb-action-link'} />;
 });
-
-export default ActionLink;

packages/client/src/schema-component/antd/action/Action.Modal.tsx

@@ -22,7 +22,7 @@ export const ActionModal: ComposedActionDrawer = observer((props) => {
       {createPortal(
         <Modal
           // width={'50%'}
-          title={schema.title}
+          title={field.title}
           {...others}
           destroyOnClose
           visible={visible}

packages/client/src/schema-component/antd/action/Action.tsx

@@ -4,11 +4,12 @@ import { Button, Modal, Popover } from 'antd';
 import classnames from 'classnames';
 import React, { useState } from 'react';
 import { useActionContext } from '../..';
-import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { SortableItem } from '../../common';
 import { useDesigner } from '../../hooks';
 import ActionContainer from './Action.Container';
+import { ActionDesigner } from './Action.Designer';
 import { ActionDrawer } from './Action.Drawer';
+import { ActionLink } from './Action.Link';
 import { ActionModal } from './Action.Modal';
 import { ActionPage } from './Action.Page';
 import { ActionContext } from './context';
@@ -146,23 +147,8 @@ Action.Popover.Footer = observer((props) => {
   );
 });
 
-Action.Designer = () => {
-  return (
-    <GeneralSchemaDesigner>
-      <SchemaSettings.Remove
-        removeParentsIfNoChildren
-        breakRemoveOn={(s) => {
-          return s['x-component'] === 'Space' || s['x-component'] === 'ActionBar';
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-};
-
-Action.Link = observer((props) => {
-  return <Action {...props} component={'a'} className={'nb-action-link'} />;
-});
-
+Action.Link = ActionLink;
+Action.Designer = ActionDesigner;
 Action.Drawer = ActionDrawer;
 Action.Modal = ActionModal;
 Action.Container = ActionContainer;

packages/client/src/schema-initializer/Initializers/TableRecordActionInitializers.tsx

@@ -47,11 +47,13 @@ export const TableRecordActionInitializers = (props: any) => {
                 'x-action': 'view',
                 'x-designer': 'Action.Designer',
                 'x-component': 'Action.Link',
-                'x-component-props': {},
+                'x-component-props': {
+                  openMode: 'drawer',
+                },
                 properties: {
                   drawer: {
                     type: 'void',
-                    'x-component': 'Action.Drawer',
+                    'x-component': 'Action.Container',
                     'x-component-props': {
                       className: 'nb-action-popup',
                     },
@@ -95,7 +97,9 @@ export const TableRecordActionInitializers = (props: any) => {
                 'x-action': 'update',
                 'x-designer': 'Action.Designer',
                 'x-component': 'Action.Link',
-                'x-component-props': {},
+                'x-component-props': {
+                  openMode: 'drawer',
+                },
                 properties: {
                   drawer: {
                     type: 'void',
@@ -103,7 +107,7 @@ export const TableRecordActionInitializers = (props: any) => {
                     'x-decorator-props': {
                       useValues: '{{ cm.useValuesFromRecord }}',
                     },
-                    'x-component': 'Action.Drawer',
+                    'x-component': 'Action.Container',
                     title: '{{ t("Edit record") }}',
                     properties: {
                       grid: {
@@ -114,7 +118,7 @@ export const TableRecordActionInitializers = (props: any) => {
                       },
                       footer: {
                         type: 'void',
-                        'x-component': 'Action.Drawer.Footer',
+                        'x-component': 'Action.Container.Footer',
                         properties: {
                           actions: {
                             type: 'void',

packages/client/src/schema-settings/SchemaSettings.tsx

@@ -1,10 +1,11 @@
+import { FormDialog, FormLayout } from '@formily/antd';
 import { GeneralField } from '@formily/core';
-import { ISchema, Schema } from '@formily/react';
+import { ISchema, Schema, SchemaOptionsContext } from '@formily/react';
 import { uid } from '@formily/shared';
 import { Dropdown, Menu, MenuItemProps, Modal, Select } from 'antd';
 import React, { createContext, useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ActionContext, Designable, SchemaComponent } from '..';
+import { ActionContext, Designable, SchemaComponent, SchemaComponentOptions, useActionContext } from '..';
 
 interface SchemaSettingsProps {
   title?: any;
@@ -86,7 +87,6 @@ SchemaSettings.Item = (props) => {
     <Menu.Item
       {...props}
       onClick={(info) => {
-        //
         info.domEvent.preventDefault();
         info.domEvent.stopPropagation();
         props?.onClick?.(info);
@@ -153,11 +153,13 @@ SchemaSettings.PopupItem = (props) => {
   const { schema, ...others } = props;
   const [visible, setVisible] = useState(false);
   const ctx = useContext(SchemaSettingsContext);
+  const actx = useActionContext();
   return (
     <ActionContext.Provider value={{ visible, setVisible }}>
       <SchemaSettings.Item
         {...others}
         onClick={() => {
+          // actx.setVisible(false);
           ctx.setVisible(false);
           setVisible(true);
         }}
@@ -173,3 +175,32 @@ SchemaSettings.PopupItem = (props) => {
     </ActionContext.Provider>
   );
 };
+
+SchemaSettings.ModalItem = (props) => {
+  const { title, schema, onSubmit, initialValues, ...others } = props;
+  const options = useContext(SchemaOptionsContext);
+  return (
+    <SchemaSettings.Item
+      {...others}
+      onClick={() => {
+        FormDialog(schema.title || title, () => {
+          return (
+            <SchemaComponentOptions scope={options.scope} components={options.components}>
+              <FormLayout layout={'vertical'}>
+                <SchemaComponent schema={schema} />
+              </FormLayout>
+            </SchemaComponentOptions>
+          );
+        })
+          .open({
+            initialValues,
+          })
+          .then((values) => {
+            onSubmit(values);
+          });
+      }}
+    >
+      {props.children || props.title}
+    </SchemaSettings.Item>
+  );
+};