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>
This commit is contained in:
parent
f0816c663e
commit
7ddc5fb33c
@ -44,13 +44,13 @@ export const ActionDesigner = (props) => {
|
|||||||
const { getChildrenCollections } = useCollectionManager();
|
const { getChildrenCollections } = useCollectionManager();
|
||||||
const { dn } = useDesignable();
|
const { dn } = useDesignable();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
const isAction = useLinkageAction()
|
||||||
const isPopupAction = ['create', 'update', 'view', 'customize:popup'].includes(fieldSchema['x-action'] || '');
|
const isPopupAction = ['create', 'update', 'view', 'customize:popup'].includes(fieldSchema['x-action'] || '');
|
||||||
const isUpdateModePopupAction = ['customize:bulkUpdate', 'customize:bulkEdit'].includes(fieldSchema['x-action']);
|
const isUpdateModePopupAction = ['customize:bulkUpdate', 'customize:bulkEdit'].includes(fieldSchema['x-action']);
|
||||||
const [initialSchema, setInitialSchema] = useState<ISchema>();
|
const [initialSchema, setInitialSchema] = useState<ISchema>();
|
||||||
const actionType = fieldSchema['x-action'] ?? '';
|
const actionType = fieldSchema['x-action'] ?? '';
|
||||||
const isLinkageAction = linkageAction || useLinkageAction();
|
const isLinkageAction = linkageAction || isAction;
|
||||||
const isChildCollectionAction = getChildrenCollections(name).length > 0 && fieldSchema['x-action'] === 'create';
|
const isChildCollectionAction = getChildrenCollections(name).length > 0 && fieldSchema['x-action'] === 'create';
|
||||||
const isSupportEditButton = fieldSchema['x-action'] !== 'expandAll';
|
|
||||||
const isLink = fieldSchema['x-component'] === 'Action.Link';
|
const isLink = fieldSchema['x-component'] === 'Action.Link';
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const schemaUid = uid();
|
const schemaUid = uid();
|
||||||
@ -87,7 +87,6 @@ export const ActionDesigner = (props) => {
|
|||||||
title: t('Button title'),
|
title: t('Button title'),
|
||||||
default: fieldSchema.title,
|
default: fieldSchema.title,
|
||||||
'x-component-props': {},
|
'x-component-props': {},
|
||||||
'x-visible': isSupportEditButton,
|
|
||||||
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
|
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
@ -96,7 +95,7 @@ export const ActionDesigner = (props) => {
|
|||||||
title: t('Button icon'),
|
title: t('Button icon'),
|
||||||
default: fieldSchema?.['x-component-props']?.icon,
|
default: fieldSchema?.['x-component-props']?.icon,
|
||||||
'x-component-props': {},
|
'x-component-props': {},
|
||||||
'x-visible': isSupportEditButton && !isLink,
|
'x-visible': !isLink,
|
||||||
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
|
// description: `原字段标题:${collectionField?.uiSchema?.title}`,
|
||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -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>
|
||||||
|
);
|
||||||
|
};
|
@ -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
|
@ -90,7 +90,6 @@ export const FilterActionDesigner = (props) => {
|
|||||||
} as ISchema
|
} as ISchema
|
||||||
}
|
}
|
||||||
onSubmit={({ title, icon }) => {
|
onSubmit={({ title, icon }) => {
|
||||||
if (title) {
|
|
||||||
fieldSchema.title = title;
|
fieldSchema.title = title;
|
||||||
field.title = title;
|
field.title = title;
|
||||||
field.componentProps.icon = icon;
|
field.componentProps.icon = icon;
|
||||||
@ -106,7 +105,6 @@ export const FilterActionDesigner = (props) => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
dn.refresh();
|
dn.refresh();
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<SchemaSettings.Divider />
|
<SchemaSettings.Divider />
|
||||||
|
@ -10,6 +10,7 @@ export * from './color-select';
|
|||||||
export * from './cron';
|
export * from './cron';
|
||||||
export * from './date-picker';
|
export * from './date-picker';
|
||||||
export * from './details';
|
export * from './details';
|
||||||
|
export * from './expand-action';
|
||||||
export * from './filter';
|
export * from './filter';
|
||||||
export * from './form';
|
export * from './form';
|
||||||
export * from './form-item';
|
export * from './form-item';
|
||||||
|
@ -81,7 +81,7 @@ const actionAclCheck = (actionPath) => {
|
|||||||
return true;
|
return true;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const CreateRecordAction = observer((props) => {
|
export const CreateRecordAction = observer((props: any) => {
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const collection = useCollection();
|
const collection = useCollection();
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
@ -115,6 +115,7 @@ export const CreateRecordAction = observer((props) => {
|
|||||||
const ctx = useActionContext();
|
const ctx = useActionContext();
|
||||||
const compile = useCompile();
|
const compile = useCompile();
|
||||||
const { designable } = useDesignable();
|
const { designable } = useDesignable();
|
||||||
|
const icon = props.icon || <PlusOutlined />;
|
||||||
const menu = (
|
const menu = (
|
||||||
<Menu>
|
<Menu>
|
||||||
{inheritsCollections.map((option) => {
|
{inheritsCollections.map((option) => {
|
||||||
@ -160,13 +161,13 @@ export const CreateRecordAction = observer((props) => {
|
|||||||
setCurrentCollection(collection.name);
|
setCurrentCollection(collection.name);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<PlusOutlined />
|
{icon}
|
||||||
{props.children}
|
{props.children}
|
||||||
</Dropdown.Button>
|
</Dropdown.Button>
|
||||||
) : (
|
) : (
|
||||||
<Dropdown overlay={menu}>
|
<Dropdown overlay={menu}>
|
||||||
{
|
{
|
||||||
<Button icon={<PlusOutlined />} type={'primary'}>
|
<Button icon={icon} type={'primary'}>
|
||||||
{props.children} <DownOutlined />
|
{props.children} <DownOutlined />
|
||||||
</Button>
|
</Button>
|
||||||
}
|
}
|
||||||
@ -177,7 +178,7 @@ export const CreateRecordAction = observer((props) => {
|
|||||||
type={componentType}
|
type={componentType}
|
||||||
disabled={field.disabled}
|
disabled={field.disabled}
|
||||||
danger={componentType === 'danger'}
|
danger={componentType === 'danger'}
|
||||||
icon={<PlusOutlined />}
|
icon={icon}
|
||||||
onClick={(info) => {
|
onClick={(info) => {
|
||||||
setVisible(true);
|
setVisible(true);
|
||||||
setCurrentCollection(collection.name);
|
setCurrentCollection(collection.name);
|
||||||
|
@ -1,21 +1,19 @@
|
|||||||
import React from 'react';
|
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 { ActionInitializer } from './ActionInitializer';
|
||||||
import { useTableBlockContext, useTableSelectorContext } from '../../';
|
import { useTranslation } from 'react-i18next'
|
||||||
import { NodeCollapseOutlined, NodeExpandOutlined } from '@ant-design/icons';
|
|
||||||
|
|
||||||
export const ExpandActionInitializer = (props) => {
|
export const ExpandActionInitializer = (props) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
const schema = {
|
const schema = {
|
||||||
'x-action': 'expandAll',
|
'x-action': 'expandAll',
|
||||||
'x-component': 'Action',
|
'x-component': 'Action',
|
||||||
'x-designer': 'Action.Designer',
|
'x-designer': 'Expand.Action.Design',
|
||||||
'x-component-props': {
|
'x-component-props': {
|
||||||
icon: '{{ expandIcon}}',
|
titleExpand: t("Expand all"),
|
||||||
useProps: '{{ useExpandAllActionProps }}',
|
titleCollapse: t("Collapse all"),
|
||||||
component: 'ExpandActionComponent',
|
iconExpand: 'nodeexpandoutlined',
|
||||||
|
iconCollapse: 'nodecollapseoutlined',
|
||||||
|
component: 'Expand.Action',
|
||||||
useAction: () => {
|
useAction: () => {
|
||||||
return {
|
return {
|
||||||
run() {},
|
run() {},
|
||||||
@ -25,65 +23,3 @@ export const ExpandActionInitializer = (props) => {
|
|||||||
};
|
};
|
||||||
return <ActionInitializer {...props} schema={schema} />;
|
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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
@ -62,7 +62,6 @@ export const ExportDesigner = () => {
|
|||||||
} as ISchema
|
} as ISchema
|
||||||
}
|
}
|
||||||
onSubmit={({ title, icon, type }) => {
|
onSubmit={({ title, icon, type }) => {
|
||||||
if (title) {
|
|
||||||
fieldSchema.title = title;
|
fieldSchema.title = title;
|
||||||
field.title = title;
|
field.title = title;
|
||||||
field.componentProps.icon = icon;
|
field.componentProps.icon = icon;
|
||||||
@ -82,7 +81,6 @@ export const ExportDesigner = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
dn.refresh();
|
dn.refresh();
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<SchemaSettings.ActionModalItem
|
<SchemaSettings.ActionModalItem
|
||||||
|
@ -62,7 +62,6 @@ export const ImportDesigner = () => {
|
|||||||
} as ISchema
|
} as ISchema
|
||||||
}
|
}
|
||||||
onSubmit={({ title, icon, type }) => {
|
onSubmit={({ title, icon, type }) => {
|
||||||
if (title) {
|
|
||||||
fieldSchema.title = title;
|
fieldSchema.title = title;
|
||||||
field.title = title;
|
field.title = title;
|
||||||
field.componentProps.icon = icon;
|
field.componentProps.icon = icon;
|
||||||
@ -82,7 +81,6 @@ export const ImportDesigner = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
dn.refresh();
|
dn.refresh();
|
||||||
}
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<SchemaSettings.ActionModalItem
|
<SchemaSettings.ActionModalItem
|
||||||
|
Loading…
Reference in New Issue
Block a user