@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,71 +1,58 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
import TreeViewContext from '../TreeViewContext.js';
|
|
12
|
-
import { toggleCheckboxItem } from '../utils/selectable-helper.js';
|
|
13
|
-
import { filterObject } from '../utils/object-helpers.js';
|
|
14
|
-
|
|
15
|
-
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; }
|
|
16
|
-
|
|
17
|
-
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(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; }
|
|
18
|
-
const StyledCheckboxWrapper = /*#__PURE__*/styled.span.withConfig({
|
|
19
|
-
componentId: "sc-1tyhs3t-0"
|
|
20
|
-
})(["padding-top:3px;"]);
|
|
21
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext, useCallback, useMemo } from "react";
|
|
3
|
+
import { DSCheckbox } from "@elliemae/ds-form";
|
|
4
|
+
import styled from "styled-components";
|
|
5
|
+
import TreeViewContext from "../TreeViewContext";
|
|
6
|
+
import { toggleCheckboxItem } from "../utils/selectable-helper";
|
|
7
|
+
import { filterObject } from "../utils/object-helpers";
|
|
8
|
+
const StyledCheckboxWrapper = styled.span`
|
|
9
|
+
padding-top: 3px;
|
|
10
|
+
`;
|
|
22
11
|
function CheckboxSelectable(props) {
|
|
23
|
-
const {
|
|
24
|
-
|
|
25
|
-
itemIndex
|
|
26
|
-
} = props;
|
|
27
|
-
const {
|
|
28
|
-
id
|
|
29
|
-
} = item;
|
|
12
|
+
const { item, itemIndex } = props;
|
|
13
|
+
const { id } = item;
|
|
30
14
|
const ctx = useContext(TreeViewContext);
|
|
31
15
|
const {
|
|
32
|
-
props: {
|
|
33
|
-
|
|
34
|
-
isItemDisabled
|
|
35
|
-
},
|
|
36
|
-
virtualListHelpers: {
|
|
37
|
-
scrollToIndex
|
|
38
|
-
},
|
|
16
|
+
props: { onSelectionChange, isItemDisabled },
|
|
17
|
+
virtualListHelpers: { scrollToIndex },
|
|
39
18
|
triggerTreeRerender,
|
|
40
19
|
selectedCheckboxes,
|
|
41
20
|
setSelectedCheckboxes
|
|
42
21
|
} = ctx;
|
|
43
22
|
const onCheckboxChange = useCallback(() => {
|
|
44
23
|
const newSelections = toggleCheckboxItem(item);
|
|
45
|
-
const newSelectionHasmap = filterObject(
|
|
24
|
+
const newSelectionHasmap = filterObject({ ...selectedCheckboxes, ...newSelections }, (value) => value !== false);
|
|
46
25
|
setSelectedCheckboxes(newSelectionHasmap);
|
|
47
26
|
triggerTreeRerender();
|
|
48
27
|
const indexAndScrollTo = {
|
|
49
28
|
scrollToItem: () => {
|
|
50
|
-
if (typeof item.virtualIndex ===
|
|
29
|
+
if (typeof item.virtualIndex === "number")
|
|
30
|
+
scrollToIndex(item.virtualIndex);
|
|
51
31
|
},
|
|
52
32
|
itemIndex
|
|
53
33
|
};
|
|
54
|
-
if (onSelectionChange)
|
|
55
|
-
|
|
34
|
+
if (onSelectionChange)
|
|
35
|
+
onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
|
|
36
|
+
}, [
|
|
37
|
+
item,
|
|
38
|
+
triggerTreeRerender,
|
|
39
|
+
onSelectionChange,
|
|
40
|
+
itemIndex,
|
|
41
|
+
scrollToIndex,
|
|
42
|
+
selectedCheckboxes,
|
|
43
|
+
setSelectedCheckboxes
|
|
44
|
+
]);
|
|
56
45
|
const isChecked = useMemo(() => {
|
|
57
|
-
if (selectedCheckboxes[id] ===
|
|
58
|
-
return
|
|
46
|
+
if (selectedCheckboxes[id] === "mixed") {
|
|
47
|
+
return "mixed";
|
|
59
48
|
}
|
|
60
|
-
|
|
61
49
|
if (selectedCheckboxes[id] === true) {
|
|
62
50
|
return true;
|
|
63
51
|
}
|
|
64
|
-
|
|
65
52
|
return false;
|
|
66
53
|
}, [selectedCheckboxes, id]);
|
|
67
54
|
const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
68
|
-
return
|
|
55
|
+
return /* @__PURE__ */ React2.createElement(StyledCheckboxWrapper, null, /* @__PURE__ */ React2.createElement(DSCheckbox, {
|
|
69
56
|
checked: isChecked,
|
|
70
57
|
disabled: isDisabled,
|
|
71
58
|
className: "em-ds-tree-item-checkbox",
|
|
@@ -74,5 +61,8 @@ function CheckboxSelectable(props) {
|
|
|
74
61
|
tabIndex: "0"
|
|
75
62
|
}));
|
|
76
63
|
}
|
|
77
|
-
|
|
78
|
-
export {
|
|
64
|
+
var CheckboxSelectable_default = CheckboxSelectable;
|
|
65
|
+
export {
|
|
66
|
+
CheckboxSelectable_default as default
|
|
67
|
+
};
|
|
68
|
+
//# sourceMappingURL=CheckboxSelectable.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/CheckboxSelectable.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback, useMemo } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport styled from 'styled-components';\nimport TreeViewContext from '../TreeViewContext';\nimport { toggleCheckboxItem } from '../utils/selectable-helper';\nimport { filterObject } from '../utils/object-helpers';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\nconst StyledCheckboxWrapper = styled.span`\n padding-top: 3px;\n`;\ninterface PropsT {\n item: DSTreeviewT.Item;\n itemIndex: number;\n}\nfunction CheckboxSelectable(props: PropsT): JSX.Element | null {\n const { item, itemIndex } = props;\n const { id } = item;\n\n const ctx = useContext(TreeViewContext);\n const {\n props: { onSelectionChange, isItemDisabled },\n virtualListHelpers: { scrollToIndex },\n triggerTreeRerender,\n selectedCheckboxes,\n setSelectedCheckboxes,\n } = ctx;\n\n const onCheckboxChange = useCallback(() => {\n const newSelections = toggleCheckboxItem(item);\n const newSelectionHasmap = filterObject<DSTreeviewT.SelectionState>(\n { ...selectedCheckboxes, ...newSelections },\n (value) => value !== false,\n );\n setSelectedCheckboxes(newSelectionHasmap);\n triggerTreeRerender();\n\n const indexAndScrollTo = {\n scrollToItem: () => {\n if (typeof item.virtualIndex === 'number') scrollToIndex(item.virtualIndex);\n },\n itemIndex,\n };\n if (onSelectionChange) onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);\n }, [\n item,\n triggerTreeRerender,\n onSelectionChange,\n itemIndex,\n scrollToIndex,\n selectedCheckboxes,\n setSelectedCheckboxes,\n ]);\n const isChecked = useMemo(() => {\n if (selectedCheckboxes[id] === 'mixed') {\n return 'mixed' as const;\n }\n if (selectedCheckboxes[id] === true) {\n return true;\n }\n return false;\n }, [selectedCheckboxes, id]);\n\n const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);\n\n return (\n <StyledCheckboxWrapper>\n <DSCheckbox\n checked={isChecked}\n disabled={isDisabled}\n className=\"em-ds-tree-item-checkbox\"\n data-testid=\"tree-item-checkbox\"\n onChange={onCheckboxChange}\n tabIndex=\"0\"\n />\n </StyledCheckboxWrapper>\n );\n}\n\nexport default CheckboxSelectable;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAOrC,4BAA4B,OAAmC;AAC7D,QAAM,EAAE,MAAM,cAAc;AAC5B,QAAM,EAAE,OAAO;AAEf,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,mBAAmB;AAAA,IAC5B,oBAAoB,EAAE;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,mBAAmB,YAAY,MAAM;AACzC,UAAM,gBAAgB,mBAAmB;AACzC,UAAM,qBAAqB,aACzB,KAAK,uBAAuB,iBAC5B,CAAC,UAAU,UAAU;AAEvB,0BAAsB;AACtB;AAEA,UAAM,mBAAmB;AAAA,MACvB,cAAc,MAAM;AAClB,YAAI,OAAO,KAAK,iBAAiB;AAAU,wBAAc,KAAK;AAAA;AAAA,MAEhE;AAAA;AAEF,QAAI;AAAmB,wBAAkB,oBAAoB,MAAM;AAAA,KAClE;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,YAAY,QAAQ,MAAM;AAC9B,QAAI,mBAAmB,QAAQ,SAAS;AACtC,aAAO;AAAA;AAET,QAAI,mBAAmB,QAAQ,MAAM;AACnC,aAAO;AAAA;AAET,WAAO;AAAA,KACN,CAAC,oBAAoB;AAExB,QAAM,aAAa,QAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,qCAAC,uBAAD,MACE,qCAAC,YAAD;AAAA,IACE,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAU;AAAA,IACV,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAS;AAAA;AAAA;AAMjB,IAAO,6BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,22 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { DSTreeViewPrefix, treeItemBlockName } from
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const
|
|
7
|
-
const {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
isGroup,
|
|
12
|
-
children
|
|
13
|
-
} = item;
|
|
14
|
-
if (!isGroup) return null; // return ` | ${children.length} Items`;
|
|
15
|
-
|
|
16
|
-
return /*#__PURE__*/_jsx("span", {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { DSTreeViewPrefix, treeItemBlockName } from "../config/cssClassesConstants";
|
|
4
|
+
const className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;
|
|
5
|
+
const ChildrenCountDisplayer = (props) => {
|
|
6
|
+
const { item } = props;
|
|
7
|
+
const { isGroup, children } = item;
|
|
8
|
+
if (!isGroup)
|
|
9
|
+
return null;
|
|
10
|
+
return /* @__PURE__ */ React2.createElement("span", {
|
|
17
11
|
"data-testid": "tree-item-children-count-displayer",
|
|
18
|
-
className
|
|
19
|
-
},
|
|
12
|
+
className
|
|
13
|
+
}, ` | ${children.length} Items`);
|
|
20
14
|
};
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
export {
|
|
16
|
+
ChildrenCountDisplayer
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=ChildrenCountDisplayer.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ChildrenCountDisplayer.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTreeViewPrefix, treeItemBlockName } from '../config/cssClassesConstants';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\nconst className = `${DSTreeViewPrefix}-${treeItemBlockName}-children-count-displayer`;\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ChildrenCountDisplayer = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const { isGroup, children } = item;\n\n if (!isGroup) return null;\n // return ` | ${children.length} Items`;\n return (\n <span data-testid=\"tree-item-children-count-displayer\" className={className}>{` | ${children.length} Items`}</span>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAGA,MAAM,YAAY,GAAG,oBAAoB;AAMlC,MAAM,yBAAyB,CAAC,UAAsC;AAC3E,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,SAAS,aAAa;AAE9B,MAAI,CAAC;AAAS,WAAO;AAErB,SACE,qCAAC,QAAD;AAAA,IAAM,eAAY;AAAA,IAAqC;AAAA,KAAuB,MAAM,SAAS;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/parts/ExpandCaret.js
CHANGED
|
@@ -1,85 +1,67 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import Button from
|
|
4
|
-
import { ArrowheadDown, ArrowheadRight } from
|
|
5
|
-
import { toggleItemExpand } from
|
|
6
|
-
import { focusItem } from
|
|
7
|
-
import TreeViewContext from
|
|
8
|
-
|
|
9
|
-
var _ArrowheadDown, _ArrowheadRight;
|
|
10
|
-
const ExpandCaret = props => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext, useCallback } from "react";
|
|
3
|
+
import Button from "@elliemae/ds-button";
|
|
4
|
+
import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
|
|
5
|
+
import { toggleItemExpand } from "../utils/group-expands-helpers";
|
|
6
|
+
import { focusItem } from "../utils/tree-helpers";
|
|
7
|
+
import TreeViewContext from "../TreeViewContext";
|
|
8
|
+
const ExpandCaret = (props) => {
|
|
11
9
|
const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);
|
|
12
|
-
const {
|
|
13
|
-
|
|
14
|
-
} = props;
|
|
15
|
-
const {
|
|
16
|
-
id,
|
|
17
|
-
isExpanded,
|
|
18
|
-
isGroup,
|
|
19
|
-
children
|
|
20
|
-
} = item;
|
|
10
|
+
const { item } = props;
|
|
11
|
+
const { id, isExpanded, isGroup, children } = item;
|
|
21
12
|
const isGroupOrHasChildrens = isGroup || Array.isArray(children) && children.length > 0;
|
|
22
13
|
const ctx = useContext(TreeViewContext);
|
|
23
14
|
const {
|
|
24
|
-
props: {
|
|
25
|
-
onItemFocus
|
|
26
|
-
},
|
|
15
|
+
props: { onItemFocus },
|
|
27
16
|
handleExpandGroup = defaultHandleExpandGroup,
|
|
28
17
|
triggerTreeRerender,
|
|
29
18
|
updateUserExpandedState,
|
|
30
19
|
setLatestToggledItem,
|
|
31
20
|
setFocusedItem,
|
|
32
|
-
virtualListHelpers: {
|
|
33
|
-
scrollToIndex
|
|
34
|
-
}
|
|
21
|
+
virtualListHelpers: { scrollToIndex }
|
|
35
22
|
} = ctx;
|
|
36
|
-
if (isGroupOrHasChildrens)
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
23
|
+
if (isGroupOrHasChildrens)
|
|
24
|
+
return /* @__PURE__ */ React2.createElement(Button, {
|
|
25
|
+
buttonType: "text",
|
|
26
|
+
className: "expandable-arrow",
|
|
27
|
+
"data-testid": "tree-item-expand-toggle",
|
|
28
|
+
key: `${id}-expand-addon`,
|
|
29
|
+
icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
|
|
30
|
+
size: "s",
|
|
31
|
+
"data-testid": "ic-arrow-head-down"
|
|
32
|
+
}) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
|
|
33
|
+
size: "s",
|
|
34
|
+
"data-testid": "ic-arrow-head-right"
|
|
35
|
+
}),
|
|
36
|
+
onMouseDown: (e) => {
|
|
37
|
+
if (e) {
|
|
38
|
+
e.preventDefault();
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
onClick: (e) => {
|
|
42
|
+
e.stopPropagation();
|
|
43
|
+
if (e)
|
|
44
|
+
handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
|
|
45
|
+
setLatestToggledItem(item);
|
|
46
|
+
const itemVitualIndex = item.virtualIndex;
|
|
47
|
+
if (typeof itemVitualIndex === "number") {
|
|
48
|
+
onItemFocus({
|
|
49
|
+
itemIndex: itemVitualIndex,
|
|
50
|
+
scrollToItem: (opts = { align: "start" }) => scrollToIndex(itemVitualIndex, opts),
|
|
51
|
+
item
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
setFocusedItem(item);
|
|
55
|
+
focusItem(item);
|
|
56
|
+
},
|
|
41
57
|
size: "s",
|
|
42
|
-
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
})),
|
|
47
|
-
onMouseDown: e => {
|
|
48
|
-
// prevent focusing the caret
|
|
49
|
-
if (e) {
|
|
50
|
-
e.preventDefault();
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
onClick: e => {
|
|
54
|
-
e.stopPropagation();
|
|
55
|
-
if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);
|
|
56
|
-
setLatestToggledItem(item);
|
|
57
|
-
const itemVitualIndex = item.virtualIndex;
|
|
58
|
-
|
|
59
|
-
if (typeof itemVitualIndex === 'number') {
|
|
60
|
-
onItemFocus({
|
|
61
|
-
itemIndex: itemVitualIndex,
|
|
62
|
-
scrollToItem: function () {
|
|
63
|
-
let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
|
|
64
|
-
align: 'start'
|
|
65
|
-
};
|
|
66
|
-
return scrollToIndex(itemVitualIndex, opts);
|
|
67
|
-
},
|
|
68
|
-
item
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
setFocusedItem(item);
|
|
73
|
-
focusItem(item);
|
|
74
|
-
},
|
|
75
|
-
size: "s",
|
|
76
|
-
tabIndex: -1
|
|
77
|
-
}, "".concat(id, "-expand-addon"));
|
|
78
|
-
return /*#__PURE__*/_jsx("div", {
|
|
79
|
-
style: {
|
|
80
|
-
width: '24px'
|
|
81
|
-
}
|
|
58
|
+
tabIndex: -1
|
|
59
|
+
});
|
|
60
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
61
|
+
style: { width: "24px" }
|
|
82
62
|
});
|
|
83
63
|
};
|
|
84
|
-
|
|
85
|
-
|
|
64
|
+
export {
|
|
65
|
+
ExpandCaret
|
|
66
|
+
};
|
|
67
|
+
//# sourceMappingURL=ExpandCaret.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ExpandCaret.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport Button from '@elliemae/ds-button';\nimport { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';\nimport { toggleItemExpand } from '../utils/group-expands-helpers';\nimport { focusItem } from '../utils/tree-helpers';\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\n\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\n\nexport const ExpandCaret = (props: PropsT): JSX.Element | null => {\n const defaultHandleExpandGroup = useCallback(toggleItemExpand, []);\n const { item } = props;\n const { id, isExpanded, isGroup, children } = item;\n const isGroupOrHasChildrens = isGroup || (Array.isArray(children) && children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { onItemFocus },\n handleExpandGroup = defaultHandleExpandGroup,\n triggerTreeRerender,\n updateUserExpandedState,\n setLatestToggledItem,\n setFocusedItem,\n virtualListHelpers: { scrollToIndex },\n } = ctx;\n\n if (isGroupOrHasChildrens)\n return (\n <Button\n buttonType=\"text\"\n className=\"expandable-arrow\"\n data-testid=\"tree-item-expand-toggle\"\n key={`${id}-expand-addon`}\n icon={\n isExpanded ? (\n <ArrowheadDown size=\"s\" data-testid=\"ic-arrow-head-down\" />\n ) : (\n <ArrowheadRight size=\"s\" data-testid=\"ic-arrow-head-right\" />\n )\n }\n onMouseDown={(e: React.MouseEvent) => {\n // prevent focusing the caret\n if (e) {\n e.preventDefault();\n }\n }}\n onClick={(e) => {\n e.stopPropagation();\n if (e) handleExpandGroup(item, triggerTreeRerender, updateUserExpandedState, scrollToIndex, e);\n setLatestToggledItem(item);\n const itemVitualIndex = item.virtualIndex;\n if (typeof itemVitualIndex === 'number') {\n onItemFocus({\n itemIndex: itemVitualIndex,\n scrollToItem: (opts = { align: 'start' }) => scrollToIndex(itemVitualIndex, opts),\n item,\n });\n }\n setFocusedItem(item);\n focusItem(item);\n }}\n size=\"s\"\n tabIndex={-1}\n />\n );\n return <div style={{ width: '24px' }} />;\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAOO,MAAM,cAAc,CAAC,UAAsC;AAChE,QAAM,2BAA2B,YAAY,kBAAkB;AAC/D,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,IAAI,YAAY,SAAS,aAAa;AAC9C,QAAM,wBAAwB,WAAY,MAAM,QAAQ,aAAa,SAAS,SAAS;AACvF,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE;AAAA,MACpB;AAEJ,MAAI;AACF,WACE,qCAAC,QAAD;AAAA,MACE,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,KAAK,GAAG;AAAA,MACR,MACE,aACE,qCAAC,eAAD;AAAA,QAAe,MAAK;AAAA,QAAI,eAAY;AAAA,WAEpC,qCAAC,gBAAD;AAAA,QAAgB,MAAK;AAAA,QAAI,eAAY;AAAA;AAAA,MAGzC,aAAa,CAAC,MAAwB;AAEpC,YAAI,GAAG;AACL,YAAE;AAAA;AAAA;AAAA,MAGN,SAAS,CAAC,MAAM;AACd,UAAE;AACF,YAAI;AAAG,4BAAkB,MAAM,qBAAqB,yBAAyB,eAAe;AAC5F,6BAAqB;AACrB,cAAM,kBAAkB,KAAK;AAC7B,YAAI,OAAO,oBAAoB,UAAU;AACvC,sBAAY;AAAA,YACV,WAAW;AAAA,YACX,cAAc,CAAC,OAAO,EAAE,OAAO,cAAc,cAAc,iBAAiB;AAAA,YAC5E;AAAA;AAAA;AAGJ,uBAAe;AACf,kBAAU;AAAA;AAAA,MAEZ,MAAK;AAAA,MACL,UAAU;AAAA;AAGhB,SAAO,qCAAC,OAAD;AAAA,IAAK,OAAO,EAAE,OAAO;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/parts/Icon.js
CHANGED
|
@@ -1,29 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
const Icon = props => {
|
|
6
|
-
const {
|
|
7
|
-
item
|
|
8
|
-
} = props;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext } from "react";
|
|
3
|
+
import { cx } from "@elliemae/ds-utilities";
|
|
4
|
+
import TreeViewContext from "../TreeViewContext";
|
|
5
|
+
const Icon = (props) => {
|
|
6
|
+
const { item } = props;
|
|
9
7
|
const isGroupOrHasChildrens = item.isGroup || Array.isArray(item.children) && item.children.length > 0;
|
|
10
8
|
const ctx = useContext(TreeViewContext);
|
|
11
9
|
const {
|
|
12
|
-
props: {
|
|
13
|
-
groupIcon,
|
|
14
|
-
itemIcon
|
|
15
|
-
}
|
|
10
|
+
props: { groupIcon, itemIcon }
|
|
16
11
|
} = ctx;
|
|
17
12
|
const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;
|
|
18
|
-
if (!icon)
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
// untill then, just eslint-ignore and move on
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment
|
|
25
|
-
className: cx(icon.props.className, 'tree-item-icon')
|
|
13
|
+
if (!icon)
|
|
14
|
+
return null;
|
|
15
|
+
return React2.cloneElement(icon, {
|
|
16
|
+
"data-testid": isGroupOrHasChildrens ? "tree-item-group-icon" : "tree-item-icon",
|
|
17
|
+
className: cx(icon.props.className, "tree-item-icon")
|
|
26
18
|
});
|
|
27
19
|
};
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
export {
|
|
21
|
+
Icon
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=Icon.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Icon.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { cx } from '@elliemae/ds-utilities';\n\nimport TreeViewContext from '../TreeViewContext';\nimport type { DSTreeviewT } from '../react-desc-prop-types';\ninterface PropsT {\n item: DSTreeviewT.Item;\n}\nexport const Icon = (props: PropsT): JSX.Element | null => {\n const { item } = props;\n const isGroupOrHasChildrens = item.isGroup || (Array.isArray(item.children) && item.children.length > 0);\n const ctx = useContext(TreeViewContext);\n const {\n props: { groupIcon, itemIcon },\n } = ctx;\n const icon = isGroupOrHasChildrens ? groupIcon : itemIcon;\n if (!icon) return null;\n\n return React.cloneElement(icon, {\n 'data-testid': isGroupOrHasChildrens ? 'tree-item-group-icon' : 'tree-item-icon',\n // legacy class-name way of handling things,\n // this will eventually be deprecated in favor of styled components\n // untill then, just eslint-ignore and move on\n // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment\n className: cx(icon.props.className, 'tree-item-icon'),\n });\n};\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AAKO,MAAM,OAAO,CAAC,UAAsC;AACzD,QAAM,EAAE,SAAS;AACjB,QAAM,wBAAwB,KAAK,WAAY,MAAM,QAAQ,KAAK,aAAa,KAAK,SAAS,SAAS;AACtG,QAAM,MAAM,WAAW;AACvB,QAAM;AAAA,IACJ,OAAO,EAAE,WAAW;AAAA,MAClB;AACJ,QAAM,OAAO,wBAAwB,YAAY;AACjD,MAAI,CAAC;AAAM,WAAO;AAElB,SAAO,OAAM,aAAa,MAAM;AAAA,IAC9B,eAAe,wBAAwB,yBAAyB;AAAA,IAKhE,WAAW,GAAG,KAAK,MAAM,WAAW;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,39 +1,26 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
4
3
|
const getItemNestingLeftPadding = (level, opts) => {
|
|
5
|
-
const {
|
|
6
|
-
spaceForNestingLevel = 1.5
|
|
7
|
-
} = opts;
|
|
4
|
+
const { spaceForNestingLevel = 1.5 } = opts;
|
|
8
5
|
const groupLeftPadding = spaceForNestingLevel * (level - 1);
|
|
9
|
-
const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
return finalLeftPadding > 0 ? "".concat(finalLeftPadding, "em") : '0';
|
|
6
|
+
const finalLeftPadding = groupLeftPadding + spaceForNestingLevel - 0.1;
|
|
7
|
+
return finalLeftPadding > 0 ? `${finalLeftPadding}em` : "0";
|
|
13
8
|
};
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
const {
|
|
17
|
-
item,
|
|
18
|
-
spaceForNestingLevel
|
|
19
|
-
} = props;
|
|
20
|
-
const {
|
|
21
|
-
treeDepth
|
|
22
|
-
} = item;
|
|
23
|
-
|
|
9
|
+
const NestingSpace = (props) => {
|
|
10
|
+
const { item, spaceForNestingLevel } = props;
|
|
11
|
+
const { treeDepth } = item;
|
|
24
12
|
if (treeDepth) {
|
|
25
13
|
const itemNestingLeftPadding = getItemNestingLeftPadding(treeDepth - 1, {
|
|
26
14
|
spaceForNestingLevel
|
|
27
15
|
});
|
|
28
|
-
return
|
|
16
|
+
return /* @__PURE__ */ React2.createElement("div", {
|
|
29
17
|
"data-testid": "tree-item-nested-space",
|
|
30
|
-
style: {
|
|
31
|
-
width: itemNestingLeftPadding
|
|
32
|
-
}
|
|
18
|
+
style: { width: itemNestingLeftPadding }
|
|
33
19
|
});
|
|
34
20
|
}
|
|
35
|
-
|
|
36
21
|
return null;
|
|
37
22
|
};
|
|
38
|
-
|
|
39
|
-
|
|
23
|
+
export {
|
|
24
|
+
NestingSpace
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=NestingSpace.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/NestingSpace.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAGA,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,qCAAC,OAAD;AAAA,MAAK,eAAY;AAAA,MAAyB,OAAO,EAAE,OAAO;AAAA;AAAA;AAEnE,SAAO;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,45 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useContext, useCallback, useMemo } from
|
|
3
|
-
import { DSRadio } from
|
|
4
|
-
import TreeViewContext from
|
|
5
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useContext, useCallback, useMemo } from "react";
|
|
3
|
+
import { DSRadio } from "@elliemae/ds-form";
|
|
4
|
+
import TreeViewContext from "../TreeViewContext";
|
|
6
5
|
function RadioSelectable(props) {
|
|
7
|
-
const {
|
|
8
|
-
item,
|
|
9
|
-
itemIndex
|
|
10
|
-
} = props;
|
|
6
|
+
const { item, itemIndex } = props;
|
|
11
7
|
const ctx = useContext(TreeViewContext);
|
|
12
8
|
const {
|
|
13
|
-
props: {
|
|
14
|
-
|
|
15
|
-
isItemDisabled
|
|
16
|
-
},
|
|
17
|
-
virtualListHelpers: {
|
|
18
|
-
scrollToIndex
|
|
19
|
-
},
|
|
9
|
+
props: { onSelectionChange, isItemDisabled },
|
|
10
|
+
virtualListHelpers: { scrollToIndex },
|
|
20
11
|
uniqueTreeViewUUID,
|
|
21
12
|
selectedCheckboxes,
|
|
22
13
|
setSelectedCheckboxes
|
|
23
14
|
} = ctx;
|
|
24
|
-
const {
|
|
25
|
-
id
|
|
26
|
-
} = item;
|
|
15
|
+
const { id } = item;
|
|
27
16
|
const onRadioChange = useCallback(() => {
|
|
28
|
-
const newSelectionHasmap = {
|
|
29
|
-
[id]: true
|
|
30
|
-
};
|
|
17
|
+
const newSelectionHasmap = { [id]: true };
|
|
31
18
|
setSelectedCheckboxes(newSelectionHasmap);
|
|
32
19
|
const indexAndScrollTo = {
|
|
33
20
|
scrollToItem: () => {
|
|
34
|
-
if (item.virtualIndex)
|
|
21
|
+
if (item.virtualIndex)
|
|
22
|
+
scrollToIndex(item.virtualIndex);
|
|
35
23
|
},
|
|
36
24
|
itemIndex
|
|
37
25
|
};
|
|
38
|
-
if (onSelectionChange)
|
|
26
|
+
if (onSelectionChange)
|
|
27
|
+
onSelectionChange(newSelectionHasmap, item, indexAndScrollTo);
|
|
39
28
|
}, [id, setSelectedCheckboxes, itemIndex, onSelectionChange, item, scrollToIndex]);
|
|
40
|
-
const radioName = useMemo(() =>
|
|
29
|
+
const radioName = useMemo(() => `radios-${uniqueTreeViewUUID}`, [uniqueTreeViewUUID]);
|
|
41
30
|
const isDisabled = useMemo(() => isItemDisabled(item), [item, isItemDisabled]);
|
|
42
|
-
return
|
|
31
|
+
return /* @__PURE__ */ React2.createElement(DSRadio, {
|
|
43
32
|
checked: selectedCheckboxes[id] === true,
|
|
44
33
|
name: radioName,
|
|
45
34
|
disabled: isDisabled,
|
|
@@ -49,5 +38,8 @@ function RadioSelectable(props) {
|
|
|
49
38
|
tabIndex: 0
|
|
50
39
|
});
|
|
51
40
|
}
|
|
52
|
-
|
|
53
|
-
export {
|
|
41
|
+
var RadioSelectable_default = RadioSelectable;
|
|
42
|
+
export {
|
|
43
|
+
RadioSelectable_default as default
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=RadioSelectable.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RadioSelectable.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAMA,yBAAyB,OAAe;AACtC,QAAM,EAAE,MAAM,cAAc;AAE5B,QAAM,MAAM,WAAW;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,YAAY,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,QAAQ,MAAM,UAAU,sBAAsB,CAAC;AAEjE,QAAM,aAAa,QAAQ,MAAM,eAAe,OAAO,CAAC,MAAM;AAE9D,SACE,qCAAC,SAAD;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
|
+
}
|