@itwin/presentation-hierarchies-react 2.0.0-alpha.31 → 2.0.0-alpha.32
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/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @itwin/presentation-hierarchies-react
|
|
2
2
|
|
|
3
|
+
## 2.0.0-alpha.32
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1045](https://github.com/iTwin/presentation/pull/1045): Fix highlight matching in `useNodeHighlighting` hook. Highlighting now works when the `highlightText` contains special characters (`[`, `+`, `*`, etc.).
|
|
8
|
+
|
|
3
9
|
## 2.0.0-alpha.31
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UseNodeHighlighting.d.ts","sourceRoot":"","sources":["../../../src/presentation-hierarchies-react/UseNodeHighlighting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE1D;;;GAGG;AACH,UAAU,wBAAwB;IAChC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,UAAU,yBAAyB;IACjC,qDAAqD;IACrD,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,KAAK,CAAC,YAAY,CAAC;CACnE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,aAAa,EAAE,EAAE,wBAAwB,GAAG,yBAAyB,
|
|
1
|
+
{"version":3,"file":"UseNodeHighlighting.d.ts","sourceRoot":"","sources":["../../../src/presentation-hierarchies-react/UseNodeHighlighting.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAC;AAE1D;;;GAGG;AACH,UAAU,wBAAwB;IAChC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,UAAU,yBAAyB;IACjC,qDAAqD;IACrD,QAAQ,EAAE,CAAC,IAAI,EAAE,yBAAyB,KAAK,KAAK,CAAC,YAAY,CAAC;CACnE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,aAAa,EAAE,EAAE,wBAAwB,GAAG,yBAAyB,CAgD1G"}
|
|
@@ -13,10 +13,23 @@ export function useNodeHighlighting({ highlightText }) {
|
|
|
13
13
|
if (!highlightText) {
|
|
14
14
|
return _jsx("span", { children: node.label });
|
|
15
15
|
}
|
|
16
|
-
const matchedIndexes =
|
|
16
|
+
const matchedIndexes = new Array();
|
|
17
|
+
const nodeLabel = node.label.toLocaleLowerCase();
|
|
18
|
+
const searchText = highlightText.toLocaleLowerCase();
|
|
19
|
+
let fromPosition = 0;
|
|
20
|
+
// Find all occurrences of the search text in the node label
|
|
21
|
+
while (true) {
|
|
22
|
+
const foundIndex = nodeLabel.indexOf(searchText, fromPosition);
|
|
23
|
+
if (foundIndex === -1) {
|
|
24
|
+
break;
|
|
25
|
+
}
|
|
26
|
+
matchedIndexes.push(foundIndex);
|
|
27
|
+
fromPosition = foundIndex + searchText.length;
|
|
28
|
+
}
|
|
17
29
|
if (matchedIndexes.length === 0) {
|
|
18
30
|
return _jsx("span", { children: node.label });
|
|
19
31
|
}
|
|
32
|
+
// Create the final label with highlighted parts
|
|
20
33
|
const finalLabel = new Array();
|
|
21
34
|
let lastAddedPosition = 0;
|
|
22
35
|
for (let i = 0; i < matchedIndexes.length; ++i) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UseNodeHighlighting.js","sourceRoot":"","sources":["../../../src/presentation-hierarchies-react/UseNodeHighlighting.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAqBpC;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,aAAa,EAA4B;IAC7E,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAA+B,EAAE,EAAE;QAClC,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO,yBAAO,IAAI,CAAC,KAAK,GAAQ,CAAC;QACnC,CAAC;
|
|
1
|
+
{"version":3,"file":"UseNodeHighlighting.js","sourceRoot":"","sources":["../../../src/presentation-hierarchies-react/UseNodeHighlighting.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAqBpC;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,aAAa,EAA4B;IAC7E,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAA+B,EAAE,EAAE;QAClC,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO,yBAAO,IAAI,CAAC,KAAK,GAAQ,CAAC;QACnC,CAAC;QAED,MAAM,cAAc,GAAG,IAAI,KAAK,EAAU,CAAC;QAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;QACjD,MAAM,UAAU,GAAG,aAAa,CAAC,iBAAiB,EAAE,CAAC;QACrD,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,4DAA4D;QAC5D,OAAO,IAAI,EAAE,CAAC;YACZ,MAAM,UAAU,GAAG,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;YAC/D,IAAI,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC;gBACtB,MAAM;YACR,CAAC;YACD,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAChC,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;QAChD,CAAC;QAED,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAChC,OAAO,yBAAO,IAAI,CAAC,KAAK,GAAQ,CAAC;QACnC,CAAC;QAED,gDAAgD;QAChD,MAAM,UAAU,GAAG,IAAI,KAAK,EAAqB,CAAC;QAClD,IAAI,iBAAiB,GAAG,CAAC,CAAC;QAC1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC;YAC/C,MAAM,YAAY,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;YACvC,IAAI,YAAY,GAAG,iBAAiB,EAAE,CAAC;gBACrC,UAAU,CAAC,IAAI,CAAC,yBAA2B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,YAAY,CAAC,IAArE,UAAU,CAAC,EAAE,CAAgE,CAAC,CAAC;gBAC1G,iBAAiB,GAAG,YAAY,CAAC;YACnC,CAAC;YACD,MAAM,WAAW,GAAG,YAAY,GAAG,aAAa,CAAC,MAAM,CAAC;YACxD,UAAU,CAAC,IAAI,CAAC,yBAA2B,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,WAAW,CAAC,IAApE,UAAU,CAAC,EAAE,CAA+D,CAAC,CAAC;YACzG,iBAAiB,GAAG,WAAW,CAAC;QAClC,CAAC;QACD,IAAI,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC1C,UAAU,CAAC,IAAI,CAAC,yBAAmD,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAA/E,UAAU,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,CAAkD,CAAC,CAAC;QACtH,CAAC;QAED,OAAO,4BAAG,UAAU,GAAI,CAAC;IAC3B,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACtB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport { useCallback } from \"react\";\nimport { PresentationHierarchyNode } from \"./TreeNode.js\";\n\n/**\n * Props for `useNodeHighlighting` hook.\n * @alpha\n */\ninterface UseNodeHighlightingProps {\n /** Text that should be highlighted */\n highlightText?: string;\n}\n\n/**\n * Result of `useNodeHighlighting` hook.\n * @alpha\n */\ninterface UseNodeHighlightingResult {\n /** Function that creates highlighted node labels. */\n getLabel: (node: PresentationHierarchyNode) => React.ReactElement;\n}\n\n/**\n * A react hook that helps create highlighted node labels based on provided highlight.\n * @alpha\n */\nexport function useNodeHighlighting({ highlightText }: UseNodeHighlightingProps): UseNodeHighlightingResult {\n const getLabel = useCallback(\n (node: PresentationHierarchyNode) => {\n if (!highlightText) {\n return <span>{node.label}</span>;\n }\n\n const matchedIndexes = new Array<number>();\n const nodeLabel = node.label.toLocaleLowerCase();\n const searchText = highlightText.toLocaleLowerCase();\n let fromPosition = 0;\n // Find all occurrences of the search text in the node label\n while (true) {\n const foundIndex = nodeLabel.indexOf(searchText, fromPosition);\n if (foundIndex === -1) {\n break;\n }\n matchedIndexes.push(foundIndex);\n fromPosition = foundIndex + searchText.length;\n }\n\n if (matchedIndexes.length === 0) {\n return <span>{node.label}</span>;\n }\n\n // Create the final label with highlighted parts\n const finalLabel = new Array<React.JSX.Element>();\n let lastAddedPosition = 0;\n for (let i = 0; i < matchedIndexes.length; ++i) {\n const matchedIndex = matchedIndexes[i];\n if (matchedIndex > lastAddedPosition) {\n finalLabel.push(<span key={`normal-${i}`}>{node.label.substring(lastAddedPosition, matchedIndex)}</span>);\n lastAddedPosition = matchedIndex;\n }\n const endingPlace = matchedIndex + highlightText.length;\n finalLabel.push(<mark key={`marked-${i}`}>{node.label.substring(lastAddedPosition, endingPlace)}</mark>);\n lastAddedPosition = endingPlace;\n }\n if (lastAddedPosition < node.label.length) {\n finalLabel.push(<span key={`normal-${matchedIndexes.length + 1}`}>{node.label.substring(lastAddedPosition)}</span>);\n }\n\n return <>{finalLabel}</>;\n },\n [highlightText],\n );\n\n return { getLabel };\n}\n"]}
|