@helpdice/draggable 0.0.0-stage → 0.0.1

package/src/view/droppable/droppable.tsx

@@ -0,0 +1,167 @@
+// @flow
+import ReactDOM from "react-dom";
+import { useMemo, useCallback } from "@helpdice/memoizer";
+import { useRef, useContext, type ReactNode } from "react";
+import { invariant } from "../../invariant";
+import type { DraggableId } from "../../types";
+import type { Props, Provided } from "./droppable-types";
+import useDroppablePublisher from "../use-droppable-publisher";
+import Placeholder from "../placeholder";
+import AppContext, { type AppContextValue } from "../context/app-context";
+import DroppableContext, {
+  type DroppableContextValue,
+} from "../context/droppable-context";
+// import useAnimateInOut from '../use-animate-in-out/use-animate-in-out';
+import getMaxWindowScroll from "../window/get-max-window-scroll";
+import useValidation from "./use-validation";
+import type {
+  StateSnapshot as DraggableStateSnapshot,
+  Provided as DraggableProvided,
+} from "../draggable/draggable-types";
+import AnimateInOut, {
+  type AnimateProvided,
+} from "../animate-in-out/animate-in-out";
+import { PrivateDraggable } from "../draggable/draggable-api";
+
+export default function Droppable(props: Props) {
+  const appContext: AppContextValue | null = useContext<AppContextValue | null>(AppContext);
+  invariant(appContext, "Could not find app context");
+  const { contextId, isMovementAllowed } = appContext;
+  const droppableRef = useRef<HTMLElement | null>(null);
+  const placeholderRef = useRef<HTMLElement | null>(null);
+
+  const {
+    // own props
+    children,
+    droppableId,
+    type,
+    mode,
+    direction,
+    ignoreContainerClipping,
+    isDropDisabled,
+    isCombineEnabled,
+    // map props
+    snapshot,
+    useClone,
+    // dispatch props
+    updateViewportMaxScroll,
+
+    // clone (ownProps)
+    getContainerForClone,
+  } = props;
+
+  const getDroppableRef = useCallback(
+    (): HTMLElement | null => droppableRef.current,
+    [],
+  );
+  const setDroppableRef = useCallback((value: HTMLElement | null) => {
+    droppableRef.current = value;
+  }, []);
+  const getPlaceholderRef = useCallback(
+    (): HTMLElement | null => placeholderRef.current,
+    [],
+  );
+  const setPlaceholderRef = useCallback((value: HTMLElement | null) => {
+    placeholderRef.current = value;
+  }, []);
+
+  useValidation({
+    props,
+    getDroppableRef,
+    getPlaceholderRef,
+  });
+
+  const onPlaceholderTransitionEnd = useCallback(() => {
+    // A placeholder change can impact the window's max scroll
+    if (isMovementAllowed()) {
+      updateViewportMaxScroll({ maxScroll: getMaxWindowScroll() });
+    }
+  }, [isMovementAllowed, updateViewportMaxScroll]);
+
+  useDroppablePublisher({
+    droppableId,
+    type,
+    mode,
+    direction,
+    isDropDisabled,
+    isCombineEnabled,
+    ignoreContainerClipping,
+    getDroppableRef,
+  });
+
+  const placeholder: ReactNode = (
+    <AnimateInOut
+      on={props.placeholder}
+      shouldAnimate={props.shouldAnimatePlaceholder}
+    >
+      {({ onClose, data, animate }: AnimateProvided) => (
+        <Placeholder
+          placeholder={data as any}
+          onClose={onClose}
+          innerRef={setPlaceholderRef}
+          animate={animate}
+          contextId={contextId}
+          onTransitionEnd={onPlaceholderTransitionEnd}
+        />
+      )}
+    </AnimateInOut>
+  );
+
+  const provided: Provided = useMemo(
+    (): Provided => ({
+      innerRef: setDroppableRef,
+      placeholder,
+      droppableProps: {
+        "data-rbd-droppable-id": droppableId,
+        "data-rbd-droppable-context-id": contextId,
+      },
+    }),
+    [contextId, droppableId, placeholder, setDroppableRef],
+  );
+
+  const isUsingCloneFor: DraggableId | null = useClone
+    ? useClone.dragging.draggableId
+    : null;
+
+  const droppableContext: DroppableContextValue | null = useMemo(
+    () => ({
+      droppableId,
+      type,
+      isUsingCloneFor,
+    }),
+    [droppableId, isUsingCloneFor, type],
+  );
+
+  function getClone(): ReactNode {
+    if (!useClone) {
+      return null;
+    }
+    const { dragging, render } = useClone;
+
+    const node: ReactNode = (
+      <PrivateDraggable
+        draggableId={dragging.draggableId}
+        index={dragging.source.index}
+        isClone
+        isEnabled
+        // not important as drag has already started
+        shouldRespectForcePress={false}
+        canDragInteractiveElements
+      >
+        {(
+          draggableProvided: DraggableProvided,
+          draggableSnapshot: DraggableStateSnapshot,
+        ) => render(draggableProvided, draggableSnapshot, dragging)}
+      </PrivateDraggable>
+    );
+
+    return ReactDOM.createPortal(node, getContainerForClone());
+  }
+
+  return (
+    <DroppableContext.Provider value={droppableContext}>
+      {children(provided, snapshot)}
+      {getClone()}
+    </DroppableContext.Provider>
+  );
+}

package/src/view/droppable/index.ts

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './connected-droppable';

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

@@ -0,0 +1,102 @@
+// @flow
+import { invariant } from '../../invariant';
+import type { Props } from './droppable-types';
+import { warning } from '../../dev-warning';
+import checkIsValidInnerRef from '../check-is-valid-inner-ref';
+import useDevSetupWarning from '../use-dev-setup-warning';
+
+// Exact
+type Args = {
+  props: Props,
+  getDroppableRef: () => HTMLElement | null,
+  getPlaceholderRef: () => HTMLElement | null,
+};
+
+type CheckFn = (args: Args) => void;
+
+function isBoolean(value: unknown): boolean {
+  return typeof value === 'boolean';
+}
+
+function runChecks(args: Args, checks: CheckFn[]) {
+  checks.forEach((check: CheckFn) => check(args));
+}
+
+const shared: CheckFn[] = [
+  function required({ props }: Args) {
+    invariant(props.droppableId, 'A Droppable requires a droppableId prop');
+    invariant(
+      typeof props.droppableId === 'string',
+      `A Droppable requires a [string] droppableId. Provided: [${typeof props.droppableId}]`,
+    );
+  },
+  function boolean({ props }: Args) {
+    invariant(
+      isBoolean(props.isDropDisabled),
+      'isDropDisabled must be a boolean',
+    );
+    invariant(
+      isBoolean(props.isCombineEnabled),
+      'isCombineEnabled must be a boolean',
+    );
+    invariant(
+      isBoolean(props.ignoreContainerClipping),
+      'ignoreContainerClipping must be a boolean',
+    );
+  },
+  function ref({ getDroppableRef }: Args) {
+    checkIsValidInnerRef(getDroppableRef());
+  },
+];
+
+const standard: CheckFn[] = [
+  function placeholder({ props, getPlaceholderRef }: Args) {
+    if (!props.placeholder) {
+      return;
+    }
+
+    const ref: HTMLElement | null = getPlaceholderRef();
+
+    if (ref) {
+      return;
+    }
+
+    warning(`
+      Droppable setup issue [droppableId: "${props.droppableId}"]:
+      DroppableProvided > placeholder could not be found.
+
+      Please be sure to add the {provided.placeholder} React Node as a child of your Droppable.
+      More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md
+    `);
+  },
+];
+
+const virtual: CheckFn[] = [
+  function hasClone({ props }: Args) {
+    invariant(
+      props.renderClone,
+      'Must provide a clone render function (renderClone) for virtual lists',
+    );
+  },
+  function hasNoPlaceholder({ getPlaceholderRef }: Args) {
+    invariant(
+      !getPlaceholderRef(),
+      'Expected virtual list to not have a placeholder',
+    );
+  },
+];
+
+export default function useValidation(args: Args) {
+  useDevSetupWarning(() => {
+    // wrapping entire block for better minification
+    runChecks(args, shared);
+
+    if (args.props.mode === 'standard') {
+      runChecks(args, standard);
+    }
+
+    if (args.props.mode === 'virtual') {
+      runChecks(args, virtual);
+    }
+  });
+}

package/src/view/event-bindings/bind-events.ts

@@ -0,0 +1,39 @@
+// @flow
+import type { EventBinding, EventOptions } from './event-types';
+
+type UnbindFn = () => void;
+
+function getOptions(
+  shared?: EventOptions | null,
+  fromBinding?: EventOptions | null,
+): EventOptions {
+  return {
+    ...shared,
+    ...fromBinding,
+  };
+}
+
+export default function bindEvents(
+  el: HTMLElement | Window,
+  bindings: EventBinding[],
+  sharedOptions: EventOptions,
+): () => void {
+  const unbindings: UnbindFn[] = bindings.map(
+    (binding: EventBinding): UnbindFn => {
+      const options: Object = getOptions(sharedOptions, binding.options);
+
+      el.addEventListener(binding.eventName, binding.fn as EventListenerOrEventListenerObject, options);
+
+      return function unbind() {
+        el.removeEventListener(binding.eventName, binding.fn as EventListenerOrEventListenerObject, options);
+      };
+    },
+  );
+
+  // Return a function to unbind events
+  return function unbindAll() {
+    unbindings.forEach((unbind: UnbindFn) => {
+      unbind();
+    });
+  };
+}

package/src/view/event-bindings/event-types.ts

@@ -0,0 +1,15 @@
+// @flow
+// Exact
+export type EventOptions = {
+  passive?: boolean,
+  capture?: boolean,
+  // sometimes an event might only event want to be bound once
+  once?: boolean,
+};
+
+// Exact
+export type EventBinding = {
+  eventName: string,
+  fn: Function,
+  options?: EventOptions,
+};

package/src/view/get-body-element.ts

@@ -0,0 +1,8 @@
+// @flow
+import { invariant } from '../invariant';
+
+export default (): HTMLElement => {
+  const body: HTMLElement | null = document.body;
+  invariant(body, 'Cannot find document.body');
+  return body;
+};

package/src/view/get-border-box-center-position.ts

@@ -0,0 +1,5 @@
+// @flow
+import { getRect, type Position } from 'css-box-model';
+
+export default (el: HTMLElement): Position =>
+  getRect(el.getBoundingClientRect()).center;

package/src/view/get-document-element.ts

@@ -0,0 +1,8 @@
+// @flow
+import { invariant } from '../invariant';
+
+export default (): HTMLElement => {
+  const doc: HTMLElement | null = document.documentElement;
+  invariant(doc, 'Cannot find document.documentElement');
+  return doc;
+};

package/src/view/get-elements/find-drag-handle.ts

@@ -0,0 +1,38 @@
+// @flow
+import type { DraggableId, ContextId } from '../../types';
+import { dragHandle as dragHandleAttr } from '../data-attributes';
+import { warning } from '../../dev-warning';
+import { find, toArray } from '../../native-with-fallback';
+import isHtmlElement from '../is-type-of-element/is-html-element';
+
+export default function findDragHandle(
+  contextId: ContextId,
+  draggableId: DraggableId,
+): HTMLElement | null {
+  // cannot create a selector with the draggable id as it might not be a valid attribute selector
+  const selector: string = `[${dragHandleAttr.contextId}="${contextId}"]`;
+  const possible: Element[] = toArray(document.querySelectorAll(selector));
+
+  if (!possible.length) {
+    warning(`Unable to find any drag handles in the context "${contextId}"`);
+    return null;
+  }
+
+  const handle: Element | undefined = find(possible, (el: Element): boolean => {
+    return el.getAttribute(dragHandleAttr.draggableId) === draggableId;
+  });
+
+  if (!handle) {
+    warning(
+      `Unable to find drag handle with id "${draggableId}" as no handle with a matching id was found`,
+    );
+    return null;
+  }
+
+  if (!isHtmlElement(handle)) {
+    warning('drag handle needs to be a HTMLElement');
+    return null;
+  }
+
+  return handle as HTMLElement;
+}

package/src/view/get-elements/find-draggable.ts

@@ -0,0 +1,30 @@
+// @flow
+import type { DraggableId, ContextId } from '../../types';
+import * as attributes from '../data-attributes';
+import { find, toArray } from '../../native-with-fallback';
+import { warning } from '../../dev-warning';
+import isHtmlElement from '../is-type-of-element/is-html-element';
+
+export default function findDraggable(
+  contextId: ContextId,
+  draggableId: DraggableId,
+): HTMLElement | null {
+  // cannot create a selector with the draggable id as it might not be a valid attribute selector
+  const selector: string = `[${attributes.draggable.contextId}="${contextId}"]`;
+  const possible: Element[] = toArray(document.querySelectorAll(selector));
+
+  const draggable: Element | undefined = find(possible, (el: Element): boolean => {
+    return el.getAttribute(attributes.draggable.id) === draggableId;
+  });
+
+  if (!draggable) {
+    return null;
+  }
+
+  if (!isHtmlElement(draggable)) {
+    warning('Draggable element is not a HTMLElement');
+    return null;
+  }
+
+  return draggable as HTMLElement;
+}

package/src/view/is-strict-equal.ts

@@ -0,0 +1,2 @@
+// @flow
+export default (a: unknown, b: unknown): boolean => a === b;

package/src/view/is-type-of-element/is-element.ts

@@ -0,0 +1,10 @@
+// @flow
+import getWindowFromEl from '../window/get-window-from-el';
+
+export default function isElement(el: Element | null): el is Element {
+  return el instanceof getWindowFromEl(el).Element;
+}
+
+// export default function isElement(el: Object): boolean %checks {
+//   return el instanceof getWindowFromEl(el).Element;
+// }

package/src/view/is-type-of-element/is-html-element.ts

@@ -0,0 +1,10 @@
+// @flow
+import getWindowFromEl from '../window/get-window-from-el';
+
+export default function isHtmlElement(el: Element): el is HTMLElement {
+  return el instanceof getWindowFromEl(el).HTMLElement;
+}
+
+// export default function isHtmlElement(el: Object): boolean %checks {
+//   return el instanceof getWindowFromEl(el).HTMLElement;
+// }

package/src/view/is-type-of-element/is-svg-element.ts

@@ -0,0 +1,22 @@
+// @flow
+import getWindowFromEl from '../window/get-window-from-el';
+
+export default function isSvgElement(el: Element): el is SVGElement {
+  if (typeof el !== 'object' || el === null) {
+    return false;
+  }
+
+  const win = getWindowFromEl(el);
+
+  return Boolean(win.SVGElement) && el instanceof win.SVGElement;
+}
+
+// export default function isSvgElement(el: Object): boolean %checks {
+//   // Some environments do not support SVGElement
+//   // Doing a double lookup rather than storing the window
+//   // as a %checks function can only be a 'simple predicate'
+//   return (
+//     Boolean(getWindowFromEl(el).SVGElement) &&
+//     el instanceof getWindowFromEl(el).SVGElement
+//   );
+// }

package/src/view/key-codes.ts

@@ -0,0 +1,13 @@
+// @flow
+export const tab: number = 9;
+export const enter: number = 13;
+export const escape: number = 27;
+export const space: number = 32;
+export const pageUp: number = 33;
+export const pageDown: number = 34;
+export const end: number = 35;
+export const home: number = 36;
+export const arrowLeft: number = 37;
+export const arrowUp: number = 38;
+export const arrowRight: number = 39;
+export const arrowDown: number = 40;

package/src/view/placeholder/index.ts

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

package/src/view/placeholder/placeholder-types.ts

@@ -0,0 +1,16 @@
+// @flow
+// Exact
+export type PlaceholderStyle = {
+  display: string,
+  boxSizing: 'border-box',
+  width: number,
+  height: number,
+  marginTop: number,
+  marginRight: number,
+  marginBottom: number,
+  marginLeft: number,
+  flexShrink: '0',
+  flexGrow: '0',
+  pointerEvents: 'none',
+  transition: string,
+};