@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/view/use-sensor-marshal/use-sensor-marshal.ts

@@ -0,0 +1,504 @@
+// @flow
+import rafSchd from "raf-schd";
+import { useState } from "react";
+import { useCallback, useMemo } from "@helpdice/memoizer";
+import type { Position } from "css-box-model";
+// import { invariant } from "../../invariant";
+import type {
+  ContextId,
+  State,
+  Sensor,
+  StopDragOptions,
+  PreDragActions,
+  FluidDragActions,
+  SnapDragActions,
+  DraggableId,
+  SensorAPI,
+  TryGetLock,
+  TryGetLockOptions,
+  DraggableOptions,
+} from "../../types";
+import create, { type Lock, type LockAPI } from "./lock";
+import type { Store, Action } from "../../state/store-types";
+import canStartDrag from "../../state/can-start-drag";
+import {
+  move as moveAction,
+  moveUp as moveUpAction,
+  moveRight as moveRightAction,
+  moveDown as moveDownAction,
+  moveLeft as moveLeftAction,
+  drop as dropAction,
+  lift as liftAction,
+  type LiftArgs as LiftActionArgs,
+  flush,
+} from "../../state/action-creators";
+import type {
+  Registry,
+  DraggableEntry,
+} from "../../state/registry/registry-types";
+import useMouseSensor from "./sensors/use-mouse-sensor";
+import useKeyboardSensor from "./sensors/use-keyboard-sensor";
+import useTouchSensor from "./sensors/use-touch-sensor";
+import useValidateSensorHooks from "./use-validate-sensor-hooks";
+import isEventInInteractiveElement from "./is-event-in-interactive-element";
+import getBorderBoxCenterPosition from "../get-border-box-center-position";
+import { warning } from "../../dev-warning";
+import useLayoutEffect from "../use-isomorphic-layout-effect";
+import { noop } from "../../empty";
+import findClosestDraggableIdFromEvent from "./find-closest-draggable-id-from-event";
+import findDraggable from "../get-elements/find-draggable";
+import bindEvents from "../event-bindings/bind-events";
+import { isDragging } from "../../state/reducer";
+
+function preventDefault(event: Event) {
+  event.preventDefault();
+}
+
+type LockPhase = "PRE_DRAG" | "DRAGGING" | "COMPLETED";
+
+// Exact
+type IsActiveArgs = {
+  expected: LockPhase,
+  phase: LockPhase,
+  isLockActive: () => boolean,
+  shouldWarn: boolean,
+};
+
+function isActive({
+  expected,
+  phase,
+  isLockActive,
+  shouldWarn,
+}: IsActiveArgs): boolean {
+  // lock is no longer active
+  if (!isLockActive()) {
+    if (shouldWarn) {
+      warning(`
+        Cannot perform action.
+        The sensor no longer has an action lock.
+
+        Tips:
+
+        - Throw away your action handlers when forceStop() is called
+        - Check actions.isActive() if you really need to
+      `);
+    }
+    return false;
+  }
+  // wrong phase
+  if (expected !== phase) {
+    if (shouldWarn) {
+      warning(`
+        Cannot perform action.
+        The actions you used belong to an outdated phase
+
+        Current phase: ${expected}
+        You called an action from outdated phase: ${phase}
+
+        Tips:
+
+        - Do not use preDragActions actions after calling preDragActions.lift()
+      `);
+    }
+    return false;
+  }
+  return true;
+}
+
+// Exact
+type CanStartArgs = {
+  lockAPI: LockAPI,
+  registry: Registry,
+  store: Store,
+  draggableId: DraggableId,
+};
+
+function canStart({
+  lockAPI,
+  store,
+  registry,
+  draggableId,
+}: CanStartArgs): boolean {
+  // lock is already claimed - cannot start
+  if (lockAPI.isClaimed()) {
+    return false;
+  }
+
+  const entry: DraggableEntry | null = registry.draggable.findById(draggableId);
+
+  if (!entry) {
+    warning(`Unable to find draggable with id: ${draggableId}`);
+    return false;
+  }
+
+  // draggable is not enabled - cannot start
+  if (!entry.options.isEnabled) {
+    return false;
+  }
+
+  // Application might now allow dragging right now
+  if (!canStartDrag(store.getState(), draggableId)) {
+    return false;
+  }
+
+  return true;
+}
+
+// Exact
+type TryStartArgs = {
+  lockAPI: LockAPI,
+  contextId: ContextId,
+  registry: Registry,
+  store: Store,
+  draggableId: DraggableId,
+  forceSensorStop?: () => void,
+  sourceEvent: Event | null,
+};
+
+function tryStart({
+  lockAPI,
+  contextId,
+  store,
+  registry,
+  draggableId,
+  forceSensorStop,
+  sourceEvent,
+}: TryStartArgs): PreDragActions | null {
+  const shouldStart: boolean = canStart({
+    lockAPI,
+    store,
+    registry,
+    draggableId,
+  });
+
+  if (!shouldStart) {
+    return null;
+  }
+
+  const entry: DraggableEntry = registry.draggable.getById(draggableId);
+  const el: HTMLElement | null = findDraggable(contextId, entry.descriptor.id);
+
+  if (!el) {
+    warning(`Unable to find draggable element with id: ${draggableId}`);
+    return null;
+  }
+
+  // Do not allow dragging from interactive elements
+  if (
+    sourceEvent &&
+    !entry.options.canDragInteractiveElements &&
+    isEventInInteractiveElement(el, sourceEvent)
+  ) {
+    return null;
+  }
+
+  // claiming lock
+  const lock: Lock = lockAPI.claim(forceSensorStop || noop);
+  let phase: LockPhase = "PRE_DRAG";
+
+  function getShouldRespectForcePress(): boolean {
+    // not looking up the entry as it might have been removed in a virtual list
+    return entry.options.shouldRespectForcePress;
+  }
+
+  function isLockActive(): boolean {
+    return lockAPI.isActive(lock);
+  }
+
+  function tryDispatch(expected: LockPhase, getAction: () => Action): void {
+    if (isActive({ expected, phase, isLockActive, shouldWarn: true })) {
+      store.dispatch(getAction());
+    }
+  }
+
+  const tryDispatchWhenDragging = tryDispatch.bind(null, "DRAGGING");
+
+  // Exact
+  type LiftArgs = {
+    liftActionArgs: LiftActionArgs,
+    cleanup: () => void,
+    actions: Object,
+  };
+
+  function lift(args: LiftArgs) {
+    function completed() {
+      lockAPI.release();
+      phase = "COMPLETED";
+    }
+    // Double lift = bad
+    if (phase !== "PRE_DRAG") {
+      completed();
+      // invariant(phase === "PRE_DRAG", `Cannot lift in phase ${phase}`);
+    }
+
+    store.dispatch(liftAction(args.liftActionArgs));
+
+    // We are now in the DRAGGING phase
+    phase = "DRAGGING";
+
+    function finish(
+      reason: "CANCEL" | "DROP",
+      options: StopDragOptions = { shouldBlockNextClick: false },
+    ) {
+      args.cleanup();
+
+      // block next click if requested
+      if (options.shouldBlockNextClick) {
+        const unbind = bindEvents(window, [
+          {
+            eventName: "click",
+            fn: preventDefault,
+            options: {
+              // only blocking a single click
+              once: true,
+              passive: false,
+              capture: true,
+            },
+          },
+        ], {});
+        // Sometimes the click is swallowed, such as when there is reparenting
+        // The click event (in the message queue) will occur before the next setTimeout expiry
+        // https://codesandbox.io/s/click-behaviour-pkfk2
+        setTimeout(unbind);
+      }
+
+      // releasing
+      completed();
+      store.dispatch(dropAction({ reason }));
+    }
+
+    return {
+      isActive: () =>
+        isActive({
+          expected: "DRAGGING",
+          phase,
+          isLockActive,
+          // Do not want to want warnings for boolean checks
+          shouldWarn: false,
+        }),
+      shouldRespectForcePress: getShouldRespectForcePress,
+      drop: (options?: StopDragOptions) => finish("DROP", options),
+      cancel: (options?: StopDragOptions) => finish("CANCEL", options),
+      ...args.actions,
+    };
+  }
+
+  function fluidLift(clientSelection: Position): FluidDragActions {
+    const move = rafSchd((client: Position) => {
+      tryDispatchWhenDragging(() => moveAction({ client }));
+    });
+
+    const api = lift({
+      liftActionArgs: {
+        id: draggableId,
+        clientSelection,
+        movementMode: "FLUID",
+      },
+      cleanup: () => move.cancel(),
+      actions: { move },
+    });
+
+    return {
+      ...api,
+      move,
+    };
+  }
+
+  function snapLift(): SnapDragActions {
+    const actions = {
+      moveUp: () => tryDispatchWhenDragging(moveUpAction),
+      moveRight: () => tryDispatchWhenDragging(moveRightAction),
+      moveDown: () => tryDispatchWhenDragging(moveDownAction),
+      moveLeft: () => tryDispatchWhenDragging(moveLeftAction),
+    };
+
+    return lift({
+      liftActionArgs: {
+        id: draggableId,
+        clientSelection: getBorderBoxCenterPosition(el as HTMLElement),
+        movementMode: "SNAP",
+      },
+      cleanup: noop,
+      actions,
+    });
+  }
+
+  function abortPreDrag() {
+    const shouldRelease: boolean = isActive({
+      expected: "PRE_DRAG",
+      phase,
+      isLockActive,
+      shouldWarn: true,
+    });
+
+    if (shouldRelease) {
+      lockAPI.release();
+    }
+  }
+
+  const preDrag: PreDragActions = {
+    isActive: () =>
+      isActive({
+        expected: "PRE_DRAG",
+        phase,
+        isLockActive,
+        // Do not want to want warnings for boolean checks
+        shouldWarn: false,
+      }),
+    shouldRespectForcePress: getShouldRespectForcePress,
+    fluidLift,
+    snapLift,
+    abort: abortPreDrag,
+  };
+
+  return preDrag;
+}
+
+// Exact
+type SensorMarshalArgs = {
+  contextId: ContextId,
+  registry: Registry,
+  store: Store,
+  customSensors?: (Sensor[]) | null,
+  enableDefaultSensors: boolean,
+};
+
+// default sensors are now exported to library consumers
+const defaultSensors: Sensor[] = [
+  useMouseSensor,
+  useKeyboardSensor,
+  useTouchSensor,
+];
+
+export default function useSensorMarshal({
+  contextId,
+  store,
+  registry,
+  customSensors,
+  enableDefaultSensors,
+}: SensorMarshalArgs) {
+  const useSensors: Sensor[] = [
+    ...(enableDefaultSensors ? defaultSensors : []),
+    ...(customSensors || []),
+  ];
+  const lockAPI: LockAPI = useState(() => create())[0];
+
+  const tryAbandonLock = useCallback(
+    function tryAbandonLock(previous: State, current: State) {
+      if (isDragging(previous) && !isDragging(current)) {
+        lockAPI.tryAbandon();
+      }
+      // if (previous.isDragging && !current.isDragging) {
+      //   lockAPI.tryAbandon();
+      // }
+    },
+    [lockAPI],
+  );
+
+  // We need to abort any capturing if there is no longer a drag
+  useLayoutEffect(
+    function listenToStore() {
+      let previous: State = store.getState();
+      const unsubscribe = store.subscribe(() => {
+        const current: State = store.getState();
+        tryAbandonLock(previous, current);
+        previous = current;
+      });
+
+      // unsubscribe from store when unmounting
+      return unsubscribe;
+    },
+    [lockAPI, store, tryAbandonLock],
+  );
+
+  // abort any lock on unmount
+  useLayoutEffect(() => {
+    return lockAPI.tryAbandon;
+  }, [lockAPI.tryAbandon]);
+
+  const canGetLock = useCallback(
+    (draggableId: DraggableId): boolean => {
+      return canStart({
+        lockAPI,
+        registry,
+        store,
+        draggableId,
+      });
+    },
+    [lockAPI, registry, store],
+  );
+
+  const tryGetLock: TryGetLock = useCallback(
+    (
+      draggableId: DraggableId,
+      forceStop?: () => void,
+      options?: TryGetLockOptions,
+    ): PreDragActions | null =>
+      tryStart({
+        lockAPI,
+        registry,
+        contextId,
+        store,
+        draggableId,
+        forceSensorStop: forceStop,
+        sourceEvent:
+          options && options.sourceEvent ? options.sourceEvent : null,
+      }),
+    [contextId, lockAPI, registry, store],
+  );
+
+  const findClosestDraggableId = useCallback(
+    (event: Event): DraggableId | null =>
+      findClosestDraggableIdFromEvent(contextId, event),
+    [contextId],
+  );
+
+  const findOptionsForDraggable = useCallback(
+    (id: DraggableId): DraggableOptions | null => {
+      const entry: DraggableEntry | null = registry.draggable.findById(id);
+      return entry ? entry.options : null;
+    },
+    [registry.draggable],
+  );
+
+  const tryReleaseLock = useCallback(
+    function tryReleaseLock() {
+      if (!lockAPI.isClaimed()) {
+        return;
+      }
+
+      lockAPI.tryAbandon();
+
+      if (store.getState().phase !== "IDLE") {
+        store.dispatch(flush());
+      }
+    },
+    [lockAPI, store],
+  );
+  const isLockClaimed = useCallback(lockAPI.isClaimed, [lockAPI]);
+
+  const api: SensorAPI = useMemo(
+    () => ({
+      canGetLock,
+      tryGetLock,
+      findClosestDraggableId,
+      findOptionsForDraggable,
+      tryReleaseLock,
+      isLockClaimed,
+    }),
+    [
+      canGetLock,
+      tryGetLock,
+      findClosestDraggableId,
+      findOptionsForDraggable,
+      tryReleaseLock,
+      isLockClaimed,
+    ],
+  );
+
+  // Bad ass
+  useValidateSensorHooks(useSensors);
+  for (let i = 0; i < useSensors.length; i++) {
+    useSensors[i](api);
+  }
+}

package/src/view/use-sensor-marshal/use-validate-sensor-hooks.ts

@@ -0,0 +1,20 @@
+// @flow
+/* eslint-disable react-hooks/rules-of-hooks */
+import { invariant } from '../../invariant';
+import type { Sensor } from '../../types';
+import usePreviousRef from '../use-previous-ref';
+import useDevSetupWarning from '../use-dev-setup-warning';
+import useDev from '../use-dev';
+
+export default function useValidateSensorHooks(sensorHooks: Sensor[]) {
+  useDev(() => {
+    const previousRef = usePreviousRef<Sensor[]>(sensorHooks);
+
+    useDevSetupWarning(() => {
+      invariant(
+        previousRef.current.length === sensorHooks.length,
+        'Cannot change the amount of sensor hooks after mounting',
+      );
+    });
+  });
+}

package/src/view/use-style-marshal/get-styles.ts

@@ -0,0 +1,173 @@
+// @flow
+import type { ContextId } from '../../types';
+import { transitions } from '../../animation';
+import * as attributes from '../data-attributes';
+
+// Exact
+export type Styles = {
+  always: string,
+  dragging: string,
+  resting: string,
+  dropAnimating: string,
+  userCancel: string,
+};
+
+// Exact
+type Rule = {
+  selector: string
+  styles: Partial<Styles>
+};
+
+type DragState =
+  | 'always'
+  | 'resting'
+  | 'dragging'
+  | 'dropAnimating'
+  | 'userCancel';
+
+const makeGetSelector = (context: string) => (attribute: string) =>
+  `[${attribute}="${context}"]`;
+
+const getStyles = (rules: Rule[], property: DragState): string =>
+  rules
+    .map((rule: Rule): string => {
+      const value: string | undefined = rule.styles[property];
+      if (!value) {
+        return '';
+      }
+
+      return `${rule.selector} { ${value} }`;
+    })
+    .join(' ');
+
+const noPointerEvents: string = 'pointer-events: none;';
+
+export default (contextId: ContextId): Styles => {
+  const getSelector = makeGetSelector(contextId);
+
+  // ## Drag handle styles
+
+  // -webkit-touch-callout
+  // A long press on anchors usually pops a content menu that has options for
+  // the link such as 'Open in new tab'. Because long press is used to start
+  // a drag we need to opt out of this behavior
+
+  // -webkit-tap-highlight-color
+  // Webkit based browsers add a grey overlay to anchors when they are active.
+  // We remove this tap overlay as it is confusing for users
+  // https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/
+
+  // touch-action: manipulation
+  // Avoid the *pull to refresh action* and *delayed anchor focus* on Android Chrome
+
+  // cursor: grab
+  // We apply this by default for an improved user experience. It is such a common default that we
+  // bake it right in. Consumers can opt out of this by adding a selector with higher specificity
+  // The cursor will not apply when pointer-events is set to none
+
+  // pointer-events: none
+  // this is used to prevent pointer events firing on draggables during a drag
+  // Reasons:
+  // 1. performance: it stops the other draggables from processing mouse events
+  // 2. scrolling: it allows the user to scroll through the current draggable
+  // to scroll the list behind
+  // 3.* function: it blocks other draggables from starting. This is not relied on though as there
+  // is a function on the context (canLift) which is a more robust way of controlling this
+
+  const dragHandle: Rule = (() => {
+    const grabCursor = `
+      cursor: -webkit-grab;
+      cursor: grab;
+    `;
+    return {
+      selector: getSelector(attributes.dragHandle.contextId),
+      styles: {
+        always: `
+          -webkit-touch-callout: none;
+          -webkit-tap-highlight-color: rgba(0,0,0,0);
+          touch-action: manipulation;
+        `,
+        resting: grabCursor,
+        dragging: noPointerEvents,
+        // it is fine for users to start dragging another item when a drop animation is occurring
+        dropAnimating: grabCursor,
+        // Not applying grab cursor during a user cancel as it is not possible for users to reorder
+        // items during a cancel
+      },
+    };
+  })();
+
+  // ## Draggable styles
+
+  // transition: transform
+  // This controls the animation of draggables that are moving out of the way
+  // The main draggable is controlled by react-motion.
+
+  const draggable: Rule = (() => {
+    const transition: string = `
+      transition: ${transitions.outOfTheWay};
+    `;
+    return {
+      selector: getSelector(attributes.draggable.contextId),
+      styles: {
+        dragging: transition,
+        dropAnimating: transition,
+        userCancel: transition,
+      },
+    };
+  })();
+
+  // ## Droppable styles
+
+  // overflow-anchor: none;
+  // Opting out of the browser feature which tries to maintain
+  // the scroll position when the DOM changes above the fold.
+  // This does not work well with reordering DOM nodes.
+  // When we drop a Draggable it already has the correct scroll applied.
+
+  const droppable: Rule = {
+    selector: getSelector(attributes.droppable.contextId),
+    styles: {
+      always: `overflow-anchor: none;`,
+      // need pointer events on the droppable to allow manual scrolling
+    },
+  };
+
+  // ## Body styles
+
+  // cursor: grab
+  // We apply this by default for an improved user experience. It is such a common default that we
+  // bake it right in. Consumers can opt out of this by adding a selector with higher specificity
+
+  // user-select: none
+  // This prevents the user from selecting text on the page while dragging
+
+  // overflow-anchor: none
+  // We are in control and aware of all of the window scrolls that occur
+  // we do not want the browser to have behaviors we do not expect
+
+  const body: Rule = {
+    selector: 'body',
+    styles: {
+      dragging: `
+        cursor: grabbing;
+        cursor: -webkit-grabbing;
+        user-select: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        overflow-anchor: none;
+      `,
+    },
+  };
+
+  const rules: Rule[] = [draggable, dragHandle, droppable, body];
+
+  return {
+    always: getStyles(rules, 'always'),
+    resting: getStyles(rules, 'resting'),
+    dragging: getStyles(rules, 'dragging'),
+    dropAnimating: getStyles(rules, 'dropAnimating'),
+    userCancel: getStyles(rules, 'userCancel'),
+  };
+};

package/src/view/use-style-marshal/index.ts

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './use-style-marshal';

package/src/view/use-style-marshal/style-marshal-types.ts

@@ -0,0 +1,9 @@
+// @flow
+import type { DropReason } from '../../types';
+
+// Exact
+export type StyleMarshal = {
+  dragging: () => void,
+  dropping: (reason: DropReason) => void,
+  resting: () => void,
+};