@neovici/cosmoz-treenode-navigator 6.0.2 → 7.0.1

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.
Files changed (33) hide show
  1. package/README.md +4 -12
  2. package/dist/cosmoz-treenode-button-view.d.ts +2 -0
  3. package/dist/cosmoz-treenode-button-view.d.ts.map +1 -0
  4. package/dist/cosmoz-treenode-button-view.js +198 -0
  5. package/dist/cosmoz-treenode-button-view.js.map +1 -0
  6. package/dist/cosmoz-treenode-button-view.styles.d.ts +3 -0
  7. package/dist/cosmoz-treenode-button-view.styles.d.ts.map +1 -0
  8. package/dist/cosmoz-treenode-button-view.styles.js +216 -0
  9. package/dist/cosmoz-treenode-button-view.styles.js.map +1 -0
  10. package/dist/cosmoz-treenode-navigator.d.ts +2 -0
  11. package/dist/cosmoz-treenode-navigator.d.ts.map +1 -0
  12. package/dist/cosmoz-treenode-navigator.js +246 -0
  13. package/dist/cosmoz-treenode-navigator.js.map +1 -0
  14. package/dist/cosmoz-treenode-navigator.styles.d.ts +3 -0
  15. package/dist/cosmoz-treenode-navigator.styles.d.ts.map +1 -0
  16. package/{cosmoz-treenode-navigator.styles.js → dist/cosmoz-treenode-navigator.styles.js} +11 -7
  17. package/dist/cosmoz-treenode-navigator.styles.js.map +1 -0
  18. package/dist/hooks/useKeyDown.d.ts +2 -0
  19. package/dist/hooks/useKeyDown.d.ts.map +1 -0
  20. package/dist/hooks/useKeyDown.js +16 -0
  21. package/dist/hooks/useKeyDown.js.map +1 -0
  22. package/dist/util/helpers.d.ts +51 -0
  23. package/dist/util/helpers.d.ts.map +1 -0
  24. package/dist/util/helpers.js +125 -0
  25. package/dist/util/helpers.js.map +1 -0
  26. package/package.json +61 -21
  27. package/test/data/basicTree.js +34 -34
  28. package/test/data/rtlTest.js +6 -7
  29. package/cosmoz-treenode-button-view.js +0 -445
  30. package/cosmoz-treenode-navigator.js +0 -297
  31. package/helpers.js +0 -124
  32. package/test/cosmoz-treenode-button-view.test.js +0 -52
  33. package/test/cosmoz-treenode-navigator.test.js +0 -102
package/README.md CHANGED
@@ -1,13 +1,11 @@
1
1
  # cosmoz-treenode-navigator
2
2
 
3
-
4
3
  [![Build Status](https://github.com/Neovici/cosmoz-treenode-navigator/workflows/Github%20CI/badge.svg)](https://github.com/Neovici/cosmoz-treenode-navigator/actions?workflow=Github+CI)
5
4
  [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
6
5
 
7
- cosmoz-treenode-navigator is a Polymer component that lets you navigate and search through hierarchically structured data-nodes and select one of them.
8
-
6
+ cosmoz-treenode-navigator is a PionJS-based component that lets you navigate and search through hierarchically structured data-nodes and select one of them.
9
7
 
10
- It needs an object structure which looks for example like this in JSON:
8
+ It needs an object structure which looks, for example, like this in JSON:
11
9
 
12
10
  ```json
13
11
  {
@@ -16,18 +14,14 @@ It needs an object structure which looks for example like this in JSON:
16
14
  "children": {
17
15
  "7": {
18
16
  "name": "child seven",
19
- "children": {
20
-
21
- }
17
+ "children": {}
22
18
  },
23
19
  "8": {
24
20
  "name": "child eight",
25
21
  "children": {
26
22
  "9": {
27
23
  "name": "child nine",
28
- "children": {
29
-
30
- }
24
+ "children": {}
31
25
  }
32
26
  }
33
27
  }
@@ -37,5 +31,3 @@ It needs an object structure which looks for example like this in JSON:
37
31
  ```
38
32
 
39
33
  The property names "name" and "children" are configurable in the component through the setting of "childProperty" and "comparisonProperty".
40
-
41
-
@@ -0,0 +1,2 @@
1
+ import './cosmoz-treenode-navigator';
2
+ //# sourceMappingURL=cosmoz-treenode-button-view.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cosmoz-treenode-button-view.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"AAaA,OAAO,6BAA6B,CAAC"}
@@ -0,0 +1,198 @@
1
+ import { component, lift, useEffect, useMemo, useProperty, useRef, useState, } from '@pionjs/pion';
2
+ import { html } from 'lit-html';
3
+ import { ref } from 'lit/directives/ref.js';
4
+ import style from './cosmoz-treenode-button-view.styles';
5
+ import './cosmoz-treenode-navigator';
6
+ import { useKeyDown } from './hooks/useKeyDown';
7
+ import { getTreePathParts } from './util/helpers';
8
+ import { when } from 'lit-html/directives/when.js';
9
+ import { debounce$ } from '@neovici/cosmoz-utils/promise';
10
+ const CosmozNodeButtonView = ({ tree, multiSelection = false, dialogText, buttonTextPlaceholder, searchPlaceholder, noReset = false, searchGlobalPlaceholder, searchMinLength, }) => {
11
+ const dialogRef = useRef(null);
12
+ const searchInputRef = useRef(null);
13
+ const [highlightedNode, setHighlightedNode] = useProperty('highlightedNode');
14
+ const [nodesOnNodePath, setNodesOnNodePath] = useProperty('nodesOnNodePath', []);
15
+ const [opened, setOpened] = useState(false);
16
+ const [selectedNodes, setSelectedNodes] = useState([]);
17
+ useEffect(() => {
18
+ if (dialogRef.current) {
19
+ searchInputRef.current = dialogRef.current
20
+ .querySelector('cosmoz-treenode-navigator')
21
+ ?.shadowRoot?.querySelector('cosmoz-input');
22
+ }
23
+ }, [dialogRef.current]);
24
+ const buttonLabel = useMemo(() => {
25
+ if (!Array.isArray(nodesOnNodePath) || nodesOnNodePath.length === 0) {
26
+ return buttonTextPlaceholder || '';
27
+ }
28
+ return nodesOnNodePath
29
+ .filter((n) => n)
30
+ .map((part) => part[tree.searchProperty])
31
+ .join(' / ');
32
+ }, [nodesOnNodePath, tree]);
33
+ const reset = () => {
34
+ setNodesOnNodePath([]);
35
+ setSelectedNodes([]);
36
+ setHighlightedNode(null);
37
+ };
38
+ const enableReset = !noReset && !!highlightedNode;
39
+ const clearItemSelection = ({ item, ev }) => {
40
+ setSelectedNodes(selectedNodes.filter((node) => node !== item));
41
+ ev.preventDefault();
42
+ ev.stopPropagation();
43
+ };
44
+ const getChipText = (node) => {
45
+ return node.name;
46
+ };
47
+ const showSelectedNodes = (multiSelection, selectedNodesLength) => {
48
+ return multiSelection && selectedNodesLength > 0;
49
+ };
50
+ const refit = debounce$(() => {
51
+ dialogRef.current?.fit?.();
52
+ }, 50);
53
+ const focusSearch = () => {
54
+ if (searchInputRef.current) {
55
+ searchInputRef.current.focus();
56
+ }
57
+ };
58
+ const onOpen = () => {
59
+ dialogRef.current?.showModal();
60
+ setOpened(true);
61
+ setTimeout(focusSearch, 0);
62
+ };
63
+ const onClose = () => {
64
+ setOpened(false);
65
+ dialogRef.current?.close();
66
+ };
67
+ useKeyDown('Escape', onClose);
68
+ const selectNode = () => {
69
+ if (!highlightedNode?.pathLocator) {
70
+ return;
71
+ }
72
+ setNodesOnNodePath(getTreePathParts(highlightedNode.pathLocator, tree));
73
+ if (multiSelection &&
74
+ !selectedNodes.some((n) => n.pathLocator === highlightedNode.pathLocator)) {
75
+ setSelectedNodes([...selectedNodes, highlightedNode]);
76
+ }
77
+ onClose();
78
+ };
79
+ return html `
80
+ <div class="actions" part="actions">
81
+ <button
82
+ class="action-open"
83
+ type="button"
84
+ @click=${onOpen}
85
+ part="action-open"
86
+ >
87
+ <div class="path-text">
88
+ <span>${buttonLabel}</span>
89
+ </div>
90
+ </button>
91
+ ${when(enableReset, () => html ` <button
92
+ @click=${reset}
93
+ class="action-reset"
94
+ part="action-reset"
95
+ >
96
+ <svg
97
+ width="10"
98
+ height="9"
99
+ viewBox="0 0 10 9"
100
+ stroke="currentColor"
101
+ xmlns="http://www.w3.org/2000/svg"
102
+ >
103
+ <line
104
+ x1="8.53033"
105
+ y1="0.53033"
106
+ x2="1.53033"
107
+ y2="7.53033"
108
+ stroke-width="1.5"
109
+ ></line>
110
+ <line
111
+ x1="8.46967"
112
+ y1="7.53033"
113
+ x2="1.46967"
114
+ y2="0.530331"
115
+ stroke-width="1.5"
116
+ ></line>
117
+ </svg>
118
+ </button>`)}
119
+ </div>
120
+ ${when(showSelectedNodes(multiSelection, selectedNodes.length), () => html `
121
+ <div id="chips" part="chips" class="row">
122
+ ${selectedNodes.map((item) => html `
123
+ <div class="chip">
124
+ <span>${getChipText(item)}</span>
125
+ <button
126
+ class="chip__clear"
127
+ @click=${(ev) => clearItemSelection({ item, ev })}
128
+ type="button"
129
+ >
130
+ &times;
131
+ </button>
132
+ </div>
133
+ `)}
134
+ </div>
135
+ `)}
136
+
137
+ <dialog
138
+ class="dialog"
139
+ part="dialog"
140
+ ${ref((el) => {
141
+ dialogRef.current = el;
142
+ })}
143
+ >
144
+ <header class="dialog-header" part="header">
145
+ <h1 class="dialog-heading" part="heading">${dialogText}</h1>
146
+ </header>
147
+ <main class="dialog-main" part="main">
148
+ <cosmoz-treenode-navigator
149
+ id="treeNavigator"
150
+ class="dialog-treenode-navigator no-padding"
151
+ .highlightedNode=${highlightedNode}
152
+ @highlighted-node-changed=${lift(setHighlightedNode)}
153
+ .searchPlaceholder=${searchPlaceholder}
154
+ .searchGlobalPlaceholder=${searchGlobalPlaceholder}
155
+ .searchMinLength=${searchMinLength}
156
+ .tree=${tree}
157
+ .opened=${opened}
158
+ .nodesOnNodePath=${nodesOnNodePath}
159
+ @node-dblclicked=${selectNode}
160
+ @on-data-plane-changed=${refit}
161
+ >
162
+ <slot></slot>
163
+ </cosmoz-treenode-navigator>
164
+ </main>
165
+ <footer class="dialog-footer" part="footer">
166
+ <p class="dialog-footer-button-container">
167
+ <button
168
+ ?disabled=${!highlightedNode?.pathLocator}
169
+ autofocus
170
+ class="dialog-footer-button"
171
+ part="select-button"
172
+ @click=${selectNode}
173
+ >
174
+ Select
175
+ </button>
176
+ <button
177
+ class="dialog-footer-button"
178
+ part="cancel-button"
179
+ @click=${onClose}
180
+ >
181
+ Cancel
182
+ </button>
183
+ </p>
184
+ </footer>
185
+ </dialog>
186
+ `;
187
+ };
188
+ CosmozNodeButtonView.observedAttributes = [
189
+ 'button-text-placeholder',
190
+ 'dialog-text',
191
+ 'search-placeholder',
192
+ 'search-global-placeholder',
193
+ 'no-reset',
194
+ ];
195
+ customElements.define('cosmoz-treenode-button-view', component(CosmozNodeButtonView, {
196
+ styleSheets: [style],
197
+ }));
198
+ //# sourceMappingURL=cosmoz-treenode-button-view.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cosmoz-treenode-button-view.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ declare const _default: string;
2
+ export default _default;
3
+ //# sourceMappingURL=cosmoz-treenode-button-view.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cosmoz-treenode-button-view.styles.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":";AAEA,wBAqNE"}
@@ -0,0 +1,216 @@
1
+ import { css } from '@pionjs/pion';
2
+ export default css `
3
+ h1,
4
+ h2 {
5
+ font-weight: 500;
6
+ }
7
+
8
+ button {
9
+ position: relative;
10
+ overflow: hidden;
11
+ outline: none;
12
+
13
+ cursor: pointer;
14
+ border-radius: 500px;
15
+ }
16
+
17
+ button:after {
18
+ content: '';
19
+ position: absolute;
20
+ top: 50%;
21
+ left: 50%;
22
+ width: 5px;
23
+ height: 5px;
24
+ background: rgba(189, 195, 199, 0.5);
25
+ opacity: 0;
26
+ border-radius: 100%;
27
+ transform: scale(1, 1) translate(-50%);
28
+ transform-origin: 50% 50%;
29
+ }
30
+
31
+ @keyframes ripple {
32
+ 0% {
33
+ transform: scale(0, 0);
34
+ opacity: 1;
35
+ }
36
+ 20% {
37
+ transform: scale(25, 25);
38
+ opacity: 1;
39
+ }
40
+ 100% {
41
+ opacity: 0;
42
+ transform: scale(40, 40);
43
+ }
44
+ }
45
+
46
+ button:not(:disabled):active::after {
47
+ animation: ripple 1s ease-out;
48
+ }
49
+
50
+ .actions {
51
+ display: flex;
52
+ }
53
+
54
+ .actions button {
55
+ display: inline-block;
56
+
57
+ padding: 10px 16px 10px 16px;
58
+ margin: 14px 14px 12px 14px;
59
+
60
+ color: #101010;
61
+ font-size: 14px;
62
+
63
+ background-color: white;
64
+ border: 0px none rgb(16, 16, 16);
65
+ box-shadow: 0 2px 4px 0 #e5e5e5;
66
+
67
+ transition-behavior: normal, normal;
68
+ transition-delay: 0s, 0s;
69
+ transition-duration: 0.28s, 0.3s;
70
+ transition-property: box-shadow, background-color;
71
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), ease;
72
+ }
73
+
74
+ .actions button:hover {
75
+ box-shadow: 0 2px 3px 0 rgb(0 0 0 / 30%);
76
+ }
77
+
78
+ .action-open {
79
+ flex: auto;
80
+ }
81
+
82
+ .path-text {
83
+ display: block;
84
+
85
+ overflow: hidden;
86
+ white-space: nowrap;
87
+
88
+ text-overflow: ellipsis;
89
+ direction: rtl;
90
+ }
91
+
92
+ .action-reset {
93
+ flex-basis: 100px;
94
+ flex-grow: 0;
95
+ flex-shrink: 0;
96
+ }
97
+
98
+ .action-open + .action-reset {
99
+ margin-left: 0;
100
+ }
101
+
102
+ /* Safari only css fix */
103
+
104
+ _:matches(x),
105
+ _:lang(x) + _:-webkit-full-screen-document,
106
+ .pathToNode span {
107
+ display: inline-block;
108
+ }
109
+
110
+ #chips {
111
+ display: flex;
112
+ flex-wrap: wrap;
113
+ padding: 20px;
114
+ overflow-y: auto;
115
+ max-height: 30vh;
116
+ }
117
+
118
+ .chip {
119
+ display: flex;
120
+ margin: 1px 4px 1px 0;
121
+ padding: 0.25rem 0.45rem 0.25rem 0.5rem;
122
+
123
+ gap: 0.25rem;
124
+
125
+ border-radius: 500px;
126
+ background-color: #e0e0e0;
127
+ white-space: nowrap;
128
+ overflow: hidden;
129
+ align-items: center;
130
+ }
131
+
132
+ .chip .chip__clear {
133
+ margin: 0 0 0 0.5rem;
134
+
135
+ background: #a6a6a6;
136
+ border: none;
137
+ cursor: pointer;
138
+ font-size: 1rem;
139
+ color: white;
140
+ border-radius: 50%;
141
+ }
142
+
143
+ .chip > span {
144
+ color: #424242;
145
+ margin-left: 10px;
146
+ font-size: 13px;
147
+ overflow: hidden;
148
+ text-overflow: ellipsis;
149
+ }
150
+
151
+ .chip iron-icon {
152
+ margin: 2px 4px;
153
+ color: #cdcdcd;
154
+ background-color: #a6a6a6;
155
+ border-radius: 500px;
156
+ cursor: pointer;
157
+ min-width: 16px;
158
+ width: 16px;
159
+ min-height: 16px;
160
+ height: 16px;
161
+ }
162
+
163
+ .dialog {
164
+ width: 550px;
165
+ min-width: 250px;
166
+
167
+ padding: 0;
168
+ border-radius: 10px;
169
+ border: none;
170
+ }
171
+
172
+ .dialog::backdrop {
173
+ background: rgba(0, 0, 0, 0.5);
174
+ }
175
+
176
+ .dialog-header {
177
+ padding: 10px 10px 0 10px;
178
+ }
179
+
180
+ .dialog-heading {
181
+ margin-bottom: 2rem;
182
+ padding: 0 8px;
183
+ font-size: 1.25rem;
184
+ font-weight: normal;
185
+ }
186
+
187
+ .dialog-footer {
188
+ padding: 0 10px 10px 10px;
189
+ text-align: right;
190
+ }
191
+
192
+ .dialog-footer-button-container {
193
+ margin: 0;
194
+ }
195
+
196
+ .dialog-footer-button {
197
+ margin: 0 0.25rem;
198
+ padding: 8px 14px;
199
+ background: none;
200
+ border: 1px solid rgb(164, 171, 174);
201
+ font-size: 15px;
202
+ cursor: pointer;
203
+ user-select: none;
204
+ }
205
+
206
+ .dialog-footer-button:not(:disabled):active {
207
+ border: 1px outset rgb(164, 171, 174);
208
+ }
209
+
210
+ .dialog-footer-button:disabled {
211
+ color: #a8a8a8;
212
+ background-color: #f2f2f2;
213
+ cursor: default;
214
+ }
215
+ `;
216
+ //# sourceMappingURL=cosmoz-treenode-button-view.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cosmoz-treenode-button-view.styles.js","sourceRoot":"","sources":["../src/cosmoz-treenode-button-view.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAEnC,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqNjB,CAAC"}
@@ -0,0 +1,2 @@
1
+ import '@neovici/cosmoz-input';
2
+ //# sourceMappingURL=cosmoz-treenode-navigator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cosmoz-treenode-navigator.d.ts","sourceRoot":"","sources":["../src/cosmoz-treenode-navigator.ts"],"names":[],"mappings":"AAeA,OAAO,uBAAuB,CAAC"}