@zohodesk/i18n 1.0.0-beta.3 → 1.0.0-beta.31

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,6 +1,6 @@
 {
   "name": "@zohodesk/i18n",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.31",
   "main": "lib/index",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
@@ -15,11 +15,12 @@
     "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.0.0-rc2.1"
+    "@zoho/SecurityJS": "6.4.2"
   },
   "react-cli": {
     "docs": {

package/src/components/DateTimeDiffFormat.js

@@ -6,9 +6,10 @@ import {
   getDiffObj,
   formatDate,
   getLyears,
-  convertUtcToUserTz
+  getDatePatternWithoutYear,
 } from '../utils';
 import FormatText from './FormatText';
+import datetime from '@zohodesk/datetimejs';
 export default class DateTimeDiffFormat extends React.Component {
   constructor(props) {
     super(props);
@@ -30,6 +31,8 @@ export default class DateTimeDiffFormat extends React.Component {
   render() {
     const {
       type,
+      page,
+      isNeedTime,
       from,
       fromTzData,
       to,
@@ -42,11 +45,19 @@ export default class DateTimeDiffFormat extends React.Component {
       dataId,
       className = null,
       title = null,
-      isOverdue
+      isOverdue,
+      timeFormat,
+      datePattern,
+      isEnabledCurrentYear,
+      isDateField
     } = this.props;
 
-    let fromDateObj = convertUtcToUserTz(from, fromTzData).getTime();
-    let toDateObj = convertUtcToUserTz(to, toTzData).getTime();
+    let fromDateObj = datetime
+      .toDate(datetime.tz.utcToTz(from, fromTzData))
+      .getTime();
+    let toDateObj = datetime
+      .toDate(isDateField ? to : datetime.tz.utcToTz(to, toTzData))
+      .getTime();
 
     let diffMin = new Date(to).getTime() - new Date(from).getTime();
     let suffix = this.getSuffix(diffMin);
@@ -65,16 +76,18 @@ export default class DateTimeDiffFormat extends React.Component {
       days: diff.yd,
       yDays: pad(diff.yd, 2),
       isWithInAWeek: withInAWeak,
-      suffix: suffix
+      suffix: suffix,
     };
     let diffObj1 = {
+      to: to,
       type: type,
+      page: page,
+      isNeedTime: isNeedTime,
       hours: diff.h,
       minutes: diff.m,
       seconds: diff.s,
       years: diff.y,
       yDays: diff.yd,
-      yMonth: diff.m,
       isWithInAWeek: withInAWeak,
       suffix: suffix,
       crntDate: new Date(from).getDate(),
@@ -90,9 +103,27 @@ export default class DateTimeDiffFormat extends React.Component {
       tMinutes: new Date(to).getMinutes(),
       tSeconds: new Date(to).getSeconds(),
       betweenleepYears: getLyears(from, to),
-      isOverdue: isOverdue
+      isOverdue: isOverdue,
+      timeFormat: timeFormat,
+      datePattern: datePattern,
+      dateTimePattern: `${datePattern} ${timeFormat}`,
     };
 
+    //In if condition we'll remove year and set date format  if the current year is not required
+    //In else part we'll set the date format as it is
+    if (
+      isEnabledCurrentYear === true &&
+      diffObj1.years === 0 &&
+      diffObj1.tYear === diffObj1.crntYear
+    ) {
+      let dateFormat = getDatePatternWithoutYear(datePattern);
+      diffObj1.dateFormat = dateFormat;
+      diffObj1.dateTimeFormat = `${dateFormat} ${timeFormat}`;
+    } else {
+      diffObj1.dateFormat = datePattern;
+      diffObj1.dateTimeFormat = `${datePattern} ${timeFormat}`;
+    }
+
     let key = '';
     let values = [];
     let text = null;
@@ -132,57 +163,56 @@ export default class DateTimeDiffFormat extends React.Component {
         text = formatDate(toDateObj, value, diffObj1);
       }
     } else {
-      if (diff.y === 0 && (diff.yd === 0 || diff.yd === 1)) {
-        let dateObj = new Date(toDateObj);
-        let curDateObj = new Date(fromDateObj);
-        if (dateObj.getDate() === curDateObj.getDate()) {
-          if (typeof today === 'function') {
-            var value = today(diffObj1);
-            key = value.key;
-            values = getValues(value.params, diffObj);
-          } else if (typeof today === 'object') {
-            key = today.key;
-            values = getValues(today.params, diffObj);
-            isSuffixEnable = true;
-          } else if (typeof today === 'string') {
-            text = formatDate(toDateObj, today);
-          }
-        } else if (dateObj.getDate() < curDateObj.getDate()) {
-          if (typeof yesterday === 'function') {
-            var value = yesterday(diffObj1);
-            key = value.key;
-            values = getValues(value.params, diffObj);
-          } else if (typeof yesterday === 'object') {
-            key = yesterday.key;
-            values = getValues(yesterday.params, diffObj);
-          } else if (typeof yesterday === 'string') {
-            text = formatDate(toDateObj, yesterday);
-          }
-        } else if (dateObj.getDate() > curDateObj.getDate()) {
-          if (typeof tomorrow === 'function') {
-            var value = tomorrow(diffObj1);
-            key = value.key;
-            text = getValues(value.params, diffObj);
-          } else if (typeof tomorrow === 'object') {
-            key = tomorrow.key;
-            values = getValues(tomorrow.params, diffObj);
-          } else if (typeof tomorrow === 'string') {
-            text = formatDate(toDateObj, tomorrow);
+      let dateObj = new Date(toDateObj);
+      let curDateObj = new Date(fromDateObj);
+      let diffDayType = diffObj1.yDays;
+
+      //In this condition, to calculate different days we have copied it from live --> diffDayType
+      if (
+        isOverdue &&
+        dateObj.getDate() < curDateObj.getDate() &&
+        diffObj1.yDays == 0
+      ) {
+        diffDayType = -1;
+      }
+      if (!isOverdue) {
+        let diffHr = dateObj.getHours() - curDateObj.getHours();
+        if (diffHr < 0) {
+          diffDayType += 1;
+        } else if (diffHr == 0) {
+          let diffMins = dateObj.getMinutes() - curDateObj.getMinutes();
+          if (diffMins < 0) {
+            diffDayType += 1;
+          } else if (diffMins == 0) {
+            let diffSec = dateObj.getSeconds() - curDateObj.getSeconds();
+            if (diffSec < 0) {
+              diffDayType += 1;
+            }
           }
         }
-      } else {
-        var value = others(diffObj1);
-        if (typeof value === 'object') {
-          key = value.key;
-          values = getValues(value.params, diffObj);
-          isSuffixEnable = true;
-        } else if (typeof value === 'string') {
+      }
+      if (diff.y === 0 && (diffDayType === 0 || diffDayType === 1)) {
+        if (dateObj.getDate() === curDateObj.getDate()) {
+          var value = (today && today(diffObj1)) || others(diffObj1);
+          text = formatDate(toDateObj, value);
+        } else if (
+          (dateObj.getMonth() === curDateObj.getMonth() &&
+            dateObj.getDate() < curDateObj.getDate()) ||
+          dateObj.getMonth() < curDateObj.getMonth()
+        ) {
+          var value = (yesterday && yesterday(diffObj1)) || others(diffObj1);
+          text = formatDate(toDateObj, value);
+        } else if (!isOverdue && diff.y === 0 && diffDayType === 1) {
+          var value = (tomorrow && tomorrow(diffObj1)) || others(diffObj1);
           text = formatDate(toDateObj, value);
         }
+      } else {
+        var value = others(diffObj1);
+        text = formatDate(toDateObj, value);
       }
     }
     return text ? (
-      <span className={className} data-title={title} data-id={dataId}>
+      <span className={className} data-title={title} data-id={dataId} data-test-id={dataId}>
         {text}
       </span>
     ) : (
@@ -202,6 +232,7 @@ DateTimeDiffFormat.propTypes = {
   format: PropTypes.func,
   from: PropTypes.string,
   fromTzData: PropTypes.object,
+  isDateField: PropTypes.bool,
   later: PropTypes.string,
   others: PropTypes.func,
   title: PropTypes.string,
@@ -210,16 +241,16 @@ DateTimeDiffFormat.propTypes = {
   today: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
-    PropTypes.func
+    PropTypes.func,
   ]),
   tomorrow: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
-    PropTypes.func
+    PropTypes.func,
   ]),
   yesterday: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
-    PropTypes.func
-  ])
+    PropTypes.func,
+  ]),
 };

package/src/components/I18N.js

@@ -41,6 +41,7 @@ export default class I18N extends React.Component {
     //const child=this.getI18NValue();
     if (this.props.dataId) {
       props['data-id'] = this.props.dataId;
+      props['data-test-id'] = this.props.dataId;
     }
     if (this.props.isHtml) {
       let dangerouslySetInnerHTML = {
@@ -63,6 +64,7 @@ I18N.propTypes = {
   i18NKey: PropTypes.string.isRequired,
   isHtml: PropTypes.bool,
   tag: PropTypes.string,
+  dataId: PropTypes.string,
   values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
 };
 I18N.defaultProps = {

package/src/components/I18NProvider.js

@@ -1,61 +1,72 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getI18NValue, userDateFormat } from '../utils';
-import { unpack } from '../timezones';
-import { createSelector } from 'reselect';
+import {
+  getI18NComponent
+} from '../utils/jsxTranslations';
 import { I18NContext } from '../I18NContext';
 
 const emptyObj = {};
 const dummy = (key, values) => key;
-const getTzData = createSelector(
-  [tzStr => tzStr],
-  tzStr => unpack(tzStr)
-);
+
 export const i18NProviderUtils = {
   getI18NValue: dummy,
-  userDateFormat: dummy
+  userDateFormat: dummy,
+  getI18NComponent: dummy
 };
 
 export default class I18NProvider extends React.Component {
   constructor(props, context) {
     super(props, context);
     i18NProviderUtils.getI18NValue = getI18NValue(props.i18n);
-    i18NProviderUtils.userDateFormat = userDateFormat(
-      i18NProviderUtils.getI18NValue,
-      unpack(props.tzData)
-    );
+    i18NProviderUtils.getI18NComponent = getI18NComponent(props.i18n);
+    if(props.tzData){
+      i18NProviderUtils.userDateFormat = userDateFormat(
+        i18NProviderUtils.getI18NValue,
+        props.tzData,
+        props.timeFormat,
+        props.datePattern,
+        props.isEnabledCurrentYear
+      );
+    }
   }
 
-  componentDidUpdate(next) {
+  componentDidUpdate(prevProps) {
     let {
       i18n,
       timeZone,
       datePattern,
       timeFormat,
-      dateTimeFormat,
       direction,
       onChange,
-      tzData
+      tzData,
+      isEnabledCurrentYear
     } = this.props;
     if (
-      i18n !== next.i18n ||
-      timeZone !== next.timeZone ||
-      datePattern !== next.datePattern ||
-      timeFormat !== next.timeFormat ||
-      dateTimeFormat !== next.dateTimeFormat ||
-      direction !== next.direction ||
-      tzData !== next.tzData
+      i18n !== prevProps.i18n ||
+      timeZone !== prevProps.timeZone ||
+      datePattern !== prevProps.datePattern ||
+      timeFormat !== prevProps.timeFormat ||
+      direction !== prevProps.direction ||
+      tzData !== prevProps.tzData ||
+      isEnabledCurrentYear !== prevProps.isEnabledCurrentYear
     ) {
       this.promise = new Promise((res, rej) => {
         this.resolve = res;
         this.reject = rej;
       }).then(
         () => {
-          i18NProviderUtils.getI18NValue = getI18NValue(nextProps.i18n);
-          i18NProviderUtils.userDateFormat = userDateFormat(
-            i18NProviderUtils.getI18NValue,
-            unpack(tzData)
-          );
+          i18NProviderUtils.getI18NValue = getI18NValue(this.props.i18n);
+          i18NProviderUtils.getI18NComponent = getI18NComponent(this.props.i18n);       
+          if (this.props.tzData) {
+            i18NProviderUtils.userDateFormat = userDateFormat(
+              i18NProviderUtils.getI18NValue,
+              this.props.tzData,
+              this.props.timeFormat,
+              this.props.datePattern,
+              this.props.isEnabledCurrentYear
+            );
+          }
           this.promise = null;
         },
         () => {
@@ -73,10 +84,10 @@ export default class I18NProvider extends React.Component {
           i18n: this.props.i18n,
           direction: this.props.direction,
           timeZone: this.props.timeZone,
-          tzData: getTzData(this.props.tzData),
           datePattern: this.props.datePattern,
           timeFormat: this.props.timeFormat,
-          dateTimeFormat: this.props.dateTimeFormat
+          isEnabledCurrentYear: this.props.isEnabledCurrentYear,
+          tzData: this.props.tzData,
         }}
       >
         {this.props.children}
@@ -90,18 +101,18 @@ I18NProvider.defaultProps = {
   timeZone: '',
   datePattern: '',
   timeFormat: '',
-  dateTimeFormat: '',
-  direction: 'ltr'
+  isEnabledCurrentYear: '',
+  direction: 'ltr',
 };
 
 I18NProvider.propTypes = {
   children: PropTypes.element.isRequired,
   datePattern: PropTypes.string,
-  dateTimeFormat: PropTypes.string,
+  isEnabledCurrentYear: PropTypes.string,
   direction: PropTypes.string,
   i18n: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
   onChange: PropTypes.func,
   timeFormat: PropTypes.string,
   timeZone: PropTypes.string,
-  tzData: PropTypes.string
-};
+  tzData: PropTypes.object,
+};