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

package/src/components/I18N.js

@@ -1,74 +1,74 @@
-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;
-      props['data-test-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,
-  dataId: PropTypes.string,
-  values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
-};
-I18N.defaultProps = {
-  tag: 'span',
-  isHtml: false
-};
-I18N.contextType = I18NContext;
+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;
+      props['data-test-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,
+  dataId: PropTypes.string,
+  values: PropTypes.oneOfType([PropTypes.string, PropTypes.array])
+};
+I18N.defaultProps = {
+  tag: 'span',
+  isHtml: false
+};
+I18N.contextType = I18NContext;

package/src/components/I18NProvider.js

@@ -1,110 +1,116 @@
-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,
-};
+import React from 'react';
+import PropTypes from 'prop-types';
+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,
+  getI18NComponent: dummy
+};
+
+export default class I18NProvider extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    i18NProviderUtils.getI18NValue = getI18NValue(props.i18n);
+    i18NProviderUtils.getI18NComponent = getI18NComponent(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);
+          i18NProviderUtils.getI18NComponent = getI18NComponent(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

@@ -1,37 +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
-};
+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

@@ -1,97 +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;
+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;