@os-design/drag-sort 1.0.18 → 1.0.20

package/src/utils/useScrollEventByPoint.ts

@@ -0,0 +1,56 @@
+import { getScrollableElements } from '@os-design/use-auto-scroll';
+import { useCallback, useEffect, useRef } from 'react';
+
+const compare = <T>(prevArr: T[], nextArr: T[]) => {
+  const remove: T[] = [];
+  const add: T[] = [];
+  prevArr.forEach((item) => {
+    if (!nextArr.includes(item)) remove.push(item);
+  });
+  nextArr.forEach((item) => {
+    if (!prevArr.includes(item)) add.push(item);
+  });
+  return { remove, add };
+};
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+/**
+ * Sets the listener that will be called whenever the scroll event occurs
+ * in one of the elements located under the specified point.
+ */
+const useScrollEventByPoint = (
+  point: Point | null,
+  listener: (e: Event) => void
+) => {
+  const listenerRef = useRef(listener);
+  useEffect(() => {
+    listenerRef.current = listener;
+  }, [listener]);
+
+  const eventListener = useCallback((e: Event) => listenerRef.current(e), []);
+  const elementsRef = useRef<Element[]>([]);
+
+  useEffect(() => {
+    if (!point) return;
+    const scrollableElements = getScrollableElements(point.x, point.y);
+    const { remove, add } = compare(elementsRef.current, scrollableElements);
+    const getTarget = (item: Element) =>
+      item === document.body ? window : item;
+
+    remove.forEach((item) => {
+      const index = elementsRef.current.indexOf(item);
+      if (index >= 0) elementsRef.current.splice(index, 1);
+      getTarget(item).removeEventListener('scroll', eventListener);
+    });
+    add.forEach((item) => {
+      elementsRef.current.push(item);
+      getTarget(item).addEventListener('scroll', eventListener);
+    });
+  }, [eventListener, point]);
+};
+
+export default useScrollEventByPoint;

package/src/utils/useTargetList.ts

@@ -0,0 +1,31 @@
+import { Position } from '@os-design/use-drag';
+import useThrottle from '@os-design/use-throttle';
+import { RefObject, useCallback, useMemo, useState } from 'react';
+import ListStore from './ListStore';
+import useScrollEventByPoint from './useScrollEventByPoint';
+
+const useTargetList = (
+  position: Position | null,
+  listStoreRef: RefObject<ListStore>
+) => {
+  const [number, setNumber] = useState(0);
+
+  const targetList = useMemo(() => {
+    if (!position || !listStoreRef.current) return null;
+    const { x, y } = position;
+    const list = listStoreRef.current.findByPosition(x, y);
+    return list || null;
+  }, [listStoreRef, position, number]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const forceUpdate = useCallback(() => {
+    setNumber((n) => n + 1);
+  }, []);
+
+  // Update the target list if one of the elements located under the specified point has been scrolled
+  const [throttledForceUpdate] = useThrottle(forceUpdate, 100);
+  useScrollEventByPoint(position, throttledForceUpdate);
+
+  return targetList;
+};
+
+export default useTargetList;

package/src/utils/useTransitionStyle.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+interface UseTransitionStyleProps {
+  className: string;
+  ms: number;
+  enabled: boolean;
+}
+
+/**
+ * Creates the global style for setting the transition delay.
+ */
+const useTransitionStyle = (props: UseTransitionStyleProps) => {
+  const { className, ms, enabled } = props;
+
+  useEffect(() => {
+    if (!enabled) return () => {};
+    const style = document.createElement('style');
+    style.innerHTML = `.${className}{transition:transform ${ms}ms;}`;
+    const child = document.head.appendChild(style);
+    return () => {
+      document.head.removeChild(child);
+    };
+  }, [className, enabled, ms]);
+};
+
+export default useTransitionStyle;