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 + ); }