@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
139 lines (138 loc) • 5.1 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { html } from "lit-html";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
import { c as createObserver } from "../../chunks/observers.js";
import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
import { b as focusElement } from "../../chunks/dom.js";
import { l as logger } from "../../chunks/logger.js";
import { css } from "@lit/reactive-element/css-tag.js";
const CSS = {
container: "container",
containerHorizontal: "container--horizontal",
containerVertical: "container--vertical"
};
const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;flex:1 1 auto}.container--vertical{flex-direction:column}.container--horizontal{flex-direction:row}:host([hidden]){display:none}[hidden]{display:none}`;
class SortableList extends LitElement {
constructor() {
super();
this.dragEnabled = true;
this.items = [];
this.mutationObserver = createObserver("mutation", () => {
this.setUpSorting();
});
this.disabled = false;
this.handleSelector = "calcite-handle";
this.layout = "vertical";
this.loading = false;
this.calciteListOrderChange = createEvent({ cancelable: false });
this.listen("calciteHandleNudge", this.calciteHandleNudgeNextHandler);
}
static {
this.properties = { canPull: [0, {}, { attribute: false }], canPut: [0, {}, { attribute: false }], disabled: [7, {}, { reflect: true, type: Boolean }], dragSelector: [3, {}, { reflect: true }], group: [3, {}, { reflect: true }], handleSelector: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], loading: [7, {}, { reflect: true, type: Boolean }] };
}
static {
this.styles = styles;
}
connectedCallback() {
super.connectedCallback();
this.setUpSorting();
this.beginObserving();
}
load() {
logger.deprecated("component", {
name: "sortable-list",
removalVersion: 4,
suggested: "block-group"
});
}
updated() {
updateHostInteraction(this);
}
disconnectedCallback() {
super.disconnectedCallback();
disconnectSortableComponent(this);
this.endObserving();
}
calciteHandleNudgeNextHandler(event) {
this.handleNudgeEvent(event);
}
onGlobalDragStart() {
this.endObserving();
}
onGlobalDragEnd() {
this.beginObserving();
}
onDragEnd() {
}
onDragStart() {
}
onDragSort() {
this.items = Array.from(this.el.children);
this.calciteListOrderChange.emit();
}
handleNudgeEvent(event) {
const { direction } = event.detail;
const handle = event.composedPath().find((el) => el.matches(this.handleSelector));
const sortItem = this.items.find((item) => {
return item.contains(handle) || event.composedPath().includes(item);
});
const lastIndex = this.items.length - 1;
const startingIndex = this.items.indexOf(sortItem);
let appendInstead = false;
let buddyIndex;
if (direction === "up") {
if (startingIndex === 0) {
appendInstead = true;
} else {
buddyIndex = startingIndex - 1;
}
} else {
if (startingIndex === lastIndex) {
buddyIndex = 0;
} else if (startingIndex === lastIndex - 1) {
appendInstead = true;
} else {
buddyIndex = startingIndex + 2;
}
}
this.endObserving();
if (appendInstead) {
sortItem.parentElement.appendChild(sortItem);
} else {
sortItem.parentElement.insertBefore(sortItem, this.items[buddyIndex]);
}
this.items = Array.from(this.el.children);
this.beginObserving();
requestAnimationFrame(() => focusElement(handle));
if ("selected" in handle) {
handle.selected = true;
}
}
setUpSorting() {
this.items = Array.from(this.el.children);
connectSortableComponent(this);
}
beginObserving() {
this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
}
endObserving() {
this.mutationObserver?.disconnect();
}
render() {
const { disabled, layout } = this;
const horizontal = layout === "horizontal" || false;
return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
[CSS.container]: true,
[CSS.containerVertical]: !horizontal,
[CSS.containerHorizontal]: horizontal
})}><slot></slot></div>` });
}
}
customElement("calcite-sortable-list", SortableList);
export {
SortableList
};