@cleartrip/ct-design-base-dragger 2.0.0-TEST.0 → 4.0.0-SNAPSHOT-test.0

package/package.json

@@ -1,25 +1,32 @@
 {
   "name": "@cleartrip/ct-design-base-dragger",
-  "version": "2.0.0-TEST.0",
+  "version": "4.0.0-SNAPSHOT-test.0",
   "description": "A Base Component which can be wrapper to make a component draggable",
   "types": "dist/index.d.ts",
-  "main": "dist/ct-design-base-dragger.cjs.js",
+  "main": "./dist/ct-design-base-dragger.cjs.js",
   "jsnext:main": "dist/ct-design-base-dragger.esm.js",
   "module": "dist/ct-design-base-dragger.esm.js",
   "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/ct-design-base-dragger.d.ts",
+      "import": "./dist/ct-design-base-dragger.esm.js",
+      "default": "./dist/ct-design-base-dragger.cjs.js"
+    }
+  },
   "browser": {
     "./dist/ct-design-base-dragger.esm.js": "./dist/ct-design-base-dragger.browser.esm.js",
     "./dist/ct-design-base-dragger.cjs.js": "./dist/ct-design-base-dragger.browser.cjs.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@cleartrip/ct-design-container": "4.0.0-TEST.0"
-  },
-  "devDependencies": {
-    "@cleartrip/ct-design-theme": "4.0.0-TEST.0"
+    "@cleartrip/ct-design-container": "4.0.0-SNAPSHOT-test.0",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-test.0"
   },
+  "devDependencies": {},
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
@@ -33,6 +40,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch-package": "rollup -c -w",
     "build-package": "rollup -c",
-    "build-package:clean": "rm -rf dist && rollup -c"
+    "build-package:clean": "rm -rf dist && rollup -c",
+    "publish-package:local": "yalc publish"
   }
 }

package/src/BaseDragger.tsx

@@ -0,0 +1,243 @@
+/* eslint-disable local-rules/disallow-style-config-inline */
+import { useRef, useState, memo, useLayoutEffect, useCallback } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+
+import { useDrag } from './useDrag';
+import BaseDraggerContext from './context/BaseDraggerContext';
+
+import { IBaseDraggerProps, IDraggerDefaultState } from './type';
+
+export const DRAGGABLE_CONTANTS = {
+  THRESHOLD_DIVIDER: 2,
+  ORIGIN: 1500,
+  VELOCITY: 0.4,
+  OFFSET: 250,
+  VELOCITY_DELTA_X: 10,
+};
+
+function BaseDragger({
+  isVisible,
+  children,
+  minDraggableHeight = 300,
+  minDraggableHeaderHeight,
+  maxDraggableHeight,
+  isClosable = false,
+  isDraggable = true,
+  onDragging: onDraggingCb,
+  onDragEnd: onDragEndCb,
+  isWrappedWithTransitionGroup = false,
+}: IBaseDraggerProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [defaultStyles, setDefaultStyles] = useState<IDraggerDefaultState | null>(null);
+  const draggableHeaderRef = useRef<(HTMLDivElement | null)[]>([]);
+
+  const debouncedStart = useRef(false);
+
+  const calculateDefaultStyles = useCallback(() => {
+    const windowInnerHeight = window.innerHeight;
+
+    const { height = 0 } = ref.current?.getBoundingClientRect() ?? {};
+    const manualTop = windowInnerHeight - height;
+
+    const maximumPossibleHeight = Math.min(
+      maxDraggableHeight ?? ref.current?.scrollHeight ?? 0,
+      (92 * windowInnerHeight) / 100,
+    );
+
+    const draggerHeaderHeight = draggableHeaderRef.current?.reduce(
+      (h, element) => h + (element?.getBoundingClientRect().height ?? 0),
+      0,
+    );
+
+    const minimumHeightPossible =
+      minDraggableHeaderHeight ?? (draggableHeaderRef.current ? (draggerHeaderHeight ?? 0) : 0);
+    const currentHeight = maxDraggableHeight ?? height;
+
+    const maximumDeltaThatCanBeAddedToTop = currentHeight - maximumPossibleHeight;
+    const maximumDeltaCanBeAddedToBottom = currentHeight - minimumHeightPossible;
+
+    const deltaPoints = [
+      maximumDeltaThatCanBeAddedToTop + DRAGGABLE_CONTANTS.ORIGIN,
+      DRAGGABLE_CONTANTS.ORIGIN,
+      maximumDeltaCanBeAddedToBottom + DRAGGABLE_CONTANTS.ORIGIN,
+    ];
+
+    if (isClosable) {
+      deltaPoints.push(manualTop + DRAGGABLE_CONTANTS.ORIGIN);
+    }
+
+    setDefaultStyles({
+      maximumDeltaCanBeAddedToBottom,
+      maximumDeltaThatCanBeAddedToTop,
+      deltaPoints,
+      initialHeight: height ?? 0,
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isVisible, maxDraggableHeight, isDraggable, isClosable]);
+
+  useLayoutEffect(() => {
+    const getStylesInFrames = () => {
+      if (ref.current) {
+        const initialTransition = ref.current.style.transition;
+
+        requestAnimationFrame(() => {
+          if (ref.current) {
+            const originalTransition = ref.current.style.transition;
+            const originalTransform = ref.current.style.transform;
+
+            ref.current.style.transform = '';
+            ref.current.style.opacity = '0';
+            ref.current.style.transition = '';
+
+            requestAnimationFrame(() => {
+              calculateDefaultStyles();
+
+              if (ref.current) {
+                ref.current.style.transform = originalTransform;
+                ref.current.style.transition = initialTransition;
+
+                requestAnimationFrame(() => {
+                  if (ref.current) {
+                    ref.current.style.opacity = '1';
+                    ref.current.style.transition = originalTransition;
+                  }
+                });
+              }
+            });
+          }
+        });
+      }
+    };
+
+    if (isDraggable && !isWrappedWithTransitionGroup) {
+      getStylesInFrames();
+    }
+  }, [isDraggable, isWrappedWithTransitionGroup, calculateDefaultStyles]);
+
+  const onReactTransitionGroupEnd = useCallback(() => {
+    calculateDefaultStyles();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const { onDragStart, onDragging, onDragEnd, onCustomPositionChange } = useDrag({
+    onDragging(event) {
+      if (event && defaultStyles && !debouncedStart.current) {
+        const { deltaY: dy, initialDxDy, dir } = event;
+
+        if (dir === 'Left' || dir === 'Right') {
+          return;
+        }
+
+        const deltaY =
+          dy + initialDxDy[1] > 0
+            ? Math.min(defaultStyles.maximumDeltaCanBeAddedToBottom, dy + initialDxDy[1])
+            : -Math.min(Math.abs(defaultStyles.maximumDeltaThatCanBeAddedToTop), Math.abs(dy + initialDxDy[1]));
+
+        if (ref.current) {
+          ref.current.style.transform = `translateY(${deltaY}px) translateZ(0px)`;
+        }
+
+        if (onDraggingCb) {
+          onDraggingCb({ viewableHeight: defaultStyles.initialHeight + -deltaY });
+        }
+      }
+    },
+    onDragEnd(event) {
+      if (defaultStyles) {
+        const { deltaY: dy, initialDxDy, dir, deltaX, velocity, absX } = event;
+        const { deltaPoints } = defaultStyles;
+
+        const takeVelocityInConsideration = absX <= DRAGGABLE_CONTANTS.VELOCITY_DELTA_X;
+
+        if (initialDxDy) {
+          const deltaOrigin = dy + initialDxDy[1] + DRAGGABLE_CONTANTS.ORIGIN;
+          let destination = deltaPoints[0];
+
+          if (takeVelocityInConsideration && velocity >= DRAGGABLE_CONTANTS.VELOCITY) {
+            const jumpBy = Math.floor(velocity / DRAGGABLE_CONTANTS.VELOCITY);
+            let currentDeltaIndex = -1;
+
+            deltaPoints.forEach((x, index) => {
+              const change = dy + initialDxDy[1] + DRAGGABLE_CONTANTS.ORIGIN;
+
+              if (change >= x && dir === 'Down') {
+                currentDeltaIndex = index;
+              } else if (x >= change && dir === 'Up') {
+                currentDeltaIndex = index;
+              }
+            });
+
+            if (dir === 'Up') {
+              destination = deltaPoints[Math.max(0, currentDeltaIndex - jumpBy)];
+            } else {
+              destination = deltaPoints[Math.min(deltaPoints.length - 1, currentDeltaIndex + jumpBy)];
+            }
+          } else {
+            for (let i = 0; i < deltaPoints.length - 1; ++i) {
+              const l = deltaPoints[i],
+                r = deltaPoints[i + 1];
+
+              const upperLimit = l + (r - l) / DRAGGABLE_CONTANTS.THRESHOLD_DIVIDER;
+
+              if (deltaOrigin >= l && deltaOrigin <= r) {
+                if (dir === 'Up') {
+                  destination = r;
+
+                  if (deltaOrigin <= upperLimit) {
+                    destination = l;
+                  }
+                } else {
+                  destination = l;
+
+                  if (upperLimit <= deltaOrigin) {
+                    destination = r;
+                  }
+                }
+              }
+            }
+
+            if (deltaOrigin >= deltaPoints[deltaPoints.length - 1]) {
+              destination = deltaPoints[deltaPoints.length - 1];
+            }
+          }
+
+          onCustomPositionChange([deltaX, destination - DRAGGABLE_CONTANTS.ORIGIN]);
+
+          if (ref.current) {
+            ref.current.style.transform = `translateY(${destination - DRAGGABLE_CONTANTS.ORIGIN}px) translateZ(0px)`;
+          }
+          if (onDragEndCb) {
+            onDragEndCb({ viewableHeight: defaultStyles.initialHeight + -(destination - DRAGGABLE_CONTANTS.ORIGIN) });
+          }
+
+          debouncedStart.current = true;
+          setTimeout(() => {
+            debouncedStart.current = false;
+          }, 200);
+        }
+      }
+    },
+  });
+
+  return (
+    <Container
+      styleConfig={{
+        root: [
+          {
+            height: minDraggableHeight,
+          },
+        ],
+      }}
+    >
+      <BaseDraggerContext
+        {...(defaultStyles ? { onDragStart, onDragEnd, onDragging } : {})}
+        draggerHeaderRef={draggableHeaderRef}
+      >
+        {children({ ref, onReactTransitionGroupEnd })}
+      </BaseDraggerContext>
+    </Container>
+  );
+}
+
+export default memo(BaseDragger);

package/src/BaseDraggerHeader.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren, memo, useCallback } from 'react';
+import { useDraggableHeader } from './context/BaseDraggerContext';
+
+export function BaseDraggerHeader({ children }: PropsWithChildren) {
+  const { draggerHeaderRef, onDragEnd, onDragStart, onDragging } = useDraggableHeader();
+
+  const refCallback = useCallback((node: HTMLDivElement) => {
+    if (node) {
+      draggerHeaderRef.current?.push(node);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div onTouchStart={onDragStart} onTouchMove={onDragging} onTouchEnd={onDragEnd} ref={refCallback}>
+      {children}
+    </div>
+  );
+}
+
+export default memo(BaseDraggerHeader);

package/src/context/BaseDraggerContext.tsx

@@ -0,0 +1,39 @@
+import { PropsWithChildren, createContext, memo, useContext, useMemo, RefObject } from 'react';
+import { DragEvent } from '../useDrag';
+
+const BaseDraggerProvider = createContext<IBaseDraggerConsumerValue>({} as IBaseDraggerConsumerValue);
+
+export interface IBaseDraggerConsumerValue {
+  onDragStart?: DragEvent;
+  onDragging?: DragEvent;
+  onDragEnd?: DragEvent;
+  draggerHeaderRef: RefObject<(HTMLDivElement | null)[]>;
+}
+
+export interface IBaseDraggerContextProps extends PropsWithChildren, IBaseDraggerConsumerValue {}
+
+function BaseDraggerContext({
+  children,
+  onDragEnd,
+  onDragStart,
+  onDragging,
+  draggerHeaderRef,
+}: IBaseDraggerContextProps) {
+  const value = useMemo(() => {
+    return {
+      onDragStart,
+      onDragging,
+      onDragEnd,
+      draggerHeaderRef,
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onDragEnd, onDragging, onDragStart]);
+
+  return <BaseDraggerProvider.Provider value={value}>{children}</BaseDraggerProvider.Provider>;
+}
+
+export function useDraggableHeader() {
+  return useContext(BaseDraggerProvider);
+}
+
+export default memo(BaseDraggerContext);

package/src/index.ts

@@ -0,0 +1,4 @@
+export { default as BaseDragger } from './BaseDragger';
+export { default as BaseDraggerHeader } from './BaseDraggerHeader';
+export { useDrag } from './useDrag';
+export * from './type';

package/src/type.ts

@@ -0,0 +1,28 @@
+import { MutableRefObject, ReactNode } from 'react';
+
+export interface IBaseDraggerProps {
+  children: (props: {
+    ref: MutableRefObject<HTMLDivElement | null>;
+    onReactTransitionGroupEnd?: () => void;
+  }) => ReactNode;
+  isVisible?: boolean;
+  isDraggable?: boolean;
+  isClosable?: boolean;
+  maxDraggableHeight?: number;
+  minDraggableHeight?: number;
+  minDraggableHeaderHeight?: number;
+  onDragging?: (event: IDragCallbackArgs) => void;
+  onDragEnd?: (event: IDragCallbackArgs) => void;
+  isWrappedWithTransitionGroup?: boolean;
+}
+
+export interface IDragCallbackArgs {
+  viewableHeight: number;
+}
+
+export interface IDraggerDefaultState {
+  maximumDeltaThatCanBeAddedToTop: number;
+  maximumDeltaCanBeAddedToBottom: number;
+  deltaPoints: number[];
+  initialHeight: number;
+}

package/src/useDrag.ts

@@ -0,0 +1,176 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { TouchEvent, useCallback, useState } from 'react';
+
+export type HandledEvents = TouchEvent<HTMLDivElement>;
+
+const DRAGGER_INITIAL_STATE = {
+  initial: [0, 0],
+  start: 0,
+  xy: [0, 0],
+  dragging: false,
+  initialDxDy: [0, 0],
+  lastDxDy: [0, 0],
+  eventData: {} as EventData,
+};
+
+export const LEFT = 'Left';
+export const RIGHT = 'Right';
+export const UP = 'Up';
+export const DOWN = 'Down';
+
+export type SwipeDirections = typeof LEFT | typeof RIGHT | typeof UP | typeof DOWN;
+
+export type EventData = {
+  absX: number;
+  absY: number;
+  deltaX: number;
+  deltaY: number;
+  dir: SwipeDirections;
+  event: HandledEvents;
+  initial: number[];
+  velocity: number;
+  clientY: number;
+  initialDxDy: number[];
+};
+
+function getDirection(absX: number, absY: number, deltaX: number, deltaY: number): SwipeDirections {
+  if (absX > absY) {
+    if (deltaX > 0) {
+      return RIGHT;
+    }
+    return LEFT;
+  } else if (deltaY > 0) {
+    return DOWN;
+  }
+  return UP;
+}
+
+export type DragEvent = (e: HandledEvents) => void;
+
+export interface IDragProps {
+  onDragStart?: (e: EventData) => void;
+  onDragging?: (e: EventData) => void;
+  onDragEnd?: (e: EventData) => void;
+}
+
+export function useDrag(events: IDragProps = {}) {
+  const [state, setState] = useState(DRAGGER_INITIAL_STATE);
+
+  const onDragStart = useCallback((event: HandledEvents) => {
+    const isTouch = 'touches' in event || 'changedTouches' in event;
+
+    if (isTouch && (event.touches ?? event.changedTouches).length > 1) return;
+
+    setState((previous) => {
+      const { clientX, clientY } = isTouch ? (event.touches[0] ?? event.changedTouches[0]) : event;
+
+      return {
+        ...previous,
+        ...DRAGGER_INITIAL_STATE,
+        initialDxDy: previous.initialDxDy,
+        lastDxDy: previous.initialDxDy,
+        xy: [clientX, clientY],
+        start: event.timeStamp || 0,
+        dragging: true,
+      };
+    });
+  }, []);
+
+  const onDragging = useCallback(
+    (event: HandledEvents) => {
+      setState((state) => {
+        const isTouch = 'touches' in event || 'changedTouches' in event;
+
+        if (isTouch && (event.touches ?? event.changedTouches).length > 1) {
+          return state;
+        }
+
+        event.stopPropagation();
+        event.preventDefault();
+
+        const { clientX, clientY } = isTouch ? (event.touches[0] ?? event.changedTouches[0]) : event;
+
+        const deltaX = clientX - state.xy[0];
+        const deltaY = clientY - state.xy[1];
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+        const time = (event.timeStamp || 0) - state.start;
+        const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
+        const dir = getDirection(absX, absY, deltaX, deltaY);
+
+        const lastDxDy = [state.initialDxDy[0] + deltaX, state.initialDxDy[1] + deltaY];
+
+        const eventData = {
+          absX,
+          absY,
+          deltaX,
+          deltaY,
+          clientY,
+          dir,
+          event,
+          initial: state.initial,
+          velocity,
+          initialDxDy: state.initialDxDy,
+        };
+
+        if (events.onDragging) events.onDragging(eventData);
+
+        return {
+          ...state,
+          eventData,
+          lastDxDy: lastDxDy,
+        };
+      });
+    },
+    [events],
+  );
+
+  const onCustomPositionChange = useCallback((positions: number[]) => {
+    setState((state) => {
+      return {
+        ...state,
+        initialDxDy: positions,
+        lastDxDy: positions,
+      };
+    });
+  }, []);
+
+  const onDragEnd = useCallback(
+    (event: HandledEvents) => {
+      const eventData = state.eventData;
+      const distanceX = event.changedTouches[0].clientX - state.xy[0];
+      const distanceY = event.changedTouches[0].clientY - state.xy[1];
+
+      let swipeDirection;
+
+      if (Math.abs(distanceX) > Math.abs(distanceY)) {
+        // Horizontal swipe
+        swipeDirection = distanceX > 0 ? RIGHT : LEFT;
+      } else {
+        // Vertical swipe
+        swipeDirection = distanceY > 0 ? DOWN : UP;
+      }
+      if (events.onDragEnd) {
+        // @ts-ignore
+        events.onDragEnd({ absX: Math.abs(distanceX), absY: Math.abs(distanceY), dir: swipeDirection, ...eventData });
+      }
+
+      setState((state) => {
+        return {
+          ...state,
+          initialDxDy: state.lastDxDy,
+        };
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [events],
+  );
+
+  return {
+    state,
+    onDragStart,
+    onDragEnd,
+    onDragging,
+    onCustomPositionChange,
+  };
+}