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,8 +97,7 @@ 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();
|
||||||
@ -125,8 +125,11 @@ export const CreateRecordAction = observer(
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
}, [field, linkageRules, localVariables, variables]);
|
}, [field, linkageRules, localVariables, variables]);
|
||||||
|
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>}>
|
||||||
<ActionContextProvider value={{ ...ctx, visible, setVisible }}>
|
<ActionContextProvider value={{ ...ctx, visible, setVisible }}>
|
||||||
<CreateAction
|
<CreateAction
|
||||||
{...props}
|
{...props}
|
||||||
@ -142,9 +145,7 @@ export const CreateRecordAction = observer(
|
|||||||
</ActionContextProvider>
|
</ActionContextProvider>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
};
|
||||||
{ displayName: 'CreateRecordAction' },
|
|
||||||
);
|
|
||||||
|
|
||||||
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