@esri/calcite-components/dist/utils/sortableComponent.d.ts

Web Components for Esri's Calcite Design System.

import { default as Sortable } from 'sortablejs';
export interface MoveDetail {
    toEl: HTMLElement;
    fromEl: HTMLElement;
    dragEl: HTMLElement;
    relatedEl: HTMLElement;
}
export interface DragDetail {
    toEl: HTMLElement;
    fromEl: HTMLElement;
    dragEl: HTMLElement;
    newIndex: number;
    oldIndex: number;
}
export declare const CSS: {
    ghostClass: string;
    chosenClass: string;
    dragClass: string;
    fallbackClass: string;
};
/** Defines interface for components with sorting functionality. */
export interface SortableComponent {
    /** The host element. */
    readonly el: HTMLElement;
    /** When `true`, dragging is enabled. */
    dragEnabled: boolean;
    /** Specifies which items inside the element should be draggable. */
    dragSelector?: string;
    /** The list's group identifier. */
    group?: string;
    /** The selector for the handle elements. */
    handleSelector: string;
    /** The Sortable instance. */
    sortable: Sortable;
    /** Whether the element can move from the list. */
    canPull: (detail: DragDetail) => boolean;
    /** Whether the element can be added from another list. */
    canPut: (detail: DragDetail) => boolean;
    /** Called when any sortable component drag starts. For internal use only. Any public drag events should emit within `onDragStart()`. */
    onGlobalDragStart: () => void;
    /** Called when any sortable component drag ends. For internal use only. Any public drag events should emit within `onDragEnd()`. */
    onGlobalDragEnd: () => void;
    /** Called when a component's dragging ends. */
    onDragEnd: (detail: DragDetail) => void;
    /** Called when a component's dragging ends. */
    onDragMove?: (detail: MoveDetail) => void;
    /** Called when a component's dragging starts. */
    onDragStart: (detail: DragDetail) => void;
    /** Called by any change to the list (add / update / remove). */
    onDragSort: (detail: DragDetail) => void;
}
export interface SortableComponentItem {
    /**
     * When `true`, the item is not draggable.
     *
     *
     * Notes:
     *
     * This property should use the `@Prop` decorator and reflect.
     * This property should be used to set the `calcite-handle` disabled property.
     */
    dragDisabled: boolean;
}
/**
 * Helper to keep track of a SortableComponent. This should be called in the `connectedCallback` lifecycle method as well as any other method necessary to rebuild the sortable instance.
 *
 * @param {SortableComponent} component - The sortable component.
 */
export declare function connectSortableComponent(component: SortableComponent): void;
/**
 * Helper to remove track of a SortableComponent. This should be called in the `disconnectedCallback` lifecycle method.
 *
 * @param {SortableComponent} component - The sortable component.
 */
export declare function disconnectSortableComponent(component: SortableComponent): void;
/**
 * Helper to determine if dragging is currently active.
 *
 * @param component The sortable component.
 * @returns {boolean} a boolean value.
 */
export declare function dragActive(component: SortableComponent): boolean;