react-intl 2.3.0 → 2.4.0

package/src/components/message.js

@@ -0,0 +1,137 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import {Component, createElement, isValidElement} from 'react';
+import PropTypes from 'prop-types';
+import {intlShape, messageDescriptorPropTypes} from '../types';
+import {
+  invariantIntlContext,
+  shallowEquals,
+  shouldIntlComponentUpdate,
+} from '../utils';
+
+export default class FormattedMessage extends Component {
+  static displayName = 'FormattedMessage';
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...messageDescriptorPropTypes,
+    values: PropTypes.object,
+    tagName: PropTypes.string,
+    children: PropTypes.func,
+  };
+
+  static defaultProps = {
+    values: {},
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
+
+  shouldComponentUpdate(nextProps, ...next) {
+    const {values} = this.props;
+    const {values: nextValues} = nextProps;
+
+    if (!shallowEquals(nextValues, values)) {
+      return true;
+    }
+
+    // Since `values` has already been checked, we know they're not
+    // different, so the current `values` are carried over so the shallow
+    // equals comparison on the other props isn't affected by the `values`.
+    let nextPropsToCheck = {
+      ...nextProps,
+      values,
+    };
+
+    return shouldIntlComponentUpdate(this, nextPropsToCheck, ...next);
+  }
+
+  render() {
+    const {formatMessage, textComponent: Text} = this.context.intl;
+
+    const {
+      id,
+      description,
+      defaultMessage,
+      values,
+      tagName: Component = Text,
+      children,
+    } = this.props;
+
+    let tokenDelimiter;
+    let tokenizedValues;
+    let elements;
+
+    let hasValues = values && Object.keys(values).length > 0;
+    if (hasValues) {
+      // Creates a token with a random UID that should not be guessable or
+      // conflict with other parts of the `message` string.
+      let uid = Math.floor(Math.random() * 0x10000000000).toString(16);
+
+      let generateToken = (() => {
+        let counter = 0;
+        return () => `ELEMENT-${uid}-${(counter += 1)}`;
+      })();
+
+      // Splitting with a delimiter to support IE8. When using a regex
+      // with a capture group IE8 does not include the capture group in
+      // the resulting array.
+      tokenDelimiter = `@__${uid}__@`;
+      tokenizedValues = {};
+      elements = {};
+
+      // Iterates over the `props` to keep track of any React Element
+      // values so they can be represented by the `token` as a placeholder
+      // when the `message` is formatted. This allows the formatted
+      // message to then be broken-up into parts with references to the
+      // React Elements inserted back in.
+      Object.keys(values).forEach(name => {
+        let value = values[name];
+
+        if (isValidElement(value)) {
+          let token = generateToken();
+          tokenizedValues[name] = tokenDelimiter + token + tokenDelimiter;
+          elements[token] = value;
+        } else {
+          tokenizedValues[name] = value;
+        }
+      });
+    }
+
+    let descriptor = {id, description, defaultMessage};
+    let formattedMessage = formatMessage(descriptor, tokenizedValues || values);
+
+    let nodes;
+
+    let hasElements = elements && Object.keys(elements).length > 0;
+    if (hasElements) {
+      // Split the message into parts so the React Element values captured
+      // above can be inserted back into the rendered message. This
+      // approach allows messages to render with React Elements while
+      // keeping React's virtual diffing working properly.
+      nodes = formattedMessage
+        .split(tokenDelimiter)
+        .filter(part => !!part)
+        .map(part => elements[part] || part);
+    } else {
+      nodes = [formattedMessage];
+    }
+
+    if (typeof children === 'function') {
+      return children(...nodes);
+    }
+
+    // Needs to use `createElement()` instead of JSX, otherwise React will
+    // warn about a missing `key` prop with rich-text message formatting.
+    return createElement(Component, null, ...nodes);
+  }
+}

package/src/components/number.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {intlShape, numberFormatPropTypes} from '../types';
+import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
+
+export default class FormattedNumber extends Component {
+  static displayName = 'FormattedNumber';
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...numberFormatPropTypes,
+    value: PropTypes.any.isRequired,
+    format: PropTypes.string,
+    children: PropTypes.func,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
+
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
+
+  render() {
+    const {formatNumber, textComponent: Text} = this.context.intl;
+    const {value, children} = this.props;
+
+    let formattedNumber = formatNumber(value, this.props);
+
+    if (typeof children === 'function') {
+      return children(formattedNumber);
+    }
+
+    return <Text>{formattedNumber}</Text>;
+  }
+}

package/src/components/plural.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {intlShape, pluralFormatPropTypes} from '../types';
+import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
+
+export default class FormattedPlural extends Component {
+  static displayName = 'FormattedPlural';
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...pluralFormatPropTypes,
+    value: PropTypes.any.isRequired,
+
+    other: PropTypes.node.isRequired,
+    zero: PropTypes.node,
+    one: PropTypes.node,
+    two: PropTypes.node,
+    few: PropTypes.node,
+    many: PropTypes.node,
+
+    children: PropTypes.func,
+  };
+
+  static defaultProps = {
+    style: 'cardinal',
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
+
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
+
+  render() {
+    const {formatPlural, textComponent: Text} = this.context.intl;
+    const {value, other, children} = this.props;
+
+    let pluralCategory = formatPlural(value, this.props);
+    let formattedPlural = this.props[pluralCategory] || other;
+
+    if (typeof children === 'function') {
+      return children(formattedPlural);
+    }
+
+    return <Text>{formattedPlural}</Text>;
+  }
+}

package/src/components/provider.js

@@ -0,0 +1,177 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import {Component, Children} from 'react';
+import PropTypes from 'prop-types';
+import IntlMessageFormat from 'intl-messageformat';
+import IntlRelativeFormat from 'intl-relativeformat';
+import IntlPluralFormat from '../plural';
+import memoizeIntlConstructor from 'intl-format-cache';
+import invariant from 'invariant';
+import {shouldIntlComponentUpdate, filterProps} from '../utils';
+import {intlConfigPropTypes, intlFormatPropTypes, intlShape} from '../types';
+import * as format from '../format';
+import {hasLocaleData} from '../locale-data-registry';
+
+const intlConfigPropNames = Object.keys(intlConfigPropTypes);
+const intlFormatPropNames = Object.keys(intlFormatPropTypes);
+
+// These are not a static property on the `IntlProvider` class so the intl
+// config values can be inherited from an <IntlProvider> ancestor.
+const defaultProps = {
+  formats: {},
+  messages: {},
+  textComponent: 'span',
+
+  defaultLocale: 'en',
+  defaultFormats: {},
+};
+
+export default class IntlProvider extends Component {
+  static displayName = 'IntlProvider';
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static childContextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  static propTypes = {
+    ...intlConfigPropTypes,
+    children: PropTypes.element.isRequired,
+    initialNow: PropTypes.any,
+  };
+
+  constructor(props, context = {}) {
+    super(props, context);
+
+    invariant(
+      typeof Intl !== 'undefined',
+      '[React Intl] The `Intl` APIs must be available in the runtime, ' +
+        'and do not appear to be built-in. An `Intl` polyfill should be loaded.\n' +
+        'See: http://formatjs.io/guides/runtime-environments/'
+    );
+
+    const {intl: intlContext} = context;
+
+    // Used to stabilize time when performing an initial rendering so that
+    // all relative times use the same reference "now" time.
+    let initialNow;
+    if (isFinite(props.initialNow)) {
+      initialNow = Number(props.initialNow);
+    } else {
+      // When an `initialNow` isn't provided via `props`, look to see an
+      // <IntlProvider> exists in the ancestry and call its `now()`
+      // function to propagate its value for "now".
+      initialNow = intlContext ? intlContext.now() : Date.now();
+    }
+
+    // Creating `Intl*` formatters is expensive. If there's a parent
+    // `<IntlProvider>`, then its formatters will be used. Otherwise, this
+    // memoize the `Intl*` constructors and cache them for the lifecycle of
+    // this IntlProvider instance.
+    const {
+      formatters = {
+        getDateTimeFormat: memoizeIntlConstructor(Intl.DateTimeFormat),
+        getNumberFormat: memoizeIntlConstructor(Intl.NumberFormat),
+        getMessageFormat: memoizeIntlConstructor(IntlMessageFormat),
+        getRelativeFormat: memoizeIntlConstructor(IntlRelativeFormat),
+        getPluralFormat: memoizeIntlConstructor(IntlPluralFormat),
+      },
+    } =
+      intlContext || {};
+
+    this.state = {
+      ...formatters,
+
+      // Wrapper to provide stable "now" time for initial render.
+      now: () => {
+        return this._didDisplay ? Date.now() : initialNow;
+      },
+    };
+  }
+
+  getConfig() {
+    const {intl: intlContext} = this.context;
+
+    // Build a whitelisted config object from `props`, defaults, and
+    // `context.intl`, if an <IntlProvider> exists in the ancestry.
+    let config = filterProps(this.props, intlConfigPropNames, intlContext);
+
+    // Apply default props. This must be applied last after the props have
+    // been resolved and inherited from any <IntlProvider> in the ancestry.
+    // This matches how React resolves `defaultProps`.
+    for (let propName in defaultProps) {
+      if (config[propName] === undefined) {
+        config[propName] = defaultProps[propName];
+      }
+    }
+
+    if (!hasLocaleData(config.locale)) {
+      const {locale, defaultLocale, defaultFormats} = config;
+
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          `[React Intl] Missing locale data for locale: "${locale}". ` +
+            `Using default locale: "${defaultLocale}" as fallback.`
+        );
+      }
+
+      // Since there's no registered locale data for `locale`, this will
+      // fallback to the `defaultLocale` to make sure things can render.
+      // The `messages` are overridden to the `defaultProps` empty object
+      // to maintain referential equality across re-renders. It's assumed
+      // each <FormattedMessage> contains a `defaultMessage` prop.
+      config = {
+        ...config,
+        locale: defaultLocale,
+        formats: defaultFormats,
+        messages: defaultProps.messages,
+      };
+    }
+
+    return config;
+  }
+
+  getBoundFormatFns(config, state) {
+    return intlFormatPropNames.reduce((boundFormatFns, name) => {
+      boundFormatFns[name] = format[name].bind(null, config, state);
+      return boundFormatFns;
+    }, {});
+  }
+
+  getChildContext() {
+    const config = this.getConfig();
+
+    // Bind intl factories and current config to the format functions.
+    const boundFormatFns = this.getBoundFormatFns(config, this.state);
+
+    const {now, ...formatters} = this.state;
+
+    return {
+      intl: {
+        ...config,
+        ...boundFormatFns,
+        formatters,
+        now,
+      },
+    };
+  }
+
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
+
+  componentDidMount() {
+    this._didDisplay = true;
+  }
+
+  render() {
+    return Children.only(this.props.children);
+  }
+}

package/src/components/relative.js

@@ -0,0 +1,171 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {intlShape, relativeFormatPropTypes} from '../types';
+import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
+
+const SECOND = 1000;
+const MINUTE = 1000 * 60;
+const HOUR = 1000 * 60 * 60;
+const DAY = 1000 * 60 * 60 * 24;
+
+// The maximum timer delay value is a 32-bit signed integer.
+// See: https://mdn.io/setTimeout
+const MAX_TIMER_DELAY = 2147483647;
+
+function selectUnits(delta) {
+  let absDelta = Math.abs(delta);
+
+  if (absDelta < MINUTE) {
+    return 'second';
+  }
+
+  if (absDelta < HOUR) {
+    return 'minute';
+  }
+
+  if (absDelta < DAY) {
+    return 'hour';
+  }
+
+  // The maximum scheduled delay will be measured in days since the maximum
+  // timer delay is less than the number of milliseconds in 25 days.
+  return 'day';
+}
+
+function getUnitDelay(units) {
+  switch (units) {
+    case 'second':
+      return SECOND;
+    case 'minute':
+      return MINUTE;
+    case 'hour':
+      return HOUR;
+    case 'day':
+      return DAY;
+    default:
+      return MAX_TIMER_DELAY;
+  }
+}
+
+function isSameDate(a, b) {
+  if (a === b) {
+    return true;
+  }
+
+  let aTime = new Date(a).getTime();
+  let bTime = new Date(b).getTime();
+
+  return isFinite(aTime) && isFinite(bTime) && aTime === bTime;
+}
+
+export default class FormattedRelative extends Component {
+  static displayName = 'FormattedRelative';
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...relativeFormatPropTypes,
+    value: PropTypes.any.isRequired,
+    format: PropTypes.string,
+    updateInterval: PropTypes.number,
+    initialNow: PropTypes.any,
+    children: PropTypes.func,
+  };
+
+  static defaultProps = {
+    updateInterval: 1000 * 10,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+
+    let now = isFinite(props.initialNow)
+      ? Number(props.initialNow)
+      : context.intl.now();
+
+    // `now` is stored as state so that `render()` remains a function of
+    // props + state, instead of accessing `Date.now()` inside `render()`.
+    this.state = {now};
+  }
+
+  scheduleNextUpdate(props, state) {
+    // Cancel and pending update because we're scheduling a new update.
+    clearTimeout(this._timer);
+
+    const {value, units, updateInterval} = props;
+    const time = new Date(value).getTime();
+
+    // If the `updateInterval` is falsy, including `0` or we don't have a
+    // valid date, then auto updates have been turned off, so we bail and
+    // skip scheduling an update.
+    if (!updateInterval || !isFinite(time)) {
+      return;
+    }
+
+    const delta = time - state.now;
+    const unitDelay = getUnitDelay(units || selectUnits(delta));
+    const unitRemainder = Math.abs(delta % unitDelay);
+
+    // We want the largest possible timer delay which will still display
+    // accurate information while reducing unnecessary re-renders. The delay
+    // should be until the next "interesting" moment, like a tick from
+    // "1 minute ago" to "2 minutes ago" when the delta is 120,000ms.
+    const delay =
+      delta < 0
+        ? Math.max(updateInterval, unitDelay - unitRemainder)
+        : Math.max(updateInterval, unitRemainder);
+
+    this._timer = setTimeout(() => {
+      this.setState({now: this.context.intl.now()});
+    }, delay);
+  }
+
+  componentDidMount() {
+    this.scheduleNextUpdate(this.props, this.state);
+  }
+
+  componentWillReceiveProps({value: nextValue}) {
+    // When the `props.value` date changes, `state.now` needs to be updated,
+    // and the next update can be rescheduled.
+    if (!isSameDate(nextValue, this.props.value)) {
+      this.setState({now: this.context.intl.now()});
+    }
+  }
+
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+    this.scheduleNextUpdate(nextProps, nextState);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timer);
+  }
+
+  render() {
+    const {formatRelative, textComponent: Text} = this.context.intl;
+    const {value, children} = this.props;
+
+    let formattedRelative = formatRelative(value, {
+      ...this.props,
+      ...this.state,
+    });
+
+    if (typeof children === 'function') {
+      return children(formattedRelative);
+    }
+
+    return <Text>{formattedRelative}</Text>;
+  }
+}

package/src/components/time.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {intlShape, dateTimeFormatPropTypes} from '../types';
+import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
+
+export default class FormattedTime extends Component {
+  static displayName = 'FormattedTime';
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...dateTimeFormatPropTypes,
+    value: PropTypes.any.isRequired,
+    format: PropTypes.string,
+    children: PropTypes.func,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
+
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
+
+  render() {
+    const {formatTime, textComponent: Text} = this.context.intl;
+    const {value, children} = this.props;
+
+    let formattedTime = formatTime(value, this.props);
+
+    if (typeof children === 'function') {
+      return children(formattedTime);
+    }
+
+    return <Text>{formattedTime}</Text>;
+  }
+}

package/src/define-messages.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+export default function defineMessages(messageDescriptors) {
+  // This simply returns what's passed-in because it's meant to be a hook for
+  // babel-plugin-react-intl.
+  return messageDescriptors;
+}

package/src/en.js

@@ -0,0 +1,2 @@
+// GENERATED FILE
+export default {"locale":"en","pluralRuleFunction":function (n,ord){var s=String(n).split("."),v0=!s[1],t0=Number(s[0])==n,n10=t0&&s[0].slice(-1),n100=t0&&s[0].slice(-2);if(ord)return n10==1&&n100!=11?"one":n10==2&&n100!=12?"two":n10==3&&n100!=13?"few":"other";return n==1&&v0?"one":"other"},"fields":{"year":{"displayName":"year","relative":{"0":"this year","1":"next year","-1":"last year"},"relativeTime":{"future":{"one":"in {0} year","other":"in {0} years"},"past":{"one":"{0} year ago","other":"{0} years ago"}}},"month":{"displayName":"month","relative":{"0":"this month","1":"next month","-1":"last month"},"relativeTime":{"future":{"one":"in {0} month","other":"in {0} months"},"past":{"one":"{0} month ago","other":"{0} months ago"}}},"day":{"displayName":"day","relative":{"0":"today","1":"tomorrow","-1":"yesterday"},"relativeTime":{"future":{"one":"in {0} day","other":"in {0} days"},"past":{"one":"{0} day ago","other":"{0} days ago"}}},"hour":{"displayName":"hour","relative":{"0":"this hour"},"relativeTime":{"future":{"one":"in {0} hour","other":"in {0} hours"},"past":{"one":"{0} hour ago","other":"{0} hours ago"}}},"minute":{"displayName":"minute","relative":{"0":"this minute"},"relativeTime":{"future":{"one":"in {0} minute","other":"in {0} minutes"},"past":{"one":"{0} minute ago","other":"{0} minutes ago"}}},"second":{"displayName":"second","relative":{"0":"now"},"relativeTime":{"future":{"one":"in {0} second","other":"in {0} seconds"},"past":{"one":"{0} second ago","other":"{0} seconds ago"}}}}};