react-intl 2.2.1 → 2.4.0

package/src/components/html-message.js

@@ -4,84 +4,85 @@
  * 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, messageDescriptorPropTypes} from '../types';
 import {
-    invariantIntlContext,
-    shallowEquals,
-    shouldIntlComponentUpdate,
+  invariantIntlContext,
+  shallowEquals,
+  shouldIntlComponentUpdate,
 } from '../utils';
 
 export default class FormattedHTMLMessage extends Component {
-    static displayName = 'FormattedHTMLMessage';
+  static displayName = 'FormattedHTMLMessage';
 
-    static contextTypes = {
-        intl: intlShape,
-    };
+  static contextTypes = {
+    intl: intlShape,
+  };
 
-    static propTypes = {
-        ...messageDescriptorPropTypes,
-        values  : PropTypes.object,
-        tagName : PropTypes.string,
-        children: PropTypes.func,
-    };
+  static propTypes = {
+    ...messageDescriptorPropTypes,
+    values: PropTypes.object,
+    tagName: PropTypes.string,
+    children: PropTypes.func,
+  };
 
-    static defaultProps = {
-        values: {},
-    };
-
-    constructor(props, context) {
-        super(props, context);
-        invariantIntlContext(context);
-    }
+  static defaultProps = {
+    values: {},
+  };
 
-    shouldComponentUpdate(nextProps, ...next) {
-        const {values}             = this.props;
-        const {values: nextValues} = nextProps;
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
 
-        if (!shallowEquals(nextValues, values)) {
-            return true;
-        }
+  shouldComponentUpdate(nextProps, ...next) {
+    const {values} = this.props;
+    const {values: nextValues} = nextProps;
 
-        // 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);
+    if (!shallowEquals(nextValues, values)) {
+      return true;
     }
 
-    render() {
-        const {formatHTMLMessage, textComponent: Text} = this.context.intl;
+    // 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);
+  }
 
-        const {
-            id,
-            description,
-            defaultMessage,
-            values: rawValues,
-            tagName: Component = Text,
-            children,
-        } = this.props;
+  render() {
+    const {formatHTMLMessage, textComponent: Text} = this.context.intl;
 
-        let descriptor           = {id, description, defaultMessage};
-        let formattedHTMLMessage = formatHTMLMessage(descriptor, rawValues);
+    const {
+      id,
+      description,
+      defaultMessage,
+      values: rawValues,
+      tagName: Component = Text,
+      children,
+    } = this.props;
 
-        if (typeof children === 'function') {
-            return children(formattedHTMLMessage);
-        }
+    let descriptor = {id, description, defaultMessage};
+    let formattedHTMLMessage = formatHTMLMessage(descriptor, rawValues);
 
-        // Since the message presumably has HTML in it, we need to set
-        // `innerHTML` in order for it to be rendered and not escaped by React.
-        // To be safe, all string prop values were escaped when formatting the
-        // message. It is assumed that the message is not UGC, and came from the
-        // developer making it more like a template.
-        //
-        // Note: There's a perf impact of using this component since there's no
-        // way for React to do its virtual DOM diffing.
-        const html = {__html: formattedHTMLMessage};
-        return <Component dangerouslySetInnerHTML={html}/>;
+    if (typeof children === 'function') {
+      return children(formattedHTMLMessage);
     }
+
+    // Since the message presumably has HTML in it, we need to set
+    // `innerHTML` in order for it to be rendered and not escaped by React.
+    // To be safe, all string prop values were escaped when formatting the
+    // message. It is assumed that the message is not UGC, and came from the
+    // developer making it more like a template.
+    //
+    // Note: There's a perf impact of using this component since there's no
+    // way for React to do its virtual DOM diffing.
+    const html = {__html: formattedHTMLMessage};
+    return <Component dangerouslySetInnerHTML={html} />;
+  }
 }

package/src/components/message.js

@@ -4,131 +4,134 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import React, {Component, PropTypes, isValidElement} from 'react';
+import {Component, createElement, isValidElement} from 'react';
+import PropTypes from 'prop-types';
 import {intlShape, messageDescriptorPropTypes} from '../types';
 import {
-    invariantIntlContext,
-    shallowEquals,
-    shouldIntlComponentUpdate,
+  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);
+  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;
     }
 
-    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;
-                }
-            });
-        }
+    // 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,
+    };
 
-        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);
+    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 {
-            nodes = [formattedMessage];
+          tokenizedValues[name] = value;
         }
+      });
+    }
 
-        if (typeof children === 'function') {
-            return children(...nodes);
-        }
+    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];
+    }
 
-        return <Component>{nodes}</Component>;
+    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

@@ -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, 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);
-    }
+  static displayName = 'FormattedNumber';
 
-    shouldComponentUpdate(...next) {
-        return shouldIntlComponentUpdate(this, ...next);
-    }
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    ...numberFormatPropTypes,
+    value: PropTypes.any.isRequired,
+    format: PropTypes.string,
+    children: PropTypes.func,
+  };
 
-    render() {
-        const {formatNumber, textComponent: Text} = this.context.intl;
-        const {value, children} = this.props;
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
 
-        let formattedNumber = formatNumber(value, this.props);
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
 
-        if (typeof children === 'function') {
-            return children(formattedNumber);
-        }
+  render() {
+    const {formatNumber, textComponent: Text} = this.context.intl;
+    const {value, children} = this.props;
 
-        return <Text>{formattedNumber}</Text>;
+    let formattedNumber = formatNumber(value, this.props);
+
+    if (typeof children === 'function') {
+      return children(formattedNumber);
     }
+
+    return <Text>{formattedNumber}</Text>;
+  }
 }

package/src/components/plural.js

@@ -4,55 +4,56 @@
  * 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, pluralFormatPropTypes} from '../types';
 import {invariantIntlContext, shouldIntlComponentUpdate} from '../utils';
 
 export default class FormattedPlural extends Component {
-    static displayName = 'FormattedPlural';
+  static displayName = 'FormattedPlural';
 
-    static contextTypes = {
-        intl: intlShape,
-    };
+  static contextTypes = {
+    intl: intlShape,
+  };
 
-    static propTypes = {
-        ...pluralFormatPropTypes,
-        value: PropTypes.any.isRequired,
+  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,
+    other: PropTypes.node.isRequired,
+    zero: PropTypes.node,
+    one: PropTypes.node,
+    two: PropTypes.node,
+    few: PropTypes.node,
+    many: PropTypes.node,
 
-        children: PropTypes.func,
-    };
+    children: PropTypes.func,
+  };
 
-    static defaultProps = {
-        style: 'cardinal',
-    };
+  static defaultProps = {
+    style: 'cardinal',
+  };
 
-    constructor(props, context) {
-        super(props, context);
-        invariantIntlContext(context);
-    }
-
-    shouldComponentUpdate(...next) {
-        return shouldIntlComponentUpdate(this, ...next);
-    }
+  constructor(props, context) {
+    super(props, context);
+    invariantIntlContext(context);
+  }
 
-    render() {
-        const {formatPlural, textComponent: Text} = this.context.intl;
-        const {value, other, children} = this.props;
+  shouldComponentUpdate(...next) {
+    return shouldIntlComponentUpdate(this, ...next);
+  }
 
-        let pluralCategory  = formatPlural(value, this.props);
-        let formattedPlural = this.props[pluralCategory] || other;
+  render() {
+    const {formatPlural, textComponent: Text} = this.context.intl;
+    const {value, other, children} = this.props;
 
-        if (typeof children === 'function') {
-            return children(formattedPlural);
-        }
+    let pluralCategory = formatPlural(value, this.props);
+    let formattedPlural = this.props[pluralCategory] || other;
 
-        return <Text>{formattedPlural}</Text>;
+    if (typeof children === 'function') {
+      return children(formattedPlural);
     }
+
+    return <Text>{formattedPlural}</Text>;
+  }
 }