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 { 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: { | ||||
|  | ||||
| @ -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,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 /> | ||||
|  | ||||
| @ -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'; | ||||
|  | ||||
| @ -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); | ||||
|  | ||||
| @ -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> | ||||
|   ); | ||||
| }; | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
| @ -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 | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user