react-intl 2.3.0 → 2.4.0

package/src/format.js

@@ -0,0 +1,276 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import invariant from 'invariant';
+import IntlRelativeFormat from 'intl-relativeformat';
+
+import {
+  dateTimeFormatPropTypes,
+  numberFormatPropTypes,
+  relativeFormatPropTypes,
+  pluralFormatPropTypes,
+} from './types';
+
+import {escape, filterProps} from './utils';
+
+const DATE_TIME_FORMAT_OPTIONS = Object.keys(dateTimeFormatPropTypes);
+const NUMBER_FORMAT_OPTIONS = Object.keys(numberFormatPropTypes);
+const RELATIVE_FORMAT_OPTIONS = Object.keys(relativeFormatPropTypes);
+const PLURAL_FORMAT_OPTIONS = Object.keys(pluralFormatPropTypes);
+
+const RELATIVE_FORMAT_THRESHOLDS = {
+  second: 60, // seconds to minute
+  minute: 60, // minutes to hour
+  hour: 24, // hours to day
+  day: 30, // days to month
+  month: 12, // months to year
+};
+
+function updateRelativeFormatThresholds(newThresholds) {
+  const {thresholds} = IntlRelativeFormat;
+  ({
+    second: thresholds.second,
+    minute: thresholds.minute,
+    hour: thresholds.hour,
+    day: thresholds.day,
+    month: thresholds.month,
+  } = newThresholds);
+}
+
+function getNamedFormat(formats, type, name) {
+  let format = formats && formats[type] && formats[type][name];
+  if (format) {
+    return format;
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.error(`[React Intl] No ${type} format named: ${name}`);
+  }
+}
+
+export function formatDate(config, state, value, options = {}) {
+  const {locale, formats} = config;
+  const {format} = options;
+
+  let date = new Date(value);
+  let defaults = format && getNamedFormat(formats, 'date', format);
+  let filteredOptions = filterProps(
+    options,
+    DATE_TIME_FORMAT_OPTIONS,
+    defaults
+  );
+
+  try {
+    return state.getDateTimeFormat(locale, filteredOptions).format(date);
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`[React Intl] Error formatting date.\n${e}`);
+    }
+  }
+
+  return String(date);
+}
+
+export function formatTime(config, state, value, options = {}) {
+  const {locale, formats} = config;
+  const {format} = options;
+
+  let date = new Date(value);
+  let defaults = format && getNamedFormat(formats, 'time', format);
+  let filteredOptions = filterProps(
+    options,
+    DATE_TIME_FORMAT_OPTIONS,
+    defaults
+  );
+
+  if (
+    !filteredOptions.hour &&
+    !filteredOptions.minute &&
+    !filteredOptions.second
+  ) {
+    // Add default formatting options if hour, minute, or second isn't defined.
+    filteredOptions = {...filteredOptions, hour: 'numeric', minute: 'numeric'};
+  }
+
+  try {
+    return state.getDateTimeFormat(locale, filteredOptions).format(date);
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`[React Intl] Error formatting time.\n${e}`);
+    }
+  }
+
+  return String(date);
+}
+
+export function formatRelative(config, state, value, options = {}) {
+  const {locale, formats} = config;
+  const {format} = options;
+
+  let date = new Date(value);
+  let now = new Date(options.now);
+  let defaults = format && getNamedFormat(formats, 'relative', format);
+  let filteredOptions = filterProps(options, RELATIVE_FORMAT_OPTIONS, defaults);
+
+  // Capture the current threshold values, then temporarily override them with
+  // specific values just for this render.
+  const oldThresholds = {...IntlRelativeFormat.thresholds};
+  updateRelativeFormatThresholds(RELATIVE_FORMAT_THRESHOLDS);
+
+  try {
+    return state.getRelativeFormat(locale, filteredOptions).format(date, {
+      now: isFinite(now) ? now : state.now(),
+    });
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`[React Intl] Error formatting relative time.\n${e}`);
+    }
+  } finally {
+    updateRelativeFormatThresholds(oldThresholds);
+  }
+
+  return String(date);
+}
+
+export function formatNumber(config, state, value, options = {}) {
+  const {locale, formats} = config;
+  const {format} = options;
+
+  let defaults = format && getNamedFormat(formats, 'number', format);
+  let filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults);
+
+  try {
+    return state.getNumberFormat(locale, filteredOptions).format(value);
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`[React Intl] Error formatting number.\n${e}`);
+    }
+  }
+
+  return String(value);
+}
+
+export function formatPlural(config, state, value, options = {}) {
+  const {locale} = config;
+
+  let filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS);
+
+  try {
+    return state.getPluralFormat(locale, filteredOptions).format(value);
+  } catch (e) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(`[React Intl] Error formatting plural.\n${e}`);
+    }
+  }
+
+  return 'other';
+}
+
+export function formatMessage(
+  config,
+  state,
+  messageDescriptor = {},
+  values = {}
+) {
+  const {locale, formats, messages, defaultLocale, defaultFormats} = config;
+
+  const {id, defaultMessage} = messageDescriptor;
+
+  // `id` is a required field of a Message Descriptor.
+  invariant(id, '[React Intl] An `id` must be provided to format a message.');
+
+  const message = messages && messages[id];
+  const hasValues = Object.keys(values).length > 0;
+
+  // Avoid expensive message formatting for simple messages without values. In
+  // development messages will always be formatted in case of missing values.
+  if (!hasValues && process.env.NODE_ENV === 'production') {
+    return message || defaultMessage || id;
+  }
+
+  let formattedMessage;
+
+  if (message) {
+    try {
+      let formatter = state.getMessageFormat(message, locale, formats);
+
+      formattedMessage = formatter.format(values);
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          `[React Intl] Error formatting message: "${id}" for locale: "${locale}"` +
+            (defaultMessage ? ', using default message as fallback.' : '') +
+            `\n${e}`
+        );
+      }
+    }
+  } else {
+    if (process.env.NODE_ENV !== 'production') {
+      // This prevents warnings from littering the console in development
+      // when no `messages` are passed into the <IntlProvider> for the
+      // default locale, and a default message is in the source.
+      if (
+        !defaultMessage ||
+        (locale && locale.toLowerCase() !== defaultLocale.toLowerCase())
+      ) {
+        console.error(
+          `[React Intl] Missing message: "${id}" for locale: "${locale}"` +
+            (defaultMessage ? ', using default message as fallback.' : '')
+        );
+      }
+    }
+  }
+
+  if (!formattedMessage && defaultMessage) {
+    try {
+      let formatter = state.getMessageFormat(
+        defaultMessage,
+        defaultLocale,
+        defaultFormats
+      );
+
+      formattedMessage = formatter.format(values);
+    } catch (e) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          `[React Intl] Error formatting the default message for: "${id}"` +
+            `\n${e}`
+        );
+      }
+    }
+  }
+
+  if (!formattedMessage) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error(
+        `[React Intl] Cannot format message: "${id}", ` +
+          `using message ${message || defaultMessage
+            ? 'source'
+            : 'id'} as fallback.`
+      );
+    }
+  }
+
+  return formattedMessage || message || defaultMessage || id;
+}
+
+export function formatHTMLMessage(
+  config,
+  state,
+  messageDescriptor,
+  rawValues = {}
+) {
+  // Process all the values before they are used when formatting the ICU
+  // Message string. Since the formatted message might be injected via
+  // `innerHTML`, all String-based values need to be HTML-escaped.
+  let escapedValues = Object.keys(rawValues).reduce((escaped, name) => {
+    let value = rawValues[name];
+    escaped[name] = typeof value === 'string' ? escape(value) : value;
+    return escaped;
+  }, {});
+
+  return formatMessage(config, state, messageDescriptor, escapedValues);
+}

package/src/index.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import allLocaleData from '../locale-data/index';
+import {addLocaleData} from './react-intl';
+
+export * from './react-intl';
+
+addLocaleData(allLocaleData);

package/src/inject.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+// Inspired by react-redux's `connect()` HOC factory function implementation:
+// https://github.com/rackt/react-redux
+
+import React, {Component} from 'react';
+import invariant from 'invariant';
+import {intlShape} from './types';
+import {invariantIntlContext} from './utils';
+
+function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
+export default function injectIntl(WrappedComponent, options = {}) {
+  const {intlPropName = 'intl', withRef = false} = options;
+
+  class InjectIntl extends Component {
+    static displayName = `InjectIntl(${getDisplayName(WrappedComponent)})`;
+
+    static contextTypes = {
+      intl: intlShape,
+    };
+
+    static WrappedComponent = WrappedComponent;
+
+    constructor(props, context) {
+      super(props, context);
+      invariantIntlContext(context);
+    }
+
+    getWrappedInstance() {
+      invariant(
+        withRef,
+        '[React Intl] To access the wrapped instance, ' +
+          'the `{withRef: true}` option must be set when calling: ' +
+          '`injectIntl()`'
+      );
+
+      return this.refs.wrappedInstance;
+    }
+
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          {...{[intlPropName]: this.context.intl}}
+          ref={withRef ? 'wrappedInstance' : null}
+        />
+      );
+    }
+  }
+
+  return InjectIntl;
+}

package/src/locale-data-registry.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import IntlMessageFormat from 'intl-messageformat';
+import IntlRelativeFormat from 'intl-relativeformat';
+
+export function addLocaleData(data = []) {
+  let locales = Array.isArray(data) ? data : [data];
+
+  locales.forEach(localeData => {
+    if (localeData && localeData.locale) {
+      IntlMessageFormat.__addLocaleData(localeData);
+      IntlRelativeFormat.__addLocaleData(localeData);
+    }
+  });
+}
+
+export function hasLocaleData(locale) {
+  let localeParts = (locale || '').split('-');
+
+  while (localeParts.length > 0) {
+    if (hasIMFAndIRFLocaleData(localeParts.join('-'))) {
+      return true;
+    }
+
+    localeParts.pop();
+  }
+
+  return false;
+}
+
+function hasIMFAndIRFLocaleData(locale) {
+  let normalizedLocale = locale && locale.toLowerCase();
+
+  return !!(
+    IntlMessageFormat.__localeData__[normalizedLocale] &&
+    IntlRelativeFormat.__localeData__[normalizedLocale]
+  );
+}

package/src/plural.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+// This is a "hack" until a proper `intl-pluralformat` package is created.
+
+import IntlMessageFormat from 'intl-messageformat';
+
+function resolveLocale(locales) {
+  // IntlMessageFormat#_resolveLocale() does not depend on `this`.
+  return IntlMessageFormat.prototype._resolveLocale(locales);
+}
+
+function findPluralFunction(locale) {
+  // IntlMessageFormat#_findPluralFunction() does not depend on `this`.
+  return IntlMessageFormat.prototype._findPluralRuleFunction(locale);
+}
+
+export default class IntlPluralFormat {
+  constructor(locales, options = {}) {
+    let useOrdinal = options.style === 'ordinal';
+    let pluralFn = findPluralFunction(resolveLocale(locales));
+
+    this.format = value => pluralFn(value, useOrdinal);
+  }
+}

package/src/react-intl.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import defaultLocaleData from './en';
+import {addLocaleData} from './locale-data-registry';
+
+addLocaleData(defaultLocaleData);
+
+export {addLocaleData};
+export {intlShape} from './types';
+export {default as injectIntl} from './inject';
+export {default as defineMessages} from './define-messages';
+
+export {default as IntlProvider} from './components/provider';
+export {default as FormattedDate} from './components/date';
+export {default as FormattedTime} from './components/time';
+export {default as FormattedRelative} from './components/relative';
+export {default as FormattedNumber} from './components/number';
+export {default as FormattedPlural} from './components/plural';
+export {default as FormattedMessage} from './components/message';
+export {default as FormattedHTMLMessage} from './components/html-message';

package/src/types.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import PropTypes from 'prop-types';
+
+const {
+  bool,
+  number,
+  string,
+  func,
+  object,
+  oneOf,
+  shape,
+  any,
+  oneOfType,
+} = PropTypes;
+const localeMatcher = oneOf(['best fit', 'lookup']);
+const narrowShortLong = oneOf(['narrow', 'short', 'long']);
+const numeric2digit = oneOf(['numeric', '2-digit']);
+const funcReq = func.isRequired;
+
+export const intlConfigPropTypes = {
+  locale: string,
+  formats: object,
+  messages: object,
+  textComponent: any,
+
+  defaultLocale: string,
+  defaultFormats: object,
+};
+
+export const intlFormatPropTypes = {
+  formatDate: funcReq,
+  formatTime: funcReq,
+  formatRelative: funcReq,
+  formatNumber: funcReq,
+  formatPlural: funcReq,
+  formatMessage: funcReq,
+  formatHTMLMessage: funcReq,
+};
+
+export const intlShape = shape({
+  ...intlConfigPropTypes,
+  ...intlFormatPropTypes,
+  formatters: object,
+  now: funcReq,
+});
+
+export const messageDescriptorPropTypes = {
+  id: string.isRequired,
+  description: oneOfType([string, object]),
+  defaultMessage: string,
+};
+
+export const dateTimeFormatPropTypes = {
+  localeMatcher,
+  formatMatcher: oneOf(['basic', 'best fit']),
+
+  timeZone: string,
+  hour12: bool,
+
+  weekday: narrowShortLong,
+  era: narrowShortLong,
+  year: numeric2digit,
+  month: oneOf(['numeric', '2-digit', 'narrow', 'short', 'long']),
+  day: numeric2digit,
+  hour: numeric2digit,
+  minute: numeric2digit,
+  second: numeric2digit,
+  timeZoneName: oneOf(['short', 'long']),
+};
+
+export const numberFormatPropTypes = {
+  localeMatcher,
+
+  style: oneOf(['decimal', 'currency', 'percent']),
+  currency: string,
+  currencyDisplay: oneOf(['symbol', 'code', 'name']),
+  useGrouping: bool,
+
+  minimumIntegerDigits: number,
+  minimumFractionDigits: number,
+  maximumFractionDigits: number,
+  minimumSignificantDigits: number,
+  maximumSignificantDigits: number,
+};
+
+export const relativeFormatPropTypes = {
+  style: oneOf(['best fit', 'numeric']),
+  units: oneOf(['second', 'minute', 'hour', 'day', 'month', 'year']),
+};
+
+export const pluralFormatPropTypes = {
+  style: oneOf(['cardinal', 'ordinal']),
+};

package/src/utils.js

@@ -0,0 +1,103 @@
+/*
+HTML escaping and shallow-equals implementations are the same as React's
+(on purpose.) Therefore, it has the following Copyright and Licensing:
+
+Copyright 2013-2014, Facebook, Inc.
+All rights reserved.
+
+This source code is licensed under the BSD-style license found in the LICENSE
+file in the root directory of React's source tree.
+*/
+
+import invariant from 'invariant';
+import {intlConfigPropTypes} from './types';
+
+const intlConfigPropNames = Object.keys(intlConfigPropTypes);
+
+const ESCAPED_CHARS = {
+  '&': '&',
+  '>': '>',
+  '<': '&lt;',
+  '"': '&quot;',
+  "'": '&#x27;',
+};
+
+const UNSAFE_CHARS_REGEX = /[&><"']/g;
+
+export function escape(str) {
+  return ('' + str).replace(UNSAFE_CHARS_REGEX, match => ESCAPED_CHARS[match]);
+}
+
+export function filterProps(props, whitelist, defaults = {}) {
+  return whitelist.reduce((filtered, name) => {
+    if (props.hasOwnProperty(name)) {
+      filtered[name] = props[name];
+    } else if (defaults.hasOwnProperty(name)) {
+      filtered[name] = defaults[name];
+    }
+
+    return filtered;
+  }, {});
+}
+
+export function invariantIntlContext({intl} = {}) {
+  invariant(
+    intl,
+    '[React Intl] Could not find required `intl` object. ' +
+      '<IntlProvider> needs to exist in the component ancestry.'
+  );
+}
+
+export function shallowEquals(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false;
+  }
+
+  let keysA = Object.keys(objA);
+  let keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  let bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+  for (let i = 0; i < keysA.length; i++) {
+    if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function shouldIntlComponentUpdate(
+  {props, state, context = {}},
+  nextProps,
+  nextState,
+  nextContext = {}
+) {
+  const {intl = {}} = context;
+  const {intl: nextIntl = {}} = nextContext;
+
+  return (
+    !shallowEquals(nextProps, props) ||
+    !shallowEquals(nextState, state) ||
+    !(
+      nextIntl === intl ||
+      shallowEquals(
+        filterProps(nextIntl, intlConfigPropNames),
+        filterProps(intl, intlConfigPropNames)
+      )
+    )
+  );
+}