support to astral symbols

Author: Igor Canedo

flow-typed/npm/stringz_vx.x.x.js

@@ -0,0 +1,60 @@
+// flow-typed signature: 17908e8cb7dcac8f4cfe9378780b0286
+// flow-typed version: <<STUB>>/stringz_v0.2.2/flow_v0.53.1
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'stringz'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'stringz' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'stringz/coverage/lcov-report/prettify' {
+  declare module.exports: any;
+}
+
+declare module 'stringz/coverage/lcov-report/sorter' {
+  declare module.exports: any;
+}
+
+declare module 'stringz/dist/index' {
+  declare module.exports: any;
+}
+
+declare module 'stringz/dist/length' {
+  declare module.exports: any;
+}
+
+declare module 'stringz/dist/string' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'stringz/coverage/lcov-report/prettify.js' {
+  declare module.exports: $Exports<'stringz/coverage/lcov-report/prettify'>;
+}
+declare module 'stringz/coverage/lcov-report/sorter.js' {
+  declare module.exports: $Exports<'stringz/coverage/lcov-report/sorter'>;
+}
+declare module 'stringz/dist/index.js' {
+  declare module.exports: $Exports<'stringz/dist/index'>;
+}
+declare module 'stringz/dist/length.js' {
+  declare module.exports: $Exports<'stringz/dist/length'>;
+}
+declare module 'stringz/dist/string.js' {
+  declare module.exports: $Exports<'stringz/dist/string'>;
+}

package.json

@@ -23,9 +23,14 @@
     "react": "^16.0.0-alpha.12",
     "react-native": "^0.47.2"
   },
+  "dependencies": {
+    "stringz": "0.2.2"
+  },
   "devDependencies": {
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
+    "babel-plugin-add-module-exports": "0.2.1",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-react-native": "^2.1.0",
     "coveralls": "^2.12.0",
     "eslint": "^4.4.1",

sample/__tests__/loadAttributes.test.js

@@ -37,6 +37,23 @@ it('have correct length with inlineStyles and text', () => {
   expect(result).toHaveLength(3);
 });
 
+it('have correct length with inlineStyles and text width astral symbols', () => {
+  const params = {
+    text: 'Iñtërnâtiônàlizætiøn☃💩 Etiama nisi augue ultricie qa magna',
+    inlineStyles: [
+      {
+        offset: 4,
+        length: 35,
+        style: 'BOLD',
+      },
+    ],
+    entityMap: {},
+    entityRanges: [],
+  };
+  const result = loadAttributes(params);
+  expect(result).toHaveLength(2);
+});
+
 it('have correct length with multiple inlineStyles and text', () => {
   const params = {
     text: 'Hello World Hello World Hello World',

sample/package.json

@@ -12,11 +12,14 @@
 	},
 	"dependencies": {
 		"react": "16.0.0-alpha.12",
-		"react-native": "0.47.2"
+		"react-native": "0.47.2",
+		"stringz": "0.2.2"
 	},
 	"devDependencies": {
 		"babel-jest": "^20.0.3",
 		"babel-preset-react-native": "^2.1.0",
+		"babel-preset-es2015": "^6.24.1",
+		"babel-plugin-add-module-exports": "0.2.1",
 		"jest": "^20.0.4",
 		"react-test-renderer": "16.0.0-alpha.12",
 		"sync-files": "1.0.3"

sample/src/index.js

@@ -22,6 +22,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: 16,
+    marginTop: 32,
     backgroundColor: '#f4f4f4',
   },
 });

sample/src/resourceMock.json

@@ -34,6 +34,36 @@
       "entityRanges": [],
       "data": {}
     },
+    {
+      "key": "3lkq2",
+      "text": "Ma 🎤Iñtërnâtiônàlizætiøn☃💩 Etiama nia",
+      "type": "unstyled",
+      "depth": 0,
+      "inlineStyleRanges": [],
+      "entityRanges": [
+        {
+          "offset": 2,
+          "length": 35,
+          "key": 0
+        }
+      ],
+      "data": {}
+    },
+    {
+      "key": "7noje",
+      "text": "🎤 Etiama augue 'ultricie ultric'",
+      "type": "unstyled",
+      "depth": 0,
+      "inlineStyleRanges": [],
+      "entityRanges": [
+        {
+          "offset": 1,
+          "length": 31,
+          "key": 0
+        }
+      ],
+      "data": {}
+    },
     {
       "key": "5r864123",
       "text": "Etiam ultricies nisi vel augue.",

sample/yarn.lock

@@ -6,6 +6,7 @@
 
 // @flow
 
+import { substring, length } from 'stringz';
 import React from 'react';
 import {
   Text,
@@ -42,6 +43,7 @@ const loadAttributes = (params: ParamsType): any => {
     entityMap,
     navigate,
   } = params;
+
   const defaultNavigationFn = (url: string) => { Linking.openURL(url); };
   const navigateFunction = navigate || defaultNavigationFn;
   const elementList = [];
@@ -52,14 +54,15 @@ const loadAttributes = (params: ParamsType): any => {
     const attrs = flatAttributesList(attributes);
 
     if (attrs[0].offset > 0) {
-      elementList.push(<Text key={generateKey()}>{text.substring(0, attrs[0].offset)}</Text>);
+      elementList.push(
+        <Text key={generateKey()}>{substring(text, 0, attrs[0].offset)}</Text>);
     }
 
     attrs.forEach((item: Object, index: number) => {
       if (index > 0) {
         const previousItem = attrs[index - 1];
         const offset = previousItem.offset + previousItem.length;
-        const subText = text.substring(offset, item.offset);
+        const subText = substring(text, offset, item.offset);
 
         if (subText.length) {
           elementList.push(<Text key={generateKey()}>{subText}</Text>);
@@ -70,7 +73,7 @@ const loadAttributes = (params: ParamsType): any => {
       const itemData = Object.assign({}, {
         key: generateKey(),
         type: itemType,
-        text: text.substring(item.offset, item.offset + item.length),
+        text: substring(text, item.offset, item.offset + item.length),
         customStyles,
       });
 
@@ -84,7 +87,7 @@ const loadAttributes = (params: ParamsType): any => {
 
     const lastItem = attrs[attrs.length - 1];
     const offset = lastItem.offset + lastItem.length;
-    const subText = text.substring(offset, text.length);
+    const subText = substring(text, offset, length(text));
 
     if (subText.length) {
       elementList.push(<Text key={generateKey()}>{subText}</Text>);