@elliemae/ds-treeview 2.2.0-alpha.1 → 2.2.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/TreeView.js +49 -31
- package/cjs/TreeView.js.map +7 -0
- package/cjs/TreeViewContext.js +53 -35
- package/cjs/TreeViewContext.js.map +7 -0
- package/cjs/config/cssClassesConstants.js +41 -13
- package/cjs/config/cssClassesConstants.js.map +7 -0
- package/cjs/config/useTreeview.js +108 -80
- package/cjs/config/useTreeview.js.map +7 -0
- package/cjs/index.js +37 -27
- package/cjs/index.js.map +7 -0
- package/cjs/parts/CheckboxSelectable.js +70 -59
- package/cjs/parts/CheckboxSelectable.js.map +7 -0
- package/cjs/parts/ChildrenCountDisplayer.js +45 -28
- package/cjs/parts/ChildrenCountDisplayer.js.map +7 -0
- package/cjs/parts/ExpandCaret.js +85 -83
- package/cjs/parts/ExpandCaret.js.map +7 -0
- package/cjs/parts/Icon.js +46 -31
- package/cjs/parts/Icon.js.map +7 -0
- package/cjs/parts/NestingSpace.js +43 -35
- package/cjs/parts/NestingSpace.js.map +7 -0
- package/cjs/parts/RadioSelectable.js +52 -37
- package/cjs/parts/RadioSelectable.js.map +7 -0
- package/cjs/parts/TreeItem.js +128 -147
- package/cjs/parts/TreeItem.js.map +7 -0
- package/cjs/parts/TreeItemText.js +88 -95
- package/cjs/parts/TreeItemText.js.map +7 -0
- package/cjs/parts/TreeList.js +117 -130
- package/cjs/parts/TreeList.js.map +7 -0
- package/cjs/plugins/dnd/TreeDndPlugin.js +51 -36
- package/cjs/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/cjs/plugins/dnd/index.js +28 -10
- package/cjs/plugins/dnd/index.js.map +7 -0
- package/cjs/plugins/index.js +34 -22
- package/cjs/plugins/index.js.map +7 -0
- package/cjs/plugins/roving/TreeRovingPlugin.js +35 -7
- package/cjs/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/cjs/plugins/roving/index.js +28 -9
- package/cjs/plugins/roving/index.js.map +7 -0
- package/cjs/plugins/searchable/SearchableTreePlugin.js +35 -7
- package/cjs/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/cjs/plugins/searchable/index.js +28 -9
- package/cjs/plugins/searchable/index.js.map +7 -0
- package/cjs/plugins/selectable/SelectablePluginTree.js +35 -7
- package/cjs/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/cjs/plugins/selectable/index.js +28 -9
- package/cjs/plugins/selectable/index.js.map +7 -0
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js +35 -7
- package/cjs/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/cjs/plugins/toolbar/index.js +28 -9
- package/cjs/plugins/toolbar/index.js.map +7 -0
- package/cjs/plugins/tree/TreeDataPlugin.js +35 -7
- package/cjs/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/cjs/plugins/tree/index.js +28 -9
- package/cjs/plugins/tree/index.js.map +7 -0
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js +35 -7
- package/cjs/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/cjs/plugins/virtualization/index.js +28 -9
- package/cjs/plugins/virtualization/index.js.map +7 -0
- package/cjs/react-desc-prop-types.js +82 -53
- package/cjs/react-desc-prop-types.js.map +7 -0
- package/cjs/related-components/TreeViewSearchBar.js +42 -40
- package/cjs/related-components/TreeViewSearchBar.js.map +7 -0
- package/cjs/sharedTypes.js +27 -2
- package/cjs/sharedTypes.js.map +7 -0
- package/cjs/utils/array-helpers.js +35 -11
- package/cjs/utils/array-helpers.js.map +7 -0
- package/cjs/utils/dnd-helpers.js +90 -84
- package/cjs/utils/dnd-helpers.js.map +7 -0
- package/cjs/utils/group-expands-helpers.js +86 -59
- package/cjs/utils/group-expands-helpers.js.map +7 -0
- package/cjs/utils/keyboard-helpers.js +84 -88
- package/cjs/utils/keyboard-helpers.js.map +7 -0
- package/cjs/utils/object-helpers.js +43 -36
- package/cjs/utils/object-helpers.js.map +7 -0
- package/cjs/utils/refs-helpers.js +43 -22
- package/cjs/utils/refs-helpers.js.map +7 -0
- package/cjs/utils/selectable-helper.js +61 -53
- package/cjs/utils/selectable-helper.js.map +7 -0
- package/cjs/utils/string-helpers.js +35 -7
- package/cjs/utils/string-helpers.js.map +7 -0
- package/cjs/utils/tree-helpers.js +105 -135
- package/cjs/utils/tree-helpers.js.map +7 -0
- package/cjs/utils/useDnDHelpers.js +97 -118
- package/cjs/utils/useDnDHelpers.js.map +7 -0
- package/cjs/utils/useInstanceRefActions.js +54 -43
- package/cjs/utils/useInstanceRefActions.js.map +7 -0
- package/cjs/utils/useTree.js +76 -78
- package/cjs/utils/useTree.js.map +7 -0
- package/esm/TreeView.js +18 -20
- package/esm/TreeView.js.map +7 -0
- package/esm/TreeViewContext.js +24 -29
- package/esm/TreeViewContext.js.map +7 -0
- package/esm/config/cssClassesConstants.js +12 -6
- package/esm/config/cssClassesConstants.js.map +7 -0
- package/esm/config/useTreeview.js +61 -54
- package/esm/config/useTreeview.js.map +7 -0
- package/esm/index.js +8 -9
- package/esm/index.js.map +7 -0
- package/esm/parts/CheckboxSelectable.js +36 -46
- package/esm/parts/CheckboxSelectable.js.map +7 -0
- package/esm/parts/ChildrenCountDisplayer.js +16 -20
- package/esm/parts/ChildrenCountDisplayer.js.map +7 -0
- package/esm/parts/ExpandCaret.js +54 -72
- package/esm/parts/ExpandCaret.js.map +7 -0
- package/esm/parts/Icon.js +16 -22
- package/esm/parts/Icon.js.map +7 -0
- package/esm/parts/NestingSpace.js +14 -27
- package/esm/parts/NestingSpace.js.map +7 -0
- package/esm/parts/RadioSelectable.js +20 -28
- package/esm/parts/RadioSelectable.js.map +7 -0
- package/esm/parts/TreeItem.js +91 -127
- package/esm/parts/TreeItem.js.map +7 -0
- package/esm/parts/TreeItemText.js +58 -85
- package/esm/parts/TreeItemText.js.map +7 -0
- package/esm/parts/TreeList.js +88 -117
- package/esm/parts/TreeList.js.map +7 -0
- package/esm/plugins/dnd/TreeDndPlugin.js +21 -26
- package/esm/plugins/dnd/TreeDndPlugin.js.map +7 -0
- package/esm/plugins/dnd/index.js +3 -1
- package/esm/plugins/dnd/index.js.map +7 -0
- package/esm/plugins/index.js +9 -7
- package/esm/plugins/index.js.map +7 -0
- package/esm/plugins/roving/TreeRovingPlugin.js +6 -3
- package/esm/plugins/roving/TreeRovingPlugin.js.map +7 -0
- package/esm/plugins/roving/index.js +3 -1
- package/esm/plugins/roving/index.js.map +7 -0
- package/esm/plugins/searchable/SearchableTreePlugin.js +6 -3
- package/esm/plugins/searchable/SearchableTreePlugin.js.map +7 -0
- package/esm/plugins/searchable/index.js +3 -1
- package/esm/plugins/searchable/index.js.map +7 -0
- package/esm/plugins/selectable/SelectablePluginTree.js +6 -3
- package/esm/plugins/selectable/SelectablePluginTree.js.map +7 -0
- package/esm/plugins/selectable/index.js +3 -1
- package/esm/plugins/selectable/index.js.map +7 -0
- package/esm/plugins/toolbar/TreeToolbarPlugin.js +6 -3
- package/esm/plugins/toolbar/TreeToolbarPlugin.js.map +7 -0
- package/esm/plugins/toolbar/index.js +3 -1
- package/esm/plugins/toolbar/index.js.map +7 -0
- package/esm/plugins/tree/TreeDataPlugin.js +6 -3
- package/esm/plugins/tree/TreeDataPlugin.js.map +7 -0
- package/esm/plugins/tree/index.js +3 -1
- package/esm/plugins/tree/index.js.map +7 -0
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js +6 -3
- package/esm/plugins/virtualization/TreeVirtualizationPlugin.js.map +7 -0
- package/esm/plugins/virtualization/index.js +3 -1
- package/esm/plugins/virtualization/index.js.map +7 -0
- package/esm/react-desc-prop-types.js +47 -43
- package/esm/react-desc-prop-types.js.map +7 -0
- package/esm/related-components/TreeViewSearchBar.js +13 -32
- package/esm/related-components/TreeViewSearchBar.js.map +7 -0
- package/esm/sharedTypes.js +2 -1
- package/esm/sharedTypes.js.map +7 -0
- package/esm/utils/array-helpers.js +6 -6
- package/esm/utils/array-helpers.js.map +7 -0
- package/esm/utils/dnd-helpers.js +58 -73
- package/esm/utils/dnd-helpers.js.map +7 -0
- package/esm/utils/group-expands-helpers.js +56 -46
- package/esm/utils/group-expands-helpers.js.map +7 -0
- package/esm/utils/keyboard-helpers.js +45 -72
- package/esm/utils/keyboard-helpers.js.map +7 -0
- package/esm/utils/object-helpers.js +14 -31
- package/esm/utils/object-helpers.js.map +7 -0
- package/esm/utils/refs-helpers.js +15 -19
- package/esm/utils/refs-helpers.js.map +7 -0
- package/esm/utils/selectable-helper.js +32 -43
- package/esm/utils/selectable-helper.js.map +7 -0
- package/esm/utils/string-helpers.js +6 -3
- package/esm/utils/string-helpers.js.map +7 -0
- package/esm/utils/tree-helpers.js +74 -119
- package/esm/utils/tree-helpers.js.map +7 -0
- package/esm/utils/useDnDHelpers.js +60 -106
- package/esm/utils/useDnDHelpers.js.map +7 -0
- package/esm/utils/useInstanceRefActions.js +21 -35
- package/esm/utils/useInstanceRefActions.js.map +7 -0
- package/esm/utils/useTree.js +35 -57
- package/esm/utils/useTree.js.map +7 -0
- package/package.json +10 -10
|
@@ -1,47 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var NestingSpace_exports = {};
|
|
29
|
+
__export(NestingSpace_exports, {
|
|
30
|
+
NestingSpace: () => NestingSpace
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
12
34
|
const getItemNestingLeftPadding = (level, opts) => {
|
|
13
|
-
const {
|
|
14
|
-
spaceForNestingLevel = 1.5
|
|
15
|
-
} = opts;
|
|
35
|
+
const { spaceForNestingLevel = 1.5 } = opts;
|
|
16
36
|
const groupLeftPadding = spaceForNestingLevel * (level - 1);
|
|
17
|
-
const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
|
|
37
|
+
const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
|
|
38
|
+
return finalLeftPadding > 0 ? `${finalLeftPadding}em` : "0";
|
|
21
39
|
};
|
|
22
|
-
|
|
23
|
-
const
|
|
24
|
-
const {
|
|
25
|
-
item,
|
|
26
|
-
spaceForNestingLevel
|
|
27
|
-
} = props;
|
|
28
|
-
const {
|
|
29
|
-
treeDepth
|
|
30
|
-
} = item;
|
|
31
|
-
|
|
40
|
+
const NestingSpace = (props) => {
|
|
41
|
+
const { item, spaceForNestingLevel } = props;
|
|
42
|
+
const { treeDepth } = item;
|
|
32
43
|
if (treeDepth) {
|
|
33
44
|
const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
|
|
34
45
|
spaceForNestingLevel
|
|
35
46
|
});
|
|
36
|
-
return
|
|
47
|
+
return /* @__PURE__ */ import_react.default.createElement("div", {
|
|
37
48
|
"data-testid": "tree-item-nested-space",
|
|
38
|
-
style: {
|
|
39
|
-
width: itemNestingLeftPadding
|
|
40
|
-
}
|
|
49
|
+
style: { width: itemNestingLeftPadding }
|
|
41
50
|
});
|
|
42
51
|
}
|
|
43
|
-
|
|
44
52
|
return null;
|
|
45
53
|
};
|
|
46
|
-
|
|
47
|
-
|
|
54
|
+
module.exports = __toCommonJS(NestingSpace_exports);
|
|
55
|
+
//# sourceMappingURL=NestingSpace.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/parts/NestingSpace.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst getItemNestingLeftPadding = (level: number, opts: { spaceForNestingLevel: number }) => {\n const { spaceForNestingLevel = 1.5 } = opts;\n const groupLeftPadding = spaceForNestingLevel * (level - 1);\n const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;\n // root level left-padding would be negative and would not be applied\n // if \"root-level\" nesting, then defaults to 0 left-padding.\n return finalLeftPadding > 0 ? `${finalLeftPadding}em` : '0';\n};\n\ntype NestingSpacePropsType = {\n item: DSTreeviewT.Item;\n spaceForNestingLevel: number;\n};\n\nexport const NestingSpace = (props: NestingSpacePropsType): JSX.Element | null => {\n const { item, spaceForNestingLevel } = props;\n const { treeDepth } = item;\n if (treeDepth) {\n const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {\n spaceForNestingLevel,\n });\n\n return <div data-testid=\"tree-item-nested-space\" style={{ width: itemNestingLeftPadding }} />;\n }\n return null;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAGlB,MAAM,4BAA4B,CAAC,OAAe,SAA2C;AAC3F,QAAM,EAAE,uBAAuB,QAAQ;AACvC,QAAM,mBAAmB,uBAAwB,SAAQ;AACzD,QAAM,mBAAmB,mBAAmB,uBAAuB;AAGnE,SAAO,mBAAmB,IAAI,GAAG,uBAAuB;AAAA;AAQnD,MAAM,eAAe,CAAC,UAAqD;AAChF,QAAM,EAAE,MAAM,yBAAyB;AACvC,QAAM,EAAE,cAAc;AACtB,MAAI,WAAW;AACb,UAAM,yBAAyB,0BAA0B,YAAY,GAAG;AAAA,MACtE;AAAA;AAGF,WAAO,mDAAC,OAAD;AAAA,MAAK,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO;AAAA;AAAA;AAEnE,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,51 +1,65 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var RadioSelectable_exports = {};
|
|
29
|
+
__export(RadioSelectable_exports, {
|
|
30
|
+
default: () => RadioSelectable_default
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = __toESM(require("react"));
|
|
34
|
+
var import_ds_form = __toESM(require("@elliemae/ds-form"));
|
|
35
|
+
var import_TreeViewContext = __toESM(require("../TreeViewContext"));
|
|
12
36
|
function RadioSelectable(props) {
|
|
37
|
+
const { item, itemIndex } = props;
|
|
38
|
+
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
13
39
|
const {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
} = props;
|
|
17
|
-
const ctx = React.useContext(TreeViewContext["default"]);
|
|
18
|
-
const {
|
|
19
|
-
props: {
|
|
20
|
-
onSelectionChange,
|
|
21
|
-
isItemDisabled
|
|
22
|
-
},
|
|
23
|
-
virtualListHelpers: {
|
|
24
|
-
scrollToIndex
|
|
25
|
-
},
|
|
40
|
+
props: { onSelectionChange, isItemDisabled },
|
|
41
|
+
virtualListHelpers: { scrollToIndex },
|
|
26
42
|
uniqueTreeViewUUID,
|
|
27
43
|
selectedCheckboxes,
|
|
28
44
|
setSelectedCheckboxes
|
|
29
45
|
} = ctx;
|
|
30
|
-
const {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const onRadioChange = React.useCallback(() => {
|
|
34
|
-
const newSelectionHasmap = {
|
|
35
|
-
[id]: true
|
|
36
|
-
};
|
|
46
|
+
const { id } = item;
|
|
47
|
+
const onRadioChange = (0, import_react.useCallback)(() => {
|
|
48
|
+
const newSelectionHasmap = { [id]: true };
|
|
37
49
|
setSelectedCheckboxes(newSelectionHasmap);
|
|
38
50
|
const indexAndScrollTo = {
|
|
39
51
|
scrollToItem: () => {
|
|
40
|
-
if (item.virtualIndex)
|
|
52
|
+
if (item.virtualIndex)
|
|
53
|
+
scrollToIndex(item.virtualIndex);
|
|
41
54
|
},
|
|
42
55
|
itemIndex
|
|
43
56
|
};
|
|
44
|
-
if (onSelectionChange)
|
|
57
|
+
if (onSelectionChange)
|
|
58
|
+
onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
|
|
45
59
|
}, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
|
|
46
|
-
const radioName =
|
|
47
|
-
const isDisabled =
|
|
48
|
-
return
|
|
60
|
+
const radioName = (0, import_react.useMemo)(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
|
|
61
|
+
const isDisabled = (0, import_react.useMemo)(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
62
|
+
return /* @__PURE__ */ import_react.default.createElement(import_ds_form.DSRadio, {
|
|
49
63
|
checked: selectedCheckboxes[id] === true,
|
|
50
64
|
name: radioName,
|
|
51
65
|
disabled: isDisabled,
|
|
@@ -55,5 +69,6 @@ function RadioSelectable(props) {
|
|
|
55
69
|
tabIndex: 0
|
|
56
70
|
});
|
|
57
71
|
}
|
|
58
|
-
|
|
59
|
-
module.exports =
|
|
72
|
+
var RadioSelectable_default = RadioSelectable;
|
|
73
|
+
module.exports = __toCommonJS(RadioSelectable_exports);
|
|
74
|
+
//# sourceMappingURL=RadioSelectable.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/parts/RadioSelectable.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSRadio } from '@elliemae/ds-form';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nfunction RadioSelectable(props: PropsT) {\n const { item, itemIndex } = props;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n uniqueTreeViewUUID,\n selectedCheckboxes,\n setSelectedCheckboxes,\n } = ctx;\n\n const { id } = item;\n\n const onRadioChange = useCallback(() => {\n const newSelectionHasmap = { [id]: true };\n setSelectedCheckboxes(newSelectionHasmap);\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (item.virtualIndex) scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);\n\n const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n return (\n <DSRadio\n checked={selectedCheckboxes[id] === true}\n name={radioName}\n disabled={isDisabled}\n className=\"em-ds-tree-item-radio\"\n data-testid=\"tree-item-radio\"\n onChange={onRadioChange}\n tabIndex={0}\n />\n );\n}\n\nexport default RadioSelectable;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwD;AACxD,qBAAwB;AACxB,6BAA4B;AAM5B,yBAAyB,OAAe;AACtC,QAAM,EAAE,MAAM,cAAc;AAE5B,QAAM,MAAM,6BAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,EAAE,OAAO;AAEf,QAAM,gBAAgB,8BAAY,MAAM;AACtC,UAAM,qBAAqB,GAAG,KAAK;AACnC,0BAAsB;AACtB,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,KAAK;AAAc,wBAAc,KAAK;AAAA;AAAA,MAE5C;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE,CAAC,IAAI,uBAAuB,WAAW,mBAAmB,MAAM;AAEnE,QAAM,YAAY,0BAAQ,MAAM,UAAU,sBAAsB,CAAC;AAEjE,QAAM,aAAa,0BAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,mDAAC,wBAAD;AAAA,IACE,SAAS,mBAAmB,QAAQ;AAAA,IACpC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA;AAAA;AAKhB,IAAO,0BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/cjs/parts/TreeItem.js
CHANGED
|
@@ -1,64 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
35
|
-
|
|
36
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
37
|
-
const TreeListItem = dsClassnames.aggregatedClasses('li', {
|
|
38
|
-
'data-testid': cssClassesConstants.treeItemBlockName,
|
|
39
|
-
role: 'treeitem' // temp fix untill we move to styled components
|
|
40
|
-
|
|
41
|
-
})(cssClassesConstants.treeItemBlockName);
|
|
42
|
-
const TreeListItemAddonsWrapper = dsClassnames.aggregatedClasses('div')(cssClassesConstants.treeItemBlockName, 'addons' // temp fix untill we move to styled components
|
|
43
|
-
);
|
|
44
|
-
const DnDHandle = reactSortableHoc.SortableHandle(_ref => {
|
|
45
|
-
let {
|
|
46
|
-
id
|
|
47
|
-
} = _ref;
|
|
48
|
-
return /*#__PURE__*/_jsx__default["default"](dsIcons.GripperVertical, {
|
|
49
|
-
"data-testid": "drag-handle",
|
|
50
|
-
className: "drag-handle",
|
|
51
|
-
size: "s",
|
|
52
|
-
onMouseDown: e => {
|
|
53
|
-
// prevent focusing the drag-handle to avoid borders
|
|
54
|
-
if (e) {
|
|
55
|
-
e.preventDefault();
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
tabIndex: "0"
|
|
59
|
-
}, "".concat(id, "-drag-handle"));
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
13
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(module2))
|
|
15
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return target;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (module2, isNodeMode) => {
|
|
21
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
22
|
+
};
|
|
23
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
24
|
+
return (module2, temp) => {
|
|
25
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
+
};
|
|
27
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
+
var TreeItem_exports = {};
|
|
29
|
+
__export(TreeItem_exports, {
|
|
30
|
+
DragAndDropTreeItem: () => DragAndDropTreeItem,
|
|
31
|
+
TreeItem: () => TreeItem,
|
|
32
|
+
TreeListItem: () => TreeListItem,
|
|
33
|
+
TreeListItemAddonsWrapper: () => TreeListItemAddonsWrapper
|
|
60
34
|
});
|
|
61
|
-
|
|
35
|
+
var React = __toESM(require("react"));
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
|
+
var import_react_sortable_hoc = __toESM(require("@elliemae/react-sortable-hoc"));
|
|
38
|
+
var import_ds_classnames = __toESM(require("@elliemae/ds-classnames"));
|
|
39
|
+
var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
|
|
40
|
+
var import_RadioSelectable = __toESM(require("./RadioSelectable"));
|
|
41
|
+
var import_CheckboxSelectable = __toESM(require("./CheckboxSelectable"));
|
|
42
|
+
var import_TreeViewContext = __toESM(require("../TreeViewContext"));
|
|
43
|
+
var import_refs_helpers = __toESM(require("../utils/refs-helpers"));
|
|
44
|
+
var import_keyboard_helpers = __toESM(require("../utils/keyboard-helpers"));
|
|
45
|
+
var import_NestingSpace = __toESM(require("./NestingSpace"));
|
|
46
|
+
var import_Icon = __toESM(require("./Icon"));
|
|
47
|
+
var import_ExpandCaret = __toESM(require("./ExpandCaret"));
|
|
48
|
+
var import_TreeItemText = __toESM(require("./TreeItemText"));
|
|
49
|
+
var import_cssClassesConstants = __toESM(require("../config/cssClassesConstants"));
|
|
50
|
+
const TreeListItem = (0, import_ds_classnames.aggregatedClasses)("li", {
|
|
51
|
+
"data-testid": import_cssClassesConstants.treeItemBlockName,
|
|
52
|
+
role: "treeitem"
|
|
53
|
+
})(import_cssClassesConstants.treeItemBlockName);
|
|
54
|
+
const TreeListItemAddonsWrapper = (0, import_ds_classnames.aggregatedClasses)("div")(import_cssClassesConstants.treeItemBlockName, "addons");
|
|
55
|
+
const DnDHandle = (0, import_react_sortable_hoc.SortableHandle)(({ id }) => /* @__PURE__ */ import_react.default.createElement(import_ds_icons.GripperVertical, {
|
|
56
|
+
"data-testid": "drag-handle",
|
|
57
|
+
key: `${id}-drag-handle`,
|
|
58
|
+
className: "drag-handle",
|
|
59
|
+
size: "s",
|
|
60
|
+
onMouseDown: (e) => {
|
|
61
|
+
if (e) {
|
|
62
|
+
e.preventDefault();
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
tabIndex: "0"
|
|
66
|
+
}));
|
|
67
|
+
const TreeItem = (props) => {
|
|
62
68
|
const {
|
|
63
69
|
item,
|
|
64
70
|
itemIndex,
|
|
@@ -67,26 +73,14 @@ const TreeItem = props => {
|
|
|
67
73
|
spaceForNestingLevel = 1.5,
|
|
68
74
|
onMouseDragOverItem
|
|
69
75
|
} = props;
|
|
76
|
+
const { id, node } = item;
|
|
77
|
+
const { nodeItemRef } = node.model;
|
|
78
|
+
const openFolderOnHoverTimeout = (0, import_react.useRef)(null);
|
|
79
|
+
const [isDraggingOverThis, setIsDraggingOverThis] = (0, import_react.useState)(false);
|
|
80
|
+
const onItemKeyDown = (0, import_keyboard_helpers.useOnItemKeyDown)(item);
|
|
81
|
+
const ctx = (0, import_react.useContext)(import_TreeViewContext.default);
|
|
70
82
|
const {
|
|
71
|
-
|
|
72
|
-
node
|
|
73
|
-
} = item;
|
|
74
|
-
const {
|
|
75
|
-
nodeItemRef
|
|
76
|
-
} = node.model;
|
|
77
|
-
const openFolderOnHoverTimeout = React.useRef(null);
|
|
78
|
-
const [isDraggingOverThis, setIsDraggingOverThis] = React.useState(false);
|
|
79
|
-
const onItemKeyDown = keyboardHelpers.useOnItemKeyDown(item);
|
|
80
|
-
const ctx = React.useContext(TreeViewContext["default"]);
|
|
81
|
-
const {
|
|
82
|
-
props: {
|
|
83
|
-
disableIcons,
|
|
84
|
-
rightAddons,
|
|
85
|
-
onItemClick,
|
|
86
|
-
onItemFocus,
|
|
87
|
-
rowSize,
|
|
88
|
-
labelOverflow
|
|
89
|
-
},
|
|
83
|
+
props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },
|
|
90
84
|
relativeMouseCord,
|
|
91
85
|
withRadioChecks,
|
|
92
86
|
withCheckboxChecks,
|
|
@@ -95,61 +89,52 @@ const TreeItem = props => {
|
|
|
95
89
|
selectedCheckboxes,
|
|
96
90
|
hoverItem,
|
|
97
91
|
isDragging,
|
|
98
|
-
virtualListHelpers: {
|
|
99
|
-
scrollToIndex
|
|
100
|
-
},
|
|
92
|
+
virtualListHelpers: { scrollToIndex },
|
|
101
93
|
setHoverItem,
|
|
102
94
|
setSelectedItem,
|
|
103
95
|
setFocusedItem
|
|
104
|
-
} = ctx;
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
const setItemRefs = ref => {
|
|
109
|
-
refsHelpers.setMultipleRefs(virtualItemRef, nodeItemRef)(ref);
|
|
96
|
+
} = ctx;
|
|
97
|
+
const setItemRefs = (ref) => {
|
|
98
|
+
(0, import_refs_helpers.setMultipleRefs)(virtualItemRef, nodeItemRef)(ref);
|
|
110
99
|
};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
100
|
+
const dropPreviewClassName = (0, import_react.useMemo)(() => {
|
|
101
|
+
if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis)
|
|
102
|
+
return "";
|
|
103
|
+
const { isBefore, isAfter, isValid } = relativeMouseCord;
|
|
104
|
+
let className = `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}${isValid ? "--valid" : "--invalid"}`;
|
|
105
|
+
if (isBefore)
|
|
106
|
+
className += "-drop-before";
|
|
107
|
+
else if (isAfter)
|
|
108
|
+
className += "-drop-after";
|
|
109
|
+
else
|
|
110
|
+
className += "-drop-in";
|
|
121
111
|
return className;
|
|
122
112
|
}, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);
|
|
123
|
-
const selectedClassName =
|
|
124
|
-
const hoverClassName =
|
|
125
|
-
const fixedHeightClassname =
|
|
126
|
-
if (labelOverflow ===
|
|
127
|
-
if (rowSize ===
|
|
128
|
-
|
|
113
|
+
const selectedClassName = (0, import_react.useMemo)(() => selectedItem?.id === item.id ? "selected" : "", [item.id, selectedItem?.id]);
|
|
114
|
+
const hoverClassName = (0, import_react.useMemo)(() => hoverItem?.id !== item.id || withDragAndDrop && isDragging ? "" : "hover", [hoverItem?.id, item.id, withDragAndDrop, isDragging]);
|
|
115
|
+
const fixedHeightClassname = (0, import_react.useMemo)(() => {
|
|
116
|
+
if (labelOverflow === "truncate") {
|
|
117
|
+
if (rowSize === "compact")
|
|
118
|
+
return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--fixed-height-compact`;
|
|
119
|
+
return `${import_cssClassesConstants.DSTreeViewPrefix}-${import_cssClassesConstants.treeItemBlockName}--fixed-height`;
|
|
129
120
|
}
|
|
130
|
-
|
|
131
|
-
return '';
|
|
121
|
+
return "";
|
|
132
122
|
}, [labelOverflow, rowSize]);
|
|
133
|
-
const finalClassName =
|
|
134
|
-
const handleItemClick =
|
|
123
|
+
const finalClassName = (0, import_react.useMemo)(() => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`, [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname]);
|
|
124
|
+
const handleItemClick = (0, import_react.useCallback)((e) => {
|
|
135
125
|
onItemClick(item, e);
|
|
136
126
|
setFocusedItem(item);
|
|
137
127
|
setSelectedItem(item);
|
|
138
|
-
const itemVirtualIndex = typeof item.virtualIndex ===
|
|
128
|
+
const itemVirtualIndex = typeof item.virtualIndex === "number" ? item.virtualIndex : -1;
|
|
139
129
|
onItemFocus({
|
|
140
130
|
itemIndex: itemVirtualIndex,
|
|
141
|
-
scrollToItem:
|
|
142
|
-
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
|
143
|
-
align: 'start'
|
|
144
|
-
};
|
|
145
|
-
return scrollToIndex(itemVirtualIndex, opts);
|
|
146
|
-
},
|
|
131
|
+
scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVirtualIndex, opts),
|
|
147
132
|
item
|
|
148
133
|
});
|
|
149
134
|
}, [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem]);
|
|
150
|
-
return
|
|
135
|
+
return /* @__PURE__ */ import_react.default.createElement(TreeListItem, {
|
|
151
136
|
tabIndex: 0,
|
|
152
|
-
onMouseMove: event => {
|
|
137
|
+
onMouseMove: (event) => {
|
|
153
138
|
if (withDragAndDrop && onMouseDragOverItem) {
|
|
154
139
|
onMouseDragOverItem({
|
|
155
140
|
event,
|
|
@@ -163,10 +148,10 @@ const TreeItem = props => {
|
|
|
163
148
|
onMouseLeave: () => {
|
|
164
149
|
if (withDragAndDrop) {
|
|
165
150
|
setIsDraggingOverThis(false);
|
|
166
|
-
if (openFolderOnHoverTimeout
|
|
151
|
+
if (openFolderOnHoverTimeout?.current)
|
|
152
|
+
clearTimeout(openFolderOnHoverTimeout.current);
|
|
167
153
|
}
|
|
168
|
-
|
|
169
|
-
if ((hoverItem === null || hoverItem === void 0 ? void 0 : hoverItem.id) === item.id) {
|
|
154
|
+
if (hoverItem?.id === item.id) {
|
|
170
155
|
setHoverItem(null);
|
|
171
156
|
}
|
|
172
157
|
},
|
|
@@ -175,36 +160,32 @@ const TreeItem = props => {
|
|
|
175
160
|
},
|
|
176
161
|
onClick: handleItemClick,
|
|
177
162
|
ref: setItemRefs,
|
|
178
|
-
style:
|
|
163
|
+
style: { ...itemWrapperStyle },
|
|
179
164
|
className: finalClassName,
|
|
180
165
|
"aria-expanded": !!item.isExpanded,
|
|
181
166
|
"aria-selected": !!selectedCheckboxes[item.id],
|
|
182
167
|
"data-id": item.id,
|
|
183
168
|
"data-index": item.virtualIndex,
|
|
184
|
-
onKeyDown: onItemKeyDown
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
});
|
|
169
|
+
onKeyDown: onItemKeyDown
|
|
170
|
+
}, /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, withDragAndDrop ? /* @__PURE__ */ import_react.default.createElement(DnDHandle, {
|
|
171
|
+
id
|
|
172
|
+
}) : null, withRadioChecks ? /* @__PURE__ */ import_react.default.createElement(import_RadioSelectable.default, {
|
|
173
|
+
item,
|
|
174
|
+
itemIndex
|
|
175
|
+
}) : null, withCheckboxChecks ? /* @__PURE__ */ import_react.default.createElement(import_CheckboxSelectable.default, {
|
|
176
|
+
item,
|
|
177
|
+
itemIndex
|
|
178
|
+
}) : null, /* @__PURE__ */ import_react.default.createElement(import_NestingSpace.NestingSpace, {
|
|
179
|
+
item,
|
|
180
|
+
spaceForNestingLevel
|
|
181
|
+
}), /* @__PURE__ */ import_react.default.createElement(import_ExpandCaret.ExpandCaret, {
|
|
182
|
+
item
|
|
183
|
+
}), !disableIcons ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, {
|
|
184
|
+
item
|
|
185
|
+
}) : null), /* @__PURE__ */ import_react.default.createElement(import_TreeItemText.TreeItemText, {
|
|
186
|
+
item
|
|
187
|
+
}), rightAddons && /* @__PURE__ */ import_react.default.createElement(TreeListItemAddonsWrapper, null, typeof rightAddons === "function" ? rightAddons(item) : rightAddons));
|
|
204
188
|
};
|
|
205
|
-
const DragAndDropTreeItem =
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
exports.TreeItem = TreeItem;
|
|
209
|
-
exports.TreeListItem = TreeListItem;
|
|
210
|
-
exports.TreeListItemAddonsWrapper = TreeListItemAddonsWrapper;
|
|
189
|
+
const DragAndDropTreeItem = (0, import_react_sortable_hoc.SortableElement)(TreeItem);
|
|
190
|
+
module.exports = __toCommonJS(TreeItem_exports);
|
|
191
|
+
//# sourceMappingURL=TreeItem.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/parts/TreeItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useContext, useState, useMemo, useRef, useCallback } from 'react';\nimport { SortableElement, SortableHandle } from '@elliemae/react-sortable-hoc';\n\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { GripperVertical } from '@elliemae/ds-icons';\n\nimport RadioSelectable from './RadioSelectable';\nimport CheckboxSelectable from './CheckboxSelectable';\nimport TreeViewContext from '../TreeViewContext';\nimport { setMultipleRefs } from '../utils/refs-helpers';\nimport { useOnItemKeyDown } from '../utils/keyboard-helpers';\nimport { NestingSpace } from './NestingSpace';\nimport { Icon } from './Icon';\nimport { ExpandCaret } from './ExpandCaret';\nimport { TreeItemText } from './TreeItemText';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nexport const TreeListItem = aggregatedClasses('li', {\n 'data-testid': treeItemBlockName,\n role: 'treeitem',\n // temp fix untill we move to styled components\n})(treeItemBlockName) as unknown as React.ComponentType<React.ComponentProps<'li'>>;\n\nexport const TreeListItemAddonsWrapper = aggregatedClasses('div')(\n treeItemBlockName,\n 'addons',\n // temp fix untill we move to styled components\n) as unknown as React.ComponentType;\n\nconst DnDHandle = SortableHandle(({ id }: { id: DSTreeviewT.StringOrNum }) => (\n <GripperVertical\n data-testid=\"drag-handle\"\n key={`${id}-drag-handle`}\n className=\"drag-handle\"\n size=\"s\"\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the drag-handle to avoid borders\n if (e) {\n e.preventDefault();\n }\n }}\n tabIndex=\"0\"\n />\n));\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n virtualItemRef: React.RefObject<HTMLLIElement>;\n itemWrapperStyle?: { [key: string]: unknown };\n spaceForNestingLevel?: number;\n onMouseDragOverItem?: (opts: {\n event: React.MouseEvent<HTMLLIElement>;\n item: DSTreeviewT.Item;\n itemIndex: number;\n setIsDraggingOverThis: React.Dispatch<React.SetStateAction<boolean>>;\n openFolderOnHoverTimeout: React.MutableRefObject<NodeJS.Timeout | null>;\n }) => void;\n}\nexport const TreeItem = (props: PropsT): JSX.Element => {\n const {\n item,\n itemIndex,\n itemWrapperStyle = {},\n virtualItemRef,\n spaceForNestingLevel = 1.5,\n onMouseDragOverItem,\n } = props;\n const { id, node } = item;\n const { nodeItemRef } = node.model;\n const openFolderOnHoverTimeout = useRef<NodeJS.Timeout | null>(null);\n\n const [isDraggingOverThis, setIsDraggingOverThis] = useState(false);\n const onItemKeyDown = useOnItemKeyDown(item);\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { disableIcons, rightAddons, onItemClick, onItemFocus, rowSize, labelOverflow },\n relativeMouseCord,\n withRadioChecks,\n withCheckboxChecks,\n withDragAndDrop,\n selectedItem,\n selectedCheckboxes,\n hoverItem,\n isDragging,\n virtualListHelpers: { scrollToIndex },\n setHoverItem,\n setSelectedItem,\n setFocusedItem,\n } = ctx;\n\n // Sortable Items needs to update\n // - the virtual list ref (for react-virtual requirement)\n // - nodeItemRef which is a prop avaiable in the TreeModel nodes\n const setItemRefs: React.LegacyRef<HTMLLIElement> | undefined = (ref: HTMLLIElement) => {\n setMultipleRefs(virtualItemRef, nodeItemRef)(ref);\n };\n\n const dropPreviewClassName = useMemo(() => {\n if (!withDragAndDrop || !relativeMouseCord || !isDraggingOverThis) return '';\n const { isBefore, isAfter, isValid } = relativeMouseCord;\n let className = `${DSTreeViewPrefix}-${treeItemBlockName}${isValid ? '--valid' : '--invalid'}`;\n\n if (isBefore) className += '-drop-before';\n else if (isAfter) className += '-drop-after';\n else className += '-drop-in';\n return className;\n }, [withDragAndDrop, relativeMouseCord, isDraggingOverThis]);\n\n const selectedClassName = useMemo(\n () => (selectedItem?.id === item.id ? 'selected' : ''),\n [item.id, selectedItem?.id],\n );\n const hoverClassName = useMemo(\n () => (hoverItem?.id !== item.id || (withDragAndDrop && isDragging) ? '' : 'hover'),\n [hoverItem?.id, item.id, withDragAndDrop, isDragging],\n );\n const fixedHeightClassname = useMemo(() => {\n if (labelOverflow === 'truncate') {\n if (rowSize === 'compact') return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height-compact`;\n return `${DSTreeViewPrefix}-${treeItemBlockName}--fixed-height`;\n }\n return '';\n }, [labelOverflow, rowSize]);\n\n const finalClassName = useMemo(\n () => `${dropPreviewClassName} ${fixedHeightClassname} ${selectedClassName} ${hoverClassName}`,\n [dropPreviewClassName, selectedClassName, hoverClassName, fixedHeightClassname],\n );\n\n const handleItemClick = useCallback(\n (e: React.MouseEvent<HTMLLIElement>) => {\n onItemClick(item, e);\n setFocusedItem(item);\n setSelectedItem(item);\n const itemVirtualIndex = typeof item.virtualIndex === 'number' ? item.virtualIndex : -1;\n onItemFocus({\n itemIndex: itemVirtualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVirtualIndex, opts),\n item,\n });\n },\n [item, scrollToIndex, onItemClick, onItemFocus, setSelectedItem, setFocusedItem],\n );\n\n return (\n <TreeListItem\n tabIndex={0}\n onMouseMove={(event) => {\n if (withDragAndDrop && onMouseDragOverItem) {\n onMouseDragOverItem({\n event,\n item,\n itemIndex,\n setIsDraggingOverThis,\n openFolderOnHoverTimeout,\n });\n }\n }}\n onMouseLeave={() => {\n if (withDragAndDrop) {\n setIsDraggingOverThis(false);\n if (openFolderOnHoverTimeout?.current) clearTimeout(openFolderOnHoverTimeout.current);\n }\n if (hoverItem?.id === item.id) {\n setHoverItem(null);\n }\n }}\n onMouseEnter={() => {\n setHoverItem(item);\n }}\n onClick={handleItemClick}\n ref={setItemRefs}\n style={{ ...itemWrapperStyle }}\n className={finalClassName}\n aria-expanded={!!item.isExpanded}\n aria-selected={!!selectedCheckboxes[item.id]}\n data-id={item.id}\n data-index={item.virtualIndex}\n onKeyDown={onItemKeyDown}\n >\n <TreeListItemAddonsWrapper>\n {withDragAndDrop ? <DnDHandle id={id} /> : null}\n {withRadioChecks ? <RadioSelectable item={item} itemIndex={itemIndex} /> : null}\n {withCheckboxChecks ? <CheckboxSelectable item={item} itemIndex={itemIndex} /> : null}\n <NestingSpace item={item} spaceForNestingLevel={spaceForNestingLevel} />\n <ExpandCaret item={item} />\n {!disableIcons ? <Icon item={item} /> : null}\n </TreeListItemAddonsWrapper>\n <TreeItemText item={item} />\n {rightAddons && (\n <TreeListItemAddonsWrapper>\n {typeof rightAddons === 'function' ? rightAddons(item) : rightAddons}\n </TreeListItemAddonsWrapper>\n )}\n </TreeListItem>\n );\n};\n\nexport const DragAndDropTreeItem = SortableElement(TreeItem);\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|