@planningcenter/react-beautiful-dnd 13.2.0

package/src/view/droppable/droppable-types.js

@@ -0,0 +1,91 @@
+// @flow
+import { type Node } from 'react';
+import type {
+  DraggableId,
+  DroppableId,
+  TypeId,
+  Direction,
+  Placeholder,
+  State,
+  ContextId,
+  DraggableRubric,
+  DroppableMode,
+} from '../../types';
+import type { ChildrenFn } from '../draggable/draggable-types';
+import { updateViewportMaxScroll } from '../../state/action-creators';
+
+export type DraggableChildrenFn = ChildrenFn;
+
+export type DroppableProps = {|
+  // used for shared global styles
+  'data-rbd-droppable-context-id': ContextId,
+  // Used to lookup. Currently not used for drag and drop lifecycle
+  'data-rbd-droppable-id': DroppableId,
+|};
+
+export type Provided = {|
+  innerRef: (?HTMLElement) => void,
+  placeholder: ?Node,
+  droppableProps: DroppableProps,
+|};
+
+export type UseClone = {|
+  dragging: DraggableRubric,
+  render: DraggableChildrenFn,
+|};
+
+export type StateSnapshot = {|
+  // Is the Droppable being dragged over?
+  isDraggingOver: boolean,
+  // What is the id of the draggable that is dragging over the Droppable?
+  draggingOverWith: ?DraggableId,
+  // What is the id of the draggable that is dragging from this list?
+  // Useful for styling the home list when not being dragged over
+  draggingFromThisWith: ?DraggableId,
+  // Whether or not the placeholder is actively being used.
+  // This is useful information when working with virtual lists
+  isUsingPlaceholder: boolean,
+|};
+
+export type MapProps = {|
+  // placeholder:
+  // - used to keep space in the home list during the whole drag and drop
+  // - used to make space in foreign lists during a drag
+  placeholder: ?Placeholder,
+  shouldAnimatePlaceholder: boolean,
+  // snapshot based on redux state to be provided to consumers
+  snapshot: StateSnapshot,
+  useClone: ?UseClone,
+|};
+
+export type DefaultProps = {|
+  mode: DroppableMode,
+  type: TypeId,
+  isDropDisabled: boolean,
+  isCombineEnabled: boolean,
+  direction: Direction,
+  renderClone: ?DraggableChildrenFn,
+  ignoreContainerClipping: boolean,
+  getContainerForClone: () => HTMLElement,
+|};
+
+export type DispatchProps = {|
+  updateViewportMaxScroll: typeof updateViewportMaxScroll,
+|};
+
+export type OwnProps = {|
+  ...DefaultProps,
+  children: (Provided, StateSnapshot) => Node,
+  droppableId: DroppableId,
+  renderClone: ?DraggableChildrenFn,
+|};
+
+export type Props = {|
+  ...MapProps,
+  ...DispatchProps,
+  ...OwnProps,
+|};
+
+// Having issues getting the correct type
+// export type Selector = OutputSelector<State, OwnProps, MapProps>;
+export type Selector = (state: State, ownProps: OwnProps) => MapProps;

package/src/view/droppable/droppable.jsx

@@ -0,0 +1,167 @@
+// @flow
+import ReactDOM from 'react-dom';
+import { useMemo, useCallback } from 'use-memo-one';
+import React, { useRef, useContext, type Node } 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 = useContext<?AppContextValue>(AppContext);
+  invariant(appContext, 'Could not find app context');
+  const { contextId, isMovementAllowed } = appContext;
+  const droppableRef = useRef<?HTMLElement>(null);
+  const placeholderRef = useRef<?HTMLElement>(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 => droppableRef.current,
+    [],
+  );
+  const setDroppableRef = useCallback((value: ?HTMLElement) => {
+    droppableRef.current = value;
+  }, []);
+  const getPlaceholderRef = useCallback(
+    (): ?HTMLElement => placeholderRef.current,
+    [],
+  );
+  const setPlaceholderRef = useCallback((value: ?HTMLElement) => {
+    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: Node = (
+    <AnimateInOut
+      on={props.placeholder}
+      shouldAnimate={props.shouldAnimatePlaceholder}
+    >
+      {({ onClose, data, animate }: AnimateProvided) => (
+        <Placeholder
+          placeholder={(data: 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 = useClone
+    ? useClone.dragging.draggableId
+    : null;
+
+  const droppableContext: ?DroppableContextValue = useMemo(
+    () => ({
+      droppableId,
+      type,
+      isUsingCloneFor,
+    }),
+    [droppableId, isUsingCloneFor, type],
+  );
+
+  function getClone(): ?Node {
+    if (!useClone) {
+      return null;
+    }
+    const { dragging, render } = useClone;
+
+    const node: Node = (
+      <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.js

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

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

@@ -0,0 +1,101 @@
+// @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';
+
+type Args = {|
+  props: Props,
+  getDroppableRef: () => ?HTMLElement,
+  getPlaceholderRef: () => ?HTMLElement,
+|};
+
+type CheckFn = (args: Args) => void;
+
+function isBoolean(value: mixed): 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 = 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.js

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

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

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

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

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

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

@@ -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.js

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

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

@@ -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 {
+  // 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 = 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;
+}

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

@@ -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 {
+  // 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 = 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;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+// @flow
+import getWindowFromEl from '../window/get-window-from-el';
+
+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.js

@@ -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.js

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

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

@@ -0,0 +1,16 @@
+// @flow
+
+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,
+|};