@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/view/draggable/draggable.tsx

@@ -0,0 +1,167 @@
+// @flow
+import { useRef } from "react";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+import type { DraggableRubric, DraggableDescriptor } from "../../types";
+import getStyle from "./get-style";
+import useDraggablePublisher, {
+  type Args as PublisherArgs,
+} from "../use-draggable-publisher/use-draggable-publisher";
+import AppContext from "../context/app-context";
+import DroppableContext from "../context/droppable-context";
+import type {
+  Props,
+  Provided,
+  DraggableStyle,
+  DragHandleProps,
+} from "./draggable-types";
+import { useValidation, useClonePropValidation } from "./use-validation";
+import useRequiredContext from "../use-required-context";
+
+function preventHtml5Dnd(event: DragEvent) {
+  event.preventDefault();
+}
+
+export default function Draggable(props: Props) {
+  // reference to DOM node
+  const ref = useRef<HTMLElement | null>(null);
+  const setRef = useCallback((el: HTMLElement | null) => {
+    ref.current = el;
+  }, []);
+  const getRef = useCallback((): HTMLElement | null => ref.current, []);
+
+  // context
+  const { contextId, dragHandleUsageInstructionsId, registry } = useRequiredContext(AppContext);
+  const { type, droppableId } = useRequiredContext(DroppableContext);
+
+  const descriptor: DraggableDescriptor = useMemo(
+    () => ({
+      id: props.draggableId,
+      index: props.index,
+      type,
+      droppableId,
+    }),
+    [props.draggableId, props.index, type, droppableId],
+  );
+
+  // props
+  const {
+    // ownProps
+    children,
+    draggableId,
+    isEnabled,
+    shouldRespectForcePress,
+    canDragInteractiveElements,
+    isClone,
+
+    // mapProps
+    mapped,
+
+    // dispatchProps
+    dropAnimationFinished: dropAnimationFinishedAction,
+  } = props;
+
+  // Validating props and innerRef
+  useValidation(props, contextId, getRef);
+
+  // Clones do not speak to the dimension marshal
+  // We are violating the rules of hooks here: conditional hooks.
+  // In this specific use case it is okay as an item will always either be a
+  // clone or not for it's whole lifecycle
+  /* eslint-disable react-hooks/rules-of-hooks */
+
+  // Being super sure that isClone is not changing during a draggable lifecycle
+  useClonePropValidation(isClone);
+  if (!isClone) {
+    const forPublisher: PublisherArgs = useMemo(
+      () => ({
+        descriptor,
+        registry,
+        getDraggableRef: getRef,
+        canDragInteractiveElements,
+        shouldRespectForcePress,
+        isEnabled,
+      }),
+      [
+        descriptor,
+        registry,
+        getRef,
+        canDragInteractiveElements,
+        shouldRespectForcePress,
+        isEnabled,
+      ],
+    );
+    useDraggablePublisher(forPublisher);
+  }
+  /* eslint-enable react-hooks/rules-of-hooks */
+
+  const dragHandleProps: DragHandleProps | null = useMemo(
+    () =>
+      isEnabled
+        ? {
+            // See `draggable-types` for an explanation of why these are used
+            tabIndex: 0,
+            role: "button",
+            "aria-describedby": dragHandleUsageInstructionsId,
+            "data-rbd-drag-handle-draggable-id": draggableId,
+            "data-rbd-drag-handle-context-id": contextId,
+            draggable: false,
+            onDragStart: preventHtml5Dnd,
+          }
+        : null,
+    [contextId, dragHandleUsageInstructionsId, draggableId, isEnabled],
+  );
+
+  const onMoveEnd = useCallback(
+    (event: TransitionEvent) => {
+      if (mapped.type !== "DRAGGING") {
+        return;
+      }
+
+      if (!mapped.dropping) {
+        return;
+      }
+
+      // There might be other properties on the element that are
+      // being transitioned. We do not want those to end a drop animation!
+      if (event.propertyName !== "transform") {
+        return;
+      }
+
+      dropAnimationFinishedAction();
+    },
+    [dropAnimationFinishedAction, mapped],
+  );
+
+  const provided: Provided = useMemo(() => {
+    const style: DraggableStyle = getStyle(mapped);
+    const onTransitionEnd =
+      mapped.type === "DRAGGING" && mapped.dropping ? onMoveEnd : null;
+
+    const result: Provided = {
+      innerRef: setRef,
+      draggableProps: {
+        "data-rbd-draggable-context-id": contextId,
+        "data-rbd-draggable-id": draggableId,
+        style,
+        onTransitionEnd,
+      },
+      dragHandleProps,
+    };
+
+    return result;
+  }, [contextId, dragHandleProps, draggableId, mapped, onMoveEnd, setRef]);
+
+  const rubric: DraggableRubric = useMemo(
+    () => ({
+      draggableId: descriptor.id,
+      type: descriptor.type,
+      source: {
+        index: descriptor.index,
+        droppableId: descriptor.droppableId,
+      },
+    }),
+    [descriptor.droppableId, descriptor.id, descriptor.index, descriptor.type],
+  );
+
+  return children(provided, mapped.snapshot, rubric);
+}

package/src/view/draggable/get-style.ts

@@ -0,0 +1,109 @@
+// @flow
+import type { BoxModel } from 'css-box-model';
+import { combine, transforms, transitions } from '../../animation';
+import type { DraggableDimension } from '../../types';
+import type {
+  DraggingStyle,
+  NotDraggingStyle,
+  ZIndexOptions,
+  DropAnimation,
+  SecondaryMapProps,
+  DraggingMapProps,
+  DraggableStyle,
+  MappedProps,
+} from './draggable-types';
+
+export const zIndexOptions: ZIndexOptions = {
+  dragging: 5000,
+  dropAnimating: 4500,
+};
+
+const getDraggingTransition = (
+  shouldAnimateDragMovement: boolean,
+  dropping: DropAnimation | null,
+): string => {
+  if (dropping) {
+    return transitions.drop(dropping.duration);
+  }
+  if (shouldAnimateDragMovement) {
+    return transitions.snap;
+  }
+  return transitions.fluid;
+};
+
+const getDraggingOpacity = (
+  isCombining: boolean,
+  isDropAnimating: boolean,
+): number | null => {
+  // if not combining: no not impact opacity
+  if (!isCombining) {
+    return null;
+  }
+
+  return isDropAnimating ? combine.opacity.drop : combine.opacity.combining;
+};
+
+const getShouldDraggingAnimate = (dragging: DraggingMapProps): boolean => {
+  if (dragging.forceShouldAnimate != null) {
+    return dragging.forceShouldAnimate;
+  }
+  return dragging.mode === 'SNAP';
+};
+
+function getDraggingStyle(dragging: DraggingMapProps): DraggingStyle {
+  const dimension: DraggableDimension = dragging.dimension;
+  const box: BoxModel = dimension.client;
+  const { offset, combineWith, dropping } = dragging;
+
+  const isCombining: boolean = Boolean(combineWith);
+
+  const shouldAnimate: boolean = getShouldDraggingAnimate(dragging);
+  const isDropAnimating: boolean = Boolean(dropping);
+
+  const transform: string | null = isDropAnimating
+    ? transforms.drop(offset, isCombining)
+    : transforms.moveTo(offset);
+
+  const style: DraggingStyle = {
+    // ## Placement
+    position: 'fixed',
+    // As we are applying the margins we need to align to the start of the marginBox
+    top: box.marginBox.top,
+    left: box.marginBox.left,
+
+    // ## Sizing
+    // Locking these down as pulling the node out of the DOM could cause it to change size
+    boxSizing: 'border-box',
+    width: box.borderBox.width,
+    height: box.borderBox.height,
+
+    // ## Movement
+    // Opting out of the standard css transition for the dragging item
+    transition: getDraggingTransition(shouldAnimate, dropping),
+    transform,
+    opacity: getDraggingOpacity(isCombining, isDropAnimating),
+    // ## Layering
+    zIndex: isDropAnimating
+      ? zIndexOptions.dropAnimating
+      : zIndexOptions.dragging,
+
+    // ## Blocking any pointer events on the dragging or dropping item
+    // global styles on cover while dragging
+    pointerEvents: 'none',
+  };
+  return style;
+}
+
+function getSecondaryStyle(secondary: SecondaryMapProps): NotDraggingStyle {
+  return {
+    transform: transforms.moveTo(secondary.offset),
+    // transition style is applied in the head
+    transition: secondary.shouldAnimateDisplacement ? null : 'none',
+  };
+}
+
+export default function getStyle(mapped: MappedProps): DraggableStyle {
+  return mapped.type === 'DRAGGING'
+    ? getDraggingStyle(mapped)
+    : getSecondaryStyle(mapped);
+}

package/src/view/draggable/index.ts

@@ -0,0 +1,2 @@
+// @flow
+export { PublicDraggable as default } from './draggable-api';

package/src/view/draggable/use-validation.ts

@@ -0,0 +1,70 @@
+// @flow
+import { useRef } from 'react';
+import { invariant } from '../../invariant';
+import { isInteger } from '../../native-with-fallback';
+import type { DraggableId, ContextId } from '../../types';
+import type { Props } from './draggable-types';
+import checkIsValidInnerRef from '../check-is-valid-inner-ref';
+import findDragHandle from '../get-elements/find-drag-handle';
+import useDevSetupWarning from '../use-dev-setup-warning';
+import useDev from '../use-dev';
+
+export function useValidation(
+  props: Props,
+  contextId: ContextId,
+  getRef: () => HTMLElement | null,
+) {
+  // running after every update in development
+  useDevSetupWarning(() => {
+    function prefix(id: DraggableId): string {
+      return `Draggable[id: ${id}]: `;
+    }
+
+    // wrapping entire block for better minification
+    const id: DraggableId | null = props.draggableId;
+    invariant(id, 'Draggable requires a draggableId');
+    invariant(
+      typeof id === 'string',
+      `Draggable requires a [string] draggableId.
+      Provided: [type: ${typeof id}] (value: ${id})`,
+    );
+
+    invariant(
+      isInteger(props.index),
+      `${prefix(id)} requires an integer index prop`,
+    );
+
+    if (props.mapped.type === 'DRAGGING') {
+      return;
+    }
+
+    // Checking provided ref (only when not dragging as it might be removed)
+    checkIsValidInnerRef(getRef());
+
+    // Checking that drag handle is provided
+    // Only running check when enabled.
+    // When not enabled there is no drag handle props
+    if (props.isEnabled) {
+      invariant(
+        findDragHandle(contextId, id),
+        `${prefix(id)} Unable to find drag handle`,
+      );
+    }
+  });
+}
+
+// we expect isClone not to change for entire component's life
+export function useClonePropValidation(isClone: boolean) {
+  useDev(() => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const initialRef = useRef<boolean>(isClone);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useDevSetupWarning(() => {
+      invariant(
+        isClone === initialRef.current,
+        'Draggable isClone prop value changed during component life',
+      );
+    }, [isClone]);
+  });
+}