fix: 修复组件层问题

antvis · Jan 18, 2024 · 49f47cd · 49f47cd
1 parent c0503df
commit 49f47cd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/packages/s2-react/src/components/advanced-sort/index.tsx b/packages/s2-react/src/components/advanced-sort/index.tsx
@@ -5,6 +5,7 @@ import {
   type SortParam,
   SpreadSheet,
   TOTAL_VALUE,
+  EXTRA_FIELD,
 } from '@antv/s2';
 import { Button, Cascader, Form, Layout, Modal, Radio, Select } from 'antd';
 import cx from 'classnames';
@@ -124,10 +125,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
     );
   };
 
-  const handleCustomSort = (
-    dimension: Dimension,
-    splitOrders: string[] = [],
-  ) => {
+  const handleCustomSort = (dimension: Dimension, splitOrders?: string[]) => {
     handleCustom();
     setCurrentDimension(dimension);
     if (splitOrders) {
@@ -194,7 +192,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
 
         current.sortMethod = sortMethod;
         current.query = {
-          $$extra$$: rule[1],
+          [EXTRA_FIELD]: rule[1],
         };
       } else if (rule[0] === 'sortBy') {
         current.sortBy = currentSortBy;
@@ -328,7 +326,7 @@ export const AdvancedSort: React.FC<AdvancedSortProps> = ({
           } = item || {};
 
           return (
-            <Form.Item name={field} key={field}>
+            <Form.Item key={field}>
               <Form.Item name={[field, 'name']} initialValue={name} noStyle>
                 <Select
                   className={`${ADVANCED_SORT_PRE_CLS}-select`}

diff --git a/packages/s2-react/src/components/switcher/dimension/index.tsx b/packages/s2-react/src/components/switcher/dimension/index.tsx
@@ -20,6 +20,25 @@ type DimensionProps = SwitcherField &
     crossRows?: boolean;
   };
 
+/**
+ * 解决 react 18 with strict mode 下的拖动报错问题
+ * https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194
+ */
+const useAfterAnimationFrame = () => {
+  const [enabled, setEnabled] = React.useState(false);
+
+  React.useEffect(() => {
+    const animation = requestAnimationFrame(() => setEnabled(true));
+
+    return () => {
+      cancelAnimationFrame(animation);
+      setEnabled(false);
+    };
+  }, []);
+
+  return enabled;
+};
+
 export const Dimension: React.FC<DimensionProps> = React.memo((props) => {
   const {
     fieldType,
@@ -37,6 +56,12 @@ export const Dimension: React.FC<DimensionProps> = React.memo((props) => {
 
   const [expandChildren, setExpandChildren] = React.useState(true);
 
+  const enabled = useAfterAnimationFrame();
+
+  if (!enabled) {
+    return null;
+  }
+
   const onUpdateExpand = (event: CheckboxChangeEvent) => {
     setExpandChildren(event.target.checked);
   };