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

package/lib/index.js

@@ -156,6 +156,12 @@ Object.defineProperty(exports, "replaceI18NValuesWithRegex", {
     return _utils.replaceI18NValuesWithRegex;
   }
 });
+Object.defineProperty(exports, "setI18NKeyMapping", {
+  enumerable: true,
+  get: function get() {
+    return _utils.setI18NKeyMapping;
+  }
+});
 Object.defineProperty(exports, "setLocalizedData", {
   enumerable: true,
   get: function get() {

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

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

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

@@ -13,6 +13,7 @@ exports.getLocalizedValue = getLocalizedValue;
 exports.getLyears = getLyears;
 exports.getSuffix = getSuffix;
 exports.getValues = getValues;
+exports.isObject = isObject;
 exports.isToday = isToday;
 exports.isTomorrow = isTomorrow;
 exports.isTwoWeeksOrMore = isTwoWeeksOrMore;
@@ -21,6 +22,7 @@ exports.isYesterday = isYesterday;
 exports.monthi18n = void 0;
 exports.pad = pad;
 exports.replaceI18NValuesWithRegex = replaceI18NValuesWithRegex;
+exports.setI18NKeyMapping = setI18NKeyMapping;
 exports.setLocalizedData = setLocalizedData;
 exports.timei18n = void 0;
 exports.unescapeUnicode = unescapeUnicode;
@@ -28,7 +30,7 @@ exports.userDateFormat = userDateFormat;
 
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
-var _I18NProvider = require("./components/I18NProvider");
+var _I18NProvider = require("../components/I18NProvider");
 
 var _monthi18n;
 
@@ -217,18 +219,55 @@ function getValues() {
   });
 }
 
+function isObject(item) {
+  return item && _typeof(item) === 'object' && !Array.isArray(item);
+}
+
 var localizedData = {};
+var localizedStringData = {};
+
+var getMappedKey = function getMappedKey(key) {
+  return key;
+};
+
+function setLocalizedStringData(data) {
+  var keyString = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+  if (typeof data === 'string') {
+    localizedStringData[keyString] = data;
+    return;
+  }
+
+  var keys = Object.keys(data);
+
+  for (var i = 0; i < keys.length; i++) {
+    var _key = keys[i];
+    var newKeyString = keyString ? "".concat(keyString, ".").concat(_key) : _key;
+    setLocalizedStringData(data[_key], newKeyString);
+  }
+}
 
 function setLocalizedData(data) {
-  localizedData = data;
+  var translationData = isObject(data) ? data : {};
+  localizedData = translationData;
+  setLocalizedStringData(translationData);
+}
+
+function setI18NKeyMapping(func) {
+  getMappedKey = func;
 }
 
 function getLocalizedValue() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
       type = _ref.type,
       moduleName = _ref.moduleName,
+      deptName = _ref.deptName,
+      folderName = _ref.folderName,
+      reportId = _ref.reportId,
+      reportName = _ref.reportName,
       apiName = _ref.apiName,
-      fieldValue = _ref.fieldValue;
+      fieldValue = _ref.fieldValue,
+      layoutName = _ref.layoutName;
 
   var localizedValue = localizedData;
 
@@ -245,6 +284,24 @@ function getLocalizedValue() {
       });
       break;
 
+    case 'layout':
+      if (deptName != null) {
+        ['Layout', moduleName, deptName, layoutName].map(function () {
+          localizedValue = localizedValue[key] || '';
+        });
+      } else {
+        ['Layout', moduleName, layoutName].map(function () {
+          localizedValue = localizedValue[key] || '';
+        });
+      }
+
+      break;
+
+    case 'report':
+      ['Report', deptName, folderName, reportName, reportId].map(function (key) {
+        localizedValue = localizedValue[key] || '';
+      });
+
     default:
       return null;
   }
@@ -260,11 +317,12 @@ function getI18NValue(i18n) {
   }
 
   return function (key, values, localizedProps) {
-    var localizedValue = localizedProps ? getLocalizedValue(localizedProps) : null;
-    var i18nStr = i18n[key];
+    var localizedValue = localizedProps ? getLocalizedValue(localizedProps) : localizedStringData[key];
+    var finalKey = getMappedKey(key);
+    var i18nStr = i18n[finalKey];
 
     if (i18nStr === undefined) {
-      return localizedValue || key;
+      return localizedValue || finalKey;
     }
 
     i18nStr = replaceI18NValuesWithRegex(i18nStr, values);

package/lib/utils/jsxTranslations.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createElement = createElement;
+exports.generateChildren = generateChildren;
+exports.getI18NComponent = getI18NComponent;
+exports.prepareI18NFunc = prepareI18NFunc;
+exports.replaceWithComponentPlaceHolder = replaceWithComponentPlaceHolder;
+exports.splitMatchedExp = splitMatchedExp;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = require("./index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function splitMatchedExp(_ref) {
+  var expression = _ref.expression,
+      charLenToOmit = _ref.charLenToOmit,
+      string = _ref.string;
+  var splitString = string.split(new RegExp(expression, 'g'));
+  var matchedExpAll = string.matchAll(new RegExp(expression, 'g'));
+  var matchedExpKeys = [];
+
+  var _iterator = _createForOfIteratorHelper(matchedExpAll),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var match = _step.value;
+      var value = match[0];
+      matchedExpKeys.push(value.substring(charLenToOmit, value.length - charLenToOmit));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return {
+    splitString: splitString,
+    matchedExpKeys: matchedExpKeys
+  };
+}
+
+function generateChildren(_ref2) {
+  var children = _ref2.children,
+      child = _ref2.child;
+  var newChildren = [],
+      stringPlaceHolders = {};
+
+  var handleString = function handleString(string) {
+    if (string) {
+      var _splitMatchedExp = splitMatchedExp({
+        expression: '{[0-9]+?}',
+        charLenToOmit: 1,
+        string: string
+      }),
+          splitString = _splitMatchedExp.splitString,
+          matchedExpKeys = _splitMatchedExp.matchedExpKeys;
+
+      stringPlaceHolders[newChildren.length] = matchedExpKeys;
+      newChildren.push(splitString);
+    }
+  };
+
+  var _splitMatchedExp2 = splitMatchedExp({
+    expression: '<[A-Za-z0-9]+?>',
+    charLenToOmit: 1,
+    string: child
+  }),
+      splitChild = _splitMatchedExp2.splitString,
+      childrenKeys = _splitMatchedExp2.matchedExpKeys;
+
+  childrenKeys.forEach(function (childKey, childIndex) {
+    var matchedChild = splitChild[childIndex];
+    handleString(matchedChild);
+    newChildren.push(children[childKey]);
+  });
+  handleString(splitChild[childrenKeys.length]);
+  return {
+    newChildren: newChildren,
+    stringPlaceHolders: stringPlaceHolders
+  };
+}
+
+function createElement() {
+  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      componentId = _ref3.componentId,
+      _ref3$children = _ref3.children,
+      children = _ref3$children === void 0 ? [] : _ref3$children,
+      _ref3$stringPlaceHold = _ref3.stringPlaceHolders,
+      stringPlaceHolders = _ref3$stringPlaceHold === void 0 ? {} : _ref3$stringPlaceHold;
+
+  return function () {
+    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+        _ref4$components = _ref4.components,
+        components = _ref4$components === void 0 ? {} : _ref4$components,
+        _ref4$values = _ref4.values,
+        values = _ref4$values === void 0 ? [] : _ref4$values;
+
+    var _ref5 = components[componentId] || {},
+        _ref5$type = _ref5.type,
+        type = _ref5$type === void 0 ? _react["default"].Fragment : _ref5$type,
+        props = _ref5.props;
+
+    var childElements = children.map(function (child, index) {
+      if (typeof child === 'function') {
+        return child({
+          components: components,
+          values: values
+        });
+      }
+
+      var string = '',
+          stringIndex = 0;
+      (stringPlaceHolders[index] || []).map(function (stringId, index) {
+        if (child[index]) {
+          string += child[index];
+        }
+
+        string += values[stringId];
+        stringIndex++;
+      });
+
+      if (child[stringIndex]) {
+        string += child[stringIndex];
+      }
+
+      return string;
+    });
+    return /*#__PURE__*/_react["default"].createElement.apply(_react["default"], [type, props].concat(_toConsumableArray(childElements)));
+  };
+}
+
+;
+
+function replaceWithComponentPlaceHolder(_ref6) {
+  var componentId = _ref6.componentId,
+      i18nKey = _ref6.i18nKey,
+      childrenLength = _ref6.childrenLength;
+  var closingTagIndex = i18nKey.indexOf("</".concat(componentId, ">"));
+  var childWithOpenTag = i18nKey.substring(0, closingTagIndex);
+  var openTagIndex = childWithOpenTag.lastIndexOf("<".concat(componentId, ">"));
+  return i18nKey.substring(0, openTagIndex) + "<0".concat(childrenLength).concat(componentId, ">") + i18nKey.substring(closingTagIndex + "".concat(componentId).length + 3);
+}
+
+function prepareI18NFunc() {
+  var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      i18nKey = _ref7.i18nKey,
+      _ref7$children = _ref7.children,
+      children = _ref7$children === void 0 ? {} : _ref7$children;
+
+  var componentIdMatch = i18nKey.match(/<\/[A-Za-z0-9]+?>/);
+
+  if (componentIdMatch) {
+    var componentId = componentIdMatch[0].substring(2, componentIdMatch[0].length - 1);
+    var childWithOpenTag = (i18nKey.match(new RegExp("(.*?)(?=</".concat(componentId, ">)"))) || [])[0] || '';
+    var child = childWithOpenTag.split("<".concat(componentId, ">")).pop();
+
+    var _generateChildren = generateChildren({
+      children: children,
+      child: child
+    }),
+        _newChildren = _generateChildren.newChildren,
+        _stringPlaceHolders = _generateChildren.stringPlaceHolders;
+
+    var childrenLength = Object.keys(children).length;
+    children["0".concat(childrenLength).concat(componentId)] = createElement({
+      componentId: componentId,
+      children: _newChildren,
+      stringPlaceHolders: _stringPlaceHolders
+    });
+    i18nKey = replaceWithComponentPlaceHolder({
+      componentId: componentId,
+      i18nKey: i18nKey,
+      childrenLength: childrenLength
+    });
+    return prepareI18NFunc({
+      i18nKey: i18nKey,
+      children: children
+    });
+  }
+
+  var _generateChildren2 = generateChildren({
+    child: i18nKey,
+    children: children
+  }),
+      newChildren = _generateChildren2.newChildren,
+      stringPlaceHolders = _generateChildren2.stringPlaceHolders;
+
+  return createElement({
+    componentId: -1,
+    children: newChildren,
+    stringPlaceHolders: stringPlaceHolders
+  });
+}
+
+function getI18NComponent(i18n) {
+  if (typeof i18n === 'undefined') {
+    return function (key) {
+      return key;
+    };
+  }
+
+  return function (key) {
+    var i18nStr = i18n[key];
+
+    if (i18nStr === undefined) {
+      return key;
+    }
+
+    if (typeof i18nStr === 'string') {
+      i18nStr = (0, _index.unescapeUnicode)(i18nStr);
+      var value = prepareI18NFunc({
+        i18nKey: i18nStr
+      });
+      window.loadI18nChunk && window.loadI18nChunk(_defineProperty({}, key, value));
+      i18nStr = value;
+    }
+
+    return i18nStr;
+  };
+}

package/package.json

@@ -1,29 +1,30 @@
-{
-  "name": "@zohodesk/i18n",
-  "version": "1.0.0-beta.25",
-  "main": "lib/index",
-  "module": "es/index.js",
-  "jsnext:main": "es/index.js",
-  "private": false,
-  "umdVar": "i18n",
-  "author": "",
-  "license": "ISC",
-  "scripts": {
-    "clean": "react-cli clean lib es coverage",
-    "build": "react-cli build:component:cmjs",
-    "build:es": "react-cli build:library:es",
-    "build:dev": "npm run clean && npm run build --module:mode=dev -- -w",
-    "prepublish": "npm run init && npm run build && npm run build:es ",
-    "prepare": "npm run init && npm run build && npm run build:es",
-    "init": "npm run clean",
-    "lint": "react-cli lint"
-  },
-  "dependencies": {
-    "@zoho/SecurityJS": "5.2.0"
-  },
-  "react-cli": {
-    "docs": {
-      "componentFolder": "./src"
-    }
-  }
-}
+{
+  "name": "@zohodesk/i18n",
+  "version": "1.0.0-beta.27",
+  "main": "lib/index",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "private": false,
+  "umdVar": "i18n",
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "clean": "react-cli clean lib es coverage",
+    "build": "react-cli build:component:cmjs",
+    "build:es": "react-cli build:library:es",
+    "build:dev": "npm run clean && npm run build --module:mode=dev -- -w",
+    "prepublish": "npm run init && npm run build && npm run build:es ",
+    "prepare": "npm run init && npm run build && npm run build:es",
+    "test": "react-cli test",
+    "init": "npm run clean",
+    "lint": "react-cli lint"
+  },
+  "dependencies": {
+    "@zoho/SecurityJS": "5.6.0"
+  },
+  "react-cli": {
+    "docs": {
+      "componentFolder": "./src"
+    }
+  }
+}

package/src/I18NContext.js

@@ -1,3 +1,3 @@
-import React from 'react';
-
+import React from 'react';
+
 export const I18NContext = React.createContext();