@zohodesk/i18n 1.0.0-beta.25 → 1.0.0-beta.27

package/src/utils/jsxTranslations.js

@@ -0,0 +1,180 @@
+import React from 'react';
+import {
+    unescapeUnicode
+} from './index';
+
+export function splitMatchedExp({
+    expression,
+    charLenToOmit,
+    string
+}) {
+    let splitString = string.split(new RegExp(expression, 'g'));
+    let matchedExpAll = string.matchAll(new RegExp(expression, 'g'));
+    let matchedExpKeys = [];
+    for(let match of matchedExpAll) {
+        const value = match[0];
+        matchedExpKeys.push(value.substring(charLenToOmit, value.length - charLenToOmit));
+    } 
+    return {
+        splitString,
+        matchedExpKeys
+    }
+}
+
+export function generateChildren({
+    children,
+    child
+}) {
+    let newChildren = [], stringPlaceHolders = {};
+
+    const handleString = (string) => {
+        if(string) {
+        let {
+            splitString,
+            matchedExpKeys
+        } = splitMatchedExp({
+            expression: '{[0-9]+?}',
+            charLenToOmit: 1,
+            string
+        });
+        stringPlaceHolders[newChildren.length] = matchedExpKeys;
+        newChildren.push(splitString);
+        }
+    }
+
+    let {
+        splitString: splitChild,
+        matchedExpKeys: childrenKeys
+    } = splitMatchedExp({
+        expression: '<[A-Za-z0-9]+?>',
+        charLenToOmit: 1,
+        string: child
+    });
+    childrenKeys.forEach((childKey, childIndex) => {
+        const matchedChild = splitChild[childIndex];
+        handleString(matchedChild);
+        newChildren.push(children[childKey]);
+    });
+    handleString(splitChild[childrenKeys.length]);
+    return {
+        newChildren,
+        stringPlaceHolders
+    }
+}
+
+export function createElement({
+    componentId,
+    children = [],
+    stringPlaceHolders = {}
+} = {}) {
+    return ({
+        components = {},
+        values = []
+    } = {}) => {
+        const {
+        type = React.Fragment,
+        props
+        } = components[componentId] || {};
+        const childElements = children.map((child, index) => {
+        if(typeof child === 'function') {
+            return child({components, values});
+        }
+        let string = '', stringIndex = 0;
+        (stringPlaceHolders[index] || []).map((stringId, index) => {
+            if(child[index]) {
+            string += child[index];
+            }
+            string += values[stringId];
+            stringIndex++;
+        });
+        if(child[stringIndex]) {
+            string += child[stringIndex]
+        }
+        return string;
+        });
+        return React.createElement(type, props, ...childElements)
+    }
+};
+
+export function replaceWithComponentPlaceHolder({
+    componentId,
+    i18nKey,
+    childrenLength
+}) {
+    const closingTagIndex = i18nKey.indexOf(`</${componentId}>`);
+    const childWithOpenTag = i18nKey.substring(0, closingTagIndex);
+    const openTagIndex = childWithOpenTag.lastIndexOf(`<${componentId}>`);
+        
+    return i18nKey.substring(0, openTagIndex) + `<0${childrenLength}${componentId}>` + i18nKey.substring(
+        closingTagIndex +`${componentId}`.length+ 3
+    )
+}
+
+export function prepareI18NFunc({
+    i18nKey,
+    children = {}
+} = {}) {
+    const componentIdMatch = i18nKey.match(/<\/[A-Za-z0-9]+?>/);
+    if(componentIdMatch) {
+        const componentId = componentIdMatch[0].substring(2, componentIdMatch[0].length - 1);
+        const childWithOpenTag = (i18nKey.match(new RegExp(`(.*?)(?=<\/${componentId}>)`)) || [])[0] || '';
+        const child = childWithOpenTag.split(`<${componentId}>`).pop();
+        const {
+            newChildren,
+            stringPlaceHolders
+        } = generateChildren({
+            children,
+            child
+        });
+        const childrenLength = Object.keys(children).length;
+        children[`0${childrenLength}${componentId}`] = createElement({
+            componentId,
+            children: newChildren,
+            stringPlaceHolders
+        });
+        i18nKey = replaceWithComponentPlaceHolder({
+            componentId,
+            i18nKey,
+            childrenLength
+        });
+        return prepareI18NFunc({
+            i18nKey,
+            children
+        });
+    } 
+    const {
+        newChildren,
+        stringPlaceHolders
+    } = generateChildren({
+        child: i18nKey,
+        children
+    });
+    return createElement({
+        componentId: -1,
+        children: newChildren,
+        stringPlaceHolders
+    });
+}
+
+export function getI18NComponent(i18n) {
+    if(typeof i18n === 'undefined') {
+        return (key) => key;
+    }
+    return (key) => {
+        let i18nStr = i18n[key];
+        if (i18nStr === undefined) {
+            return  key;
+        }
+        if(typeof i18nStr === 'string') {
+            i18nStr = unescapeUnicode(i18nStr);
+            const value = prepareI18NFunc({
+                i18nKey: i18nStr
+            });
+            window.loadI18nChunk && window.loadI18nChunk({
+                [key] : value
+            });
+            i18nStr = value;
+        } 
+        return i18nStr;
+    }
+}