Merge 2dd4501 into 0b48c22

package.json

@@ -59,7 +59,8 @@
         "prop-types": "~15.7.2",
         "rc-slider": "~9.2.0",
         "react-modal": "~3.11.2",
-        "react-virtualized": "~9.21.2"
+        "react-virtualized": "~9.21.2",
+        "remove-accents": "~0.4.2"
     },
     "peerDependencies": {
         "react": "^16.8.6",

src/components/Highlighter/StringHighlighter/StringHighlighter.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { HighlighterCore, HighlighterCoreAccuracy } from '../../../utils/HighlighterCore';
+
+export type HighlighterRenderer = ({ key: number, substring }) => ReactNode;
+
+interface Props {
+    /** Target string for highlight searching */
+    string: string;
+    /** Array of words or RegExp that is used for search */
+    searchTerms: string[] | RegExp;
+    /** Define the accuracy of search */
+    accuracy?: HighlighterCoreAccuracy;
+    /** If enabled the diacritic characters should be matched */
+    ignoreDiacritics?: boolean;
+    /** Ignore case sensitivity */
+    ignoreCase?: boolean;
+    /** Method is called on render founded substrings */
+    highlightRenderer: HighlighterRenderer;
+}
+
+export const StringHighlighter: React.FC<Props> = (props) => {
+    const { string, highlightRenderer, ...highlighterOptions } = props;
+    const highlighter = React.useMemo(() => new HighlighterCore(highlighterOptions), [
+        highlighterOptions,
+    ]);
+    const stringParts = highlighter.find(string);
+    return (
+        <>
+            {stringParts.map(({ substring, highlighted }, index) => {
+                if (highlighted) {
+                    return highlightRenderer({ key: index, substring });
+                }
+                return substring;
+            })}
+        </>
+    );
+};
+
+StringHighlighter.displayName = 'StringHighlighter';
+
+StringHighlighter.defaultProps = {
+    accuracy: 'exact',
+    ignoreDiacritics: true,
+    ignoreCase: true,
+};

src/components/Highlighter/StringHighlighter/__tests__/StringHighlighter.spec.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import { StringHighlighter } from '../StringHighlighter';
+
+describe('StringHighlighter', () => {
+    const string = 'We are looking for php, java and javascript developer';
+    const searchTerms = [];
+    const ignoreDiacritics = true;
+    const ignoreCase = true;
+    // eslint-disable-next-line react/display-name, react/prop-types
+    const highlightRenderer = ({ substring, ...props }) => <b {...props}>{substring}</b>;
+    // eslint-disable-next-line react/display-name, react/prop-types
+    const renderComponent = (props) => {
+        return mount(
+            <StringHighlighter
+                string={string}
+                searchTerms={searchTerms}
+                ignoreDiacritics={ignoreDiacritics}
+                ignoreCase={ignoreCase}
+                highlightRenderer={highlightRenderer}
+                {...props}
+            />
+        );
+    };
+
+    describe('not highlighted', () => {
+        it('should initially render empty component correctly', () => {
+            const wrapper = renderComponent({
+                string: '',
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+        it('should not highlight not existed terms', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['notExisting', 'dev', 'a'],
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+        it('should not highlight case sensitive terms if ignoreCase is false', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['DEVELOPER', 'Php'],
+                ignoreCase: false,
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+        it('should not highlight terms with diacritics if ignoreDiacritics is false', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['dévéloper'],
+                ignoreDiacritics: false,
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+    });
+    describe('highlighted', () => {
+        it('should highlight list of terms', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['javascript developer', 'php', 'java'],
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+        it('should highlight case sensitive terms by default', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['DEVELOPER', 'Php'],
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+        it('should highlight terms with diacritics by default', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['dévéloper'],
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+        it('should highlight overlapping terms correctly', () => {
+            const wrapper = renderComponent({
+                searchTerms: ['javascript developer', 'java and javascript'],
+            });
+            expect(toJson(wrapper)).toMatchSnapshot();
+        });
+    });
+});

src/components/Highlighter/StringHighlighter/__tests__/__snapshots__/StringHighlighter.spec.js.snap

@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StringHighlighter highlighted should highlight case sensitive terms by default 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={true}
+  searchTerms={
+    Array [
+      "DEVELOPER",
+      "Php",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for 
+  <b
+    key="1"
+  >
+    php
+  </b>
+  , java and javascript 
+  <b
+    key="3"
+  >
+    developer
+  </b>
+</StringHighlighter>
+`;
+
+exports[`StringHighlighter highlighted should highlight list of terms 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={true}
+  searchTerms={
+    Array [
+      "javascript developer",
+      "php",
+      "java",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for 
+  <b
+    key="1"
+  >
+    php
+  </b>
+  , 
+  <b
+    key="3"
+  >
+    java
+  </b>
+   and 
+  <b
+    key="5"
+  >
+    javascript developer
+  </b>
+</StringHighlighter>
+`;
+
+exports[`StringHighlighter highlighted should highlight overlapping terms correctly 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={true}
+  searchTerms={
+    Array [
+      "java and javascript",
+      "javascript developer",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for php, 
+  <b
+    key="1"
+  >
+    java and javascript developer
+  </b>
+</StringHighlighter>
+`;
+
+exports[`StringHighlighter highlighted should highlight terms with diacritics by default 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={true}
+  searchTerms={
+    Array [
+      "dévéloper",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for php, java and javascript 
+  <b
+    key="1"
+  >
+    developer
+  </b>
+</StringHighlighter>
+`;
+
+exports[`StringHighlighter not highlighted should initially render empty component correctly 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={true}
+  searchTerms={Array []}
+  string=""
+/>
+`;
+
+exports[`StringHighlighter not highlighted should not highlight case sensitive terms if ignoreCase is false 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={false}
+  ignoreDiacritics={true}
+  searchTerms={
+    Array [
+      "DEVELOPER",
+      "Php",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for php, java and javascript developer
+</StringHighlighter>
+`;
+
+exports[`StringHighlighter not highlighted should not highlight not existed terms 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={true}
+  searchTerms={
+    Array [
+      "notExisting",
+      "dev",
+      "a",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for php, java and javascript developer
+</StringHighlighter>
+`;
+
+exports[`StringHighlighter not highlighted should not highlight terms with diacritics if ignoreDiacritics is false 1`] = `
+<StringHighlighter
+  accuracy="exact"
+  highlightRenderer={[Function]}
+  ignoreCase={true}
+  ignoreDiacritics={false}
+  searchTerms={
+    Array [
+      "dévéloper",
+    ]
+  }
+  string="We are looking for php, java and javascript developer"
+>
+  We are looking for php, java and javascript developer
+</StringHighlighter>
+`;

src/components/Highlighter/StringHighlighter/index.ts

@@ -0,0 +1 @@
+export { StringHighlighter } from './StringHighlighter';

src/components/Highlighter/index.ts

@@ -0,0 +1 @@
+export { StringHighlighter } from './StringHighlighter';

src/index.ts

@@ -1,12 +1,18 @@
 // eslint-disable-next-line import/no-default-export
 export { default } from './utils/OneUI';
+export {
+    HighlighterCore,
+    HighlighterCoreOptions,
+    HighlighterCoreAccuracy,
+} from './utils/HighlighterCore';
 // Atoms
 export { Button, SearchButton } from './components/Buttons';
 export { Callout } from './components/Callout';
 export { CandidateAvatar } from './components/CandidateAvatar';
 export { Chip } from './components/Chip';
 export { ContentPlaceholder } from './components/ContentPlaceholder';
 export { Heading } from './components/Heading';
+export { StringHighlighter } from './components/Highlighter';
 export * from './components/Icon';
 export { Input } from './components/Input';
 export { Link } from './components/Link';