Feat/text highlight refactor

generatedTypes/src/components/text/index.d.ts

@@ -42,18 +42,6 @@ declare type PropsTypes = BaseComponentInjectedProps & ForwardRefInjectedProps &
 declare class Text extends PureComponent<PropsTypes> {
     static displayName: string;
     private TextContainer;
-    getPartsByHighlight(targetString: string | undefined, highlightString: string | string[]): {
-        string: string;
-        shouldHighlight: boolean;
-    }[];
-    getTextPartsByHighlight(targetString?: string, highlightString?: string): {
-        string: string;
-        shouldHighlight: boolean;
-    }[];
-    getArrayPartsByHighlight(targetString?: string, highlightString?: string[]): {
-        string: string;
-        shouldHighlight: boolean;
-    }[];
     renderText(children: any): any;
     render(): JSX.Element;
 }

generatedTypes/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+import * as TextUtils from './textUtils';
+export { TextUtils };

generatedTypes/src/utils/textUtils.d.ts

@@ -0,0 +1,13 @@
+declare function getPartsByHighlight(targetString: string | undefined, highlightString: string | string[]): {
+    string: string;
+    shouldHighlight: boolean;
+}[];
+declare function getTextPartsByHighlight(targetString?: string, highlightString?: string): {
+    string: string;
+    shouldHighlight: boolean;
+}[];
+declare function getArrayPartsByHighlight(targetString?: string, highlightString?: string[]): {
+    string: string;
+    shouldHighlight: boolean;
+}[];
+export { getPartsByHighlight, getTextPartsByHighlight, getArrayPartsByHighlight };

src/.babelrc.json

@@ -9,6 +9,7 @@
         "alias": {
           "commons": "./src/commons",
           "helpers": "./src/helpers",
+          "utils": "./src/utils",
           "hooks": "./src/hooks",
           "optionalDeps": "./src/optionalDependencies",
           "services": "./src/services",

src/components/text/index.tsx

@@ -11,6 +11,7 @@ import {
   ColorsModifiers
 } from '../../commons/new';
 import {Colors} from 'style';
+import {TextUtils} from 'utils';
 
 export type TextProps = RNTextProps &
   TypographyModifiers &
@@ -65,72 +66,6 @@ class Text extends PureComponent<PropsTypes> {
   //   this._root.setNativeProps(nativeProps); // eslint-disable-line
   // }
 
-  getPartsByHighlight(targetString = '', highlightString: string | string[]) {
-    if (typeof highlightString === 'string') {
-      if (_.isEmpty(highlightString.trim())) {
-        return [{string: targetString, shouldHighlight: false}];
-      }
-      return this.getTextPartsByHighlight(targetString, highlightString);
-    } else {
-      return this.getArrayPartsByHighlight(targetString, highlightString);
-    }
-  }
-
-  getTextPartsByHighlight(targetString = '', highlightString = '') {
-    if (highlightString === '') {
-      return [{string: targetString, shouldHighlight: false}];
-    }
-    const textParts = [];
-    let highlightIndex;
-    do {
-      highlightIndex = targetString.toLowerCase().indexOf(highlightString.toLowerCase());
-      if (highlightIndex !== -1) {
-        if (highlightIndex > 0) {
-          textParts.push({string: targetString.substring(0, highlightIndex), shouldHighlight: false});
-        }
-        textParts.push({string: targetString.substr(highlightIndex, highlightString.length), shouldHighlight: true});
-        targetString = targetString.substr(highlightIndex + highlightString.length);
-      } else {
-        textParts.push({string: targetString, shouldHighlight: false});
-      }
-    } while (highlightIndex !== -1);
-
-    return textParts;
-  }
-
-  getArrayPartsByHighlight(targetString = '', highlightString = ['']) {
-    const target = _.toLower(targetString);
-    const indices = [];
-    let index = 0;
-    let lastWordLength = 0;
-    for (let j = 0; j < highlightString.length; j++) {
-      const word = _.toLower(highlightString[j]);
-      const targetSuffix = target.substring(index + lastWordLength);
-      const i = targetSuffix.indexOf(word);
-      if (i >= 0) {
-        const newIndex = index + lastWordLength + i;
-        indices.push({start: index + lastWordLength + i, end: index + lastWordLength + i + word.length});
-        index = newIndex;
-        lastWordLength = word.length;
-      } else {
-        break;
-      }
-    }
-    const parts = [];
-    for (let k = 0; k < indices.length; k++) {
-      if (k === 0 && indices[k].start !== 0) {
-        parts.push({string: targetString.substring(0, indices[k].start), shouldHighlight: false});
-      }
-      parts.push({string: targetString.substring(indices[k].start, indices[k].end), shouldHighlight: true});
-      if (k === indices.length - 1) {
-        parts.push({string: targetString.substring(indices[k].end), shouldHighlight: false});
-      } else {
-        parts.push({string: targetString.substring(indices[k].end, indices[k + 1].start), shouldHighlight: false});
-      }
-    }
-    return parts;
-  }
-
   renderText(children: any): any {
     const {highlightString, highlightStyle} = this.props;
 
@@ -142,7 +77,7 @@ class Text extends PureComponent<PropsTypes> {
       }
 
       if (_.isString(children)) {
-        const textParts = highlightString && this.getPartsByHighlight(children, highlightString);
+        const textParts = highlightString && TextUtils.getPartsByHighlight(children, highlightString);
         return (
           textParts &&
           _.map(textParts, (text, index) => {

src/utils/__tests__/textUtils.spec.js

@@ -0,0 +1,149 @@
+import {getTextPartsByHighlight, getArrayPartsByHighlight} from '../textUtils';
+
+describe('Text', () => {
+  describe('getTextPartsByHighlight', () => {
+    it('should return the whole string as a single part when highlight string is undefined', () => {
+      const result = getTextPartsByHighlight('Playground Screen', undefined);
+      expect(result).toEqual([{string: 'Playground Screen', shouldHighlight: false}]);
+    });
+    it('should return the whole string as a single part when highlight string is empty', () => {
+      const result = getTextPartsByHighlight('Playground Screen', '');
+      expect(result).toEqual([{string: 'Playground Screen', shouldHighlight: false}]);
+    });
+    it('should return the whole string as a single part when highlight string dont match', () => {
+      const result = getTextPartsByHighlight('Playground Screen', 'aaa');
+      expect(result).toEqual([{string: 'Playground Screen', shouldHighlight: false}]);
+    });
+    it('should break text to parts according to highlight string', () => {
+      const result = getTextPartsByHighlight('Playground Screen', 'Scr');
+      expect(result).toEqual([
+        {string: 'Playground ', shouldHighlight: false},
+        {string: 'Scr', shouldHighlight: true},
+        {string: 'een', shouldHighlight: false}
+      ]);
+    });
+
+    it('should handle case when highlight repeats more than once', () => {
+      const result = getTextPartsByHighlight('Dancing in the Dark', 'Da');
+      expect(result).toEqual([
+        {string: 'Da', shouldHighlight: true},
+        {string: 'ncing in the ', shouldHighlight: false},
+        {string: 'Da', shouldHighlight: true},
+        {string: 'rk', shouldHighlight: false}
+      ]);
+    });
+
+    it('should handle ignore case-sensetive', () => {
+      const result = getTextPartsByHighlight('Dancing in the Dark', 'da');
+      expect(result).toEqual([
+        {string: 'Da', shouldHighlight: true},
+        {string: 'ncing in the ', shouldHighlight: false},
+        {string: 'Da', shouldHighlight: true},
+        {string: 'rk', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle special characters @', () => {
+      const result = getTextPartsByHighlight('@ancing in the @ark', '@a');
+      expect(result).toEqual([
+        {string: '@a', shouldHighlight: true},
+        {string: 'ncing in the ', shouldHighlight: false},
+        {string: '@a', shouldHighlight: true},
+        {string: 'rk', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle special characters !', () => {
+      const result = getTextPartsByHighlight('!ancing in the !ark', '!a');
+      expect(result).toEqual([
+        {string: '!a', shouldHighlight: true},
+        {string: 'ncing in the ', shouldHighlight: false},
+        {string: '!a', shouldHighlight: true},
+        {string: 'rk', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle special characters starts with @', () => {
+      const result = getTextPartsByHighlight('[email protected]', '@wix');
+      expect(result).toEqual([
+        {string: 'uilib', shouldHighlight: false},
+        {string: '@wix', shouldHighlight: true},
+        {string: '.com', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle empty string.', () => {
+      const result = getTextPartsByHighlight('@ancing in the @ark', '');
+      expect(result).toEqual([{string: '@ancing in the @ark', shouldHighlight: false}]);
+    });
+
+    it('Should handle full string.', () => {
+      const result = getTextPartsByHighlight('Dancing in the Dark', 'Dancing in the Dark');
+      expect(result).toEqual([{string: 'Dancing in the Dark', shouldHighlight: true}]);
+    });
+  });
+
+  describe('getArrayPartsByHighlight', () => {
+    it('should return the whole string as a single part when highlight array is empty', () => {
+      const result = getArrayPartsByHighlight('Playground Screen', []);
+      expect(result).toEqual([{string: 'Playground Screen', shouldHighlight: false}]);
+    });
+    it('should return the whole string as a single part when highlight string is empty', () => {
+      const result = getArrayPartsByHighlight('Playground Screen', ['']);
+      expect(result).toEqual([{string: 'Playground Screen', shouldHighlight: false}]);
+    });
+    it('should return the whole string as a single part when highlight string dont match', () => {
+      const result = getArrayPartsByHighlight('Playground Screen', ['aaa']);
+      expect(result).toEqual([{string: 'Playground Screen', shouldHighlight: false}]);
+    });
+    it('should break text to parts according to highlight string', () => {
+      const result = getArrayPartsByHighlight('Playground Screen', ['Scr']);
+      expect(result).toEqual([
+        {string: 'Playground ', shouldHighlight: false},
+        {string: 'Scr', shouldHighlight: true},
+        {string: 'een', shouldHighlight: false}
+      ]);
+    });
+
+    it('highlight repeats more than once should color the first match', () => {
+      const result = getArrayPartsByHighlight('Dancing in the Dark', ['Da']);
+      expect(result).toEqual([
+        {string: 'Da', shouldHighlight: true},
+        {string: 'ncing in the Dark', shouldHighlight: false}
+      ]);
+    });
+
+    it('should handle ignore case-sensetive', () => {
+      const result = getArrayPartsByHighlight('Dancing in the Dark', ['da']);
+      expect(result).toEqual([
+        {string: 'Da', shouldHighlight: true},
+        {string: 'ncing in the Dark', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle special characters @', () => {
+      const result = getArrayPartsByHighlight('@ancing in the @ark', ['@a']);
+      expect(result).toEqual([
+        {string: '@a', shouldHighlight: true},
+        {string: 'ncing in the @ark', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle special characters !', () => {
+      const result = getArrayPartsByHighlight('!ancing in the !ark', ['!a']);
+      expect(result).toEqual([
+        {string: '!a', shouldHighlight: true},
+        {string: 'ncing in the !ark', shouldHighlight: false}
+      ]);
+    });
+
+    it('Should handle special characters starts with @', () => {
+      const result = getArrayPartsByHighlight('[email protected]', ['@wix']);
+      expect(result).toEqual([
+        {string: 'uilib', shouldHighlight: false},
+        {string: '@wix', shouldHighlight: true},
+        {string: '.com', shouldHighlight: false}
+      ]);
+    });
+  });
+});

src/utils/index.ts

@@ -0,0 +1,3 @@
+import * as TextUtils from './textUtils';
+
+export {TextUtils};