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

packages/core/client/src/schema-component/antd/expand-action/Expand.Action.tsx

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

packages/core/client/src/schema-initializer/components/CreateRecordAction.tsx

@@ -2,7 +2,8 @@ import { DownOutlined } from '@ant-design/icons';
 import { css } from '@emotion/css';
 import { observer, RecursionField, useField, useFieldSchema, useForm } from '@formily/react';
 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 { useACLRolesCheck, useRecordPkValue } from '../../acl/ACLProvider';
 import {
@@ -96,8 +97,7 @@ function useAclCheckFn() {
   return actionAclCheck;
 }
 
-export const CreateRecordAction = observer(
-  (props: any) => {
+const InternalCreateRecordAction = (props: any, ref) => {
   const [visible, setVisible] = useState(false);
   const collection = useCollection_deprecated();
   const fieldSchema = useFieldSchema();
@@ -125,8 +125,11 @@ export const CreateRecordAction = observer(
         });
       });
   }, [field, linkageRules, localVariables, variables]);
+  const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
+  const buttonRef = composeRef(ref, internalRef);
   return (
-      <div className={actionDesignerCss}>
+    //@ts-ignore
+    <div className={actionDesignerCss} ref={buttonRef as React.Ref<HTMLButtonElement>}>
       <ActionContextProvider value={{ ...ctx, visible, setVisible }}>
         <CreateAction
           {...props}
@@ -142,9 +145,7 @@ export const CreateRecordAction = observer(
       </ActionContextProvider>
     </div>
   );
-  },
-  { displayName: 'CreateRecordAction' },
-);
+};
 
 function getLinkageCollection(str, form, field) {
   const variablesCtx = { $form: form.values, $iteration: form.values };
@@ -283,6 +284,7 @@ function FinallyButton({
   designable: boolean;
 }) {
   const { getCollection } = useCollectionManager_deprecated();
+
   if (inheritsCollections?.length > 0) {
     if (!linkageFromForm) {
       return allowAddToCurrent === undefined || allowAddToCurrent ? (
@@ -360,6 +362,7 @@ function FinallyButton({
         onClick?.(collection);
       }}
       style={{
+        ...props?.style,
         display: !designable && field?.data?.hidden && 'none',
         opacity: designable && field?.data?.hidden && 0.1,
       }}
@@ -368,3 +371,5 @@ function FinallyButton({
     </Button>
   );
 }
+
+export const CreateRecordAction = forwardRef<HTMLButtonElement | HTMLAnchorElement, any>(InternalCreateRecordAction);