@planningcenter/react-beautiful-dnd 13.2.0

package/src/view/draggable/draggable.jsx

@@ -0,0 +1,171 @@
+// @flow
+import { useRef } from 'react';
+import { useMemo, useCallback } from 'use-memo-one';
+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);
+  const setRef = useCallback((el: ?HTMLElement) => {
+    ref.current = el;
+  }, []);
+  const getRef = useCallback((): ?HTMLElement => 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 = 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.js

@@ -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,
+): string => {
+  if (dropping) {
+    return transitions.drop(dropping.duration);
+  }
+  if (shouldAnimateDragMovement) {
+    return transitions.snap;
+  }
+  return transitions.fluid;
+};
+
+const getDraggingOpacity = (
+  isCombining: boolean,
+  isDropAnimating: boolean,
+): ?number => {
+  // 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 = 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.js

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

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

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

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

@@ -0,0 +1,280 @@
+// @flow
+// eslint-disable-next-line no-unused-vars
+import { Component } from 'react';
+import { connect } from 'react-redux';
+import memoizeOne from 'memoize-one';
+import { invariant } from '../../invariant';
+import type {
+  State,
+  DroppableId,
+  DraggableId,
+  CompletedDrag,
+  DraggableDimension,
+  DimensionMap,
+  TypeId,
+  Critical,
+  DraggableRubric,
+  DraggableDescriptor,
+} from '../../types';
+import type {
+  MapProps,
+  OwnProps,
+  DefaultProps,
+  Selector,
+  DispatchProps,
+  StateSnapshot,
+  UseClone,
+  DraggableChildrenFn,
+} from './droppable-types';
+import Droppable from './droppable';
+import isStrictEqual from '../is-strict-equal';
+import whatIsDraggedOver from '../../state/droppable/what-is-dragged-over';
+import { updateViewportMaxScroll as updateViewportMaxScrollAction } from '../../state/action-creators';
+import StoreContext from '../context/store-context';
+import whatIsDraggedOverFromResult from '../../state/droppable/what-is-dragged-over-from-result';
+
+const isMatchingType = (type: TypeId, critical: Critical): boolean =>
+  type === critical.droppable.type;
+
+const getDraggable = (
+  critical: Critical,
+  dimensions: DimensionMap,
+): DraggableDimension => dimensions.draggables[critical.draggable.id];
+
+// Returning a function to ensure each
+// Droppable gets its own selector
+export const makeMapStateToProps = (): Selector => {
+  const idleWithAnimation: MapProps = {
+    placeholder: null,
+    shouldAnimatePlaceholder: true,
+    snapshot: {
+      isDraggingOver: false,
+      draggingOverWith: null,
+      draggingFromThisWith: null,
+      isUsingPlaceholder: false,
+    },
+    useClone: null,
+  };
+
+  const idleWithoutAnimation = {
+    ...idleWithAnimation,
+    shouldAnimatePlaceholder: false,
+  };
+
+  const getDraggableRubric = memoizeOne(
+    (descriptor: DraggableDescriptor): DraggableRubric => ({
+      draggableId: descriptor.id,
+      type: descriptor.type,
+      source: {
+        index: descriptor.index,
+        droppableId: descriptor.droppableId,
+      },
+    }),
+  );
+
+  const getMapProps = memoizeOne(
+    (
+      id: DroppableId,
+      isEnabled: boolean,
+      isDraggingOverForConsumer: boolean,
+      isDraggingOverForImpact: boolean,
+      dragging: DraggableDimension,
+      // snapshot: StateSnapshot,
+      renderClone: ?DraggableChildrenFn,
+    ): MapProps => {
+      const draggableId: DraggableId = dragging.descriptor.id;
+      const isHome: boolean = dragging.descriptor.droppableId === id;
+
+      if (isHome) {
+        const useClone: ?UseClone = renderClone
+          ? {
+              render: renderClone,
+              dragging: getDraggableRubric(dragging.descriptor),
+            }
+          : null;
+
+        const snapshot: StateSnapshot = {
+          isDraggingOver: isDraggingOverForConsumer,
+          draggingOverWith: isDraggingOverForConsumer ? draggableId : null,
+          draggingFromThisWith: draggableId,
+          isUsingPlaceholder: true,
+        };
+
+        return {
+          placeholder: dragging.placeholder,
+          shouldAnimatePlaceholder: false,
+          snapshot,
+          useClone,
+        };
+      }
+
+      if (!isEnabled) {
+        return idleWithoutAnimation;
+      }
+
+      // not over foreign list - return idle
+      if (!isDraggingOverForImpact) {
+        return idleWithAnimation;
+      }
+
+      const snapshot: StateSnapshot = {
+        isDraggingOver: isDraggingOverForConsumer,
+        draggingOverWith: draggableId,
+        draggingFromThisWith: null,
+        isUsingPlaceholder: true,
+      };
+
+      return {
+        placeholder: dragging.placeholder,
+        // Animating placeholder in foreign list
+        shouldAnimatePlaceholder: true,
+        snapshot,
+        useClone: null,
+      };
+    },
+  );
+
+  const selector = (state: State, ownProps: OwnProps): MapProps => {
+    // not checking if item is disabled as we need the home list to display a placeholder
+
+    const id: DroppableId = ownProps.droppableId;
+    const type: TypeId = ownProps.type;
+    const isEnabled: boolean = !ownProps.isDropDisabled;
+    const renderClone: ?DraggableChildrenFn = ownProps.renderClone;
+
+    if (state.isDragging) {
+      const critical: Critical = state.critical;
+      if (!isMatchingType(type, critical)) {
+        return idleWithoutAnimation;
+      }
+
+      const dragging: DraggableDimension = getDraggable(
+        critical,
+        state.dimensions,
+      );
+      const isDraggingOver: boolean = whatIsDraggedOver(state.impact) === id;
+
+      return getMapProps(
+        id,
+        isEnabled,
+        isDraggingOver,
+        isDraggingOver,
+        dragging,
+        renderClone,
+      );
+    }
+
+    if (state.phase === 'DROP_ANIMATING') {
+      const completed: CompletedDrag = state.completed;
+      if (!isMatchingType(type, completed.critical)) {
+        return idleWithoutAnimation;
+      }
+
+      const dragging: DraggableDimension = getDraggable(
+        completed.critical,
+        state.dimensions,
+      );
+
+      // Snapshot based on result and not impact
+      // The result might be null (cancel) but the impact is populated
+      // to move everything back
+      return getMapProps(
+        id,
+        isEnabled,
+        whatIsDraggedOverFromResult(completed.result) === id,
+        whatIsDraggedOver(completed.impact) === id,
+        dragging,
+        renderClone,
+      );
+    }
+
+    if (state.phase === 'IDLE' && state.completed && !state.shouldFlush) {
+      const completed: CompletedDrag = state.completed;
+      if (!isMatchingType(type, completed.critical)) {
+        return idleWithoutAnimation;
+      }
+
+      // Looking at impact as this controls the placeholder
+      const wasOver: boolean = whatIsDraggedOver(completed.impact) === id;
+      const wasCombining: boolean = Boolean(
+        completed.impact.at && completed.impact.at.type === 'COMBINE',
+      );
+      const isHome: boolean = completed.critical.droppable.id === id;
+
+      if (wasOver) {
+        // if reordering we need to cut an animation immediately
+        // if merging: animate placeholder closed after drop
+        return wasCombining ? idleWithAnimation : idleWithoutAnimation;
+      }
+
+      // we need to animate the home placeholder closed if it is not
+      // being dropped into
+      if (isHome) {
+        return idleWithAnimation;
+      }
+
+      return idleWithoutAnimation;
+    }
+
+    // default: including when flushed
+    return idleWithoutAnimation;
+  };
+
+  return selector;
+};
+
+const mapDispatchToProps: DispatchProps = {
+  updateViewportMaxScroll: updateViewportMaxScrollAction,
+};
+
+function getBody(): HTMLElement {
+  invariant(document.body, 'document.body is not ready');
+  return document.body;
+}
+
+const defaultProps = ({
+  mode: 'standard',
+  type: 'DEFAULT',
+  direction: 'vertical',
+  isDropDisabled: false,
+  isCombineEnabled: false,
+  ignoreContainerClipping: false,
+  renderClone: null,
+  getContainerForClone: getBody,
+}: DefaultProps);
+
+// Abstract class allows to specify props and defaults to component.
+// All other ways give any or do not let add default props.
+// eslint-disable-next-line
+/*::
+class DroppableType extends Component<OwnProps> {
+  static defaultProps = defaultProps;
+}
+*/
+
+// Leaning heavily on the default shallow equality checking
+// that `connect` provides.
+// It avoids needing to do it own within `Droppable`
+const ConnectedDroppable: typeof DroppableType = connect(
+  // returning a function so each component can do its own memoization
+  makeMapStateToProps,
+  // no dispatch props for droppable
+  mapDispatchToProps,
+  // mergeProps - using default
+  null,
+  // $FlowFixMe: current react-redux type does not know about context property
+  {
+    // Ensuring our context does not clash with consumers
+    context: StoreContext,
+    // pure: true is default value, but being really clear
+    pure: true,
+    // When pure, compares the result of mapStateToProps to its previous value.
+    // Default value: shallowEqual
+    // Switching to a strictEqual as we return a memoized object on changes
+    areStatePropsEqual: isStrictEqual,
+  },
+)(Droppable);
+
+ConnectedDroppable.defaultProps = defaultProps;
+
+export default ConnectedDroppable;