@jchinkle/react-arborist
Version:
1,507 lines (1,408 loc) • 81.3 kB
JavaScript
import {jsxs as $hgUW1$jsxs, jsx as $hgUW1$jsx, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
import $hgUW1$react, {forwardRef as $hgUW1$forwardRef, useRef as $hgUW1$useRef, useMemo as $hgUW1$useMemo, useImperativeHandle as $hgUW1$useImperativeHandle, useEffect as $hgUW1$useEffect, createContext as $hgUW1$createContext, useContext as $hgUW1$useContext, memo as $hgUW1$memo, useCallback as $hgUW1$useCallback, useState as $hgUW1$useState} from "react";
import {useSyncExternalStore as $hgUW1$useSyncExternalStore} from "use-sync-external-store/shim";
import {HTML5Backend as $hgUW1$HTML5Backend, getEmptyImage as $hgUW1$getEmptyImage} from "react-dnd-html5-backend";
import {DndProvider as $hgUW1$DndProvider, useDrag as $hgUW1$useDrag, useDrop as $hgUW1$useDrop, useDragLayer as $hgUW1$useDragLayer} from "react-dnd";
import {createStore as $hgUW1$createStore, combineReducers as $hgUW1$combineReducers} from "redux";
import {FixedSizeList as $hgUW1$FixedSizeList} from "react-window";
function $parcel$export(e, n, v, s) {
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
}
/* The Public Api */
const $f4ed15b55ee70bb8$export$feef243b04ff4151 = (0, $hgUW1$createContext)(null);
function $f4ed15b55ee70bb8$export$367b0f2231a90ba0() {
const value = (0, $hgUW1$useContext)($f4ed15b55ee70bb8$export$feef243b04ff4151);
if (value === null) throw new Error("No Tree Api Provided");
return value;
}
const $f4ed15b55ee70bb8$export$f6d467aa8b3786af = (0, $hgUW1$createContext)(null);
function $f4ed15b55ee70bb8$export$fd23f19d5d8f3033() {
const value = (0, $hgUW1$useContext)($f4ed15b55ee70bb8$export$f6d467aa8b3786af);
if (value === null) throw new Error("Provide a NodesContext");
return value;
}
const $f4ed15b55ee70bb8$export$2d5c5ceac203fc1e = (0, $hgUW1$createContext)(null);
function $f4ed15b55ee70bb8$export$4930f6bf413be70e() {
const value = (0, $hgUW1$useContext)($f4ed15b55ee70bb8$export$2d5c5ceac203fc1e);
if (value === null) throw new Error("Provide a DnDContext");
return value;
}
const $f4ed15b55ee70bb8$export$d0c71bc5e3e2d897 = (0, $hgUW1$createContext)(0);
function $f4ed15b55ee70bb8$export$83a4f9dc3b36edb8() {
(0, $hgUW1$useContext)($f4ed15b55ee70bb8$export$d0c71bc5e3e2d897);
}
var $badb6758e30dd716$exports = {};
$parcel$export($badb6758e30dd716$exports, "TreeApi", () => $badb6758e30dd716$export$e2da3477247342d1);
var $fab42eb3dee39b5b$exports = {};
$parcel$export($fab42eb3dee39b5b$exports, "bound", () => $fab42eb3dee39b5b$export$adf7c0fe6059d774);
$parcel$export($fab42eb3dee39b5b$exports, "isItem", () => $fab42eb3dee39b5b$export$5318634f2ee07019);
$parcel$export($fab42eb3dee39b5b$exports, "isClosed", () => $fab42eb3dee39b5b$export$4210f5ea57fbae57);
$parcel$export($fab42eb3dee39b5b$exports, "isDecendent", () => $fab42eb3dee39b5b$export$1e38f72c6c546f70);
$parcel$export($fab42eb3dee39b5b$exports, "indexOf", () => $fab42eb3dee39b5b$export$305f7d4e9d4624f2);
$parcel$export($fab42eb3dee39b5b$exports, "noop", () => $fab42eb3dee39b5b$export$8793edee2d425525);
$parcel$export($fab42eb3dee39b5b$exports, "dfs", () => $fab42eb3dee39b5b$export$51b654aff22fc5a6);
$parcel$export($fab42eb3dee39b5b$exports, "walk", () => $fab42eb3dee39b5b$export$588732934346abbf);
$parcel$export($fab42eb3dee39b5b$exports, "focusNextElement", () => $fab42eb3dee39b5b$export$3b0237e8566c8d65);
$parcel$export($fab42eb3dee39b5b$exports, "focusPrevElement", () => $fab42eb3dee39b5b$export$33b47db07a82b2fb);
$parcel$export($fab42eb3dee39b5b$exports, "access", () => $fab42eb3dee39b5b$export$9bb0e144ba4929ca);
$parcel$export($fab42eb3dee39b5b$exports, "identifyNull", () => $fab42eb3dee39b5b$export$611823266272db76);
$parcel$export($fab42eb3dee39b5b$exports, "identify", () => $fab42eb3dee39b5b$export$65e5b62a4c490288);
$parcel$export($fab42eb3dee39b5b$exports, "mergeRefs", () => $fab42eb3dee39b5b$export$c9058316764c140e);
$parcel$export($fab42eb3dee39b5b$exports, "safeRun", () => $fab42eb3dee39b5b$export$c6d63370cef03886);
$parcel$export($fab42eb3dee39b5b$exports, "waitFor", () => $fab42eb3dee39b5b$export$9bbfceb27f687c1b);
$parcel$export($fab42eb3dee39b5b$exports, "getInsertIndex", () => $fab42eb3dee39b5b$export$e12bf2314d0bc2a9);
$parcel$export($fab42eb3dee39b5b$exports, "getInsertParentId", () => $fab42eb3dee39b5b$export$58fe32731f07ed56);
function $fab42eb3dee39b5b$export$adf7c0fe6059d774(n, min, max) {
return Math.max(Math.min(n, max), min);
}
function $fab42eb3dee39b5b$export$5318634f2ee07019(node) {
return node && node.isLeaf;
}
function $fab42eb3dee39b5b$export$4210f5ea57fbae57(node) {
return node && node.isInternal && !node.isOpen;
}
const $fab42eb3dee39b5b$export$1e38f72c6c546f70 = (a, b)=>{
let n = a;
while(n){
if (n.id === b.id) return true;
n = n.parent;
}
return false;
};
const $fab42eb3dee39b5b$export$305f7d4e9d4624f2 = (node)=>{
if (!node.parent) throw Error("Node does not have a parent");
return node.parent.children.findIndex((c)=>c.id === node.id);
};
function $fab42eb3dee39b5b$export$8793edee2d425525() {}
function $fab42eb3dee39b5b$export$51b654aff22fc5a6(node, id) {
if (!node) return null;
if (node.id === id) return node;
if (node.children) for (let child of node.children){
const result = $fab42eb3dee39b5b$export$51b654aff22fc5a6(child, id);
if (result) return result;
}
return null;
}
function $fab42eb3dee39b5b$export$588732934346abbf(node, fn) {
fn(node);
if (node.children) for (let child of node.children)$fab42eb3dee39b5b$export$588732934346abbf(child, fn);
}
function $fab42eb3dee39b5b$export$3b0237e8566c8d65(target) {
const elements = $fab42eb3dee39b5b$var$getFocusable(target);
let next;
for(let i = 0; i < elements.length; ++i){
const item = elements[i];
if (item === target) {
next = $fab42eb3dee39b5b$var$nextItem(elements, i);
break;
}
}
// @ts-ignore ??
next?.focus();
}
function $fab42eb3dee39b5b$export$33b47db07a82b2fb(target) {
const elements = $fab42eb3dee39b5b$var$getFocusable(target);
let next;
for(let i = 0; i < elements.length; ++i){
const item = elements[i];
if (item === target) {
next = $fab42eb3dee39b5b$var$prevItem(elements, i);
break;
}
}
// @ts-ignore
next?.focus();
}
function $fab42eb3dee39b5b$var$nextItem(list, index) {
if (index + 1 < list.length) return list[index + 1];
else return list[0];
}
function $fab42eb3dee39b5b$var$prevItem(list, index) {
if (index - 1 >= 0) return list[index - 1];
else return list[list.length - 1];
}
function $fab42eb3dee39b5b$var$getFocusable(target) {
return Array.from(document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)')).filter((e)=>e === target || !target.contains(e));
}
function $fab42eb3dee39b5b$export$9bb0e144ba4929ca(obj, accessor) {
if (typeof accessor === "boolean") return accessor;
if (typeof accessor === "string") return obj[accessor];
return accessor(obj);
}
function $fab42eb3dee39b5b$export$611823266272db76(obj) {
if (obj === null) return null;
else return $fab42eb3dee39b5b$export$65e5b62a4c490288(obj);
}
function $fab42eb3dee39b5b$export$65e5b62a4c490288(obj) {
return typeof obj === "string" ? obj : obj.id;
}
function $fab42eb3dee39b5b$export$c9058316764c140e(...refs) {
return (instance)=>{
refs.forEach((ref)=>{
if (typeof ref === "function") ref(instance);
else if (ref != null) ref.current = instance;
});
};
}
function $fab42eb3dee39b5b$export$c6d63370cef03886(fn, ...args) {
if (fn) return fn(...args);
}
function $fab42eb3dee39b5b$export$9bbfceb27f687c1b(fn) {
return new Promise((resolve, reject)=>{
let tries = 0;
function check() {
tries += 1;
if (tries === 100) reject();
if (fn()) resolve();
else setTimeout(check, 10);
}
check();
});
}
function $fab42eb3dee39b5b$export$e12bf2314d0bc2a9(tree) {
const focus = tree.focusedNode;
if (!focus) return tree.root.children?.length ?? 0;
if (focus.isOpen) return 0;
if (focus.parent) return focus.childIndex + 1;
return 0;
}
function $fab42eb3dee39b5b$export$58fe32731f07ed56(tree) {
const focus = tree.focusedNode;
if (!focus) return null;
if (focus.isOpen) return focus.id;
if (focus.parent && !focus.parent.isRoot) return focus.parent.id;
return null;
}
const $1f311251559e07c9$var$placeholderStyle = {
display: "flex",
alignItems: "center",
zIndex: 1
};
const $1f311251559e07c9$var$lineStyle = {
flex: 1,
height: "2px",
background: "#4B91E2",
borderRadius: "1px"
};
const $1f311251559e07c9$var$circleStyle = {
width: "4px",
height: "4px",
boxShadow: "0 0 0 3px #4B91E2",
borderRadius: "50%"
};
const $1f311251559e07c9$export$6cb3c16721363d11 = /*#__PURE__*/ (0, $hgUW1$react).memo(function DefaultCursor({ top: top , left: left , indent: indent }) {
const style = {
position: "absolute",
pointerEvents: "none",
top: top - 2 + "px",
left: left + "px",
right: indent + "px"
};
return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
style: {
...$1f311251559e07c9$var$placeholderStyle,
...style
},
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)("div", {
style: {
...$1f311251559e07c9$var$circleStyle
}
}),
/*#__PURE__*/ (0, $hgUW1$jsx)("div", {
style: {
...$1f311251559e07c9$var$lineStyle
}
})
]
});
});
function $b2b9258243d0947f$export$f9c541e71856c524({ node: node , attrs: attrs , innerRef: innerRef , children: children }) {
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
...attrs,
ref: innerRef,
onFocus: (e)=>e.stopPropagation(),
onClick: node.handleClick,
children: children
});
}
function $1cf21b02c215d80f$export$909e23cbfbbd3351(props) {
return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
ref: props.dragHandle,
style: props.style,
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)("span", {
onClick: (e)=>{
e.stopPropagation();
props.node.toggle();
},
children: props.node.isLeaf ? "\uD83C\uDF33" : props.node.isOpen ? "\uD83D\uDDC1" : "\uD83D\uDDC0"
}),
" ",
props.node.isEditing ? /*#__PURE__*/ (0, $hgUW1$jsx)($1cf21b02c215d80f$var$Edit, {
...props
}) : /*#__PURE__*/ (0, $hgUW1$jsx)($1cf21b02c215d80f$var$Show, {
...props
})
]
});
}
function $1cf21b02c215d80f$var$Show(props) {
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$Fragment), {
children: /*#__PURE__*/ (0, $hgUW1$jsx)("span", {
children: props.node.data.name
})
});
}
function $1cf21b02c215d80f$var$Edit({ node: node }) {
const input = (0, $hgUW1$useRef)();
(0, $hgUW1$useEffect)(()=>{
input.current?.focus();
input.current?.select();
}, []);
return /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
ref: input,
// @ts-ignore
defaultValue: node.data.name,
onBlur: ()=>node.reset(),
onKeyDown: (e)=>{
if (e.key === "Escape") node.reset();
if (e.key === "Enter") node.submit(input.current?.value || "");
}
});
}
/* Types */ function $0653cf521546277e$export$e1a8e267487c59d1(id) {
return {
type: "EDIT",
id: id
};
}
function $0653cf521546277e$export$1650419e431d3ba3(state = {
id: null
}, action) {
if (action.type === "EDIT") return {
...state,
id: action.id
};
else return state;
}
/* Types */ function $eb3d9db7e5c4e4b5$export$d7ddd398f22d79ef(id) {
return {
type: "FOCUS",
id: id
};
}
function $eb3d9db7e5c4e4b5$export$6b6c976e46a06288() {
return {
type: "TREE_BLUR"
};
}
function $eb3d9db7e5c4e4b5$export$1650419e431d3ba3(state = {
id: null,
treeFocused: false
}, action) {
if (action.type === "FOCUS") return {
...state,
id: action.id,
treeFocused: true
};
else if (action.type === "TREE_BLUR") return {
...state,
treeFocused: false
};
else return state;
}
var $bfd4e380870e2175$exports = {};
$parcel$export($bfd4e380870e2175$exports, "NodeApi", () => $bfd4e380870e2175$export$d4b903da0f522dc8);
class $bfd4e380870e2175$export$d4b903da0f522dc8 {
constructor(params){
this.handleClick = (e)=>{
if (e.metaKey && !this.tree.props.disableMultiSelection) this.isSelected ? this.deselect() : this.selectMulti();
else if (e.shiftKey && !this.tree.props.disableMultiSelection) this.selectContiguous();
else {
this.select();
this.activate();
}
};
this.tree = params.tree;
this.id = params.id;
this.data = params.data;
this.level = params.level;
this.children = params.children;
this.parent = params.parent;
this.isDraggable = params.isDraggable;
this.rowIndex = params.rowIndex;
}
get isRoot() {
return this.id === (0, $04514ba8ecc1e155$export$ec71a3379b43ae5c);
}
get isLeaf() {
return !Array.isArray(this.children);
}
get isInternal() {
return !this.isLeaf;
}
get isOpen() {
return this.isLeaf ? false : this.tree.isOpen(this.id);
}
get isClosed() {
return this.isLeaf ? false : !this.tree.isOpen(this.id);
}
get isEditable() {
return this.tree.isEditable(this.data);
}
get isEditing() {
return this.tree.editingId === this.id;
}
get isSelected() {
return this.tree.isSelected(this.id);
}
get isOnlySelection() {
return this.isSelected && this.tree.hasOneSelection;
}
get isSelectedStart() {
return this.isSelected && !this.prev?.isSelected;
}
get isSelectedEnd() {
return this.isSelected && !this.next?.isSelected;
}
get isFocused() {
return this.tree.isFocused(this.id);
}
get isDragging() {
return this.tree.isDragging(this.id);
}
get willReceiveDrop() {
return this.tree.willReceiveDrop(this.id);
}
get state() {
return {
isClosed: this.isClosed,
isDragging: this.isDragging,
isEditing: this.isEditing,
isFocused: this.isFocused,
isInternal: this.isInternal,
isLeaf: this.isLeaf,
isOpen: this.isOpen,
isSelected: this.isSelected,
isSelectedEnd: this.isSelectedEnd,
isSelectedStart: this.isSelectedStart,
willReceiveDrop: this.willReceiveDrop
};
}
get childIndex() {
if (this.parent && this.parent.children) return this.parent.children.findIndex((child)=>child.id === this.id);
else return -1;
}
get next() {
if (this.rowIndex === null) return null;
return this.tree.at(this.rowIndex + 1);
}
get prev() {
if (this.rowIndex === null) return null;
return this.tree.at(this.rowIndex - 1);
}
get nextSibling() {
const i = this.childIndex;
return this.parent?.children[i + 1] ?? null;
}
select() {
this.tree.select(this);
}
deselect() {
this.tree.deselect(this);
}
selectMulti() {
this.tree.selectMulti(this);
}
selectContiguous() {
this.tree.selectContiguous(this);
}
activate() {
this.tree.activate(this);
}
focus() {
this.tree.focus(this);
}
toggle() {
this.tree.toggle(this);
}
open() {
this.tree.open(this);
}
openParents() {
this.tree.openParents(this);
}
close() {
this.tree.close(this);
}
submit(value) {
this.tree.submit(this, value);
}
reset() {
this.tree.reset();
}
clone() {
return new $bfd4e380870e2175$export$d4b903da0f522dc8({
...this
});
}
edit() {
return this.tree.edit(this);
}
}
const $04514ba8ecc1e155$export$ec71a3379b43ae5c = "__REACT_ARBORIST_INTERNAL_ROOT__";
function $04514ba8ecc1e155$export$882461b6382ed46c(tree) {
function visitSelfAndChildren(data, level, parent) {
const id = tree.accessId(data);
const node = new (0, $bfd4e380870e2175$export$d4b903da0f522dc8)({
tree: tree,
data: data,
level: level,
parent: parent,
id: id,
children: null,
isDraggable: tree.isDraggable(data),
rowIndex: null
});
const children = tree.accessChildren(data);
if (children) node.children = children.map((child)=>visitSelfAndChildren(child, level + 1, node));
return node;
}
const root = new (0, $bfd4e380870e2175$export$d4b903da0f522dc8)({
tree: tree,
id: $04514ba8ecc1e155$export$ec71a3379b43ae5c,
// @ts-ignore
data: {
id: $04514ba8ecc1e155$export$ec71a3379b43ae5c
},
level: -1,
parent: null,
children: null,
isDraggable: true,
rowIndex: null
});
const data = tree.props.data ?? [];
root.children = data.map((child)=>{
return visitSelfAndChildren(child, 0, root);
});
return root;
}
const $1c61be8efb674d8d$export$e324594224ef24da = {
open (id, filtered) {
return {
type: "VISIBILITY_OPEN",
id: id,
filtered: filtered
};
},
close (id, filtered) {
return {
type: "VISIBILITY_CLOSE",
id: id,
filtered: filtered
};
},
toggle (id, filtered) {
return {
type: "VISIBILITY_TOGGLE",
id: id,
filtered: filtered
};
},
clear (filtered) {
return {
type: "VISIBILITY_CLEAR",
filtered: filtered
};
}
};
/* Reducer */ function $1c61be8efb674d8d$var$openMapReducer(state = {}, action) {
if (action.type === "VISIBILITY_OPEN") return {
...state,
[action.id]: true
};
else if (action.type === "VISIBILITY_CLOSE") return {
...state,
[action.id]: false
};
else if (action.type === "VISIBILITY_TOGGLE") {
const prev = state[action.id];
return {
...state,
[action.id]: !prev
};
} else if (action.type === "VISIBILITY_CLEAR") return {};
else return state;
}
function $1c61be8efb674d8d$export$1650419e431d3ba3(state = {
filtered: {},
unfiltered: {}
}, action) {
if (!action.type.startsWith("VISIBILITY")) return state;
if (action.filtered) return {
...state,
filtered: $1c61be8efb674d8d$var$openMapReducer(state.filtered, action)
};
else return {
...state,
unfiltered: $1c61be8efb674d8d$var$openMapReducer(state.unfiltered, action)
};
}
const $cc76b5b84c1e0cdd$export$d4c72bab9d6cc13a = (props)=>({
nodes: {
// Changes together
open: {
filtered: {},
unfiltered: props?.initialOpenState ?? {}
},
focus: {
id: null,
treeFocused: false
},
edit: {
id: null
},
drag: {
id: null,
idWillReceiveDrop: null
},
selection: {
ids: new Set(),
anchor: null,
mostRecent: null
}
},
dnd: {
cursor: {
type: "none"
},
dragId: null,
dragIds: [],
parentId: null,
index: -1
}
});
const $33cb815da494952c$export$e324594224ef24da = {
clear: ()=>({
type: "SELECTION_CLEAR"
}),
only: (id)=>({
type: "SELECTION_ONLY",
id: (0, $fab42eb3dee39b5b$export$65e5b62a4c490288)(id)
}),
add: (id)=>({
type: "SELECTION_ADD",
ids: (Array.isArray(id) ? id : [
id
]).map((0, $fab42eb3dee39b5b$export$65e5b62a4c490288))
}),
remove: (id)=>({
type: "SELECTION_REMOVE",
ids: (Array.isArray(id) ? id : [
id
]).map((0, $fab42eb3dee39b5b$export$65e5b62a4c490288))
}),
set: (ids)=>({
type: "SELECTION_SET",
ids: ids
}),
mostRecent: (id)=>({
type: "SELECTION_MOST_RECENT",
id: id === null ? null : (0, $fab42eb3dee39b5b$export$65e5b62a4c490288)(id)
}),
anchor: (id)=>({
type: "SELECTION_ANCHOR",
id: id === null ? null : (0, $fab42eb3dee39b5b$export$65e5b62a4c490288)(id)
})
};
function $33cb815da494952c$export$1650419e431d3ba3(state = (0, $cc76b5b84c1e0cdd$export$d4c72bab9d6cc13a)()["nodes"]["selection"], action) {
const ids = state.ids;
switch(action.type){
case "SELECTION_CLEAR":
return {
...state,
ids: new Set()
};
case "SELECTION_ONLY":
return {
...state,
ids: new Set([
action.id
])
};
case "SELECTION_ADD":
if (action.ids.length === 0) return state;
action.ids.forEach((id)=>ids.add(id));
return {
...state,
ids: new Set(ids)
};
case "SELECTION_REMOVE":
if (action.ids.length === 0) return state;
action.ids.forEach((id)=>ids.delete(id));
return {
...state,
ids: new Set(ids)
};
case "SELECTION_SET":
return {
...state,
ids: new Set(action.ids)
};
case "SELECTION_MOST_RECENT":
return {
...state,
mostRecent: action.id
};
case "SELECTION_ANCHOR":
return {
...state,
anchor: action.id
};
default:
return state;
}
}
const $d4a160479bbc41b1$export$e324594224ef24da = {
cursor (cursor) {
return {
type: "DND_CURSOR",
cursor: cursor
};
},
dragStart (id, dragIds) {
return {
type: "DND_DRAG_START",
id: id,
dragIds: dragIds
};
},
dragEnd () {
return {
type: "DND_DRAG_END"
};
},
hovering (parentId, index) {
return {
type: "DND_HOVERING",
parentId: parentId,
index: index
};
}
};
function $d4a160479bbc41b1$export$1650419e431d3ba3(state = (0, $cc76b5b84c1e0cdd$export$d4c72bab9d6cc13a)()["dnd"], action) {
switch(action.type){
case "DND_CURSOR":
return {
...state,
cursor: action.cursor
};
case "DND_DRAG_START":
return {
...state,
dragId: action.id,
dragIds: action.dragIds
};
case "DND_DRAG_END":
return (0, $cc76b5b84c1e0cdd$export$d4c72bab9d6cc13a)()["dnd"];
case "DND_HOVERING":
return {
...state,
parentId: action.parentId,
index: action.index
};
default:
return state;
}
}
const $9746410ec71fd03a$var$layerStyles = {
position: "fixed",
pointerEvents: "none",
zIndex: 100,
left: 0,
top: 0,
width: "100%",
height: "100%"
};
const $9746410ec71fd03a$var$getStyle = (offset)=>{
if (!offset) return {
display: "none"
};
const { x: x , y: y } = offset;
return {
transform: `translate(${x}px, ${y}px)`
};
};
const $9746410ec71fd03a$var$getCountStyle = (offset)=>{
if (!offset) return {
display: "none"
};
const { x: x , y: y } = offset;
return {
transform: `translate(${x + 10}px, ${y + 10}px)`
};
};
function $9746410ec71fd03a$export$84e211ad8431a387({ offset: offset , mouse: mouse , id: id , dragIds: dragIds , isDragging: isDragging }) {
return /*#__PURE__*/ (0, $hgUW1$jsxs)($9746410ec71fd03a$var$Overlay, {
isDragging: isDragging,
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)($9746410ec71fd03a$var$Position, {
offset: offset,
children: /*#__PURE__*/ (0, $hgUW1$jsx)($9746410ec71fd03a$var$PreviewNode, {
id: id,
dragIds: dragIds
})
}),
/*#__PURE__*/ (0, $hgUW1$jsx)($9746410ec71fd03a$var$Count, {
mouse: mouse,
count: dragIds.length
})
]
});
}
const $9746410ec71fd03a$var$Overlay = /*#__PURE__*/ (0, $hgUW1$memo)(function Overlay(props) {
if (!props.isDragging) return null;
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
style: $9746410ec71fd03a$var$layerStyles,
children: props.children
});
});
function $9746410ec71fd03a$var$Position(props) {
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
className: "row preview",
style: $9746410ec71fd03a$var$getStyle(props.offset),
children: props.children
});
}
function $9746410ec71fd03a$var$Count(props) {
const { count: count , mouse: mouse } = props;
if (count > 1) return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
className: "selected-count",
style: $9746410ec71fd03a$var$getCountStyle(mouse),
children: count
});
else return null;
}
const $9746410ec71fd03a$var$PreviewNode = /*#__PURE__*/ (0, $hgUW1$memo)(function PreviewNode(props) {
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
const node = tree.get(props.id);
if (!node) return null;
return /*#__PURE__*/ (0, $hgUW1$jsx)(tree.renderNode, {
preview: true,
node: node,
style: {
paddingLeft: node.level * tree.indent,
opacity: 0.2,
background: "transparent"
},
tree: tree
});
});
function $c7374da4b4afe2bd$export$b6a79797ad180576() {
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
const state = (0, $f4ed15b55ee70bb8$export$4930f6bf413be70e)();
const cursor = state.cursor;
if (!cursor || cursor.type !== "line") return null;
const indent = tree.indent;
const top = tree.rowHeight * cursor.index + (tree.props.padding ?? tree.props.paddingTop ?? 0);
const left = indent * cursor.level;
const Cursor = tree.renderCursor;
return /*#__PURE__*/ (0, $hgUW1$jsx)(Cursor, {
top: top,
left: left,
indent: indent
});
}
const $1712c1958416fa12$export$70c2b8898b86d3ad = /*#__PURE__*/ (0, $hgUW1$forwardRef)(function Outer(props, ref) {
const { children: children , ...rest } = props;
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
return /*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
// @ts-ignore
ref: ref,
...rest,
onClick: (e)=>{
if (e.currentTarget === e.target) tree.deselectAll();
},
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)($1712c1958416fa12$var$DropContainer, {}),
children
]
});
});
const $1712c1958416fa12$var$DropContainer = ()=>{
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
style: {
height: tree.visibleNodes.length * tree.rowHeight,
width: "100%",
position: "absolute",
left: "0",
right: "0"
},
children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $c7374da4b4afe2bd$export$b6a79797ad180576), {})
});
};
const $244de757158eecf7$export$a9af0da3ae60cd00 = /*#__PURE__*/ (0, $hgUW1$forwardRef)(function InnerElement({ style: style , ...rest }, ref) {
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
const paddingTop = tree.props.padding ?? tree.props.paddingTop ?? 0;
const paddingBottom = tree.props.padding ?? tree.props.paddingBottom ?? 0;
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
ref: ref,
style: {
...style,
height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
},
...rest
});
});
function $42f047b822e819e2$export$715c0d031ede7907(node) {
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
const ids = tree.selectedIds;
const [_, ref, preview] = (0, $hgUW1$useDrag)(()=>({
canDrag: ()=>node.isDraggable,
type: "NODE",
item: ()=>{
// This is fired once at the begging of a drag operation
const dragIds = tree.isSelected(node.id) ? Array.from(ids) : [
node.id
];
tree.dispatch((0, $d4a160479bbc41b1$export$e324594224ef24da).dragStart(node.id, dragIds));
return {
id: node.id
};
},
end: ()=>{
tree.hideCursor();
let { parentId: parentId , index: index , dragIds: dragIds } = tree.state.dnd;
// If they held down meta, we need to create a copy
// if (drop.dropEffect === "copy")
if (tree.canDrop()) {
(0, $fab42eb3dee39b5b$export$c6d63370cef03886)(tree.props.onMove, {
dragIds: dragIds,
parentId: parentId === (0, $04514ba8ecc1e155$export$ec71a3379b43ae5c) ? null : parentId,
index: index,
dragNodes: tree.dragNodes,
parentNode: tree.get(parentId)
});
tree.open(parentId);
}
tree.dispatch((0, $d4a160479bbc41b1$export$e324594224ef24da).dragEnd());
}
}), [
ids,
node
]);
(0, $hgUW1$useEffect)(()=>{
preview((0, $hgUW1$getEmptyImage)());
}, [
preview
]);
return ref;
}
function $3f9bbcd042b3151a$var$measureHover(el, offset) {
const rect = el.getBoundingClientRect();
const x = offset.x - Math.round(rect.x);
const y = offset.y - Math.round(rect.y);
const height = rect.height;
const inTopHalf = y < height / 2;
const inBottomHalf = !inTopHalf;
const pad = height / 4;
const inMiddle = y > pad && y < height - pad;
const atTop = !inMiddle && inTopHalf;
const atBottom = !inMiddle && inBottomHalf;
return {
x: x,
inTopHalf: inTopHalf,
inBottomHalf: inBottomHalf,
inMiddle: inMiddle,
atTop: atTop,
atBottom: atBottom
};
}
function $3f9bbcd042b3151a$var$getNodesAroundCursor(node, prev, next, hover) {
if (!node) // We're hoving over the empty part of the list, not over an item,
// Put the cursor below the last item which is "prev"
return [
prev,
null
];
if (node.isInternal) {
if (hover.atTop) return [
prev,
node
];
else if (hover.inMiddle) return [
node,
node
];
else return [
node,
next
];
} else {
if (hover.inTopHalf) return [
prev,
node
];
else return [
node,
next
];
}
}
function $3f9bbcd042b3151a$var$getDropLevel(hovering, aboveCursor, belowCursor, indent) {
const hoverLevel = Math.round(Math.max(0, hovering.x - indent) / indent);
let min, max;
if (!aboveCursor) {
max = 0;
min = 0;
} else if (!belowCursor) {
max = aboveCursor.level;
min = 0;
} else {
max = aboveCursor.level;
min = belowCursor.level;
}
return (0, $fab42eb3dee39b5b$export$adf7c0fe6059d774)(hoverLevel, min, max);
}
function $3f9bbcd042b3151a$var$dropAt(parentId, index) {
return {
parentId: parentId || null,
index: index
};
}
function $3f9bbcd042b3151a$var$lineCursor(index, level) {
return {
type: "line",
index: index,
level: level
};
}
function $3f9bbcd042b3151a$var$noCursor() {
return {
type: "none"
};
}
function $3f9bbcd042b3151a$var$highlightCursor(id) {
return {
type: "highlight",
id: id
};
}
function $3f9bbcd042b3151a$var$walkUpFrom(node, level) {
let drop = node;
while(drop.parent && drop.level > level)drop = drop.parent;
const parentId = drop.parent?.id || null;
const index = (0, $fab42eb3dee39b5b$export$305f7d4e9d4624f2)(drop) + 1;
return {
parentId: parentId,
index: index
};
}
function $3f9bbcd042b3151a$export$f502ca02ebb85a1c(args) {
const hover = $3f9bbcd042b3151a$var$measureHover(args.element, args.offset);
const { node: node , nextNode: nextNode , prevNode: prevNode } = args;
const [above, below] = $3f9bbcd042b3151a$var$getNodesAroundCursor(node, prevNode, nextNode, hover);
/* Hovering over the middle of any node */ if (node && hover.inMiddle) return {
drop: $3f9bbcd042b3151a$var$dropAt(node.id, 0),
cursor: $3f9bbcd042b3151a$var$highlightCursor(node.id)
};
/* At the top of the list */ if (!above) return {
drop: $3f9bbcd042b3151a$var$dropAt(below?.parent?.id, 0),
cursor: $3f9bbcd042b3151a$var$lineCursor(0, 0)
};
/* The above node is an item or a closed folder or an open folder with no children */ if ((0, $fab42eb3dee39b5b$export$5318634f2ee07019)(above) || (0, $fab42eb3dee39b5b$export$4210f5ea57fbae57)(above) || (above?.children || []).length === 0) {
const level = $3f9bbcd042b3151a$var$getDropLevel(hover, above, below, args.indent);
return {
drop: $3f9bbcd042b3151a$var$walkUpFrom(above, level),
cursor: $3f9bbcd042b3151a$var$lineCursor(above.rowIndex + 1, level)
};
}
/* The above node is an open folder */ return {
drop: $3f9bbcd042b3151a$var$dropAt(above?.id, 0),
cursor: $3f9bbcd042b3151a$var$lineCursor(above.rowIndex + 1, above.level + 1)
};
}
function $60c95f13b6c22875$export$57afafec4637d997(el, node) {
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
const [_, dropRef] = (0, $hgUW1$useDrop)(()=>({
accept: "NODE",
canDrop: ()=>tree.canDrop(),
hover: (_item, m)=>{
const offset = m.getClientOffset();
if (!el.current || !offset) return;
const { cursor: cursor , drop: drop } = (0, $3f9bbcd042b3151a$export$f502ca02ebb85a1c)({
element: el.current,
offset: offset,
indent: tree.indent,
node: node,
prevNode: node.prev,
nextNode: node.next
});
if (drop) tree.dispatch((0, $d4a160479bbc41b1$export$e324594224ef24da).hovering(drop.parentId, drop.index));
if (m.canDrop()) {
if (cursor) tree.showCursor(cursor);
} else tree.hideCursor();
},
drop: (_, m)=>{
if (!m.canDrop()) return null;
}
}), [
node,
el.current,
tree.props
]);
return dropRef;
}
function $2d10d5436b8ade7d$export$d75ab90b05ebbfaa(index) {
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
const original = tree.at(index);
if (!original) throw new Error(`Could not find node for index: ${index}`);
return (0, $hgUW1$useMemo)(()=>{
const fresh = original.clone();
tree.visibleNodes[index] = fresh; // sneaky
return fresh;
// Return a fresh instance if the state values change
}, [
...Object.values(original.state),
original
]);
}
const $4faac6a0e4c550ff$export$a9754b3c8daa5172 = /*#__PURE__*/ (0, $hgUW1$react).memo(function RowContainer({ index: index , style: style }) {
/* When will the <Row> will re-render.
*
* The row component is memo'd so it will only render
* when a new instance of the NodeApi class is passed
* to it.
*
* The TreeApi instance is stable. It does not
* change when the internal state changes.
*
* The TreeApi has all the references to the nodes.
* We need to clone the nodes when their state
* changes. The node class contains no state itself,
* It always checks the tree for state. The tree's
* state will always be up to date.
*/ (0, $f4ed15b55ee70bb8$export$83a4f9dc3b36edb8)(); // Re-render when tree props or visability changes
const _ = (0, $f4ed15b55ee70bb8$export$fd23f19d5d8f3033)(); // So that we re-render appropriately
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)(); // Tree already has the fresh state
const node = (0, $2d10d5436b8ade7d$export$d75ab90b05ebbfaa)(index);
const el = (0, $hgUW1$useRef)(null);
const dragRef = (0, $42f047b822e819e2$export$715c0d031ede7907)(node);
const dropRef = (0, $60c95f13b6c22875$export$57afafec4637d997)(el, node);
const innerRef = (0, $hgUW1$useCallback)((n)=>{
el.current = n;
dropRef(n);
}, [
dropRef
]);
const indent = tree.indent * node.level;
const nodeStyle = (0, $hgUW1$useMemo)(()=>({
paddingLeft: indent
}), [
indent
]);
const rowStyle = (0, $hgUW1$useMemo)(()=>({
...style,
top: parseFloat(style.top) + (tree.props.padding ?? tree.props.paddingTop ?? 0)
}), [
style,
tree.props.padding,
tree.props.paddingTop
]);
const rowAttrs = {
role: "treeitem",
"aria-level": node.level,
"aria-selected": node.isSelected,
style: rowStyle,
tabIndex: -1,
className: tree.props.rowClassName
};
(0, $hgUW1$useEffect)(()=>{
if (!node.isEditing && node.isFocused) el.current?.focus({
preventScroll: true
});
}, [
node.isEditing,
node.isFocused,
el.current
]);
const Node = tree.renderNode;
const Row = tree.renderRow;
return /*#__PURE__*/ (0, $hgUW1$jsx)(Row, {
node: node,
innerRef: innerRef,
attrs: rowAttrs,
children: /*#__PURE__*/ (0, $hgUW1$jsx)(Node, {
node: node,
tree: tree,
style: nodeStyle,
dragHandle: dragRef
})
});
});
let $14e105aaf1949805$var$focusSearchTerm = "";
let $14e105aaf1949805$var$timeoutId = null;
function $14e105aaf1949805$export$ff4858a4110d9246() {
(0, $f4ed15b55ee70bb8$export$83a4f9dc3b36edb8)();
const tree = (0, $f4ed15b55ee70bb8$export$367b0f2231a90ba0)();
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
style: {
height: tree.height,
width: tree.width,
minHeight: 0,
minWidth: 0
},
onContextMenu: tree.props.onContextMenu,
onClick: tree.props.onClick,
tabIndex: 0,
onFocus: (e)=>{
if (!e.currentTarget.contains(e.relatedTarget)) tree.onFocus();
},
onBlur: (e)=>{
if (!e.currentTarget.contains(e.relatedTarget)) tree.onBlur();
},
onKeyDown: (e)=>{
if (tree.isEditing) return;
if (e.key === "Backspace") {
if (!tree.props.onDelete) return;
const ids = Array.from(tree.selectedIds);
if (ids.length > 1) {
let nextFocus = tree.mostRecentNode;
while(nextFocus && nextFocus.isSelected)nextFocus = nextFocus.nextSibling;
if (!nextFocus) nextFocus = tree.lastNode;
tree.focus(nextFocus, {
scroll: false
});
tree.delete(Array.from(ids));
} else {
const node = tree.focusedNode;
if (node) {
const sib = node.nextSibling;
const parent = node.parent;
tree.focus(sib || parent, {
scroll: false
});
tree.delete(node);
}
}
return;
}
if (e.key === "Tab" && !e.shiftKey) {
e.preventDefault();
(0, $fab42eb3dee39b5b$export$3b0237e8566c8d65)(e.currentTarget);
return;
}
if (e.key === "Tab" && e.shiftKey) {
e.preventDefault();
(0, $fab42eb3dee39b5b$export$33b47db07a82b2fb)(e.currentTarget);
return;
}
if (e.key === "ArrowDown") {
e.preventDefault();
const next = tree.nextNode;
if (e.metaKey) {
tree.select(tree.focusedNode);
tree.activate(tree.focusedNode);
return;
} else if (!e.shiftKey || tree.props.disableMultiSelection) {
tree.focus(next);
return;
} else {
if (!next) return;
const current = tree.focusedNode;
if (!current) tree.focus(tree.firstNode);
else if (current.isSelected) tree.selectContiguous(next);
else tree.selectMulti(next);
return;
}
}
if (e.key === "ArrowUp") {
e.preventDefault();
const prev = tree.prevNode;
if (!e.shiftKey || tree.props.disableMultiSelection) {
tree.focus(prev);
return;
} else {
if (!prev) return;
const current = tree.focusedNode;
if (!current) tree.focus(tree.lastNode); // ?
else if (current.isSelected) tree.selectContiguous(prev);
else tree.selectMulti(prev);
return;
}
}
if (e.key === "ArrowRight") {
const node = tree.focusedNode;
if (!node) return;
if (node.isInternal && node.isOpen) tree.focus(tree.nextNode);
else if (node.isInternal) tree.open(node.id);
return;
}
if (e.key === "ArrowLeft") {
const node = tree.focusedNode;
if (!node || node.isRoot) return;
if (node.isInternal && node.isOpen) tree.close(node.id);
else if (!node.parent?.isRoot) tree.focus(node.parent);
return;
}
if (e.key === "a" && e.metaKey && !tree.props.disableMultiSelection) {
e.preventDefault();
tree.selectAll();
return;
}
if (e.key === "a" && !e.metaKey && tree.props.onCreate) {
tree.createLeaf();
return;
}
if (e.key === "A" && !e.metaKey) {
if (!tree.props.onCreate) return;
tree.createInternal();
return;
}
if (e.key === "Home") {
// add shift keys
e.preventDefault();
tree.focus(tree.firstNode);
return;
}
if (e.key === "End") {
// add shift keys
e.preventDefault();
tree.focus(tree.lastNode);
return;
}
if (e.key === "Enter") {
const node = tree.focusedNode;
if (!node) return;
if (!node.isEditable || !tree.props.onRename) return;
setTimeout(()=>{
if (node) tree.edit(node);
});
return;
}
if (e.key === " ") {
e.preventDefault();
const node = tree.focusedNode;
if (!node) return;
if (node.isLeaf) {
node.select();
node.activate();
} else node.toggle();
return;
}
if (e.key === "*") {
const node = tree.focusedNode;
if (!node) return;
tree.openSiblings(node);
return;
}
if (e.key === "PageUp") {
e.preventDefault();
tree.pageUp();
return;
}
if (e.key === "PageDown") {
e.preventDefault();
tree.pageDown();
}
// If they type a sequence of characters
// collect them. Reset them after a timeout.
// Use it to search the tree for a node, then focus it.
// Clean this up a bit later
clearTimeout($14e105aaf1949805$var$timeoutId);
$14e105aaf1949805$var$focusSearchTerm += e.key;
$14e105aaf1949805$var$timeoutId = setTimeout(()=>{
$14e105aaf1949805$var$focusSearchTerm = "";
}, 600);
const node = tree.visibleNodes.find((n)=>{
// @ts-ignore
const name = n.data.name;
if (typeof name === "string") return name.toLowerCase().startsWith($14e105aaf1949805$var$focusSearchTerm);
else return false;
});
if (node) tree.focus(node.id);
},
children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$FixedSizeList), {
className: tree.props.className,
outerRef: tree.listEl,
itemCount: tree.visibleNodes.length,
height: tree.height,
width: tree.width,
itemSize: tree.rowHeight,
overscanCount: tree.overscanCount,
itemKey: (index)=>tree.visibleNodes[index]?.id || index,
outerElementType: (0, $1712c1958416fa12$export$70c2b8898b86d3ad),
innerElementType: (0, $244de757158eecf7$export$a9af0da3ae60cd00),
onScroll: tree.props.onScroll,
onItemsRendered: tree.onItemsRendered.bind(tree),
ref: tree.list,
children: (0, $4faac6a0e4c550ff$export$a9754b3c8daa5172)
})
});
}
function $04d0b24e7c5af142$export$5897d8d7c7a3d871(tree) {
if (tree.isFiltered) return $04d0b24e7c5af142$var$flattenAndFilterTree(tree.root, tree.isMatch.bind(tree));
else return $04d0b24e7c5af142$var$flattenTree(tree.root);
}
function $04d0b24e7c5af142$var$flattenTree(root) {
const list = [];
function collect(node) {
if (node.level >= 0) list.push(node);
if (node.isOpen) node.children?.forEach(collect);
}
collect(root);
list.forEach($04d0b24e7c5af142$var$assignRowIndex);
return list;
}
function $04d0b24e7c5af142$var$flattenAndFilterTree(root, isMatch) {
const matches = {};
const list = [];
function markMatch(node) {
const yes = !node.isRoot && isMatch(node);
if (yes) {
matches[node.id] = true;
let parent = node.parent;
while(parent){
matches[parent.id] = true;
parent = parent.parent;
}
}
if (node.children) for (let child of node.children)markMatch(child);
}
function collect(node) {
if (node.level >= 0 && matches[node.id]) list.push(node);
if (node.isOpen) node.children?.forEach(collect);
}
markMatch(root);
collect(root);
list.forEach($04d0b24e7c5af142$var$assignRowIndex);
return list;
}
function $04d0b24e7c5af142$var$assignRowIndex(node, index) {
node.rowIndex = index;
}
const $5b90a997a7666e37$export$c6d108d7c8095f19 = (nodes)=>{
return nodes.reduce((map, node, index)=>{
map[node.id] = index;
return map;
}, {});
};
const { safeRun: $badb6758e30dd716$var$safeRun , identify: $badb6758e30dd716$var$identify , identifyNull: $badb6758e30dd716$var$identifyNull } = $fab42eb3dee39b5b$exports;
class $badb6758e30dd716$export$e2da3477247342d1 {
constructor(store, props, list, listEl){
this.store = store;
this.props = props;
this.list = list;
this.listEl = listEl;
this.visibleStartIndex = 0;
this.visibleStopIndex = 0;
/* Changes here must also be made in update() */ this.root = (0, $04514ba8ecc1e155$export$882461b6382ed46c)(this);
this.visibleNodes = (0, $04d0b24e7c5af142$export$5897d8d7c7a3d871)(this);
this.idToIndex = (0, $5b90a997a7666e37$export$c6d108d7c8095f19)(this.visibleNodes);
}
/* Changes here must also be made in constructor() */ update(props) {
this.props = props;
this.root = (0, $04514ba8ecc1e155$export$882461b6382ed46c)(this);
this