chore: Remove legacy api

Author: zombieJ

examples/animate.less

@@ -1,5 +1,5 @@
 .motion {
-  transition: all .3s;
+  transition: all 5s;
 }
 
 .item {

examples/animate.tsx

@@ -56,56 +56,70 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
     motionAppear,
   },
   ref,
-) => (
-  <CSSMotion
-    visible={visible}
-    ref={ref}
-    motionName="motion"
-    motionAppear={motionAppear}
-    onAppearStart={getCollapsedHeight}
-    onAppearActive={getMaxHeight}
-    onAppearEnd={onAppear}
-    onLeaveStart={getCurrentHeight}
-    onLeaveActive={getCollapsedHeight}
-    onLeaveEnd={() => {
-      onLeave(id);
-    }}
-  >
-    {({ className, style }, motionRef) => {
-      return (
-        <div ref={motionRef} className={classNames('item', className)} style={style} data-id={id}>
-          <div style={{ height: itemUuid % 2 ? 100 : undefined }}>
-            <button
-              type="button"
-              onClick={() => {
-                onClose(id);
-              }}
-            >
-              Close
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                onInsertBefore(id);
-              }}
-            >
-              Insert Before
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                onInsertAfter(id);
-              }}
-            >
-              Insert After
-            </button>
-            {id}
+) => {
+  const motionRef = React.useRef(false);
+  React.useEffect(() => {
+    return () => {
+      if (motionRef.current) {
+        onAppear();
+      }
+    };
+  }, []);
+
+  return (
+    <CSSMotion
+      visible={visible}
+      ref={ref}
+      motionName="motion"
+      motionAppear={motionAppear}
+      onAppearStart={getCollapsedHeight}
+      onAppearActive={node => {
+        motionRef.current = true;
+        return getMaxHeight(node);
+      }}
+      onAppearEnd={onAppear}
+      onLeaveStart={getCurrentHeight}
+      onLeaveActive={getCollapsedHeight}
+      onLeaveEnd={() => {
+        onLeave(id);
+      }}
+    >
+      {({ className, style }, motionRef) => {
+        return (
+          <div ref={motionRef} className={classNames('item', className)} style={style} data-id={id}>
+            <div style={{ height: itemUuid % 2 ? 100 : undefined }}>
+              <button
+                type="button"
+                onClick={() => {
+                  onClose(id);
+                }}
+              >
+                Close
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  onInsertBefore(id);
+                }}
+              >
+                Insert Before
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  onInsertAfter(id);
+                }}
+              >
+                Insert After
+              </button>
+              {id}
+            </div>
           </div>
-        </div>
-      );
-    }}
-  </CSSMotion>
-);
+        );
+      }}
+    </CSSMotion>
+  );
+};
 
 const ForwardMyItem = React.forwardRef(MyItem);
 
@@ -165,13 +179,13 @@ const Demo = () => {
           height={200}
           itemHeight={20}
           itemKey="id"
-          disabled={animating}
+          // disabled={animating}
           ref={listRef}
           style={{
             border: '1px solid red',
             boxSizing: 'border-box',
           }}
-          onSkipRender={onAppear}
+          // onSkipRender={onAppear}
           // onItemRemove={onAppear}
         >
           {(item, index) => (

src/List.tsx

@@ -45,12 +45,6 @@ export interface ListProps<T> extends React.HTMLAttributes<any> {
   virtual?: boolean;
 
   onScroll?: React.UIEventHandler<HTMLElement>;
-
-  /** @deprecated only compatible for old usage */
-  disabled?: boolean;
-
-  /** When `disabled`, trigger if changed item not render. */
-  onSkipRender?: () => void;
 }
 
 function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
@@ -65,8 +59,6 @@ function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     children,
     itemKey,
     virtual,
-    disabled,
-    onSkipRender,
     component: Component = 'div',
     ...restProps
   } = props;
@@ -101,22 +93,14 @@ function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   const rangeRef = useRef({ start: 0, end: mergedData.length });
 
   const diffItemRef = useRef<T>();
-  const [diffItem] = useDiffItem(mergedData, getKey, diffIndex => {
-    if (disabled && (diffIndex < rangeRef.current.start || diffIndex > rangeRef.current.end)) {
-      onSkipRender?.();
-    }
-  });
+  const [diffItem] = useDiffItem(mergedData, getKey);
   diffItemRef.current = diffItem;
 
   // ================================ Height ================================
   const [getInstanceRefFunc, collectHeight, heights, heightUpdatedMark] = useHeights(
     getKey,
     null,
-    item => {
-      if (disabled && diffItemRef.current === item) {
-        onSkipRender?.();
-      }
-    },
+    null,
   );
 
   // ========================== Visible Calculation =========================

src/hooks/useDiffItem.ts

@@ -5,15 +5,15 @@ import { GetKey } from '../interface';
 export default function useDiffItem<T>(
   data: T[],
   getKey: GetKey<T>,
-  onDiff: (diffIndex: number) => void,
+  onDiff?: (diffIndex: number) => void,
 ): [T] {
   const [prevData, setPrevData] = React.useState(data);
   const [diffItem, setDiffItem] = React.useState(null);
 
   React.useEffect(() => {
     const diff = findListDiffIndex(prevData || [], data || [], getKey);
     if (diff?.index !== undefined) {
-      onDiff(diff.index);
+      onDiff?.(diff.index);
       setDiffItem(data[diff.index]);
     }
     setPrevData(data);

tests/list.test.js

@@ -208,18 +208,4 @@ describe('List.Basic', () => {
       expect(collected).toBeTruthy();
     });
   });
-
-  it('legacy onSkipRender', () => {
-    const onSkipRender = jest.fn();
-    let data = genData(10);
-    const wrapper = genList({ itemHeight: 20, height: 40, data, disabled: true, onSkipRender });
-    data = [{ id: 'test' }, ...data];
-    wrapper.setProps({ data });
-    wrapper.update();
-    wrapper.find('ul').simulate('scroll', {
-      target: { scrollTop: 400 },
-    });
-    wrapper.update();
-    expect(onSkipRender).toHaveBeenCalled();
-  });
 });