From 88d78f1b316c7be06ba6c530fff65eb7666df937 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Mon, 2 Mar 2020 22:57:13 +0530
Subject: [PATCH 01/10] Added es2020 support
---
tsconfig.json | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/tsconfig.json b/tsconfig.json
index 9d50cffaf1b..993282f52c0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -42,7 +42,9 @@
// ESNext auto includes previous versions all the way back to es5
"esnext",
// includes support for browser APIs
- "dom"
+ "dom",
+ // includes support for es2020 specification
+ "es2020"
],
// Specifies where to find library definitions. When this is explicitly set,
From c306ac79bbd1eca8dee0bdcb69c7425432553aa3 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Mon, 2 Mar 2020 22:58:23 +0530
Subject: [PATCH 02/10] Added props to highlight all match in EuiHighlight
---
src/components/highlight/highlight.tsx | 69 +++++++++++++++++++++++++-
1 file changed, 67 insertions(+), 2 deletions(-)
diff --git a/src/components/highlight/highlight.tsx b/src/components/highlight/highlight.tsx
index 645d9691586..402f8dc594d 100644
--- a/src/components/highlight/highlight.tsx
+++ b/src/components/highlight/highlight.tsx
@@ -14,12 +14,18 @@ export type EuiHighlightProps = HTMLAttributes &
* Should the search be strict or not
*/
strict?: boolean;
+
+ /**
+ * Should highlight all matches
+ */
+ highlightAll?: boolean;
};
const highlight = (
searchSubject: string,
searchValue: string,
- isStrict: boolean = false
+ isStrict: boolean = false,
+ highlightAll: boolean = false
) => {
if (!searchValue) {
return searchSubject;
@@ -29,6 +35,22 @@ const highlight = (
return null;
}
+ if (highlightAll) {
+ const chunks = getHightlightWords(searchSubject, searchValue, isStrict);
+ return (
+
+ {chunks.map(chunk => {
+ const { end, highlight, start } = chunk;
+ const value = searchSubject.substr(start, end - start);
+ if (highlight) {
+ return {value};
+ }
+ return value;
+ })}
+
+ );
+ }
+
const normalizedSearchSubject: string = isStrict
? searchSubject
: searchSubject.toLowerCase();
@@ -58,16 +80,59 @@ const highlight = (
);
};
+const getHightlightWords = (
+ searchSubject: string,
+ searchValue: string,
+ isStrict: boolean
+) => {
+ const regex = new RegExp(searchValue, isStrict ? 'g' : 'gi');
+ const matches = Array.from(searchSubject.matchAll(regex), (match: any) => ({
+ start: match.index,
+ end: (match.index || 0) + match[0].length,
+ }));
+ return fillInChunks(matches, searchSubject.length);
+};
+
+export const fillInChunks = (chunksToHighlight: any[], totalLength: any) => {
+ const allChunks: Array<{
+ start: number;
+ end: number;
+ highlight: boolean;
+ }> = [];
+ const append = (start: number, end: number, highlight: boolean) => {
+ if (end - start > 0) {
+ allChunks.push({
+ start,
+ end,
+ highlight,
+ });
+ }
+ };
+ if (chunksToHighlight.length === 0) {
+ append(0, totalLength, false);
+ } else {
+ let lastIndex = 0;
+ chunksToHighlight.forEach(chunk => {
+ append(lastIndex, chunk.start, false);
+ append(chunk.start, chunk.end, true);
+ lastIndex = chunk.end;
+ });
+ append(lastIndex, totalLength, false);
+ }
+ return allChunks;
+};
+
export const EuiHighlight: FunctionComponent = ({
children,
className,
search,
strict,
+ highlightAll,
...rest
}) => {
return (
- {highlight(children, search, strict)}
+ {highlight(children, search, strict, highlightAll)}
);
};
From 92f3c93db6f386cde477389bc2fd7fc8ad97cd4d Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Mon, 2 Mar 2020 23:09:01 +0530
Subject: [PATCH 03/10] Updated changelog
---
CHANGELOG.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4035559c5d3..72b25ed13c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+- Added `highlightAll` props to `EuiHighlight` to highlight all matches ([#2957](https://github.com/elastic/eui/pull/2957))
- `EuiButton` now has a single return statement ([#2954](https://github.com/elastic/eui/pull/2954))
- Added `isSortable` props to `EuiDataGridColumn` and `EuiDataGridSchemaDetector` to mark them as un-sortable ([#2952](https://github.com/elastic/eui/pull/2952))
- Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))
From a8adff47fa637eb6b835ab854fc381fb5c3a970d Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Thu, 5 Mar 2020 10:57:34 +0530
Subject: [PATCH 04/10] removed usage of matchAll
---
src/components/highlight/highlight.tsx | 12 ++++++++----
tsconfig.json | 4 +---
2 files changed, 9 insertions(+), 7 deletions(-)
diff --git a/src/components/highlight/highlight.tsx b/src/components/highlight/highlight.tsx
index 402f8dc594d..827b47eab8f 100644
--- a/src/components/highlight/highlight.tsx
+++ b/src/components/highlight/highlight.tsx
@@ -86,10 +86,14 @@ const getHightlightWords = (
isStrict: boolean
) => {
const regex = new RegExp(searchValue, isStrict ? 'g' : 'gi');
- const matches = Array.from(searchSubject.matchAll(regex), (match: any) => ({
- start: match.index,
- end: (match.index || 0) + match[0].length,
- }));
+ const matches = [];
+ let match;
+ while ((match = regex.exec(searchSubject)) !== null) {
+ matches.push({
+ start: match.index,
+ end: (match.index || 0) + match[0].length,
+ });
+ }
return fillInChunks(matches, searchSubject.length);
};
diff --git a/tsconfig.json b/tsconfig.json
index 993282f52c0..9d50cffaf1b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -42,9 +42,7 @@
// ESNext auto includes previous versions all the way back to es5
"esnext",
// includes support for browser APIs
- "dom",
- // includes support for es2020 specification
- "es2020"
+ "dom"
],
// Specifies where to find library definitions. When this is explicitly set,
From 90ba8a39338ba82505fb6255020d11dae37651e8 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Thu, 5 Mar 2020 12:09:50 +0530
Subject: [PATCH 05/10] Added switch to highlight all in docs
---
src-docs/src/views/highlight/highlight.js | 27 ++++++++++++++++++-----
1 file changed, 22 insertions(+), 5 deletions(-)
diff --git a/src-docs/src/views/highlight/highlight.js b/src-docs/src/views/highlight/highlight.js
index fcebbe155d0..71043168a46 100644
--- a/src-docs/src/views/highlight/highlight.js
+++ b/src-docs/src/views/highlight/highlight.js
@@ -4,6 +4,7 @@ import {
EuiHighlight,
EuiFieldSearch,
EuiSpacer,
+ EuiSwitch,
} from '../../../../src/components';
export class Highlight extends Component {
@@ -12,6 +13,7 @@ export class Highlight extends Component {
this.state = {
searchValue: 'jumped over',
+ isHighlightAll: false,
};
}
@@ -22,17 +24,32 @@ export class Highlight extends Component {
});
};
+ setHighlightAll = e => {
+ this.setState({ isHighlightAll: e.target.checked });
+ };
+
render() {
- const { searchValue } = this.state;
+ const { searchValue, isHighlightAll } = this.state;
return (
-
-
- The quick brown fox jumped over the lazy dog
-
+ this.setHighlightAll(e)}
+ />
+
+ {isHighlightAll ? (
+
+ The quick brown fox jumped over the lazy dog
+
+ ) : (
+
+ The quick brown fox jumped over the lazy dog
+
+ )}
);
}
From 3b8d82f282a35144a38696ace06c233c7224785d Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Thu, 5 Mar 2020 12:11:08 +0530
Subject: [PATCH 06/10] Activated props tab on EuiHighlight
---
src-docs/src/views/highlight/highlight_example.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src-docs/src/views/highlight/highlight_example.js b/src-docs/src/views/highlight/highlight_example.js
index c22ae02fd41..87ebc10f4c7 100644
--- a/src-docs/src/views/highlight/highlight_example.js
+++ b/src-docs/src/views/highlight/highlight_example.js
@@ -31,6 +31,7 @@ export const HighlightExample = {
string, typically in response to user input.
),
+ props: { EuiHighlight },
components: { EuiHighlight },
demo: ,
},
From e7ba04994363bec18d736aef0ecc4058f1e3fe79 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Thu, 5 Mar 2020 12:23:24 +0530
Subject: [PATCH 07/10] moved destructuring to highlight function
---
src-docs/src/views/highlight/highlight.js | 2 +-
src/components/highlight/highlight.tsx | 8 ++++----
2 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/src-docs/src/views/highlight/highlight.js b/src-docs/src/views/highlight/highlight.js
index 71043168a46..b5edc053785 100644
--- a/src-docs/src/views/highlight/highlight.js
+++ b/src-docs/src/views/highlight/highlight.js
@@ -42,7 +42,7 @@ export class Highlight extends Component {
/>
{isHighlightAll ? (
-
+
The quick brown fox jumped over the lazy dog
) : (
diff --git a/src/components/highlight/highlight.tsx b/src/components/highlight/highlight.tsx
index 827b47eab8f..42c43de034e 100644
--- a/src/components/highlight/highlight.tsx
+++ b/src/components/highlight/highlight.tsx
@@ -24,8 +24,8 @@ export type EuiHighlightProps = HTMLAttributes &
const highlight = (
searchSubject: string,
searchValue: string,
- isStrict: boolean = false,
- highlightAll: boolean = false
+ isStrict: boolean,
+ highlightAll: boolean
) => {
if (!searchValue) {
return searchSubject;
@@ -130,8 +130,8 @@ export const EuiHighlight: FunctionComponent = ({
children,
className,
search,
- strict,
- highlightAll,
+ strict = false,
+ highlightAll = false,
...rest
}) => {
return (
From 6cb9a5eae67342a4c21f24e2822b8ce12cea3035 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Thu, 5 Mar 2020 12:56:06 +0530
Subject: [PATCH 08/10] replaced any[] with EuiHighlightChunk
---
src/components/highlight/highlight.tsx | 26 ++++++++++++++++++++------
1 file changed, 20 insertions(+), 6 deletions(-)
diff --git a/src/components/highlight/highlight.tsx b/src/components/highlight/highlight.tsx
index 42c43de034e..560b0e09b4e 100644
--- a/src/components/highlight/highlight.tsx
+++ b/src/components/highlight/highlight.tsx
@@ -1,6 +1,21 @@
import React, { Fragment, HTMLAttributes, FunctionComponent } from 'react';
import { CommonProps } from '../common';
+interface EuiHighlightChunk {
+ /**
+ * Start of the chunk
+ */
+ start: number;
+ /**
+ * End of the chunk
+ */
+ end: number;
+ /**
+ * Whether to highlight chunk or not
+ */
+ highlight?: boolean;
+}
+
export type EuiHighlightProps = HTMLAttributes &
CommonProps & {
children: string;
@@ -97,12 +112,11 @@ const getHightlightWords = (
return fillInChunks(matches, searchSubject.length);
};
-export const fillInChunks = (chunksToHighlight: any[], totalLength: any) => {
- const allChunks: Array<{
- start: number;
- end: number;
- highlight: boolean;
- }> = [];
+export const fillInChunks = (
+ chunksToHighlight: EuiHighlightChunk[],
+ totalLength: number
+) => {
+ const allChunks: EuiHighlightChunk[] = [];
const append = (start: number, end: number, highlight: boolean) => {
if (end - start > 0) {
allChunks.push({
From 4a23c9651df545d902270fcad92fb1f2e1755843 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Sat, 7 Mar 2020 01:35:39 +0530
Subject: [PATCH 09/10] removed export
---
src/components/highlight/highlight.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/highlight/highlight.tsx b/src/components/highlight/highlight.tsx
index 560b0e09b4e..18fa7b408f7 100644
--- a/src/components/highlight/highlight.tsx
+++ b/src/components/highlight/highlight.tsx
@@ -112,7 +112,7 @@ const getHightlightWords = (
return fillInChunks(matches, searchSubject.length);
};
-export const fillInChunks = (
+const fillInChunks = (
chunksToHighlight: EuiHighlightChunk[],
totalLength: number
) => {
From 98f6c9ca57c3716dd63f6e8f490674b5216f4b35 Mon Sep 17 00:00:00 2001
From: Ashik Meerankutty
Date: Sat, 7 Mar 2020 01:37:43 +0530
Subject: [PATCH 10/10] replaced ternary
---
src-docs/src/views/highlight/highlight.js | 12 +++---------
1 file changed, 3 insertions(+), 9 deletions(-)
diff --git a/src-docs/src/views/highlight/highlight.js b/src-docs/src/views/highlight/highlight.js
index b5edc053785..0406f5daf92 100644
--- a/src-docs/src/views/highlight/highlight.js
+++ b/src-docs/src/views/highlight/highlight.js
@@ -41,15 +41,9 @@ export class Highlight extends Component {
onChange={e => this.setHighlightAll(e)}
/>
- {isHighlightAll ? (
-
- The quick brown fox jumped over the lazy dog
-
- ) : (
-
- The quick brown fox jumped over the lazy dog
-
- )}
+
+ The quick brown fox jumped over the lazy dog
+
);
}