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

package/src/components/HOCI18N.js

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

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

package/src/components/I18NProvider.js

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

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