@zohodesk/i18n 1.0.0-beta.2 → 1.0.0-beta.20

package/package.json

@@ -1,29 +1,29 @@
-{
-  "name": "@zohodesk/i18n",
-  "version": "1.0.0-beta.2",
-  "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.0.0-rc2.1"
-  },
-  "react-cli": {
-    "docs": {
-      "componentFolder": "./src"
-    }
-  }
-}
+{
+  "name": "@zohodesk/i18n",
+  "version": "1.0.0-beta.20",
+  "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.0.2"
+  },
+  "react-cli": {
+    "docs": {
+      "componentFolder": "./src"
+    }
+  }
+}

package/src/I18NContext.js

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

package/src/components/DateTimeDiffFormat.js

@@ -0,0 +1,256 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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) {
+      suffix = this.props.later || '';
+    } else {
+      suffix = '';
+    }
+    return suffix;
+  }
+
+  render() {
+    const {
+      type,
+      page,
+      isNeedTime,
+      from,
+      fromTzData,
+      to,
+      toTzData,
+      today,
+      yesterday,
+      tomorrow,
+      others,
+      format,
+      dataId,
+      className = null,
+      title = null,
+      isOverdue,
+      timeFormat,
+      datePattern,
+      isEnabledCurrentYear,
+      isDateField
+    } = this.props;
+
+    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);
+    let diff = getDiffObj(diffMin);
+    let withInAWeak = diff.y === 0 && diff.yd <= 7;
+
+    let diffObj = {
+      h: diff.h,
+      m: diff.m,
+      s: diff.s,
+      y: diff.y,
+      hh: pad(diff.h, 2),
+      mm: pad(diff.m, 2),
+      ss: pad(diff.s, 2),
+      yy: pad(diff.y, 2),
+      days: diff.yd,
+      yDays: pad(diff.yd, 2),
+      isWithInAWeek: withInAWeak,
+      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,
+      isWithInAWeek: withInAWeak,
+      suffix: suffix,
+      crntDate: new Date(from).getDate(),
+      crntMonth: new Date(from).getMonth(),
+      crntYear: new Date(from).getFullYear(),
+      crntHours: new Date(from).getHours(),
+      crntMinutes: new Date(from).getMinutes(),
+      crntSeconds: new Date(from).getSeconds(),
+      tDate: new Date(to).getDate(),
+      tMonth: new Date(to).getMonth(),
+      tYear: new Date(to).getFullYear(),
+      tHours: new Date(to).getHours(),
+      tMinutes: new Date(to).getMinutes(),
+      tSeconds: new Date(to).getSeconds(),
+      betweenleepYears: getLyears(from, to),
+      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;
+
+      days = diff.yd > 1 ? '2' : diff.yd;
+      hours = diffObj1.hours > 1 ? '2' : diffObj1.hours;
+      minutes = diffObj1.minutes > 1 ? '2' : diffObj1.minutes;
+
+      let count = 0;
+      let pattern = [years, days, hours, minutes].reduce((res, next) => {
+        if (count === 2) {
+          res = `${res}0`;
+        } else if (next !== 0) {
+          count++;
+          res = res + next;
+        } 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;
+        } else {
+          isSuffixEnable = true;
+        }
+      } else if (typeof value === 'string') {
+        text = formatDate(toDateObj, value, diffObj1);
+      }
+    } else {
+      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;
+            }
+          }
+        }
+      }
+      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}>
+        {text}
+      </span>
+    ) : (
+      <FormatText
+        i18NKey={isSuffixEnable && suffix !== '' ? `${key}.${suffix}` : key}
+        values={values}
+        className={className}
+        data-title={title}
+      />
+    );
+  }
+}
+DateTimeDiffFormat.propTypes = {
+  ago: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  format: PropTypes.func,
+  from: PropTypes.string,
+  fromTzData: PropTypes.object,
+  isDateField: PropTypes.bool,
+  later: PropTypes.string,
+  others: PropTypes.func,
+  title: PropTypes.string,
+  to: PropTypes.string,
+  toTzData: PropTypes.object,
+  today: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  tomorrow: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  yesterday: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+};

package/src/components/FormatText.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import I18N from './I18N';
+
+export default class FormatText extends React.Component {
+  render() {
+    return <I18N {...this.props} />;
+  }
+}
+FormatText.propTypes = {
+  i18NKey: PropTypes.string.isRequired,
+  isHtml: PropTypes.bool,
+  values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+};

package/src/components/HOCI18N.js

@@ -0,0 +1,37 @@
+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;
+      }
+      return unescapeUnicode(i18nStr);
+    }
+
+    render() {
+      let i18nProps = i18NKeys.reduce((result, key) => {
+        if (this.props[key]) {
+          result[key] = this.getI18NValue(this.props[key]);
+        }
+        return result;
+      }, {});
+      return <Component {...this.props} {...i18nProps} />;
+    }
+  }
+
+  HOCI18N.contextType = I18NContext;
+  return HOCI18N;
+};

package/src/components/I18N.js

@@ -0,0 +1,72 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import { replaceI18NValuesWithRegex, unescapeUnicode } from '../utils';
+import { HTMLPurifier } from '@zoho/SecurityJS';
+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, values } = this.props;
+    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();
+    if (this.props.dataId) {
+      props['data-id'] = this.props.dataId;
+    }
+    if (this.props.isHtml) {
+      let dangerouslySetInnerHTML = {
+        __html: HTMLPurifier.sanitize(this.getI18NValue())
+      };
+
+      return React.createElement(
+        this.props.tag,
+        Object.assign(props, { dangerouslySetInnerHTML })
+      );
+    }
+    return React.createElement(this.props.tag, props, this.getI18NValue());
+  }
+
+  render() {
+    return this.createElement();
+  }
+}
+I18N.propTypes = {
+  i18NKey: PropTypes.string.isRequired,
+  isHtml: PropTypes.bool,
+  tag: PropTypes.string,
+  values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+};
+I18N.defaultProps = {
+  tag: 'span',
+  isHtml: false
+};
+I18N.contextType = I18NContext;

package/src/components/I18NProvider.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getI18NValue, userDateFormat } from '../utils';
+import { I18NContext } from '../I18NContext';
+
+const emptyObj = {};
+const dummy = (key, values) => key;
+
+export const i18NProviderUtils = {
+  getI18NValue: dummy,
+  userDateFormat: dummy,
+};
+
+export default class I18NProvider extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    i18NProviderUtils.getI18NValue = getI18NValue(props.i18n);
+    if(props.tzData){
+      i18NProviderUtils.userDateFormat = userDateFormat(
+        i18NProviderUtils.getI18NValue,
+        props.tzData,
+        props.timeFormat,
+        props.datePattern,
+        props.isEnabledCurrentYear
+      );
+    }
+  }
+
+  componentDidUpdate(next) {
+    let {
+      i18n,
+      timeZone,
+      datePattern,
+      timeFormat,
+      direction,
+      onChange,
+      tzData,
+    } = this.props;
+    if (
+      i18n !== next.i18n ||
+      timeZone !== next.timeZone ||
+      datePattern !== next.datePattern ||
+      timeFormat !== next.timeFormat ||
+      direction !== next.direction ||
+      tzData !== next.tzData
+    ) {
+      this.promise = new Promise((res, rej) => {
+        this.resolve = res;
+        this.reject = rej;
+      }).then(
+        () => {
+          i18NProviderUtils.getI18NValue = getI18NValue(nextProps.i18n);
+          if(props.tzData){
+            i18NProviderUtils.userDateFormat = userDateFormat(
+              i18NProviderUtils.getI18NValue,
+              props.tzData,
+              props.timeFormat,
+              props.datePattern,
+              this.props.isEnabledCurrentYear
+            );
+          }
+          this.promise = null;
+        },
+        () => {
+          this.promise = null;
+        }
+      );
+      onChange && onChange(this.resolve, this.reject);
+    }
+  }
+
+  render() {
+    return (
+      <I18NContext.Provider
+        value={{
+          i18n: this.props.i18n,
+          direction: this.props.direction,
+          timeZone: this.props.timeZone,
+          datePattern: this.props.datePattern,
+          timeFormat: this.props.timeFormat,
+          isEnabledCurrentYear: this.props.isEnabledCurrentYear,
+          tzData: this.props.tzData,
+        }}
+      >
+        {this.props.children}
+      </I18NContext.Provider>
+    );
+  }
+}
+
+I18NProvider.defaultProps = {
+  i18n: emptyObj,
+  timeZone: '',
+  datePattern: '',
+  timeFormat: '',
+  isEnabledCurrentYear: '',
+  direction: 'ltr',
+};
+
+I18NProvider.propTypes = {
+  children: PropTypes.element.isRequired,
+  datePattern: 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.object,
+};

package/src/components/PluralFormat.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FormatText from './FormatText';
+
+export default class PluralFormat extends React.Component {
+  render() {
+    const { one, many, zero, value } = this.props;
+    let key = '',
+      values = '';
+    if (value > 1) {
+      key = many;
+    } else if (value == 1) {
+      key = one;
+    } else if (value == 0) {
+      key = zero;
+    }
+    values = `${value}`;
+
+    return (
+      <FormatText
+        {...this.props}
+        i18NKey={key}
+        values={values}
+        one={null}
+        many={null}
+        zero={null}
+      />
+    );
+  }
+}
+PluralFormat.propTypes = {
+  many: PropTypes.string,
+  one: PropTypes.string,
+  tag: PropTypes.string,
+  value: PropTypes.number,
+  zero: PropTypes.string
+};

package/src/components/UserTimeDiffFormat.js

@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import DateTimeDiffFormat from './DateTimeDiffFormat';
+import { I18NContext } from '../I18NContext';
+
+export default class UserTimeDiffFormat extends Component {
+  render() {
+    let currentTime = new Date();
+    let currentTimeUTCString = currentTime.toISOString();
+    let {
+      type,
+      page,
+      isNeedTime,
+      to,
+      today,
+      yesterday,
+      tomorrow,
+      others,
+      ago,
+      later,
+      format,
+      title,
+      className,
+      displayType,
+      dataId,
+      isOverdue,
+      isDateField
+    } = this.props;
+    let { tzData, timeFormat, datePattern, isEnabledCurrentYear } =
+      this.context || {};
+
+    if (!format && !others) {
+      format = ({ dateTimeFormat, dateFormat, timeFormat }) => {
+        displayType === 'dateTime'
+          ? dateTimeFormat
+          : displayType === 'date'
+          ? dateFormat
+          : timeFormat;
+      };
+    }
+
+    return (
+      <DateTimeDiffFormat
+        type={type}
+        page={page}
+        isNeedTime={isNeedTime}
+        from={currentTimeUTCString}
+        fromTzData={tzData}
+        to={to}
+        toTzData={tzData}
+        today={today}
+        yesterday={yesterday}
+        tomorrow={tomorrow}
+        others={others}
+        ago={ago}
+        later={later}
+        format={format}
+        title={title}
+        className={className}
+        dataId={dataId}
+        isOverdue={isOverdue}
+        timeFormat={timeFormat}
+        datePattern={datePattern}
+        isEnabledCurrentYear={isEnabledCurrentYear}
+        isDateField={isDateField}
+      />
+    );
+  }
+}
+UserTimeDiffFormat.propTypes = {
+  ago: PropTypes.string,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  displayType: PropTypes.oneOf(['date', 'time', 'dateTime']),
+  format: PropTypes.func,
+  isDateField: PropTypes.bool,
+  later: PropTypes.string,
+  others: PropTypes.func,
+  title: PropTypes.string,
+  to: PropTypes.string,
+  today: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  tomorrow: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+  yesterday: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+    PropTypes.func,
+  ]),
+};
+UserTimeDiffFormat.contextType = I18NContext;