From 7ddc5fb33c7bf6c81e6e438297f51addec29dbcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=96=90?= Date: Thu, 27 Apr 2023 15:09:45 +0800 Subject: [PATCH] fix: fix button design about edit action (#1755) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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> --- .../antd/action/Action.Designer.tsx | 7 +- .../expand-action/Expand.Action.Design.tsx | 102 ++++++++++++++++++ .../antd/expand-action/Expand.Action.tsx | 72 +++++++++++++ .../antd/expand-action/index.ts | 7 ++ .../antd/filter/Filter.Action.Designer.tsx | 30 +++--- .../client/src/schema-component/antd/index.ts | 1 + .../components/CreateRecordAction.tsx | 9 +- .../items/ExpandActionInitializer.tsx | 80 ++------------ .../export/src/client/ExportDesigner.tsx | 38 ++++--- .../import/src/client/ImportDesigner.tsx | 38 ++++--- 10 files changed, 248 insertions(+), 136 deletions(-) create mode 100644 packages/core/client/src/schema-component/antd/expand-action/Expand.Action.Design.tsx create mode 100644 packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx create mode 100644 packages/core/client/src/schema-component/antd/expand-action/index.ts diff --git a/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Designer.tsx index fa932ab2b..dbec9d7bc 100644 --- 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(); 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: { diff --git 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 new file mode 100644 index 000000000..6d9a6ff5a --- /dev/null +++ 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 ( + + { + 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(); + }} + /> + + { + return s['x-component'] === 'Space' || s['x-component'].endsWith('ActionBar'); + }} + confirm={{ + title: t('Delete action'), + }} + /> + + ); +}; diff --git 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 new file mode 100644 index 000000000..7edac4d87 --- /dev/null +++ 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 ( +
+ {ctx?.params['tree'] && ( + + )} +
+ ); +}; diff --git a/packages/core/client/src/schema-component/antd/expand-action/index.ts b/packages/core/client/src/schema-component/antd/expand-action/index.ts new file mode 100644 index 000000000..3ca73922a --- /dev/null +++ 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 \ No newline at end of file diff --git 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 index 09f6f03f7..5d471f59f 100644 --- 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(); }} /> diff --git a/packages/core/client/src/schema-component/antd/index.ts b/packages/core/client/src/schema-component/antd/index.ts index 2bd743262..84ce18b99 100644 --- 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'; diff --git a/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx b/packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx index b7abe7fe6..6f40e972b 100644 --- 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 || ; const menu = ( {inheritsCollections.map((option) => { @@ -160,13 +161,13 @@ export const CreateRecordAction = observer((props) => { setCurrentCollection(collection.name); }} > - + {icon} {props.children} ) : ( { - } @@ -177,7 +178,7 @@ export const CreateRecordAction = observer((props) => { type={componentType} disabled={field.disabled} danger={componentType === 'danger'} - icon={} + icon={icon} onClick={(info) => { setVisible(true); setCurrentCollection(collection.name); diff --git a/packages/core/client/src/schema-initializer/items/ExpandActionInitializer.tsx b/packages/core/client/src/schema-initializer/items/ExpandActionInitializer.tsx index 7180d2f7f..3569e26ce 100644 --- 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 ; }; - -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 ( -
- {ctx.params['tree'] && ( - - )} -
- ); -}; diff --git a/packages/plugins/export/src/client/ExportDesigner.tsx b/packages/plugins/export/src/client/ExportDesigner.tsx index 86bee822c..90860557e 100644 --- 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(); }} /> { } 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(); }} />