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

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,17 +1,15 @@
 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) {
     super(props);
     this.getSuffix = this.getSuffix.bind(this);
   }
-
   getSuffix(min) {
     let suffix;
-
     if (this.props.ago && min < 0) {
       suffix = this.props.ago || '';
     } else if (this.props.later || min > 0) {
@@ -19,10 +17,8 @@ export default class DateTimeDiffFormat extends React.Component {
     } else {
       suffix = '';
     }
-
     return suffix;
   }
-
   render() {
     const {
       type,
@@ -40,10 +36,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 +63,7 @@ export default class DateTimeDiffFormat extends React.Component {
       suffix: suffix
     };
     let diffObj1 = {
+      to: to,
       type: type,
       page: page,
       isNeedTime: isNeedTime,
@@ -71,7 +72,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,13 +87,26 @@ 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;
     let isSuffixEnable = false;
-
     if (format) {
       let years, months, days, hours, minutes, seconds;
       years = diffObj1.years > 1 ? '2' : diffObj1.years;
@@ -110,15 +123,12 @@ export default class DateTimeDiffFormat extends React.Component {
         } else {
           res = res + next;
         }
-
         return res;
       }, '');
       let value = format(diffObj1, pattern);
-
       if (value && typeof value === 'object') {
         key = value.key;
         values = getValues(value.params, diffObj);
-
         if (pattern.indexOf('00000') === 0) {
           //suffix ignore for second hook
           isSuffixEnable = false;
@@ -129,62 +139,51 @@ 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;
 
-        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);
+      //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 ? /*#__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,
@@ -192,7 +191,6 @@ export default class DateTimeDiffFormat extends React.Component {
       "data-title": title
     });
   }
-
 }
 DateTimeDiffFormat.propTypes = {
   ago: PropTypes.string,
@@ -201,6 +199,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,11 +1,12 @@
 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
+    });
   }
-
 }
 FormatText.propTypes = {
   i18NKey: PropTypes.string.isRequired,

package/es/components/HOCI18N.js

@@ -1,47 +1,42 @@
-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;
-      }
-
-      let i18nStr = i18n[key];
-
-      if (i18nStr === 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);
       }
-
-      return unescapeUnicode(i18nStr);
-    }
-
-    render() {
-      let i18nProps = i18NKeys.reduce((result, key) => {
-        if (this.props[key]) {
-          result[key] = this.getI18NValue(this.props[key]);
+      getI18NValue(key) {
+        const {
+          i18n
+        } = this.context || {};
+        if (typeof i18n === 'undefined') {
+          return key;
         }
-
-        return result;
-      }, {});
-      return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, i18nProps));
+        let i18nStr = i18n[key];
+        if (i18nStr === undefined) {
+          return key;
+        }
+        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,16 +1,14 @@
-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);
     this.getI18NValue = this.getI18NValue.bind(this);
     this.createElement = this.createElement.bind(this);
   }
-
   getI18NValue() {
     const {
       i18NKey: key,
@@ -19,34 +17,28 @@ export default class I18N extends React.Component {
     const {
       i18n
     } = this.context || {};
-
     if (typeof i18n === 'undefined') {
       return key;
     }
-
     let i18nStr = i18n[key];
-
     if (i18nStr === undefined) {
       return key;
     }
-
     i18nStr = replaceI18NValuesWithRegex(i18nStr, values);
     return unescapeUnicode(i18nStr);
   }
-
   createElement() {
     const props = Object.keys(this.props).reduce((result, nextKey) => {
       if (nextKey != 'i18NKey' && nextKey != 'tag' && nextKey != 'values' && nextKey != 'isHtml' && nextKey != 'dataId') {
         result[nextKey] = this.props[nextKey];
       }
-
       return result;
-    }, {}); //const child=this.getI18NValue();
-
+    }, {});
+    //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 = {
         __html: HTMLPurifier.sanitize(this.getI18NValue())
@@ -55,19 +47,17 @@ export default class I18N extends React.Component {
         dangerouslySetInnerHTML
       }));
     }
-
     return /*#__PURE__*/React.createElement(this.props.tag, props, this.getI18NValue());
   }
-
   render() {
     return this.createElement();
   }
-
 }
 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,45 @@
 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;
@@ -43,7 +47,6 @@ export default class I18NProvider extends React.Component {
       onChange && onChange(this.resolve, this.reject);
     }
   }
-
   render() {
     return /*#__PURE__*/React.createElement(I18NContext.Provider, {
       value: {
@@ -52,25 +55,24 @@ 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);
   }
-
 }
 I18NProvider.defaultProps = {
   i18n: emptyObj,
   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,