fix: fix button design about edit action (#1755)

* fix: fix button design about edit action * fix: fix import module * Update packages/core/client/src/schema-component/antd/expand-action/Expand.Action.Design.tsx Co-authored-by: 被雨水过滤的空气-Rairn <958414905@qq.com> * Update packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx Co-authored-by: 被雨水过滤的空气-Rairn <958414905@qq.com> * Update packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx Co-authored-by: 被雨水过滤的空气-Rairn <958414905@qq.com> * fix: fix merge error --------- Co-authored-by: 被雨水过滤的空气-Rairn <958414905@qq.com>
2023-04-27 15:09:45 +08:00 · 2023-04-27 15:09:45 +08:00 · 7ddc5fb33c
commit 7ddc5fb33c
parent f0816c663e
10 changed files with 248 additions and 136 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
@ -44,13 +44,13 @@ export const ActionDesigner = (props) => {
  const { getChildrenCollections } = useCollectionManager();
  const { dn } = useDesignable();
  const { t } = useTranslation();
+  const isAction = useLinkageAction()
  const isPopupAction = ['create', 'update', 'view', 'customize:popup'].includes(fieldSchema['x-action'] || '');
  const isUpdateModePopupAction = ['customize:bulkUpdate', 'customize:bulkEdit'].includes(fieldSchema['x-action']);
  const [initialSchema, setInitialSchema] = useState<ISchema>();
  const actionType = fieldSchema['x-action'] ?? '';
-  const isLinkageAction = linkageAction || useLinkageAction();
+  const isLinkageAction = linkageAction || isAction;
  const isChildCollectionAction = getChildrenCollections(name).length > 0 && fieldSchema['x-action'] === 'create';
-  const isSupportEditButton = fieldSchema['x-action'] !== 'expandAll';
  const isLink = fieldSchema['x-component'] === 'Action.Link';
  useEffect(() => {
    const schemaUid = uid();
@ -87,7 +87,6 @@ export const ActionDesigner = (props) => {
                  title: t('Button title'),
                  default: fieldSchema.title,
                  'x-component-props': {},
-                  'x-visible': isSupportEditButton,
                  // description: `原字段标题：${collectionField?.uiSchema?.title}`,
                },
                icon: {
@ -96,7 +95,7 @@ export const ActionDesigner = (props) => {
                  title: t('Button icon'),
                  default: fieldSchema?.['x-component-props']?.icon,
                  'x-component-props': {},
-                  'x-visible': isSupportEditButton && !isLink,
+                  'x-visible': !isLink,
                  // description: `原字段标题：${collectionField?.uiSchema?.title}`,
                },
                type: {
--- a/packages/core/client/src/schema-component/antd/expand-action/Expand.Action.Design.tsx
+++ b/packages/core/client/src/schema-component/antd/expand-action/Expand.Action.Design.tsx
@ -0,0 +1,102 @@
+import React from 'react';
+import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
+import { useTranslation } from 'react-i18next';
+import { useFieldSchema, useField, ISchema } from '@formily/react';
+import { useDesignable } from '../..';
+
+export const ExpandActionDesign = (props) => {
+  const { t } = useTranslation();
+  const fieldSchema = useFieldSchema();
+  const field = useField();
+  const { dn } = useDesignable();
+  const { titleExpand, titleCollapse, iconExpand, iconCollapse } = fieldSchema['x-component-props'] || {}
+
+  return (
+    <GeneralSchemaDesigner {...props} disableInitializer>
+      <SchemaSettings.ModalItem
+        title={t('Edit button')}
+        schema={
+          {
+            type: 'object',
+            title: t('Edit button'),
+            properties: {
+              titleExpand: {
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                title: `${t('Button title')} - ${t('Expand all')}`,
+                default: titleExpand
+              },
+              titleCollapse: {
+                'x-decorator': 'FormItem',
+                'x-component': 'Input',
+                title: `${t('Button title')} - ${t('Collapse all')}`,
+                default: titleCollapse
+              },
+              iconExpand: {
+                'x-decorator': 'FormItem',
+                'x-component': 'IconPicker',
+                title: `${t('Button icon')} - ${t('Expand all')}`,
+                default: iconExpand,
+              },
+              iconCollapse: {
+                'x-decorator': 'FormItem',
+                'x-component': 'IconPicker',
+                title: `${t('Button icon')} - ${t('Collapse all')}`,
+                default: iconCollapse,
+              },
+              type: {
+                'x-decorator': 'FormItem',
+                'x-component': 'Radio.Group',
+                title: t('Button background color'),
+                default: fieldSchema?.['x-component-props']?.danger
+                  ? 'danger'
+                  : fieldSchema?.['x-component-props']?.type === 'primary'
+                  ? 'primary'
+                  : 'default',
+                enum: [
+                  { value: 'default', label: '{{t("Default")}}' },
+                  { value: 'primary', label: '{{t("Highlight")}}' },
+                  { value: 'danger', label: '{{t("Danger red")}}' },
+                ],
+              },
+            },
+          } as ISchema
+        }
+        onSubmit={({ titleExpand, titleCollapse, iconExpand, iconCollapse, type }) => {
+          fieldSchema.title = t('Expand/Collapse');
+          field.title = t('Expand/Collapse');
+          field.componentProps.icon = iconExpand;
+          field.componentProps.danger = type === 'danger';
+          field.componentProps.type = type;
+          fieldSchema['x-component-props'] = {
+            ...(fieldSchema['x-component-props'] || {}),
+            titleExpand,
+            titleCollapse,
+            iconExpand,
+            iconCollapse,
+            type,
+            danger: type === 'danger'
+          };
+          dn.emit('patch', {
+            schema: {
+              'x-uid': fieldSchema['x-uid'],
+              'x-component-props': fieldSchema['x-component-props'],
+              title: fieldSchema.title,
+            }
+          });
+          dn.refresh();
+        }}
+      />
+      <SchemaSettings.Divider />
+      <SchemaSettings.Remove
+        removeParentsIfNoChildren
+        breakRemoveOn={(s) => {
+          return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar');
+        }}
+        confirm={{
+          title: t('Delete action'),
+        }}
+      />
+    </GeneralSchemaDesigner>
+  );
+};
--- a/packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx
+++ b/packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx
@ -0,0 +1,72 @@
+import React from 'react';
+import { useFieldSchema } from '@formily/react';
+import { useTranslation } from 'react-i18next';
+import { useTableBlockContext, useTableSelectorContext } from '../../../block-provider';
+import { Button } from 'antd';
+import { css } from '@emotion/css';
+import { Icon } from '../../../icon';
+
+const actionDesignerCss = css`
+  position: relative;
+  &:hover {
+    .general-schema-designer {
+      display: block;
+    }
+  }
+  .general-schema-designer {
+    position: absolute;
+    z-index: 999;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: none;
+    background: rgba(241, 139, 98, 0.06);
+    border: 0;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    > .general-schema-designer-icons {
+      position: absolute;
+      right: 2px;
+      top: 2px;
+      line-height: 16px;
+      pointer-events: all;
+      .ant-space-item {
+        background-color: #f18b62;
+        color: #fff;
+        line-height: 16px;
+        width: 16px;
+        padding-left: 1px;
+      }
+    }
+  }
+`;
+
+export const ExpandAction = (props) => {
+  const { t } = useTranslation();
+  const schema = useFieldSchema();
+  const ctxSelector = useTableSelectorContext()
+  const ctxBlock = useTableBlockContext()
+  const isTableSelector = schema.parent?.parent?.['x-decorator'] === 'TableSelectorProvider';
+  const ctx = isTableSelector ? ctxSelector : ctxBlock;
+  const { titleExpand, titleCollapse, iconExpand, iconCollapse } = schema['x-component-props'] || {};
+  return (
+    <div className={actionDesignerCss}>
+      {ctx?.params['tree'] && (
+        <Button
+          onClick={() => {
+            ctx?.setExpandFlag();
+          }}
+          icon={<Icon type={ctx?.expandFlag ? iconCollapse : iconExpand} />}
+          type={props.type}
+        >
+          {props.children[1]}
+          <span style={{ marginLeft: 10 }}>{ ctx?.expandFlag ? titleCollapse : titleExpand }</span>
+        </Button>
+      )}
+    </div>
+  );
+};
--- a/packages/core/client/src/schema-component/antd/expand-action/index.ts
+++ b/packages/core/client/src/schema-component/antd/expand-action/index.ts
@ -0,0 +1,7 @@
+import { ExpandAction } from './Expand.Action'
+import { ExpandActionDesign } from './Expand.Action.Design'
+
+export const Expand: any = ExpandAction
+
+Expand.Action = ExpandAction
+Expand.Action.Design = ExpandActionDesign
--- a/packages/core/client/src/schema-component/antd/filter/Filter.Action.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/filter/Filter.Action.Designer.tsx
@ -90,23 +90,21 @@ export const FilterActionDesigner = (props) => {
          } as ISchema
        }
        onSubmit={({ title, icon }) => {
-          if (title) {
-            fieldSchema.title = title;
-            field.title = title;
-            field.componentProps.icon = icon;
-            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-            fieldSchema['x-component-props'].icon = icon;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                title,
-                'x-component-props': {
-                  ...fieldSchema['x-component-props'],
-                },
+          fieldSchema.title = title;
+          field.title = title;
+          field.componentProps.icon = icon;
+          fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+          fieldSchema['x-component-props'].icon = icon;
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              title,
+              'x-component-props': {
+                ...fieldSchema['x-component-props'],
              },
-            });
-            dn.refresh();
-          }
+            },
+          });
+          dn.refresh();
        }}
      />
      <SchemaSettings.Divider />
--- a/packages/core/client/src/schema-component/antd/index.ts
+++ b/packages/core/client/src/schema-component/antd/index.ts
@ -10,6 +10,7 @@ export * from './color-select';
 export * from './cron';
 export * from './date-picker';
 export * from './details';
+export * from './expand-action';
 export * from './filter';
 export * from './form';
 export * from './form-item';
--- a/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx
+++ b/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx
@ -81,7 +81,7 @@ const actionAclCheck = (actionPath) => {
  return true;
 };

-export const CreateRecordAction = observer((props) => {
+export const CreateRecordAction = observer((props: any) => {
  const [visible, setVisible] = useState(false);
  const collection = useCollection();
  const fieldSchema = useFieldSchema();
@ -115,6 +115,7 @@ export const CreateRecordAction = observer((props) => {
  const ctx = useActionContext();
  const compile = useCompile();
  const { designable } = useDesignable();
+  const icon = props.icon || <PlusOutlined />;
  const menu = (
    <Menu>
      {inheritsCollections.map((option) => {
@ -160,13 +161,13 @@ export const CreateRecordAction = observer((props) => {
                setCurrentCollection(collection.name);
              }}
            >
-              <PlusOutlined />
+              {icon}
              {props.children}
            </Dropdown.Button>
          ) : (
            <Dropdown overlay={menu}>
              {
-                <Button icon={<PlusOutlined />} type={'primary'}>
+                <Button icon={icon} type={'primary'}>
                  {props.children} <DownOutlined />
                </Button>
              }
@ -177,7 +178,7 @@ export const CreateRecordAction = observer((props) => {
            type={componentType}
            disabled={field.disabled}
            danger={componentType === 'danger'}
-            icon={<PlusOutlined />}
+            icon={icon}
            onClick={(info) => {
              setVisible(true);
              setCurrentCollection(collection.name);
--- a/packages/core/client/src/schema-initializer/items/ExpandActionInitializer.tsx
+++ b/packages/core/client/src/schema-initializer/items/ExpandActionInitializer.tsx
@ -1,21 +1,19 @@
 import React from 'react';
-import { Button } from 'antd';
-import { css } from '@emotion/css';
-import { useTranslation } from 'react-i18next';
-import { useFieldSchema } from '@formily/react';
 import { ActionInitializer } from './ActionInitializer';
-import { useTableBlockContext, useTableSelectorContext } from '../../';
-import { NodeCollapseOutlined, NodeExpandOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next'

 export const ExpandActionInitializer = (props) => {
+  const { t } = useTranslation()
  const schema = {
    'x-action': 'expandAll',
    'x-component': 'Action',
-    'x-designer': 'Action.Designer',
+    'x-designer': 'Expand.Action.Design',
    'x-component-props': {
-      icon: '{{ expandIcon}}',
-      useProps: '{{ useExpandAllActionProps }}',
-      component: 'ExpandActionComponent',
+      titleExpand: t("Expand all"),
+      titleCollapse: t("Collapse all"),
+      iconExpand: 'nodeexpandoutlined',
+      iconCollapse: 'nodecollapseoutlined',
+      component: 'Expand.Action',
      useAction: () => {
        return {
          run() {},
@ -25,65 +23,3 @@ export const ExpandActionInitializer = (props) => {
  };
  return <ActionInitializer {...props} schema={schema} />;
 };
-
-const actionDesignerCss = css`
-  position: relative;
-  &:hover {
-    .general-schema-designer {
-      display: block;
-    }
-  }
-  .general-schema-designer {
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: none;
-    background: rgba(241, 139, 98, 0.06);
-    border: 0;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    pointer-events: none;
-    > .general-schema-designer-icons {
-      position: absolute;
-      right: 2px;
-      top: 2px;
-      line-height: 16px;
-      pointer-events: all;
-      .ant-space-item {
-        background-color: #f18b62;
-        color: #fff;
-        line-height: 16px;
-        width: 16px;
-        padding-left: 1px;
-      }
-    }
-  }
-`;
-
-export const ExpandActionComponent = (props) => {
-  const { t } = useTranslation();
-  const schema = useFieldSchema();
-  const isTableSelector = schema.parent?.parent?.['x-decorator'] === 'TableSelectorProvider';
-  const ctx = isTableSelector ? useTableSelectorContext() : useTableBlockContext();
-  return (
-    <div className={actionDesignerCss}>
-      {ctx.params['tree'] && (
-        <Button
-          onClick={() => {
-            ctx?.setExpandFlag();
-          }}
-          icon={ctx?.expandFlag ? <NodeCollapseOutlined /> : <NodeExpandOutlined />}
-          type={props.type}
-        >
-          {props.children[1]}
-          <span style={{ marginLeft: 10 }}>{ctx?.expandFlag ? t('Collapse all') : t('Expand all')}</span>
-        </Button>
-      )}
-    </div>
-  );
-};
--- a/packages/plugins/export/src/client/ExportDesigner.tsx
+++ b/packages/plugins/export/src/client/ExportDesigner.tsx
@ -62,27 +62,25 @@ export const ExportDesigner = () => {
          } as ISchema
        }
        onSubmit={({ title, icon, type }) => {
-          if (title) {
-            fieldSchema.title = title;
-            field.title = title;
-            field.componentProps.icon = icon;
-            field.componentProps.danger = type === 'danger';
-            field.componentProps.type = type;
-            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-            fieldSchema['x-component-props'].icon = icon;
-            fieldSchema['x-component-props'].danger = type === 'danger';
-            fieldSchema['x-component-props'].type = type;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                title,
-                'x-component-props': {
-                  ...fieldSchema['x-component-props'],
-                },
+          fieldSchema.title = title;
+          field.title = title;
+          field.componentProps.icon = icon;
+          field.componentProps.danger = type === 'danger';
+          field.componentProps.type = type;
+          fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+          fieldSchema['x-component-props'].icon = icon;
+          fieldSchema['x-component-props'].danger = type === 'danger';
+          fieldSchema['x-component-props'].type = type;
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              title,
+              'x-component-props': {
+                ...fieldSchema['x-component-props'],
              },
-            });
-            dn.refresh();
-          }
+            },
+          });
+          dn.refresh();
        }}
      />
      <SchemaSettings.ActionModalItem
--- a/packages/plugins/import/src/client/ImportDesigner.tsx
+++ b/packages/plugins/import/src/client/ImportDesigner.tsx
@ -62,27 +62,25 @@ export const ImportDesigner = () => {
          } as ISchema
        }
        onSubmit={({ title, icon, type }) => {
-          if (title) {
-            fieldSchema.title = title;
-            field.title = title;
-            field.componentProps.icon = icon;
-            field.componentProps.danger = type === 'danger';
-            field.componentProps.type = type;
-            fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
-            fieldSchema['x-component-props'].icon = icon;
-            fieldSchema['x-component-props'].danger = type === 'danger';
-            fieldSchema['x-component-props'].type = type;
-            dn.emit('patch', {
-              schema: {
-                ['x-uid']: fieldSchema['x-uid'],
-                title,
-                'x-component-props': {
-                  ...fieldSchema['x-component-props'],
-                },
+          fieldSchema.title = title;
+          field.title = title;
+          field.componentProps.icon = icon;
+          field.componentProps.danger = type === 'danger';
+          field.componentProps.type = type;
+          fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+          fieldSchema['x-component-props'].icon = icon;
+          fieldSchema['x-component-props'].danger = type === 'danger';
+          fieldSchema['x-component-props'].type = type;
+          dn.emit('patch', {
+            schema: {
+              ['x-uid']: fieldSchema['x-uid'],
+              title,
+              'x-component-props': {
+                ...fieldSchema['x-component-props'],
              },
-            });
-            dn.refresh();
-          }
+            },
+          });
+          dn.refresh();
        }}
      />
      <SchemaSettings.ActionModalItem