fix: expand action and add new action should support drag & sort (#3808)
This commit is contained in:
parent
e410dece22
commit
88d1bdbefb
@ -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);
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user