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,55 +97,55 @@ function useAclCheckFn() {
   return actionAclCheck;
 }
 
-export const CreateRecordAction = observer(
-  (props: any) => {
-    const [visible, setVisible] = useState(false);
-    const collection = useCollection_deprecated();
-    const fieldSchema = useFieldSchema();
-    const field: any = useField();
-    const [currentCollection, setCurrentCollection] = useState(collection.name);
-    const [currentCollectionDataSource, setCurrentCollectionDataSource] = useState(collection.dataSource);
-    const linkageRules: any[] = fieldSchema?.['x-linkage-rules'] || [];
-    const values = useRecord();
-    const ctx = useActionContext();
-    const variables = useVariables();
-    const localVariables = useLocalVariables({ currentForm: { values } as any });
-    useEffect(() => {
-      field.stateOfLinkageRules = {};
-      linkageRules
-        .filter((k) => !k.disabled)
-        .forEach((v) => {
-          v.actions?.forEach((h) => {
-            linkageAction({
-              operator: h.operator,
-              field,
-              condition: v.condition,
-              variables,
-              localVariables,
-            });
+const InternalCreateRecordAction = (props: any, ref) => {
+  const [visible, setVisible] = useState(false);
+  const collection = useCollection_deprecated();
+  const fieldSchema = useFieldSchema();
+  const field: any = useField();
+  const [currentCollection, setCurrentCollection] = useState(collection.name);
+  const [currentCollectionDataSource, setCurrentCollectionDataSource] = useState(collection.dataSource);
+  const linkageRules: any[] = fieldSchema?.['x-linkage-rules'] || [];
+  const values = useRecord();
+  const ctx = useActionContext();
+  const variables = useVariables();
+  const localVariables = useLocalVariables({ currentForm: { values } as any });
+  useEffect(() => {
+    field.stateOfLinkageRules = {};
+    linkageRules
+      .filter((k) => !k.disabled)
+      .forEach((v) => {
+        v.actions?.forEach((h) => {
+          linkageAction({
+            operator: h.operator,
+            field,
+            condition: v.condition,
+            variables,
+            localVariables,
           });
         });
-    }, [field, linkageRules, localVariables, variables]);
-    return (
-      <div className={actionDesignerCss}>
-        <ActionContextProvider value={{ ...ctx, visible, setVisible }}>
-          <CreateAction
-            {...props}
-            onClick={(collectionData) => {
-              setVisible(true);
-              setCurrentCollection(collectionData.name);
-              setCurrentCollectionDataSource(collectionData.dataSource);
-            }}
-          />
-          <CollectionProvider_deprecated name={currentCollection} dataSource={currentCollectionDataSource}>
-            <RecursionField schema={fieldSchema} basePath={field.address} onlyRenderProperties />
-          </CollectionProvider_deprecated>
-        </ActionContextProvider>
-      </div>
-    );
-  },
-  { displayName: 'CreateRecordAction' },
-);
+      });
+  }, [field, linkageRules, localVariables, variables]);
+  const internalRef = createRef<HTMLButtonElement | HTMLAnchorElement>();
+  const buttonRef = composeRef(ref, internalRef);
+  return (
+    //@ts-ignore
+    <div className={actionDesignerCss} ref={buttonRef as React.Ref<HTMLButtonElement>}>
+      <ActionContextProvider value={{ ...ctx, visible, setVisible }}>
+        <CreateAction
+          {...props}
+          onClick={(collectionData) => {
+            setVisible(true);
+            setCurrentCollection(collectionData.name);
+            setCurrentCollectionDataSource(collectionData.dataSource);
+          }}
+        />
+        <CollectionProvider_deprecated name={currentCollection} dataSource={currentCollectionDataSource}>
+          <RecursionField schema={fieldSchema} basePath={field.address} onlyRenderProperties />
+        </CollectionProvider_deprecated>
+      </ActionContextProvider>
+    </div>
+  );
+};
 
 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);