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

package/es/index.js

@@ -1,4 +1,4 @@
-export { formatDate, pad, replaceI18NValuesWithRegex, unescapeUnicode, getValues, getI18NInfo, isToday, isYesterday, isTomorrow, isWithinAWeek, isTwoWeeksOrMore, userDateFormat, getDiffObj, getLyears, getSuffix, getDatePatternWithoutYear, setLocalizedData, dayi18n, monthi18n, timei18n } from './utils';
+export { formatDate, pad, replaceI18NValuesWithRegex, unescapeUnicode, getValues, getI18NInfo, isToday, isYesterday, isTomorrow, isWithinAWeek, isTwoWeeksOrMore, userDateFormat, getDiffObj, getLyears, getSuffix, getDatePatternWithoutYear, setLocalizedData, setI18NKeyMapping, dayi18n, monthi18n, timei18n } from './utils';
 import { getI18NValue as getI18NValue1 } from './utils';
 export { I18NContext } from './I18NContext';
 export { default as I18NProvider, i18NProviderUtils } from './components/I18NProvider';

package/es/utils/__tests__/jsxTranslations.spec.js

@@ -0,0 +1,174 @@
+import React from 'react';
+import { splitMatchedExp, generateChildren, replaceWithComponentPlaceHolder, createElement, prepareI18NFunc, getI18NComponent } from '../jsxTranslations';
+
+function Bold(_ref) {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("b", null, children);
+}
+
+function Simple(props) {
+  return /*#__PURE__*/React.createElement("span", null, props.children);
+}
+
+describe('Verifying splitMatchedExp method', () => {
+  it('A string with no match test', () => {
+    const response = splitMatchedExp({
+      expression: '{[0-9]+?}',
+      charLenToOmit: 1,
+      string: "Hello"
+    });
+    const expected = {
+      splitString: ['Hello'],
+      matchedExpKeys: []
+    };
+    expect(response).toEqual(expected);
+  });
+  it('A string with JSX Tag placeholder test', () => {
+    const response = splitMatchedExp({
+      expression: '<[A-Za-z0-9]+?>',
+      charLenToOmit: 1,
+      string: "Hi <00Good> occurs <01Strong>"
+    });
+    const expected = {
+      splitString: ["Hi ", " occurs ", ""],
+      matchedExpKeys: ['00Good', '01Strong']
+    };
+    expect(response).toEqual(expected);
+  });
+  it('A string with String placeholder test', () => {
+    const response = splitMatchedExp({
+      expression: '{[0-9]+?}',
+      charLenToOmit: 1,
+      string: "Hi {0} occurs {1}"
+    });
+    const expected = {
+      splitString: ["Hi ", " occurs ", ""],
+      matchedExpKeys: ['0', '1']
+    };
+    expect(response).toEqual(expected);
+  });
+});
+describe('Verifying generateChildren Method', () => {
+  it('A string with Tag Placeholder and String placeholders', () => {
+    const children = {
+      '00Good': () => {},
+      '01Strong': () => {}
+    };
+    const response = generateChildren({
+      children,
+      child: 'Hi <00Good>{0}<01Strong>'
+    });
+    const expected = {
+      newChildren: [['Hi '], children['00Good'], ['', ''], children['01Strong']],
+      stringPlaceHolders: {
+        0: [],
+        2: ['0']
+      }
+    };
+    expect(response).toEqual(expected);
+  });
+});
+describe('Verifying the replaceWithComponentPlaceHolder method', () => {
+  it('A JSX Tag with string', () => {
+    const response = replaceWithComponentPlaceHolder({
+      componentId: 'Simple',
+      i18nKey: '<Simple>Hi everyone</Simple>',
+      childrenLength: 1
+    });
+    const expected = '<01Simple>';
+    expect(response).toBe(expected);
+  });
+  it('A string with multiple JSX Tags', () => {
+    const response = replaceWithComponentPlaceHolder({
+      componentId: 'Simple',
+      i18nKey: 'Greetings <Simple>Hi everyone</Simple> for the <Simple>Day</Simple>',
+      childrenLength: 1
+    });
+    const expected = 'Greetings <01Simple> for the <Simple>Day</Simple>';
+    expect(response).toBe(expected);
+  });
+});
+describe('Verifying the createElement method', () => {
+  it('A component Id with JSX children and Dynamic String placeholders', () => {
+    const jsxChild = createElement({
+      componentId: 'Simple',
+      children: [['Greetings']],
+      stringPlaceHolders: {
+        0: []
+      }
+    });
+    const response = createElement({
+      componentId: -1,
+      children: [['Hi ', ','], jsxChild, [' for the day']],
+      stringPlaceHolders: {
+        0: ['0'],
+        2: []
+      }
+    })({
+      components: {
+        Simple: {
+          type: Simple
+        }
+      },
+      values: ['Zoho Desk']
+    });
+    const expected = /*#__PURE__*/React.createElement(React.Fragment, null, "Hi Zoho Desk,", /*#__PURE__*/React.createElement(Simple, null, "Greetings"), " for the day");
+    expect(JSON.stringify(response)).toEqual(JSON.stringify(expected));
+  });
+});
+describe('Verifying the prepareI18NFunc method', () => {
+  //Hi <Bo01ld>Gigiee</Bo01ld>,<Simple> How are you</Simple><Simple>Make it simple</Simple>
+  it('A text with sibling JSX tags and alphanumeric JSX Tags', () => {
+    const response = prepareI18NFunc({
+      i18nKey: 'Hi <Bo01ld>Gigiee</Bo01ld>,<Simple>How are you</Simple><Simple>Make it simple</Simple>'
+    })({
+      components: {
+        'Bo01ld': {
+          type: Bold
+        },
+        Simple: {
+          type: Simple
+        }
+      }
+    });
+    const expected = /*#__PURE__*/React.createElement(React.Fragment, null, "Hi ", /*#__PURE__*/React.createElement(Bold, null, "Gigiee"), ",", /*#__PURE__*/React.createElement(Simple, null, "How are you"), /*#__PURE__*/React.createElement(Simple, null, "Make it simple"));
+    expect(JSON.stringify(response)).toEqual(JSON.stringify(expected));
+  });
+});
+describe('Verifying getI18NComponent method', () => {
+  it('An i18n key with JSX tag in its value', () => {
+    const i18n = {
+      'support.demo': 'Hi <Bo01ld>Gigiee</Bo01ld>,<Simple>How are you</Simple><Simple>Make it simple</Simple>'
+    };
+    const I18N = getI18NComponent(i18n);
+    const response = I18N('support.demo')({
+      components: {
+        'Bo01ld': {
+          type: Bold
+        },
+        Simple: {
+          type: Simple
+        }
+      }
+    });
+    const expected = /*#__PURE__*/React.createElement(React.Fragment, null, "Hi ", /*#__PURE__*/React.createElement(Bold, null, "Gigiee"), ",", /*#__PURE__*/React.createElement(Simple, null, "How are you"), /*#__PURE__*/React.createElement(Simple, null, "Make it simple"));
+    expect(JSON.stringify(response)).toEqual(JSON.stringify(expected));
+  });
+  it('Testing absence of i18n object', () => {
+    const I18N = getI18NComponent();
+    const response = I18N('support.demo');
+    const expected = 'support.demo';
+    expect(expected).toBe(response);
+  });
+  it('Testing of missing i18n key', () => {
+    const i18n = {
+      'support.demo': 'Demo'
+    };
+    const I18N = getI18NComponent(i18n);
+    const response = I18N('support.need');
+    const expected = 'support.need';
+    expect(expected).toBe(response);
+  });
+});

package/es/{utils.js → utils/index.js}

@@ -1,5 +1,5 @@
 import datetime from '@zohodesk/datetimejs';
-import { i18NProviderUtils } from './components/I18NProvider';
+import { i18NProviderUtils } from '../components/I18NProvider';
 export const dayi18n = {
   'Sun': 'deskreact.calendar.daynameshort.sunday',
   'Mon': 'deskreact.calendar.daynameshort.monday',
@@ -176,16 +176,50 @@ export function getValues() {
   let diff = arguments.length > 1 ? arguments[1] : undefined;
   return params.map(param => diff[param]);
 }
+export function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
 let localizedData = {};
+let localizedStringData = {};
+
+let getMappedKey = key => key;
+
+function setLocalizedStringData(data) {
+  let keyString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+  if (typeof data === 'string') {
+    localizedStringData[keyString] = data;
+    return;
+  }
+
+  const keys = Object.keys(data);
+
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i];
+    const newKeyString = keyString ? `${keyString}.${key}` : key;
+    setLocalizedStringData(data[key], newKeyString);
+  }
+}
+
 export function setLocalizedData(data) {
-  localizedData = data;
+  const translationData = isObject(data) ? data : {};
+  localizedData = translationData;
+  setLocalizedStringData(translationData);
+}
+export function setI18NKeyMapping(func) {
+  getMappedKey = func;
 }
 export function getLocalizedValue() {
   let {
     type,
     moduleName,
+    deptName,
+    folderName,
+    reportId,
+    reportName,
     apiName,
-    fieldValue
+    fieldValue,
+    layoutName
   } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let localizedValue = localizedData;
 
@@ -202,6 +236,24 @@ export function getLocalizedValue() {
       });
       break;
 
+    case 'layout':
+      if (deptName != null) {
+        ['Layout', moduleName, deptName, layoutName].map(() => {
+          localizedValue = localizedValue[key] || '';
+        });
+      } else {
+        ['Layout', moduleName, layoutName].map(() => {
+          localizedValue = localizedValue[key] || '';
+        });
+      }
+
+      break;
+
+    case 'report':
+      ['Report', deptName, folderName, reportName, reportId].map(key => {
+        localizedValue = localizedValue[key] || '';
+      });
+
     default:
       return null;
   }
@@ -214,11 +266,12 @@ export function getI18NValue(i18n) {
   }
 
   return (key, values, localizedProps) => {
-    const localizedValue = localizedProps ? getLocalizedValue(localizedProps) : null;
-    let i18nStr = i18n[key];
+    const localizedValue = localizedProps ? getLocalizedValue(localizedProps) : localizedStringData[key];
+    const finalKey = getMappedKey(key);
+    let i18nStr = i18n[finalKey];
 
     if (i18nStr === undefined) {
-      return localizedValue || key;
+      return localizedValue || finalKey;
     }
 
     i18nStr = replaceI18NValuesWithRegex(i18nStr, values);

package/es/utils/jsxTranslations.js

@@ -0,0 +1,193 @@
+import React from 'react';
+import { unescapeUnicode } from './index';
+export function splitMatchedExp(_ref) {
+  let {
+    expression,
+    charLenToOmit,
+    string
+  } = _ref;
+  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(_ref2) {
+  let {
+    children,
+    child
+  } = _ref2;
+  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() {
+  let {
+    componentId,
+    children = [],
+    stringPlaceHolders = {}
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function () {
+    let {
+      components = {},
+      values = []
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    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 /*#__PURE__*/React.createElement(type, props, ...childElements);
+  };
+}
+;
+export function replaceWithComponentPlaceHolder(_ref3) {
+  let {
+    componentId,
+    i18nKey,
+    childrenLength
+  } = _ref3;
+  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() {
+  let {
+    i18nKey,
+    children = {}
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  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;
+  };
+}

package/lib/components/I18NProvider.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
 
+var _jsxTranslations = require("../utils/jsxTranslations");
+
 var _I18NContext = require("../I18NContext");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -45,7 +47,8 @@ var dummy = function dummy(key, values) {
 
 var i18NProviderUtils = {
   getI18NValue: dummy,
-  userDateFormat: dummy
+  userDateFormat: dummy,
+  getI18NComponent: dummy
 };
 exports.i18NProviderUtils = i18NProviderUtils;
 
@@ -61,6 +64,7 @@ var I18NProvider = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props, context);
     i18NProviderUtils.getI18NValue = (0, _utils.getI18NValue)(props.i18n);
+    i18NProviderUtils.getI18NComponent = (0, _jsxTranslations.getI18NComponent)(props.i18n);
 
     if (props.tzData) {
       i18NProviderUtils.userDateFormat = (0, _utils.userDateFormat)(i18NProviderUtils.getI18NValue, props.tzData, props.timeFormat, props.datePattern, props.isEnabledCurrentYear);
@@ -89,6 +93,7 @@ var I18NProvider = /*#__PURE__*/function (_React$Component) {
           _this2.reject = rej;
         }).then(function () {
           i18NProviderUtils.getI18NValue = (0, _utils.getI18NValue)(nextProps.i18n);
+          i18NProviderUtils.getI18NComponent = (0, _jsxTranslations.getI18NComponent)(nextProps.i18n);
 
           if (props.tzData) {
             i18NProviderUtils.userDateFormat = (0, _utils.userDateFormat)(i18NProviderUtils.getI18NValue, props.tzData, props.timeFormat, props.datePattern, _this2.props.isEnabledCurrentYear);