react-intl 4.2.2 → 4.5.0

package/src/components/createFormattedComponent.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
-import {invariantIntlContext} from '../utils';
+import * as React from 'react'
+import {invariantIntlContext} from '../utils'
 import {
   IntlShape,
   FormatDateOptions,
   FormatNumberOptions,
   FormatListOptions,
   FormatDisplayNameOptions,
-} from '../types';
-import {Context} from './injectIntl';
+} from '../types'
+import {Context} from './injectIntl'
 
 enum DisplayName {
   formatDate = 'FormattedDate',
@@ -27,27 +27,29 @@ enum DisplayNameParts {
 }
 
 type Formatter = {
-  formatDate: FormatDateOptions;
-  formatTime: FormatDateOptions;
-  formatNumber: FormatNumberOptions;
-  formatList: FormatListOptions;
-  formatDisplayName: FormatDisplayNameOptions;
-};
+  formatDate: FormatDateOptions
+  formatTime: FormatDateOptions
+  formatNumber: FormatNumberOptions
+  formatList: FormatListOptions
+  formatDisplayName: FormatDisplayNameOptions
+}
 
-export const FormattedNumberParts: React.FC<Formatter['formatNumber'] & {
-  value: Parameters<IntlShape['formatNumber']>[0];
+export const FormattedNumberParts: React.FC<
+  Formatter['formatNumber'] & {
+    value: Parameters<IntlShape['formatNumber']>[0]
 
-  children(val: Intl.NumberFormatPart[]): React.ReactElement | null;
-}> = props => (
+    children(val: Intl.NumberFormatPart[]): React.ReactElement | null
+  }
+> = props => (
   <Context.Consumer>
     {(intl): React.ReactElement | null => {
-      invariantIntlContext(intl);
-      const {value, children, ...formatProps} = props;
-      return children(intl.formatNumberToParts(value, formatProps));
+      invariantIntlContext(intl)
+      const {value, children, ...formatProps} = props
+      return children(intl.formatNumberToParts(value, formatProps))
     }}
   </Context.Consumer>
-);
-FormattedNumberParts.displayName = 'FormattedNumberParts';
+)
+FormattedNumberParts.displayName = 'FormattedNumberParts'
 
 export function createFormattedDateTimePartsComponent<
   Name extends 'formatDate' | 'formatTime'
@@ -55,65 +57,65 @@ export function createFormattedDateTimePartsComponent<
   name: Name
 ): React.FC<
   Formatter[Name] & {
-    value: Parameters<IntlShape[Name]>[0];
-    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
+    value: Parameters<IntlShape[Name]>[0]
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
   }
 > {
-  type FormatFn = IntlShape[Name];
+  type FormatFn = IntlShape[Name]
   type Props = Formatter[Name] & {
-    value: Parameters<FormatFn>[0];
-    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null;
-  };
+    value: Parameters<FormatFn>[0]
+    children(val: Intl.DateTimeFormatPart[]): React.ReactElement | null
+  }
 
   const ComponentParts: React.FC<Props> = props => (
     <Context.Consumer>
       {(intl): React.ReactElement | null => {
-        invariantIntlContext(intl);
-        const {value, children, ...formatProps} = props;
-        const date = typeof value === 'string' ? new Date(value || 0) : value;
+        invariantIntlContext(intl)
+        const {value, children, ...formatProps} = props
+        const date = typeof value === 'string' ? new Date(value || 0) : value
         const formattedParts: Intl.DateTimeFormatPart[] =
           name === 'formatDate'
             ? intl.formatDateToParts(date, formatProps)
-            : intl.formatTimeToParts(date, formatProps);
+            : intl.formatTimeToParts(date, formatProps)
 
-        return children(formattedParts);
+        return children(formattedParts)
       }}
     </Context.Consumer>
-  );
-  ComponentParts.displayName = DisplayNameParts[name];
-  return ComponentParts;
+  )
+  ComponentParts.displayName = DisplayNameParts[name]
+  return ComponentParts
 }
 
 export function createFormattedComponent<Name extends keyof Formatter>(
   name: Name
 ): React.FC<
   Formatter[Name] & {
-    value: Parameters<IntlShape[Name]>[0];
-    children?(val: string): React.ReactElement | null;
+    value: Parameters<IntlShape[Name]>[0]
+    children?(val: string): React.ReactElement | null
   }
 > {
-  type FormatFn = IntlShape[Name];
+  type FormatFn = IntlShape[Name]
   type Props = Formatter[Name] & {
-    value: Parameters<FormatFn>[0];
-    children?(val: string): React.ReactElement | null;
-  };
+    value: Parameters<FormatFn>[0]
+    children?(val: string): React.ReactElement | null
+  }
 
   const Component: React.FC<Props> = props => (
     <Context.Consumer>
       {(intl): JSX.Element | null => {
-        invariantIntlContext(intl);
-        const {value, children, ...formatProps} = props;
+        invariantIntlContext(intl)
+        const {value, children, ...formatProps} = props
         // TODO: fix TS type definition for localeMatcher upstream
-        const formattedValue = intl[name](value as any, formatProps as any);
+        const formattedValue = intl[name](value as any, formatProps as any)
 
         if (typeof children === 'function') {
-          return children(formattedValue as any);
+          return children(formattedValue as any)
         }
-        const Text = intl.textComponent || React.Fragment;
-        return <Text>{formattedValue}</Text>;
+        const Text = intl.textComponent || React.Fragment
+        return <Text>{formattedValue}</Text>
       }}
     </Context.Consumer>
-  );
-  Component.displayName = DisplayName[name];
-  return Component;
+  )
+  Component.displayName = DisplayName[name]
+  return Component
 }

package/src/components/injectIntl.tsx

@@ -1,41 +1,41 @@
-import * as React from 'react';
-import * as hoistNonReactStatics_ from 'hoist-non-react-statics';
+import * as React from 'react'
+import * as hoistNonReactStatics_ from 'hoist-non-react-statics'
 // Since rollup cannot deal with namespace being a function,
 // this is to interop with TypeScript since `invariant`
 // does not export a default
 // https://github.com/rollup/rollup/issues/1267
 const hoistNonReactStatics: typeof hoistNonReactStatics_ =
-  (hoistNonReactStatics_ as any).default || hoistNonReactStatics_;
-import {invariantIntlContext} from '../utils';
-import {IntlShape, Omit} from '../types';
+  (hoistNonReactStatics_ as any).default || hoistNonReactStatics_
+import {invariantIntlContext} from '../utils'
+import {IntlShape, Omit} from '../types'
 
 function getDisplayName(Component: React.ComponentType<any>): string {
-  return Component.displayName || Component.name || 'Component';
+  return Component.displayName || Component.name || 'Component'
 }
 
 // TODO: We should provide initial value here
-const IntlContext = React.createContext<IntlShape>(null as any);
-const {Consumer: IntlConsumer, Provider: IntlProvider} = IntlContext;
+const IntlContext = React.createContext<IntlShape>(null as any)
+const {Consumer: IntlConsumer, Provider: IntlProvider} = IntlContext
 
-export const Provider = IntlProvider;
-export const Context = IntlContext;
+export const Provider = IntlProvider
+export const Context = IntlContext
 
 export interface Opts<
   IntlPropName extends string = 'intl',
   ForwardRef extends boolean = false
 > {
-  intlPropName?: IntlPropName;
-  forwardRef?: ForwardRef;
-  enforceContext?: boolean;
+  intlPropName?: IntlPropName
+  forwardRef?: ForwardRef
+  enforceContext?: boolean
 }
 
 export type WrappedComponentProps<IntlPropName extends string = 'intl'> = {
-  [k in IntlPropName]: IntlShape;
-};
+  [k in IntlPropName]: IntlShape
+}
 
 export type WithIntlProps<P> = Omit<P, keyof WrappedComponentProps> & {
-  forwardedRef?: React.Ref<any>;
-};
+  forwardedRef?: React.Ref<any>
+}
 
 export default function injectIntl<
   IntlPropName extends string,
@@ -44,8 +44,8 @@ export default function injectIntl<
   WrappedComponent: React.ComponentType<P>,
   options?: Opts<IntlPropName, false>
 ): React.FC<WithIntlProps<P>> & {
-  WrappedComponent: React.ComponentType<P>;
-};
+  WrappedComponent: React.ComponentType<P>
+}
 export default function injectIntl<
   IntlPropName extends string = 'intl',
   P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
@@ -56,8 +56,8 @@ export default function injectIntl<
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
 > & {
-  WrappedComponent: React.ComponentType<P>;
-};
+  WrappedComponent: React.ComponentType<P>
+}
 export default function injectIntl<
   IntlPropName extends string = 'intl',
   P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
@@ -69,34 +69,33 @@ export default function injectIntl<
 ): React.ForwardRefExoticComponent<
   React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
 > & {
-  WrappedComponent: React.ComponentType<P>;
+  WrappedComponent: React.ComponentType<P>
 } {
   const {intlPropName = 'intl', forwardRef = false, enforceContext = true} =
-    options || {};
+    options || {}
 
   const WithIntl: React.FC<P & {forwardedRef?: React.Ref<any>}> & {
-    WrappedComponent: React.ComponentType<P>;
+    WrappedComponent: React.ComponentType<P>
   } = props => (
     <IntlConsumer>
       {(intl): React.ReactNode => {
         if (enforceContext) {
-          invariantIntlContext(intl);
+          invariantIntlContext(intl)
         }
+        const intlProp = {[intlPropName]: intl}
 
         return (
           <WrappedComponent
             {...props}
-            {...{
-              [intlPropName]: intl,
-            }}
+            {...intlProp}
             ref={forwardRef ? props.forwardedRef : null}
           />
-        );
+        )
       }}
     </IntlConsumer>
-  );
-  WithIntl.displayName = `injectIntl(${getDisplayName(WrappedComponent)})`;
-  WithIntl.WrappedComponent = WrappedComponent;
+  )
+  WithIntl.displayName = `injectIntl(${getDisplayName(WrappedComponent)})`
+  WithIntl.WrappedComponent = WrappedComponent
 
   if (forwardRef) {
     return hoistNonReactStatics(
@@ -104,8 +103,8 @@ export default function injectIntl<
         <WithIntl {...props} forwardedRef={ref} />
       )),
       WrappedComponent
-    ) as any;
+    ) as any
   }
 
-  return hoistNonReactStatics(WithIntl, WrappedComponent) as any;
+  return hoistNonReactStatics(WithIntl, WrappedComponent) as any
 }

package/src/components/message.tsx

@@ -4,31 +4,31 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import * as React from 'react';
-import {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
-import {Context} from './injectIntl';
-import {MessageDescriptor} from '../types';
-import {formatMessage} from '../formatters/message';
+import * as React from 'react'
+import {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat'
+import {Context} from './injectIntl'
+import {MessageDescriptor} from '../types'
+import {formatMessage} from '../formatters/message'
 import {
   invariantIntlContext,
   DEFAULT_INTL_CONFIG,
   createFormatters,
-} from '../utils';
-import * as shallowEquals_ from 'shallow-equal/objects';
+} from '../utils'
+import * as shallowEquals_ from 'shallow-equal/objects'
 const shallowEquals: typeof shallowEquals_ =
-  (shallowEquals_ as any).default || shallowEquals_;
+  (shallowEquals_ as any).default || shallowEquals_
 
 function defaultFormatMessage<T = React.ReactNode>(
   descriptor: MessageDescriptor,
   values?: Record<
     string,
-    PrimitiveType | React.ReactElement | FormatXMLElementFn<T>
+    PrimitiveType | React.ReactElement | FormatXMLElementFn<T, T>
   >
 ): string {
   if (process.env.NODE_ENV !== 'production') {
     console.error(
       '[React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry. Using default message as fallback.'
-    );
+    )
   }
 
   return formatMessage(
@@ -39,36 +39,37 @@ function defaultFormatMessage<T = React.ReactNode>(
     createFormatters(),
     descriptor,
     values as any
-  );
+  )
 }
 
 export interface Props<
   V extends Record<string, any> = Record<string, React.ReactNode>
 > extends MessageDescriptor {
-  values?: V;
-  tagName?: React.ElementType<any>;
-  children?(...nodes: React.ReactNodeArray): React.ReactNode;
+  values?: V
+  tagName?: React.ElementType<any>
+  children?(...nodes: React.ReactNodeArray): React.ReactNode
 }
 
 class FormattedMessage<
-  T = React.ReactNode,
   V extends Record<string, any> = Record<
     string,
-    PrimitiveType | React.ReactElement | FormatXMLElementFn<T>
+    | PrimitiveType
+    | React.ReactElement
+    | FormatXMLElementFn<React.ReactNode, React.ReactNode>
   >
 > extends React.Component<Props<V>> {
-  static displayName = 'FormattedMessage';
+  static displayName = 'FormattedMessage'
   static defaultProps = {
     values: {},
-  };
+  }
 
   shouldComponentUpdate(nextProps: Props<V>): boolean {
-    const {values, ...otherProps} = this.props;
-    const {values: nextValues, ...nextOtherProps} = nextProps;
+    const {values, ...otherProps} = this.props
+    const {values: nextValues, ...nextOtherProps} = nextProps
     return (
       !shallowEquals(nextValues, values) ||
       !shallowEquals(otherProps, nextOtherProps)
-    );
+    )
   }
 
   render(): JSX.Element {
@@ -76,13 +77,13 @@ class FormattedMessage<
       <Context.Consumer>
         {(intl): React.ReactNode => {
           if (!this.props.defaultMessage) {
-            invariantIntlContext(intl);
+            invariantIntlContext(intl)
           }
 
           const {
             formatMessage = defaultFormatMessage,
             textComponent: Text = React.Fragment,
-          } = intl || {};
+          } = intl || {}
           const {
             id,
             description,
@@ -90,32 +91,32 @@ class FormattedMessage<
             values,
             children,
             tagName: Component = Text,
-          } = this.props;
+          } = this.props
 
-          const descriptor = {id, description, defaultMessage};
+          const descriptor = {id, description, defaultMessage}
           let nodes: string | React.ReactNodeArray = formatMessage(
             descriptor,
             values
-          );
+          )
 
           if (!Array.isArray(nodes)) {
-            nodes = [nodes];
+            nodes = [nodes]
           }
 
           if (typeof children === 'function') {
-            return children(...nodes);
+            return children(...nodes)
           }
 
           if (Component) {
             // Needs to use `createElement()` instead of JSX, otherwise React will
             // warn about a missing `key` prop with rich-text message formatting.
-            return React.createElement(Component, null, ...nodes);
+            return React.createElement(Component, null, ...nodes)
           }
-          return nodes;
+          return nodes
         }}
       </Context.Consumer>
-    );
+    )
   }
 }
 
-export default FormattedMessage;
+export default FormattedMessage

package/src/components/plural.tsx

@@ -4,20 +4,20 @@
  * See the accompanying LICENSE file for terms.
  */
 
-import * as React from 'react';
-import withIntl from './injectIntl';
-import {IntlShape, FormatPluralOptions} from '../types';
+import * as React from 'react'
+import withIntl from './injectIntl'
+import {IntlShape, FormatPluralOptions} from '../types'
 
 interface Props extends FormatPluralOptions {
-  value: number;
-  intl: IntlShape;
-  other: React.ReactNode;
-  zero?: React.ReactNode;
-  one?: React.ReactNode;
-  two?: React.ReactNode;
-  few?: React.ReactNode;
-  many?: React.ReactNode;
-  children?(value: React.ReactNode): React.ReactElement | null;
+  value: number
+  intl: IntlShape
+  other: React.ReactNode
+  zero?: React.ReactNode
+  one?: React.ReactNode
+  two?: React.ReactNode
+  few?: React.ReactNode
+  many?: React.ReactNode
+  children?(value: React.ReactNode): React.ReactElement | null
 }
 
 const FormattedPlural: React.FC<Props> = props => {
@@ -26,25 +26,25 @@ const FormattedPlural: React.FC<Props> = props => {
     other,
     children,
     intl: {formatPlural, textComponent: Text},
-  } = props;
+  } = props
 
-  const pluralCategory = formatPlural(value, props);
-  const formattedPlural = props[pluralCategory as 'one'] || other;
+  const pluralCategory = formatPlural(value, props)
+  const formattedPlural = props[pluralCategory as 'one'] || other
 
   if (typeof children === 'function') {
-    return children(formattedPlural);
+    return children(formattedPlural)
   }
   if (Text) {
-    return <Text>{formattedPlural}</Text>;
+    return <Text>{formattedPlural}</Text>
   }
   // Work around @types/react where React.FC cannot return string
-  return formattedPlural as any;
-};
+  return formattedPlural as any
+}
 
 FormattedPlural.defaultProps = {
   type: 'cardinal',
-};
+}
 
-FormattedPlural.displayName = 'FormattedPlural';
+FormattedPlural.displayName = 'FormattedPlural'
 
-export default withIntl(FormattedPlural);
+export default withIntl(FormattedPlural)