Class ReorderGroup

core/src/components/reorder-group/reorder-group.tsx:25–354

  styleUrl: 'reorder-group.scss',
})
export class ReorderGroup implements ComponentInterface {
  private selectedItemEl?: HTMLElement;
  private selectedItemHeight!: number;
  private lastToIndex = -1;
  private cachedHeights: number[] = [];
  private scrollEl?: HTMLElement;
  private gesture?: Gesture;

  private scrollElTop = 0;
  private scrollElBottom = 0;
  private scrollElInitial = 0;

  private containerTop = 0;
  private containerBottom = 0;

  @State() state = ReorderGroupState.Idle;

  @Element() el!: HTMLStencilElement;

  /**
   * If `true`, the reorder will be hidden.
   */
  @Prop() disabled = true;
  @Watch('disabled')
  disabledChanged() {
    if (this.gesture) {
      this.gesture.enable(!this.disabled);
    }
  }

  // TODO(FW-6590): Remove this in a major release.
  /**
   * Event that needs to be listened to in order to complete the reorder action.
   * @deprecated Use `ionReorderEnd` instead. If you are accessing
   * `event.detail.from` or `event.detail.to` and relying on them
   * being different you should now add checks as they are always emitted
   * in `ionReorderEnd`, even when they are the same.
   */
  @Event() ionItemReorder!: EventEmitter<ItemReorderEventDetail>;

  /**
   * Event that is emitted when the reorder gesture starts.
   */
  @Event() ionReorderStart!: EventEmitter<void>;

  /**
   * Event that is emitted as the reorder gesture moves.
   */
  @Event() ionReorderMove!: EventEmitter<ReorderMoveEventDetail>;

  /**
   * Event that is emitted when the reorder gesture ends.
   * The from and to properties are always available, regardless of
   * if the reorder gesture moved the item. If the item did not change
   * from its start position, the from and to properties will be the same.
   * Once the event has been emitted, the `complete()` method then needs
   * to be called in order to finalize the reorder action.
   */