From ce570d50ab9fcaba38f38963f25fa23250320ffb Mon Sep 17 00:00:00 2001 From: Roman Pominov Date: Wed, 20 Jul 2022 09:24:04 +0300 Subject: [PATCH] remove "any" --- .../primitives/dnd/handlers.stories.tsx | 31 +++++++++---------- .../primitives/dnd/use-auto-scroll.ts | 16 +++++----- .../components/primitives/dnd/use-drag.ts | 11 ++++++- .../primitives/dnd/use-drop-target.ts | 19 ++++++++++-- 4 files changed, 50 insertions(+), 27 deletions(-) diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/handlers.stories.tsx b/apps/designer/app/shared/design-system/components/primitives/dnd/handlers.stories.tsx index 38b39b7ab0..4d8e31825f 100644 --- a/apps/designer/app/shared/design-system/components/primitives/dnd/handlers.stories.tsx +++ b/apps/designer/app/shared/design-system/components/primitives/dnd/handlers.stories.tsx @@ -1,7 +1,7 @@ import { ComponentMeta } from "@storybook/react"; -import { useRef, useState } from "react"; +import React, { useRef, useState } from "react"; import { Box } from "../../box"; -import { useDropTarget, type Area } from "./use-drop-target"; +import { useDropTarget } from "./use-drop-target"; import { useDrag } from "./use-drag"; import { getPlacement, PlacementIndicator, type Rect } from "./placement"; import { useAutoScroll } from "./use-auto-scroll"; @@ -21,16 +21,7 @@ export const Playground = () => { isDropTarget(element: HTMLElement) { return element.dataset.draggable === "true"; }, - onDropTargetChange({ - rect, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - area, - target, - }: { - rect: Rect; - area: Area; - target: HTMLElement; - }) { + onDropTargetChange({ rect, target }) { setDropTargetRect(rect); const placementRect = getPlacement({ target }); setPlacementIndicatorRect(placementRect); @@ -45,7 +36,7 @@ export const Playground = () => { const autoScrollHandlers = useAutoScroll({ target: scrollRef }); const dragProps = useDrag({ - onStart(event: any) { + onStart(event) { if (event.target.dataset.draggable === "false") { event.cancel(); return; @@ -53,7 +44,7 @@ export const Playground = () => { dragItemRef.current = event.target; autoScrollHandlers.setEnabled(true); }, - onMove: (poiterCoordinate: any) => { + onMove: (poiterCoordinate) => { dropTargetHandlers.handleMove(poiterCoordinate); autoScrollHandlers.handleMove(poiterCoordinate); }, @@ -64,7 +55,7 @@ export const Playground = () => { handleHoldEnd(); autoScrollHandlers.setEnabled(false); }, - onShiftChange({ shifts }: any) { + onShiftChange({ shifts }) { if (dragItemRef.current) { dragItemRef.current.textContent = `shifted ${shifts}`; } @@ -108,7 +99,15 @@ export const Playground = () => { export default {} as ComponentMeta; -const Item = ({ background, draggable = true, children }: any) => ( +const Item = ({ + background, + draggable = true, + children, +}: { + background: string; + draggable?: boolean; + children?: React.ReactNode; +}) => ( ; edgeDistanceThreshold?: number; // min/max speed of the scroll animation in pixels per second minSpeed?: number; maxSpeed?: number; -}): { +}; + +export const useAutoScroll = ({ + target, + edgeDistanceThreshold = 100, + minSpeed = 1, + maxSpeed = 500, +}: Parameters): { handleMove: (pointerCoordinate: { x: number; y: number }) => void; setEnabled: (enabled: boolean) => void; } => { diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts b/apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts index 655b52e981..85ff3a35cd 100644 --- a/apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts +++ b/apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts @@ -18,6 +18,15 @@ const initialState = { status: "idle", } as const; +export type Parameters = { + startDistanceThreashold?: number; + shiftDistanceThreshold?: number; + onStart: (event: { target: HTMLElement; cancel: () => void }) => void; + onMove: (event: { x: number; y: number }) => void; + onShiftChange: (event: { shifts: number }) => void; + onEnd: () => void; +}; + export const useDrag = ({ startDistanceThreashold = 3, shiftDistanceThreshold = 20, @@ -25,7 +34,7 @@ export const useDrag = ({ onMove, onShiftChange, onEnd, -}: any = {}) => { +}: Parameters) => { const state = useRef(initialState); const cancel = () => { diff --git a/apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts b/apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts index b524a0e39f..9a70ef4e77 100644 --- a/apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts +++ b/apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts @@ -2,7 +2,17 @@ import { useRef } from "react"; export type Area = "top" | "right" | "bottom" | "left" | "center"; -type UseDropTarget = any; +export type Parameters = { + isDropTarget: (element: HTMLElement) => boolean; + edgeDistanceThreshold?: number; + holdTimeThreshold?: number; + onDropTargetChange: (event: { + rect: DOMRect; + area: Area; + target: HTMLElement; + }) => void; + onHold: (event: { target: HTMLElement }) => void; +}; export const useDropTarget = ({ isDropTarget, @@ -10,7 +20,7 @@ export const useDropTarget = ({ holdTimeThreshold = 500, onDropTargetChange, onHold, -}: UseDropTarget) => { +}: Parameters) => { const rootRef = useRef(null); const targetRef = useRef(); const targetRectRef = useRef(); @@ -56,7 +66,10 @@ export const useDropTarget = ({ const hasAreaChanged = nextArea !== areaRef.current; areaRef.current = nextArea; - if (hasTargetChanged || hasAreaChanged) { + if ( + (hasTargetChanged || hasAreaChanged) && + targetRectRef.current !== undefined + ) { onDropTargetChange({ rect: targetRectRef.current, area: nextArea,