@zohodesk/i18n 1.0.0-exp.3 → 1.0.0-exp.5

package/README.md

@@ -1,25 +1,139 @@
-# i18n
-
-# 1.0.0-beta.7
-
-- 'userDateFormat' util method - 'others' function fix
-
-# 1.0.0-beta.6
-
-- Added new prop 'isNeedTime' for DateTimeDiffFormat Component
-
-# 1.0.0-beta.5
-
-- Timezone logic moved to @zohodesk/datetimejs
-
-# 1.0.0-beta.4
-
-- Added new prop 'page' for DateTimeDiffFormat Component
-
-# 1.0.0-beta.3
-
-- Added support for exact times along with relative times in format() function
-
-# 1.0.0-beta.0
-
-- Test Publish
+# i18n
+
+# 1.0.0-beta.34
+
+- Tagholder Replacement with React Component
+
+# 1.0.0-beta.33
+
+- Upgrading @zoho/SecurityJS package to 7.2.4
+
+# 1.0.0-beta.32
+
+- Upgrading @zoho/SecurityJS package to 7.2.0
+
+# 1.0.0-beta.31
+
+- Syntax correction in Update Flow
+
+# 1.0.0-beta.30
+
+- Upgrading @zoho/SecurityJS package to 6.4.2
+
+# 1.0.0-beta.29
+
+- Downgrading @zoho/SecurityJS package to 6.3.0
+
+
+# 1.0.0-beta.28
+
+- Updating @zoho/SecurityJS package to 7.0.2
+
+
+# 1.0.0-beta.27
+
+- JSX support within a text
+
+# 1.0.0-beta.26
+
+- Localization feature enhancement in i18n method.
+
+# 1.0.0-beta.25
+
+- July i18n key correction
+
+# 1.0.0-beta.24
+
+- I18N support for Days, Months and 12-hour time variables.
+
+# 1.0.0-beta.23
+
+-  Zoho security version updated.
+
+# 1.0.0-beta.22
+
+- Data test id added for I18N.js
+
+# 1.0.0-beta.21
+
+- Data test id added for dateTimedifformat.js
+
+# 1.0.0-beta.20
+
+- Date field issue fixed in UserTimeDiffFormat component
+
+# 1.0.0-beta.19
+
+- In this version we have made changes in i18n provider to call user date format function only if the time zone data is available.
+
+# 1.0.0-beta.18
+
+- Localization feature added and incorporated into getI18NValue Method.
+
+# 1.0.0-beta.17
+
+- There was some i18n changes done in live before moving the date format build to live. Since we need these changes we have published it as new version.
+
+# 1.0.0-beta.16
+
+- DatePattern and dateTimePattern key has been changed for the date format build.
+
+# 1.0.0-beta.15.1
+
+- Zoho security version updated.
+
+# 1.0.0-beta.15
+
+- When working on date format build we have published I18n. Also, before moving date format build to master we had a emergency fix that need to be sent, so when publishing I18n we have published the date format changes with the next version.
+
+# 1.0.0-beta.14
+
+- Issue fixed in enable current year.
+
+# 1.0.0-beta.13
+
+- Issue fixed in due date.
+
+# 1.0.0-beta.12
+
+- Issue fixed in date Format Pattern.
+
+# 1.0.0-beta.11
+
+- Date Format Changes
+
+# 1.0.0-beta.10
+
+- Date Format Issue Fixes
+
+# 1.0.0-beta.9
+
+- Date Format Changes
+
+# 1.0.0-beta.8
+
+- ES Module Support Changes
+
+# 1.0.0-beta.7
+
+- 'userDateFormat' util method - 'others' function fix
+
+# 1.0.0-beta.6
+
+- Added new prop 'isNeedTime' for DateTimeDiffFormat Component
+
+# 1.0.0-beta.5
+
+- Timezone logic moved to @zohodesk/datetimejs
+
+# 1.0.0-beta.4
+
+- Added new prop 'page' for DateTimeDiffFormat Component
+
+# 1.0.0-beta.3
+
+- Added support for exact times along with relative times in format() function
+
+# 1.0.0-beta.0
+
+- Test Publish

package/es/components/DateTimeDiffFormat.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { pad, getValues, getDiffObj, formatDate, getLyears } from '../utils';
-import FormatText from './FormatText';
+import { pad, getValues, getDiffObj, formatDate, getLyears, getDatePatternWithoutYear } from "../utils";
+import FormatText from "./FormatText";
 import datetime from '@zohodesk/datetimejs';
 export default class DateTimeDiffFormat extends React.Component {
   constructor(props) {
@@ -40,10 +40,14 @@ export default class DateTimeDiffFormat extends React.Component {
       dataId,
       className = null,
       title = null,
-      isOverdue
+      isOverdue,
+      timeFormat,
+      datePattern,
+      isEnabledCurrentYear,
+      isDateField
     } = this.props;
     let fromDateObj = datetime.toDate(datetime.tz.utcToTz(from, fromTzData)).getTime();
-    let toDateObj = datetime.toDate(datetime.tz.utcToTz(to, toTzData)).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);
     let diff = getDiffObj(diffMin);
@@ -63,6 +67,7 @@ export default class DateTimeDiffFormat extends React.Component {
       suffix: suffix
     };
     let diffObj1 = {
+      to: to,
       type: type,
       page: page,
       isNeedTime: isNeedTime,
@@ -71,7 +76,6 @@ export default class DateTimeDiffFormat extends React.Component {
       seconds: diff.s,
       years: diff.y,
       yDays: diff.yd,
-      yMonth: diff.m,
       isWithInAWeek: withInAWeak,
       suffix: suffix,
       crntDate: new Date(from).getDate(),
@@ -87,8 +91,22 @@ 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;
@@ -129,62 +147,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);
+      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 (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);
+      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 ? /*#__PURE__*/React.createElement("span", {
       className: className,
       "data-title": title,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, text) : /*#__PURE__*/React.createElement(FormatText, {
       i18NKey: isSuffixEnable && suffix !== '' ? `${key}.${suffix}` : key,
       values: values,
@@ -201,6 +213,7 @@ DateTimeDiffFormat.propTypes = {
   format: PropTypes.func,
   from: PropTypes.string,
   fromTzData: PropTypes.object,
+  isDateField: PropTypes.bool,
   later: PropTypes.string,
   others: PropTypes.func,
   title: PropTypes.string,

package/es/components/FormatText.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18N from './I18N';
+import I18N from "./I18N";
 export default class FormatText extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(I18N, this.props);
+    return /*#__PURE__*/React.createElement(I18N, { ...this.props
+    });
   }
 
 }

package/es/components/HOCI18N.js

@@ -1,47 +1,50 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
-import { replaceI18NValuesWithRegex, unescapeUnicode } from '../utils';
-import { I18NContext } from '../I18NContext';
-export default ((i18NKeys = []) => Component => {
-  class HOCI18N extends React.Component {
-    constructor(props) {
-      super(props);
-      this.getI18NValue = this.getI18NValue.bind(this);
-    }
-
-    getI18NValue(key) {
-      const {
-        i18n
-      } = this.context || {};
-
-      if (typeof i18n === 'undefined') {
-        return key;
+import { replaceI18NValuesWithRegex, unescapeUnicode } from "../utils";
+import { I18NContext } from "../I18NContext";
+export default (function () {
+  let i18NKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return Component => {
+    class HOCI18N extends React.Component {
+      constructor(props) {
+        super(props);
+        this.getI18NValue = this.getI18NValue.bind(this);
       }
 
-      let i18nStr = i18n[key];
+      getI18NValue(key) {
+        const {
+          i18n
+        } = this.context || {};
 
-      if (i18nStr === undefined) {
-        return key;
-      }
+        if (typeof i18n === 'undefined') {
+          return key;
+        }
 
-      return unescapeUnicode(i18nStr);
-    }
+        let i18nStr = i18n[key];
 
-    render() {
-      let i18nProps = i18NKeys.reduce((result, key) => {
-        if (this.props[key]) {
-          result[key] = this.getI18NValue(this.props[key]);
+        if (i18nStr === undefined) {
+          return key;
         }
 
-        return result;
-      }, {});
-      return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, i18nProps));
-    }
+        return unescapeUnicode(i18nStr);
+      }
 
-  }
+      render() {
+        let i18nProps = i18NKeys.reduce((result, key) => {
+          if (this.props[key]) {
+            result[key] = this.getI18NValue(this.props[key]);
+          }
+
+          return result;
+        }, {});
+        return /*#__PURE__*/React.createElement(Component, { ...this.props,
+          ...i18nProps
+        });
+      }
+
+    }
 
-  HOCI18N.contextType = I18NContext;
-  return HOCI18N;
+    HOCI18N.contextType = I18NContext;
+    return HOCI18N;
+  };
 });

package/es/components/I18N.js

@@ -1,9 +1,8 @@
-import "core-js/modules/web.dom-collections.iterator";
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
-import { replaceI18NValuesWithRegex, unescapeUnicode } from '../utils';
+import { replaceI18NValuesWithRegex, unescapeUnicode } from "../utils";
 import { HTMLPurifier } from '@zoho/SecurityJS';
-import { I18NContext } from '../I18NContext';
+import { I18NContext } from "../I18NContext";
 export default class I18N extends React.Component {
   constructor(props) {
     super(props);
@@ -45,6 +44,7 @@ export default class I18N extends React.Component {
 
     if (this.props.dataId) {
       props['data-id'] = this.props.dataId;
+      props['data-test-id'] = this.props.dataId;
     }
 
     if (this.props.isHtml) {
@@ -68,6 +68,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/es/components/I18NProvider.js

@@ -1,41 +1,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { getI18NValue, userDateFormat } from '../utils';
-import { I18NContext } from '../I18NContext';
+import { getI18NValue, userDateFormat } from "../utils";
+import { getI18NComponent } from "../utils/jsxTranslations";
+import { I18NContext } from "../I18NContext";
 const emptyObj = {};
 
 const dummy = (key, values) => key;
 
 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, 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) {
+    if (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, props.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;
       }, () => {
         this.promise = null;
@@ -52,7 +63,7 @@ export default class I18NProvider extends React.Component {
         timeZone: this.props.timeZone,
         datePattern: this.props.datePattern,
         timeFormat: this.props.timeFormat,
-        dateTimeFormat: this.props.dateTimeFormat,
+        isEnabledCurrentYear: this.props.isEnabledCurrentYear,
         tzData: this.props.tzData
       }
     }, this.props.children);
@@ -64,13 +75,13 @@ I18NProvider.defaultProps = {
   timeZone: '',
   datePattern: '',
   timeFormat: '',
-  dateTimeFormat: '',
+  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,

package/es/components/PluralFormat.js

@@ -1,8 +1,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React from 'react';
 import PropTypes from 'prop-types';
-import FormatText from './FormatText';
+import FormatText from "./FormatText";
 export default class PluralFormat extends React.Component {
   render() {
     const {
@@ -23,13 +21,13 @@ export default class PluralFormat extends React.Component {
     }
 
     values = `${value}`;
-    return /*#__PURE__*/React.createElement(FormatText, _extends({}, this.props, {
+    return /*#__PURE__*/React.createElement(FormatText, { ...this.props,
       i18NKey: key,
       values: values,
       one: null,
       many: null,
       zero: null
-    }));
+    });
   }
 
 }

package/es/components/UserTimeDiffFormat.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import DateTimeDiffFormat from './DateTimeDiffFormat';
-import { I18NContext } from '../I18NContext';
+import DateTimeDiffFormat from "./DateTimeDiffFormat";
+import { I18NContext } from "../I18NContext";
 export default class UserTimeDiffFormat extends Component {
   render() {
     let currentTime = new Date();
@@ -22,19 +22,25 @@ export default class UserTimeDiffFormat extends Component {
       className,
       displayType,
       dataId,
-      isOverdue
+      isOverdue,
+      isDateField
     } = this.props;
     let {
       tzData,
       timeFormat,
       datePattern,
-      dateTimeFormat
+      isEnabledCurrentYear
     } = this.context || {};
 
     if (!format && !others) {
-      let pattern = displayType === 'date' ? datePattern : displayType === 'time' ? timeFormat : displayType === 'dateTime' ? dateTimeFormat : '';
-
-      format = () => pattern;
+      format = _ref => {
+        let {
+          dateTimeFormat,
+          dateFormat,
+          timeFormat
+        } = _ref;
+        displayType === 'dateTime' ? dateTimeFormat : displayType === 'date' ? dateFormat : timeFormat;
+      };
     }
 
     return /*#__PURE__*/React.createElement(DateTimeDiffFormat, {
@@ -55,7 +61,11 @@ export default class UserTimeDiffFormat extends Component {
       title: title,
       className: className,
       dataId: dataId,
-      isOverdue: isOverdue
+      isOverdue: isOverdue,
+      timeFormat: timeFormat,
+      datePattern: datePattern,
+      isEnabledCurrentYear: isEnabledCurrentYear,
+      isDateField: isDateField
     });
   }
 
@@ -66,6 +76,7 @@ UserTimeDiffFormat.propTypes = {
   dataId: PropTypes.string,
   displayType: PropTypes.oneOf(['date', 'time', 'dateTime']),
   format: PropTypes.func,
+  isDateField: PropTypes.bool,
   later: PropTypes.string,
   others: PropTypes.func,
   title: PropTypes.string,