react-intl 2.2.1 → 2.4.0

package/src/components/provider.js

@@ -4,7 +4,8 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import {Component, Children, PropTypes} from 'react';
+import {Component, Children} from 'react';
+import PropTypes from 'prop-types';
 import IntlMessageFormat from 'intl-messageformat';
 import IntlRelativeFormat from 'intl-relativeformat';
 import IntlPluralFormat from '../plural';
@@ -21,156 +22,156 @@ 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',
+  formats: {},
+  messages: {},
+  textComponent: 'span',
 
-    defaultLocale : 'en',
-    defaultFormats: {},
+  defaultLocale: 'en',
+  defaultFormats: {},
 };
 
 export default class IntlProvider extends Component {
-    static displayName = 'IntlProvider';
-
-    static contextTypes = {
-        intl: intlShape,
-    };
-
-    static childContextTypes = {
-        intl: intlShape.isRequired,
-    };
+  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();
+    }
 
-    static propTypes = {
-        ...intlConfigPropTypes,
-        children  : PropTypes.element.isRequired,
-        initialNow: PropTypes.any,
+    // 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];
+      }
+    }
 
-    constructor(props, context = {}) {
-        super(props, context);
+    if (!hasLocaleData(config.locale)) {
+      const {locale, defaultLocale, defaultFormats} = config;
 
-        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/'
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          `[React Intl] Missing locale data for locale: "${locale}". ` +
+            `Using default locale: "${defaultLocale}" as fallback.`
         );
-
-        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;
-            },
-        };
+      }
+
+      // 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,
+      };
     }
 
-    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;
-    }
+    return config;
+  }
 
-    getBoundFormatFns(config, state) {
-        return intlFormatPropNames.reduce((boundFormatFns, name) => {
-            boundFormatFns[name] = format[name].bind(null, config, state);
-            return boundFormatFns;
-        }, {});
-    }
+  getBoundFormatFns(config, state) {
+    return intlFormatPropNames.reduce((boundFormatFns, name) => {
+      boundFormatFns[name] = format[name].bind(null, config, state);
+      return boundFormatFns;
+    }, {});
+  }
 
-    getChildContext() {
-        const config = this.getConfig();
+  getChildContext() {
+    const config = this.getConfig();
 
-        // Bind intl factories and current config to the format functions.
-        const boundFormatFns = this.getBoundFormatFns(config, this.state);
+    // Bind intl factories and current config to the format functions.
+    const boundFormatFns = this.getBoundFormatFns(config, this.state);
 
-        const {now, ...formatters} = this.state;
+    const {now, ...formatters} = this.state;
 
-        return {
-            intl: {
-                ...config,
-                ...boundFormatFns,
-                formatters,
-                now,
-            },
-        };
-    }
+    return {
+      intl: {
+        ...config,
+        ...boundFormatFns,
+        formatters,
+        now,
+      },
+    };
+  }
 
-    shouldComponentUpdate(...next) {
-        return shouldIntlComponentUpdate(this, ...next);
-    }
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
 
-    componentDidMount() {
-        this._didDisplay = true;
-    }
+  componentDidMount() {
+    this._didDisplay = true;
+  }
 
-    render() {
-        return Children.only(this.props.children);
-    }
+  render() {
+    return Children.only(this.props.children);
+  }
 }

package/src/components/relative.js

@@ -4,160 +4,168 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+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;
+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);
+  let absDelta = Math.abs(delta);
 
-    if (absDelta < MINUTE) {
-        return 'second';
-    }
+  if (absDelta < MINUTE) {
+    return 'second';
+  }
 
-    if (absDelta < HOUR) {
-        return 'minute';
-    }
+  if (absDelta < HOUR) {
+    return 'minute';
+  }
 
-    if (absDelta < DAY) {
-        return 'hour';
-    }
+  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';
+  // 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;
-    }
+  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;
-    }
+  if (a === b) {
+    return true;
+  }
 
-    let aTime = new Date(a).getTime();
-    let bTime = new Date(b).getTime();
+  let aTime = new Date(a).getTime();
+  let bTime = new Date(b).getTime();
 
-    return isFinite(aTime) && isFinite(bTime) && aTime === bTime;
+  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) {
-        const {updateInterval} = props;
-
-        // If the `updateInterval` is falsy, including `0`, then auto updates
-        // have been turned off, so we bail and skip scheduling an update.
-        if (!updateInterval) {
-            return;
-        }
-
-        let time  = new Date(props.value).getTime();
-        let delta = time - state.now;
-        let units = props.units || selectUnits(delta);
-
-        let unitDelay     = getUnitDelay(units);
-        let 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.
-        let delay = delta < 0 ?
-            Math.max(updateInterval, unitDelay - unitRemainder) :
-            Math.max(updateInterval, unitRemainder);
-
-        clearTimeout(this._timer);
-
-        this._timer = setTimeout(() => {
-            this.setState({now: this.context.intl.now()});
-        }, delay);
-    }
-
-    componentDidMount() {
-        this.scheduleNextUpdate(this.props, this.state);
+  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;
     }
 
-    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()});
-        }
+    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);
-    }
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
 
-    componentWillUpdate(nextProps, nextState) {
-        this.scheduleNextUpdate(nextProps, nextState);
-    }
+  componentWillUpdate(nextProps, nextState) {
+    this.scheduleNextUpdate(nextProps, nextState);
+  }
 
-    componentWillUnmount() {
-        clearTimeout(this._timer);
-    }
+  componentWillUnmount() {
+    clearTimeout(this._timer);
+  }
 
-    render() {
-        const {formatRelative, textComponent: Text} = this.context.intl;
-        const {value, children} = this.props;
+  render() {
+    const {formatRelative, textComponent: Text} = this.context.intl;
+    const {value, children} = this.props;
 
-        let formattedRelative = formatRelative(value, {
-            ...this.props,
-            ...this.state,
-        });
+    let formattedRelative = formatRelative(value, {
+      ...this.props,
+      ...this.state,
+    });
 
-        if (typeof children === 'function') {
-            return children(formattedRelative);
-        }
-
-        return <Text>{formattedRelative}</Text>;
+    if (typeof children === 'function') {
+      return children(formattedRelative);
     }
+
+    return <Text>{formattedRelative}</Text>;
+  }
 }

package/src/components/time.js

@@ -4,43 +4,44 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes} from 'react';
+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);
-    }
+  static displayName = 'FormattedTime';
 
-    shouldComponentUpdate(...next) {
-        return shouldIntlComponentUpdate(this, ...next);
-    }
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...dateTimeFormatPropTypes,
+    value: PropTypes.any.isRequired,
+    format: PropTypes.string,
+    children: PropTypes.func,
+  };
 
-    render() {
-        const {formatTime, textComponent: Text} = this.context.intl;
-        const {value, children} = this.props;
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
 
-        let formattedTime = formatTime(value, this.props);
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
 
-        if (typeof children === 'function') {
-            return children(formattedTime);
-        }
+  render() {
+    const {formatTime, textComponent: Text} = this.context.intl;
+    const {value, children} = this.props;
 
-        return <Text>{formattedTime}</Text>;
+    let formattedTime = formatTime(value, this.props);
+
+    if (typeof children === 'function') {
+      return children(formattedTime);
     }
+
+    return <Text>{formattedTime}</Text>;
+  }
 }

package/src/define-messages.js

@@ -5,7 +5,7 @@
  */
 
 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;
+  // This simply returns what's passed-in because it's meant to be a hook for
+  // babel-plugin-react-intl.
+  return messageDescriptors;
 }