@wix/patterns 1.255.0 → 1.256.0

package/src/components/DragAndDrop/DragAndDropState.ts

@@ -0,0 +1,587 @@
+import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import {
+  ActionMove,
+  ActionMoveBase,
+  ComputedQueryFull,
+  FiltersMap,
+  KeyedItem,
+  QueryState,
+  ReportBI,
+  ToastConfig,
+  WixPatternsContainer,
+} from '@wix/bex-core';
+import {
+  CollectionDragEndEvent,
+  DragAndDropBulkSubmit,
+  DragAndDropSubmit,
+} from './DragAndDrop';
+import { HTMLAttributes, MutableRefObject } from 'react';
+import { subtract } from '@wix/wix-style-react-incubator/dnd-kit/utilities';
+import { hasExceededDistance } from './hasExceededDistance';
+import { Announcements } from '@wix/wix-style-react-incubator/drag-and-drop';
+import {
+  ClientRect,
+  DragStartEvent,
+} from '@wix/wix-style-react-incubator/dnd-kit/core';
+import { haveIntersection } from './rectIntersection';
+import { EventEmitter } from 'events';
+import { TypedEmitter } from '@wix/bex-core/events';
+import { v4 as uuid } from 'uuid';
+import { emptyRect, RectState } from '../../state/RectState';
+import { ReorderModeState } from './ReorderModeState';
+
+export interface DragAndDropParentState<T, F extends FiltersMap> {
+  readonly reportBi: ReportBI;
+  readonly dragAndDropCategories?: (keyof F)[][] | null | undefined;
+  forceRenderIndexes: undefined | number[];
+  readonly containerRect?: ClientRect;
+  readonly _dnd?: DragAndDropState<T, F> | null;
+}
+
+export interface DragAndDropCollection<F extends FiltersMap> {
+  getKeyedItem: (key: string) => KeyedItem<any> | undefined | null;
+  getKeyedItemByIndex: (ind: number) => KeyedItem<any> | null;
+  keyedItems: KeyedItem<any>[];
+  originQuery: ComputedQueryFull<F>;
+  query: QueryState<F>;
+  total: number;
+}
+
+interface DragAndDropBaseBI<T> {
+  onDragStart: () =>
+    | ((params: { endType?: 'clicked ESC' | 'drop outside' | null }) => void)
+    | undefined;
+  onMoveCancelled: (move: ActionMoveBase<T>) => void;
+  onAttemptDragStart: (itemId: string) => () => void;
+}
+
+export interface DragAndDropStateParams<T, F extends FiltersMap>
+  extends DragAndDropBaseStateParams<T, F> {
+  move: (ev: { over: DragItemOver | null }) => void;
+  announcements?: Partial<Announcements>;
+  bi?: DragAndDropBaseBI<T>;
+}
+
+export interface DragAndDropBaseStateParams<T, F extends FiltersMap> {
+  container: WixPatternsContainer;
+  collection: DragAndDropCollection<F>;
+  state: DragAndDropParentState<T, F>;
+}
+
+interface DragItemActive {
+  id: string | number;
+  rect?: MutableRefObject<{
+    initial: ClientRect | null;
+    translated: ClientRect | null;
+  }>;
+}
+export interface DragItemOver {
+  id: string | number;
+  rect?: ClientRect;
+  disabled?: boolean;
+}
+
+export class DragAndDropState<T, F extends FiltersMap> {
+  readonly state;
+  readonly container;
+  readonly collection;
+
+  readonly events = new EventEmitter() as TypedEmitter<{
+    dropAnimationEnd: () => unknown;
+    dragStart: () => unknown;
+  }>;
+
+  status: 'start' | 'over' | 'end' | 'cancel' | null | undefined = null;
+  activeId: string | null | undefined = null;
+  overlayRect;
+  _moveDelta: { x: number } = { x: 0 };
+  overId: string | null | undefined = null;
+  droppingId: string | null | undefined = null;
+  droppedId: string | null | undefined = null;
+  _dropAnimationId: string | null | undefined = null;
+  scheduleDropEnd;
+  scheduleIdle;
+
+  move;
+
+  onSubmit?: DragAndDropSubmit<T, F>;
+  onBulkSubmit?: DragAndDropBulkSubmit<T, F>;
+  onCancel?: () => Promise<boolean | null>;
+
+  reorderModeState?: ReorderModeState<T, F> | null = null;
+
+  readonly bi;
+
+  _isHandleActive = false;
+  _isKeyboardDragging = false;
+  _moveId = '';
+  _onDragEndBi?:
+    | ((params: { endType?: 'clicked ESC' | 'drop outside' | null }) => void)
+    | null;
+
+  _endType: 'clicked ESC' | 'drop outside' | null = null;
+
+  private readonly _baseAnimation = {
+    duration: 250,
+    easing: 'cubic-bezier(0.33, 1, 0.68, 1)',
+  };
+
+  readonly sortableAnimation = {
+    ...this._baseAnimation,
+  };
+
+  readonly dropAnimation = {
+    duration: 75,
+    easing: 'cubic-bezier(0.33, 1, 0.68, 1)',
+    sideEffects: () => {
+      this._dropAnimationId = this.droppingId;
+      return () => {
+        this.onDropAnimationEnd();
+      };
+    },
+  };
+
+  readonly activationConstraint = {
+    distance: 1,
+  };
+
+  readonly keyboardCodes = {
+    start: ['Space', 'Enter'],
+    cancel: ['Escape', 'Tab'],
+    end: ['Space', 'Enter'],
+    move: ['ArrowDown'],
+  };
+
+  readonly nullAnnouncements: Announcements;
+
+  // Should be triggered before `onDragStart` for correct BI
+  readonly handleEvents: Partial<HTMLAttributes<Element>> = {
+    onPointerDown: action(() => {
+      this._isHandleActive = true;
+    }),
+    onKeyDown: action((e) => {
+      const { keyboardCodes } = this;
+      if (keyboardCodes.start.includes(e.nativeEvent.code)) {
+        this._isHandleActive = true;
+        this._isKeyboardDragging = true;
+        return;
+      }
+    }),
+  };
+
+  readonly containerEvents: Partial<HTMLAttributes<Element>> = {
+    onPointerDown: action(() => {
+      this._isKeyboardDragging = false;
+    }),
+  };
+
+  constructor(params: DragAndDropStateParams<T, F>) {
+    this.container = params.container;
+    this.state = params.state;
+    this.collection = params.collection;
+
+    this.overlayRect = new RectState({ container: this.container });
+
+    this.events.setMaxListeners(100);
+
+    this.bi = params.bi;
+
+    // We have an issue with pptr where `dropAnimation.sideEffects` is not being called.
+    // This ensures `onDropAnimationEnd` will be called eventually, even if `dropAnimation.sideEffects` wasn't called.
+    this.scheduleDropEnd = this.container.lodash.debounce(() => {
+      // Do not call `onDropAnimationEnd` if _dropAnimationId was set, meaning that `dropAnimation.sideEffects` worked as expected
+      if (this._dropAnimationId && this._dropAnimationId === this.droppingId) {
+        return;
+      }
+      this.onDropAnimationEnd();
+    }, this.dropAnimation.duration);
+
+    this.scheduleIdle = this.container.lodash.debounce(
+      action(() => {
+        if (this.status === 'end' || this.status === 'cancel') {
+          this.status = null;
+          this._isKeyboardDragging = false;
+          this._onDragEndBi = null;
+          this._endType = null;
+        }
+      }),
+      500,
+    );
+
+    this.move = params.move;
+
+    this.nullAnnouncements = {
+      onDragStart: () => undefined,
+      onDragMove: () => undefined,
+      onDragOver: () => undefined,
+      onDragEnd: () => undefined,
+      onDragCancel: () => undefined,
+      listAttributes: () => {
+        const { translate: t } = this.container;
+        return {
+          'aria-label': t('cairo.dragAndDrop.list-aria-label.sr'),
+        };
+      },
+      ...(params.announcements ?? {}),
+    };
+
+    makeObservable(this, {
+      activeId: observable.ref,
+      overlayRect: observable.ref,
+      overId: observable.ref,
+      _moveDelta: observable.ref,
+      status: observable.ref,
+      onDragStart: action,
+      init: action,
+      beforeDrop: action,
+      onDragEnd: action,
+      onDragMove: action,
+      onDragOver: action,
+      onDragCancel: action,
+      focusDragHandleIfDropped: action,
+      active: computed,
+      isActiveRectOutsideContainer: computed,
+      over: computed,
+      activeIndex: computed,
+      isActive: computed,
+      droppingId: observable.ref,
+      isDropping: computed,
+      _isHandleActive: observable.ref,
+      reorderModeState: observable.ref,
+    });
+  }
+
+  onDropAnimationEnd = action(() => {
+    if (this.droppingId && this.activeId === this.droppingId) {
+      this.activeId = null;
+      this._isHandleActive = false;
+      this.droppedId = this.droppingId;
+      this.droppingId = null;
+      this._dropAnimationId = null;
+      this.events.emit('dropAnimationEnd');
+      this._onDragEndBi?.({
+        endType: this._endType,
+      });
+      this.scheduleIdle();
+    }
+  });
+
+  get active() {
+    const { activeId, collection } = this;
+    return activeId != null ? collection.getKeyedItem(activeId) : null;
+  }
+
+  get over() {
+    const { overId, collection } = this;
+    return overId != null ? collection.getKeyedItem(overId) : null;
+  }
+
+  get isDropping() {
+    return this.droppingId != null;
+  }
+
+  get activeIndex() {
+    return this.active?.index;
+  }
+
+  get isActive() {
+    return this.activeId != null;
+  }
+
+  _onGlobalKeydown = action((e: KeyboardEvent) => {
+    const { keyboardCodes, activeId } = this;
+
+    if (activeId == null) {
+      return;
+    }
+
+    if (keyboardCodes.cancel.includes(e.code)) {
+      this._endType = 'clicked ESC';
+      return;
+    }
+  });
+
+  onDragMove(event: {
+    active: {
+      id: DragStartEvent['active']['id'];
+      rect?: DragStartEvent['active']['rect'];
+    };
+    delta: { x: number };
+  }) {
+    const { active } = event;
+    this._moveDelta = event.delta;
+    Object.assign(this.overlayRect.rect, active.rect?.current.translated);
+  }
+
+  onDragStart(event: {
+    active: {
+      id: DragStartEvent['active']['id'];
+      rect?: DragStartEvent['active']['rect'];
+    };
+  }) {
+    const { events } = this;
+    const { active } = event;
+    this.status = 'start';
+    Object.assign(this.overlayRect.rect, active.rect?.current.translated);
+    this.activeId = event.active.id as string;
+    this.overId = this.activeId;
+    this._moveId = uuid();
+    this._onDragEndBi = this.bi?.onDragStart();
+    events.emit('dragStart');
+  }
+
+  attachDisabledDragAttempt = (
+    itemId: string,
+    downEvent: MouseEvent,
+    axis: 'x' | 'y' | 'all',
+  ) => {
+    const state = {
+      onDragAttemptEnd: null as (() => void) | null,
+    };
+
+    const coordinates = {
+      x: downEvent.x,
+      y: downEvent.y,
+    };
+
+    const onMouseUp = () => {
+      if (state.onDragAttemptEnd) {
+        state.onDragAttemptEnd();
+        state.onDragAttemptEnd = null;
+      }
+
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    const onMove = this.container.lodash.throttle((moveEvent: MouseEvent) => {
+      const delta = subtract({ x: moveEvent.x, y: moveEvent.y }, coordinates);
+
+      // for detecting drag attempt use larger activation constraint (10px instead of 1px)
+      if (
+        process.env.NODE_ENV !== 'test' &&
+        !hasExceededDistance({ delta, measurement: 10, axis })
+      ) {
+        return;
+      }
+
+      document.removeEventListener('mousemove', onMove);
+      state.onDragAttemptEnd = this.bi?.onAttemptDragStart(itemId) ?? null;
+    }, 200);
+
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onMouseUp);
+  };
+
+  get isActiveRectOutsideContainer() {
+    const {
+      state: { containerRect },
+      overlayRect: { rect: overlayRect },
+    } = this;
+
+    if (overlayRect.width == null || containerRect == null) {
+      return false;
+    }
+
+    return !haveIntersection(overlayRect, containerRect);
+  }
+
+  _maybeShowErrorToast = (
+    shouldCancel: Omit<ToastConfig, 'type' | 'biName'> | true,
+    dragEndEvent: ActionMoveBase<T>,
+  ) => {
+    const { container } = this;
+
+    if (shouldCancel && typeof shouldCancel === 'object') {
+      this.bi?.onMoveCancelled?.(dragEndEvent);
+      container.showToast?.({
+        ...shouldCancel,
+        type: 'ERROR',
+        biName: 'cairo-drag-and-drop-external-logic-error',
+      });
+    }
+  };
+
+  async beforeDrop(event: {
+    active: DragItemActive | null;
+    over: DragItemOver | null;
+  }): Promise<boolean> {
+    this.droppingId = this.activeId;
+    this.overId = event.over?.id as string;
+    const { active } = event;
+
+    if (active == null) {
+      return false;
+    }
+
+    const cancelResult = await this.onCancel?.();
+
+    if (cancelResult) {
+      return true;
+    }
+
+    const rect = active.rect?.current?.translated;
+    const container = this.state.containerRect;
+
+    if (rect == null || container == null) {
+      return false;
+    }
+
+    const shouldCancel = !haveIntersection(rect, container);
+
+    if (shouldCancel) {
+      this._endType = 'drop outside';
+    }
+
+    return shouldCancel;
+  }
+
+  _createDragEndEvent() {
+    const { active, collection, overId } = this;
+    const { query } = collection;
+
+    if (active == null || overId == null || overId === active.id) {
+      return null;
+    }
+
+    const from = collection.getKeyedItem(active.id as string);
+    const over = collection.getKeyedItem(overId as string);
+
+    if (from == null || over == null) {
+      return null;
+    }
+
+    const after =
+      over.index === 0
+        ? null
+        : over.index < from.index
+        ? collection.getKeyedItemByIndex(over.index - 1)
+        : over;
+
+    return {
+      moveId: this._moveId,
+      from,
+      over,
+      after,
+      query: collection.originQuery,
+      filtersKeyHash: query.filtersKeyHash,
+      isFromHandle: Boolean(this._isHandleActive),
+    };
+  }
+
+  _createSimpleDragEndEvent(
+    event: ActionMove<T>,
+  ): CollectionDragEndEvent<T, F> {
+    const simplifyIndexedItem = (keyedItem: KeyedItem<T>) => ({
+      id: keyedItem.id,
+      item: keyedItem.item,
+      index: keyedItem.index,
+    });
+
+    return {
+      from: simplifyIndexedItem(event.from),
+      after: event.after != null ? simplifyIndexedItem(event.after) : null,
+      over: simplifyIndexedItem(event.over),
+      filters: event.query.filters,
+    };
+  }
+
+  onDragCancel() {
+    this.status = 'cancel';
+    Object.assign(this.overlayRect.rect, emptyRect());
+    this.droppingId = this.activeId;
+    this.scheduleDropEnd();
+  }
+
+  onDragOver(event: { over: DragItemOver | null }) {
+    this.status = 'over';
+    this.overId = event.over?.id as string;
+  }
+
+  onDragEnd(event: { over: DragItemOver | null }) {
+    this.status = 'end';
+    this.overId = event.over?.id as string;
+    Object.assign(this.overlayRect.rect, emptyRect());
+    this.move(event);
+    this.scheduleDropEnd();
+  }
+
+  get isDisabled() {
+    const { dragAndDropCategories } = this.state;
+    const {
+      query: { hasActiveSort, filtersArray },
+    } = this.collection;
+
+    const activeFiltersNames = filtersArray
+      .filter((filter) => !filter.isEmpty)
+      .map((filter) => filter.name);
+
+    if (hasActiveSort) {
+      return true;
+    }
+
+    if (activeFiltersNames.length) {
+      return (
+        dragAndDropCategories == null ||
+        !dragAndDropCategories.some(
+          (combination) =>
+            activeFiltersNames.length === combination.length &&
+            activeFiltersNames.every((name) => combination.includes(name)),
+        )
+      );
+    }
+
+    if (dragAndDropCategories) {
+      const hasEmptyCombination = dragAndDropCategories.some(
+        (combination) => !combination.length,
+      );
+      return !hasEmptyCombination;
+    }
+
+    return false;
+  }
+
+  init() {
+    document.addEventListener('keydown', this._onGlobalKeydown);
+
+    const disposers = [
+      reaction(
+        () => this.active,
+        (keyedItem) => {
+          this.state.forceRenderIndexes = keyedItem
+            ? [keyedItem.index]
+            : undefined;
+        },
+        {
+          fireImmediately: true,
+        },
+      ),
+    ];
+
+    return () => {
+      document.removeEventListener('keydown', this._onGlobalKeydown);
+      disposers.forEach((dispose) => dispose());
+    };
+  }
+
+  focusDragHandleIfDropped(
+    id: string | number,
+    element: HTMLElement | null | undefined,
+  ) {
+    const { status, droppedId, droppingId } = this;
+    if (
+      (status === 'end' || status === 'cancel') &&
+      droppingId == null &&
+      droppedId === id &&
+      element
+    ) {
+      element.focus({
+        preventScroll: true,
+      });
+    }
+  }
+
+  get reportBi() {
+    return this.state.reportBi;
+  }
+}

package/src/components/DragAndDrop/DragOverlayTestComponent.tsx

@@ -0,0 +1,48 @@
+import { DragOverlayProps } from '@wix/wix-style-react-incubator/dnd-kit/core';
+import React from 'react';
+import { DragAndDropState } from './DragAndDropState';
+import { FiltersMap } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+
+export interface DragOverlayTestComponentProps<T, F extends FiltersMap>
+  extends DragOverlayProps {
+  state: DragAndDropState<T, F>;
+}
+
+function _DragOverlayTestComponent<T, F extends FiltersMap>(
+  props: DragOverlayTestComponentProps<T, F>,
+) {
+  const {
+    wrapperElement: Wrapper,
+    style,
+    children,
+    className,
+    zIndex,
+    state,
+  } = props;
+
+  if (state.activeId == null) {
+    return null;
+  }
+
+  let child = children;
+
+  if (Wrapper) {
+    child = <Wrapper>{children}</Wrapper>;
+  }
+
+  return (
+    <div
+      className={className}
+      style={{
+        position: 'fixed',
+        ...style,
+        zIndex,
+      }}
+    >
+      {child}
+    </div>
+  );
+}
+
+export const DragOverlayTestComponent = observer(_DragOverlayTestComponent);