@helpdice/draggable 0.0.0-stage → 0.0.2

package/src/view/draggable/connected-draggable.tsx

@@ -0,0 +1,420 @@
+// @flow Marked for Review
+import { type Position } from 'css-box-model';
+// eslint-disable-next-line
+// import { Component } from 'react';
+import memoizeOne from 'memoize-one';
+// import { connect } from 'react-redux';
+import Draggable from './draggable';
+import { origin, negate } from '../../state/position';
+// import isStrictEqual from '../is-strict-equal';
+import * as animation from '../../animation';
+import { dropAnimationFinished as dropAnimationFinishedAction } from '../../state/action-creators';
+import type {
+  State,
+  DraggableId,
+  DroppableId,
+  DraggableDimension,
+  Displacement,
+  CompletedDrag,
+  DragImpact,
+  MovementMode,
+  DropResult,
+  LiftEffect,
+  Combine,
+} from '../../types';
+import type {
+  MapProps,
+  OwnProps,
+  // DispatchProps,
+  Selector,
+  StateSnapshot,
+  DropAnimation,
+} from './draggable-types';
+import whatIsDraggedOver from '../../state/droppable/what-is-dragged-over';
+// import StoreContext from '../context/store-context';
+import whatIsDraggedOverFromResult from '../../state/droppable/what-is-dragged-over-from-result';
+import { tryGetCombine } from '../../state/get-impact-location';
+import { isDragging } from '../../state/reducer';
+import { useCallback, useMemo } from '@helpdice/memoizer';
+import React from 'react';
+import { useAppDispatch, useAppSelector } from '../context/hooks';
+
+const getCombineWithFromResult = (result: DropResult): DraggableId | null => {
+  return result.combine ? result.combine.draggableId : null;
+};
+
+const getCombineWithFromImpact = (impact: DragImpact): DraggableId | null => {
+  return impact.at && impact.at.type === 'COMBINE'
+    ? impact.at.combine.draggableId
+    : null;
+};
+
+type TrySelect = (state: State, ownProps: OwnProps) => MapProps | null;
+
+function getDraggableSelector(): TrySelect {
+  const memoizedOffset = memoizeOne((x: number, y: number): Position => ({
+    x,
+    y,
+  }));
+
+  const getMemoizedSnapshot = memoizeOne(
+    (
+      mode: MovementMode,
+      isClone: boolean,
+      draggingOver: DroppableId | null,
+      combineWith: DraggableId | null,
+      dropping: DropAnimation | null,
+    ): StateSnapshot => ({
+      isDragging: true,
+      isClone,
+      isDropAnimating: Boolean(dropping),
+      dropAnimation: dropping,
+      mode,
+      draggingOver,
+      combineWith,
+      combineTargetFor: null,
+    }),
+  );
+
+  const getMemoizedProps = memoizeOne((
+    offset: Position,
+    mode: MovementMode,
+    dimension: DraggableDimension,
+    isClone: boolean,
+    // the id of the droppable you are over
+    draggingOver: DroppableId | null,
+    // the id of a draggable you are grouping with
+    combineWith: DraggableId | null,
+    forceShouldAnimate: boolean | null,
+  ): MapProps => ({
+    mapped: {
+      type: 'DRAGGING',
+      dropping: null,
+      draggingOver,
+      combineWith,
+      mode,
+      offset,
+      dimension,
+      forceShouldAnimate,
+      snapshot: getMemoizedSnapshot(
+        mode,
+        isClone,
+        draggingOver,
+        combineWith,
+        null,
+      ),
+    },
+  }));
+
+  const selector: TrySelect = (state: State, ownProps: OwnProps): MapProps | null => {
+    // Dragging Marked for Review
+    if (isDragging(state)) {
+      // not the dragging item
+      if (state.critical.draggable.id !== ownProps.draggableId) {
+        return null;
+      }
+
+      const offset: Position = state.current.client.offset;
+      const dimension: DraggableDimension =
+        state.dimensions.draggables[ownProps.draggableId];
+      // const shouldAnimateDragMovement: boolean = state.shouldAnimate;
+      const draggingOver: DroppableId | null = whatIsDraggedOver(state.impact);
+      const combineWith: DraggableId | null = getCombineWithFromImpact(state.impact);
+      const forceShouldAnimate: boolean | null = state.forceShouldAnimate;
+
+      return getMemoizedProps(
+        memoizedOffset(offset.x, offset.y),
+        state.movementMode,
+        dimension,
+        ownProps.isClone,
+        draggingOver,
+        combineWith,
+        forceShouldAnimate,
+      );
+    }
+
+    // Dropping
+    if (state.phase === 'DROP_ANIMATING') {
+      const completed: CompletedDrag = state.completed;
+      if (completed.result.draggableId !== ownProps.draggableId) {
+        return null;
+      }
+
+      const isClone: boolean = ownProps.isClone;
+      const dimension: DraggableDimension =
+        state.dimensions.draggables[ownProps.draggableId];
+      const result: DropResult = completed.result;
+      const mode: MovementMode = result.mode;
+      // these need to be pulled from the result as they can be different to the final impact
+      const draggingOver: DroppableId | null = whatIsDraggedOverFromResult(result);
+      const combineWith: DraggableId | null = getCombineWithFromResult(result);
+      const duration: number = state.dropDuration;
+
+      // not memoized as it is the only execution
+      const dropping: DropAnimation = {
+        duration,
+        curve: animation.curves.drop,
+        moveTo: state.newHomeClientOffset,
+        opacity: combineWith ? animation.combine.opacity.drop : null,
+        scale: combineWith ? animation.combine.scale.drop : null,
+      };
+
+      return {
+        mapped: {
+          type: 'DRAGGING',
+          offset: state.newHomeClientOffset,
+          dimension,
+          dropping,
+          draggingOver,
+          combineWith,
+          mode,
+          forceShouldAnimate: null,
+          snapshot: getMemoizedSnapshot(
+            mode,
+            isClone,
+            draggingOver,
+            combineWith,
+            dropping,
+          ),
+        },
+      };
+    }
+
+    return null;
+  };
+
+  return selector;
+}
+
+function getSecondarySnapshot(combineTargetFor: DraggableId | null): StateSnapshot {
+  return {
+    isDragging: false,
+    isDropAnimating: false,
+    isClone: false,
+    dropAnimation: null,
+    mode: null,
+    draggingOver: null,
+    combineTargetFor,
+    combineWith: null,
+  };
+}
+
+const atRest: MapProps = {
+  mapped: {
+    type: 'SECONDARY',
+    offset: origin,
+    combineTargetFor: null,
+    shouldAnimateDisplacement: true,
+    snapshot: getSecondarySnapshot(null),
+  },
+};
+
+function getSecondarySelector(): TrySelect {
+  const memoizedOffset = memoizeOne((x: number, y: number): Position => ({
+    x,
+    y,
+  }));
+
+  const getMemoizedSnapshot = memoizeOne(getSecondarySnapshot);
+
+  const getMemoizedProps = memoizeOne(
+    (
+      offset: Position,
+      combineTargetFor: DraggableId | null = null,
+      shouldAnimateDisplacement: boolean,
+    ): MapProps => ({
+      mapped: {
+        type: 'SECONDARY',
+        offset,
+        combineTargetFor,
+        shouldAnimateDisplacement,
+        snapshot: getMemoizedSnapshot(combineTargetFor),
+      },
+    }),
+  );
+
+  // Is we are the combine target for something then we need to publish that
+  // otherwise we will return null to get the default props
+  const getFallback = (combineTargetFor: DraggableId | null): MapProps | null => {
+    return combineTargetFor
+      ? getMemoizedProps(origin, combineTargetFor, true)
+      : null;
+  };
+
+  const getProps = (
+    ownId: DraggableId,
+    draggingId: DraggableId,
+    impact: DragImpact,
+    afterCritical: LiftEffect,
+  ): MapProps | null => {
+    const visualDisplacement: Displacement | null = impact.displaced.visible[ownId];
+    const isAfterCriticalInVirtualList: boolean = Boolean(
+      afterCritical.inVirtualList && afterCritical.effected[ownId],
+    );
+
+    const combine: Combine | null = tryGetCombine(impact);
+    const combineTargetFor: DraggableId | null =
+      combine && combine.draggableId === ownId ? draggingId : null;
+
+    if (!visualDisplacement) {
+      if (!isAfterCriticalInVirtualList) {
+        return getFallback(combineTargetFor);
+      }
+
+      // After critical but not visibly displaced in a virtual list
+      // This can occur if:
+      // 1. the item is not visible (displaced.invisible)
+      // 2. We have moved out of the home list.
+
+      // Don't need to do anything - item is invisible
+      if (impact.displaced.invisible[ownId]) {
+        return null;
+      }
+
+      // We are no longer over the home list.
+      // We need to move backwards to close the gap that the dragging item has left
+      const change: Position = negate(afterCritical.displacedBy.point);
+      const offset: Position = memoizedOffset(change.x, change.y);
+      return getMemoizedProps(offset, combineTargetFor, true);
+    }
+
+    if (isAfterCriticalInVirtualList) {
+      // In a virtual list the removal of a dragging item does
+      // not cause the list to collapse. So when something is 'displaced'
+      // we can just leave it in the original spot.
+      return getFallback(combineTargetFor);
+    }
+    const displaceBy: Position = impact.displacedBy.point;
+    const offset: Position = memoizedOffset(displaceBy.x, displaceBy.y);
+
+    return getMemoizedProps(
+      offset,
+      combineTargetFor,
+      visualDisplacement.shouldAnimate,
+    );
+  };
+
+  const selector: TrySelect = (state: State, ownProps: OwnProps): MapProps | null => {
+    // Dragging Marked for Review
+    if (isDragging(state)) {
+      // we do not care about the dragging item
+      if (state.critical.draggable.id === ownProps.draggableId) {
+        return null;
+      }
+
+      return getProps(
+        ownProps.draggableId,
+        state.critical.draggable.id,
+        state.impact,
+        state.afterCritical,
+      );
+    }
+
+    // Dropping
+    if (state.phase === 'DROP_ANIMATING') {
+      const completed: CompletedDrag = state.completed;
+      // do nothing if this was the dragging item
+      if (completed.result.draggableId === ownProps.draggableId) {
+        return null;
+      }
+      return getProps(
+        ownProps.draggableId,
+        completed.result.draggableId,
+        completed.impact,
+        completed.afterCritical,
+      );
+    }
+
+    // Otherwise
+    return null;
+  };
+
+  return selector;
+}
+
+// Returning a function to ensure each
+// Draggable gets its own selector
+export const makeMapStateToProps = (): Selector => {
+  const draggingSelector: TrySelect = getDraggableSelector();
+  const secondarySelector: TrySelect = getSecondarySelector();
+
+  const selector = (state: State, ownProps: OwnProps): MapProps =>
+    draggingSelector(state, ownProps) ||
+    secondarySelector(state, ownProps) ||
+    atRest;
+
+  return selector;
+};
+
+// const mapDispatchToProps: DispatchProps = {
+//   dropAnimationFinished: dropAnimationFinishedAction,
+// };
+
+// Leaning heavily on the default shallow equality checking
+// that `connect` provides.
+// It avoids needing to do it own within `<Draggable />`
+// const ConnectedDraggable = connect(
+//   // returning a function so each component can do its own memoization
+//   makeMapStateToProps,
+//   mapDispatchToProps,
+//   // mergeProps: use default
+//   null,
+//   // options
+//   // $FlowFixMe: current react-redux type does not know about context property
+//   {
+//     // Using our own context for the store to avoid clashing with consumers
+//     context: StoreContext,
+//     // 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,
+//   },
+// )(Draggable);
+
+const DraggableWithRedux = (props: OwnProps) => {
+  const dispatch = useAppDispatch();
+
+  const selector = useMemo(
+    () => makeMapStateToProps(),
+    [],
+  );
+
+  const stateProps = useAppSelector((state: State) =>
+    selector(state, props),
+  );
+
+  // const dispatchProps = useMemo(
+  //   () => mapDispatchToProps(dispatch, props),
+  //   [dispatch, props],
+  // );
+
+  // const dispatchProps = useMemo(
+  //   () => bindActionCreators(mapDispatchToProps, dispatch),
+  //   [dispatch],
+  // );
+
+  const dropAnimationFinished = useCallback(
+    () => dispatch(dropAnimationFinishedAction()),
+    [dispatch],
+  );
+
+  // return (
+  //   <Draggable
+  //     { ...props }
+  //     {...stateProps }
+  //     {...dispatchProps }
+  //   />
+  // );
+
+  return <Draggable
+    {...props}
+    {...stateProps}
+    dropAnimationFinished={dropAnimationFinished}
+  />;
+};
+
+export default React.memo(DraggableWithRedux);
+
+// export default ConnectedDraggable;

package/src/view/draggable/draggable-api.tsx

@@ -0,0 +1,48 @@
+// @flow
+// import React from 'react';
+import type { DraggableId } from '../../types';
+import type { PublicOwnProps, PrivateOwnProps } from './draggable-types';
+import ConnectedDraggable from './connected-draggable';
+import useRequiredContext from '../use-required-context';
+import DroppableContext, {
+  type DroppableContextValue,
+} from '../context/droppable-context';
+
+// We can use this to render a draggable with more control
+// It is used by a Droppable to render a clone
+export function PrivateDraggable(props: PrivateOwnProps) {
+  const droppableContext: DroppableContextValue | null = useRequiredContext(
+    DroppableContext,
+  );
+  // The droppable can render a clone of the draggable item.
+  // In that case we unmount the existing dragging item
+  const isUsingCloneFor: DraggableId | null | undefined = droppableContext?.isUsingCloneFor;
+  if (isUsingCloneFor === props.draggableId && !props.isClone) {
+    return null;
+  }
+
+  return <ConnectedDraggable {...props} />;
+}
+
+// What we give to consumers
+export function PublicDraggable(props: PublicOwnProps) {
+  // default values for props
+  const isEnabled: boolean =
+    typeof props.isDragDisabled === 'boolean' ? !props.isDragDisabled : true;
+  const canDragInteractiveElements: boolean = Boolean(
+    props.disableInteractiveElementBlocking,
+  );
+  const shouldRespectForcePress: boolean = Boolean(
+    props.shouldRespectForcePress,
+  );
+
+  return (
+    <PrivateDraggable
+      {...props}
+      isClone={false}
+      isEnabled={isEnabled}
+      canDragInteractiveElements={canDragInteractiveElements}
+      shouldRespectForcePress={shouldRespectForcePress}
+    />
+  );
+}

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

@@ -0,0 +1,204 @@
+// @flow
+import { type Position } from 'css-box-model';
+import { type ReactNode } from 'react';
+import type {
+  DraggableId,
+  DroppableId,
+  DraggableDimension,
+  State,
+  MovementMode,
+  ContextId,
+  ElementId,
+  DraggableRubric,
+} from '../../types';
+import { dropAnimationFinished } from '../../state/action-creators';
+
+// Exact
+export type DraggingStyle = {
+  position: 'fixed',
+  top: number,
+  left: number,
+  boxSizing: 'border-box',
+  width: number,
+  height: number,
+  transition: string,
+  transform: string | null,
+  zIndex: number,
+
+  // for combining
+  opacity: number | null,
+
+  // Avoiding any processing of mouse events.
+  // This is already applied by the shared styles during a drag.
+  // During a drop it prevents a draggable from being dragged.
+  // canStartDrag() will prevent drags in some cases for non primary draggable.
+  // It is also a minor performance optimisation
+  pointerEvents: 'none',
+};
+
+// Exact
+export type NotDraggingStyle = {
+  transform: string | null,
+  // null: use the global animation style
+  // none: skip animation (used in certain displacement situations)
+  transition: null | 'none',
+};
+
+export type DraggableStyle = DraggingStyle | NotDraggingStyle;
+
+// Exact
+export type ZIndexOptions = {
+  dragging: number,
+  dropAnimating: number,
+};
+
+// Props that can be spread onto the element directly
+// Exact
+export type DraggableProps = {
+  // inline style
+  style: DraggableStyle | null,
+  // used for shared global styles
+  'data-rbd-draggable-context-id': ContextId,
+  // used for lookups
+  'data-rbd-draggable-id': DraggableId,
+  // used to know when a transition ends
+  onTransitionEnd: ((event: TransitionEvent) => void) | null,
+};
+
+// Exact
+export type DragHandleProps = {
+  // what draggable the handle belongs to
+  'data-rbd-drag-handle-draggable-id': DraggableId,
+
+  // What DragDropContext the drag handle is in
+  'data-rbd-drag-handle-context-id': ContextId,
+
+  // We need a drag handle to be a widget in order to correctly set accessibility properties
+  // Note: JAWS and VoiceOver don't need the element to be a 'widget' to read the accessibility properties, but NVDA does
+  // Using `role="button"` but leaving the public API as a string to allow for changing without a major
+  role: string,
+
+  // Overriding default role to have a more descriptive text ("Draggable item")
+  // Sadly we cannot use this right now due an issue with lighthouse
+  // https://github.com/atlassian/react-beautiful-dnd/issues/1742
+  // 'aria-roledescription': string,
+
+  // Using the description property of the drag handle to provide usage instructions
+  'aria-describedby': ElementId,
+
+  // Allow tabbing to this element
+  // Adding a tab index marks the element as interactive content: https://www.w3.org/TR/html51/dom.html#kinds-of-content-interactive-content
+  tabIndex: number,
+
+  // Opting out of html5 drag and drop
+  draggable: boolean,
+  onDragStart: (event: DragEvent) => void,
+};
+
+// Exact
+export type Provided = {
+  draggableProps: DraggableProps,
+  // will be null if the draggable is disabled
+  dragHandleProps: DragHandleProps | null,
+  // The following props will be removed once we move to react 16
+  innerRef?: (arg0: HTMLElement) => void, // Mark for Review
+};
+
+// Exact
+// to easily enable patching of styles
+export type DropAnimation = {
+  duration: number,
+  curve: string,
+  moveTo: Position,
+  opacity: number | null,
+  scale: number | null,
+};
+
+// Exact
+export type StateSnapshot = {
+  isDragging: boolean,
+  isDropAnimating: boolean,
+  isClone: boolean,
+  dropAnimation: DropAnimation | null,
+  draggingOver: DroppableId | null,
+  combineWith: DraggableId | null,
+  combineTargetFor: DraggableId | null,
+  mode: MovementMode | null,
+};
+
+// Exact
+export type DispatchProps = {
+  dropAnimationFinished: typeof dropAnimationFinished,
+};
+
+// Exact
+export type DraggingMapProps = {
+  type: 'DRAGGING',
+  offset: Position,
+  mode: MovementMode,
+  dropping: DropAnimation | null,
+  draggingOver: DraggableId | null,
+  combineWith: DraggableId | null,
+  dimension: DraggableDimension,
+  forceShouldAnimate: boolean | null,
+  snapshot: StateSnapshot,
+};
+
+// Exact
+export type SecondaryMapProps = {
+  type: 'SECONDARY',
+  offset: Position,
+  combineTargetFor: DraggableId | null,
+  shouldAnimateDisplacement: boolean,
+  snapshot: StateSnapshot,
+};
+
+export type MappedProps = DraggingMapProps | SecondaryMapProps;
+
+// Exact
+export type MapProps = {
+  // when an item is being displaced by a dragging item,
+  // we need to know if that movement should be animated
+  mapped: MappedProps,
+  // dragging: ?DraggingMapProps,
+  // secondary: ?SecondaryMapProps,
+};
+
+export type ChildrenFn = (
+  provided: Provided,
+  snapshot: StateSnapshot,
+  rubric: DraggableRubric,
+) => ReactNode;
+
+// Exact
+export type PublicOwnProps = {
+  draggableId: DraggableId,
+  index: number,
+  children: ChildrenFn,
+
+  // optional own props
+  isDragDisabled?: boolean,
+  disableInteractiveElementBlocking?: boolean,
+  shouldRespectForcePress?: boolean,
+};
+
+// Exact
+export type PrivateOwnProps = PublicOwnProps & {
+  isClone: boolean,
+  // no longer optional
+  isEnabled: boolean,
+  canDragInteractiveElements: boolean,
+  shouldRespectForcePress: boolean,
+};
+
+// Exact
+export type OwnProps = PrivateOwnProps& {
+  
+};
+
+// Exact
+export type Props = MapProps & DispatchProps & OwnProps & {
+
+};
+
+export type Selector = (state: State, ownProps: OwnProps) => MapProps;