fix: expand action and add new action should support drag & sort (#3808)

This commit is contained in:
katherinehhh 2024-03-24 19:44:39 +08:00 committed by GitHub
parent e410dece22
commit 88d1bdbefb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 63 additions and 51 deletions

View File

@ -1,7 +1,8 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { useFieldSchema } from '@formily/react'; import { useFieldSchema } from '@formily/react';
import { Button } from 'antd'; import { Button } from 'antd';
import React from 'react'; import React, { forwardRef, createRef } from 'react';
import { composeRef } from 'rc-util/lib/ref';
import { useCompile } from '../../hooks'; import { useCompile } from '../../hooks';
import { useTableBlockContext, useTableSelectorContext } from '../../../block-provider'; import { useTableBlockContext, useTableSelectorContext } from '../../../block-provider';
import { Icon } from '../../../icon'; import { Icon } from '../../../icon';
@ -46,7 +47,7 @@ const actionDesignerCss = css`
} }
`; `;
export const ExpandAction = (props) => { const InternalExpandAction = (props, ref) => {
const schema = useFieldSchema(); const schema = useFieldSchema();
const ctxSelector = useTableSelectorContext(); const ctxSelector = useTableSelectorContext();
const ctxBlock = useTableBlockContext(); const ctxBlock = useTableBlockContext();
@ -54,8 +55,11 @@ export const ExpandAction = (props) => {
const ctx = isTableSelector ? ctxSelector : ctxBlock; const ctx = isTableSelector ? ctxSelector : ctxBlock;
const { titleExpand, titleCollapse, iconExpand, iconCollapse } = schema['x-component-props'] || {}; const { titleExpand, titleCollapse, iconExpand, iconCollapse } = schema['x-component-props'] || {};
const compile = useCompile(); const compile = useCompile();
const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
const buttonRef = composeRef(ref, internalRef);
return ( return (
<div className={actionDesignerCss}> //@ts-ignore
<div className={actionDesignerCss} ref={buttonRef as React.Ref<HTMLButtonElement>}>
{ctx?.params['tree'] && ( {ctx?.params['tree'] && (
<Button <Button
onClick={() => { onClick={() => {
@ -63,6 +67,7 @@ export const ExpandAction = (props) => {
}} }}
icon={<Icon type={ctx?.expandFlag ? iconCollapse : iconExpand} />} icon={<Icon type={ctx?.expandFlag ? iconCollapse : iconExpand} />}
type={props.type} type={props.type}
style={props?.style}
> >
{props.children?.[1]} {props.children?.[1]}
<span style={{ marginLeft: 10 }}>{ctx?.expandFlag ? compile(titleCollapse) : compile(titleExpand)}</span> <span style={{ marginLeft: 10 }}>{ctx?.expandFlag ? compile(titleCollapse) : compile(titleExpand)}</span>
@ -71,3 +76,5 @@ export const ExpandAction = (props) => {
</div> </div>
); );
}; };
export const ExpandAction = forwardRef<HTMLButtonElement | HTMLAnchorElement, any>(InternalExpandAction);

View File

@ -2,7 +2,8 @@ import { DownOutlined } from '@ant-design/icons';
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react'; import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
import { Button, Dropdown, MenuProps } from 'antd'; import { Button, Dropdown, MenuProps } from 'antd';
import React, { useEffect, useMemo, useState } from 'react'; import React, { useEffect, useMemo, useState, forwardRef, createRef } from 'react';
import { composeRef } from 'rc-util/lib/ref';
import { useDesignable } from '../../'; import { useDesignable } from '../../';
import { useACLRolesCheck, useRecordPkValue } from '../../acl/ACLProvider'; import { useACLRolesCheck, useRecordPkValue } from '../../acl/ACLProvider';
import { import {
@ -96,55 +97,55 @@ function useAclCheckFn() {
return actionAclCheck; return actionAclCheck;
} }
export const CreateRecordAction = observer( const InternalCreateRecordAction = (props: any, ref) => {
(props: any) => { const [visible, setVisible] = useState(false);
const [visible, setVisible] = useState(false); const collection = useCollection_deprecated();
const collection = useCollection_deprecated(); const fieldSchema = useFieldSchema();
const fieldSchema = useFieldSchema(); const field: any = useField();
const field: any = useField(); const [currentCollection, setCurrentCollection] = useState(collection.name);
const [currentCollection, setCurrentCollection] = useState(collection.name); const [currentCollectionDataSource, setCurrentCollectionDataSource] = useState(collection.dataSource);
const [currentCollectionDataSource, setCurrentCollectionDataSource] = useState(collection.dataSource); const linkageRules: any[] = fieldSchema?.['x-linkage-rules'] || [];
const linkageRules: any[] = fieldSchema?.['x-linkage-rules'] || []; const values = useRecord();
const values = useRecord(); const ctx = useActionContext();
const ctx = useActionContext(); const variables = useVariables();
const variables = useVariables(); const localVariables = useLocalVariables({ currentForm: { values } as any });
const localVariables = useLocalVariables({ currentForm: { values } as any }); useEffect(() => {
useEffect(() => { field.stateOfLinkageRules = {};
field.stateOfLinkageRules = {}; linkageRules
linkageRules .filter((k) => !k.disabled)
.filter((k) => !k.disabled) .forEach((v) => {
.forEach((v) => { v.actions?.forEach((h) => {
v.actions?.forEach((h) => { linkageAction({
linkageAction({ operator: h.operator,
operator: h.operator, field,
field, condition: v.condition,
condition: v.condition, variables,
variables, localVariables,
localVariables,
});
}); });
}); });
}, [field, linkageRules, localVariables, variables]); });
return ( }, [field, linkageRules, localVariables, variables]);
<div className={actionDesignerCss}> const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
<ActionContextProvider value={{ ...ctx, visible, setVisible }}> const buttonRef = composeRef(ref, internalRef);
<CreateAction return (
{...props} //@ts-ignore
onClick={(collectionData) => { <div className={actionDesignerCss} ref={buttonRef as React.Ref<HTMLButtonElement>}>
setVisible(true); <ActionContextProvider value={{ ...ctx, visible, setVisible }}>
setCurrentCollection(collectionData.name); <CreateAction
setCurrentCollectionDataSource(collectionData.dataSource); {...props}
}} onClick={(collectionData) => {
/> setVisible(true);
<CollectionProvider_deprecated name={currentCollection} dataSource={currentCollectionDataSource}> setCurrentCollection(collectionData.name);
<RecursionField schema={fieldSchema} basePath={field.address} onlyRenderProperties /> setCurrentCollectionDataSource(collectionData.dataSource);
</CollectionProvider_deprecated> }}
</ActionContextProvider> />
</div> <CollectionProvider_deprecated name={currentCollection} dataSource={currentCollectionDataSource}>
); <RecursionField schema={fieldSchema} basePath={field.address} onlyRenderProperties />
}, </CollectionProvider_deprecated>
{ displayName: 'CreateRecordAction' }, </ActionContextProvider>
); </div>
);
};
function getLinkageCollection(str, form, field) { function getLinkageCollection(str, form, field) {
const variablesCtx = { $form: form.values, $iteration: form.values }; const variablesCtx = { $form: form.values, $iteration: form.values };
@ -283,6 +284,7 @@ function FinallyButton({
designable: boolean; designable: boolean;
}) { }) {
const { getCollection } = useCollectionManager_deprecated(); const { getCollection } = useCollectionManager_deprecated();
if (inheritsCollections?.length > 0) { if (inheritsCollections?.length > 0) {
if (!linkageFromForm) { if (!linkageFromForm) {
return allowAddToCurrent === undefined || allowAddToCurrent ? ( return allowAddToCurrent === undefined || allowAddToCurrent ? (
@ -360,6 +362,7 @@ function FinallyButton({
onClick?.(collection); onClick?.(collection);
}} }}
style={{ style={{
...props?.style,
display: !designable && field?.data?.hidden && 'none', display: !designable && field?.data?.hidden && 'none',
opacity: designable && field?.data?.hidden && 0.1, opacity: designable && field?.data?.hidden && 0.1,
}} }}
@ -368,3 +371,5 @@ function FinallyButton({
</Button> </Button>
); );
} }
export const CreateRecordAction = forwardRef<HTMLButtonElement | HTMLAnchorElement, any>(InternalCreateRecordAction);