react-intl 3.7.0 → 3.9.2

package/src/components/provider.tsx

@@ -0,0 +1,183 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react';
+import {Provider} from './injectIntl';
+import {
+  createError,
+  DEFAULT_INTL_CONFIG,
+  createFormatters,
+  invariantIntlContext,
+  createIntlCache,
+} from '../utils';
+import {IntlConfig, IntlShape, Omit, IntlCache} from '../types';
+import areIntlLocalesSupported from 'intl-locales-supported';
+import {formatNumber, formatNumberToParts} from '../formatters/number';
+import {formatRelativeTime} from '../formatters/relativeTime';
+import {
+  formatDate,
+  formatTime,
+  formatDateToParts,
+  formatTimeToParts,
+} from '../formatters/dateTime';
+import {formatPlural} from '../formatters/plural';
+import {formatMessage, formatHTMLMessage} from '../formatters/message';
+import * as shallowEquals_ from 'shallow-equal/objects';
+import {formatList} from '../formatters/list';
+const shallowEquals: typeof shallowEquals_ =
+  (shallowEquals_ as any).default || shallowEquals_;
+
+interface State {
+  /**
+   * Explicit intl cache to prevent memory leaks
+   */
+  cache: IntlCache;
+  /**
+   * Intl object we created
+   */
+  intl?: IntlShape;
+  /**
+   * list of memoized config we care about.
+   * This is important since creating intl is
+   * very expensive
+   */
+  prevConfig: OptionalIntlConfig;
+}
+
+export type OptionalIntlConfig = Omit<
+  IntlConfig,
+  keyof typeof DEFAULT_INTL_CONFIG
+> &
+  Partial<typeof DEFAULT_INTL_CONFIG>;
+
+function processIntlConfig<P extends OptionalIntlConfig = OptionalIntlConfig>(
+  config: P
+): OptionalIntlConfig {
+  return {
+    locale: config.locale,
+    timeZone: config.timeZone,
+    formats: config.formats,
+    textComponent: config.textComponent,
+    messages: config.messages,
+    defaultLocale: config.defaultLocale,
+    defaultFormats: config.defaultFormats,
+    onError: config.onError,
+  };
+}
+
+/**
+ * Create intl object
+ * @param config intl config
+ * @param cache cache for formatter instances to prevent memory leak
+ */
+export function createIntl(
+  config: OptionalIntlConfig,
+  cache?: IntlCache
+): IntlShape {
+  const formatters = createFormatters(cache);
+  const resolvedConfig = {...DEFAULT_INTL_CONFIG, ...config};
+  if (
+    !resolvedConfig.locale ||
+    !areIntlLocalesSupported(resolvedConfig.locale)
+  ) {
+    const {locale, defaultLocale, onError} = resolvedConfig;
+    if (typeof onError === 'function') {
+      onError(
+        createError(
+          `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.
+    resolvedConfig.locale = resolvedConfig.defaultLocale || 'en';
+  }
+  return {
+    ...resolvedConfig,
+    formatters,
+    formatNumber: formatNumber.bind(
+      null,
+      resolvedConfig,
+      formatters.getNumberFormat
+    ),
+    formatNumberToParts: formatNumberToParts.bind(
+      null,
+      resolvedConfig,
+      formatters.getNumberFormat
+    ),
+    formatRelativeTime: formatRelativeTime.bind(
+      null,
+      resolvedConfig,
+      formatters.getRelativeTimeFormat
+    ),
+    formatDate: formatDate.bind(
+      null,
+      resolvedConfig,
+      formatters.getDateTimeFormat
+    ),
+    formatDateToParts: formatDateToParts.bind(
+      null,
+      resolvedConfig,
+      formatters.getDateTimeFormat
+    ),
+    formatTime: formatTime.bind(
+      null,
+      resolvedConfig,
+      formatters.getDateTimeFormat
+    ),
+    formatTimeToParts: formatTimeToParts.bind(
+      null,
+      resolvedConfig,
+      formatters.getDateTimeFormat
+    ),
+    formatPlural: formatPlural.bind(
+      null,
+      resolvedConfig,
+      formatters.getPluralRules
+    ),
+    formatMessage: formatMessage.bind(null, resolvedConfig, formatters),
+    formatHTMLMessage: formatHTMLMessage.bind(null, resolvedConfig, formatters),
+    formatList: formatList.bind(null, resolvedConfig, formatters.getListFormat),
+  };
+}
+
+export default class IntlProvider extends React.PureComponent<
+  OptionalIntlConfig,
+  State
+> {
+  static displayName = 'IntlProvider';
+  static defaultProps = DEFAULT_INTL_CONFIG;
+  private cache: IntlCache = createIntlCache();
+  state: State = {
+    cache: this.cache,
+    intl: createIntl(processIntlConfig(this.props), this.cache),
+    prevConfig: processIntlConfig(this.props),
+  };
+
+  static getDerivedStateFromProps(
+    props: OptionalIntlConfig,
+    {prevConfig, cache}: State
+  ): Partial<State> | null {
+    const config = processIntlConfig(props);
+    if (!shallowEquals(prevConfig, config)) {
+      return {
+        intl: createIntl(config, cache),
+        prevConfig: config,
+      };
+    }
+    return null;
+  }
+
+  render(): JSX.Element {
+    invariantIntlContext(this.state.intl);
+    return <Provider value={this.state.intl!}>{this.props.children}</Provider>;
+  }
+}

package/src/components/relative.tsx

@@ -0,0 +1,223 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+import * as React from 'react';
+import {Context} from './injectIntl';
+import {FormatRelativeTimeOptions} from '../types';
+import {Unit} from '@formatjs/intl-relativetimeformat';
+import {invariantIntlContext} from '../utils';
+
+// 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
+import * as invariant_ from 'invariant';
+const invariant: typeof invariant_ = (invariant_ as any).default || invariant_;
+const MINUTE = 60;
+const HOUR = 60 * 60;
+const DAY = 60 * 60 * 24;
+
+function selectUnit(seconds: number): Unit {
+  const absValue = Math.abs(seconds);
+
+  if (absValue < MINUTE) {
+    return 'second';
+  }
+
+  if (absValue < HOUR) {
+    return 'minute';
+  }
+
+  if (absValue < DAY) {
+    return 'hour';
+  }
+
+  return 'day';
+}
+
+function getDurationInSeconds(unit?: Unit): number {
+  switch (unit) {
+    case 'second':
+      return 1;
+    case 'minute':
+      return MINUTE;
+    case 'hour':
+      return HOUR;
+    default:
+      return DAY;
+  }
+}
+
+function valueToSeconds(value?: number, unit?: Unit): number {
+  if (!value) {
+    return 0;
+  }
+  switch (unit) {
+    case 'second':
+      return value;
+    case 'minute':
+      return value * MINUTE;
+    default:
+      return value * HOUR;
+  }
+}
+
+export interface Props extends FormatRelativeTimeOptions {
+  value?: number;
+  unit?: Unit;
+  updateIntervalInSeconds?: number;
+  children?(value: string): React.ReactChild;
+}
+
+interface State {
+  prevUnit?: Unit;
+  prevValue?: number;
+  currentValueInSeconds: number;
+}
+
+const INCREMENTABLE_UNITS: Unit[] = ['second', 'minute', 'hour'];
+function canIncrement(unit: Unit = 'second'): boolean {
+  return INCREMENTABLE_UNITS.includes(unit);
+}
+
+function verifyProps(updateIntervalInSeconds?: number, unit?: Unit): void {
+  invariant(
+    !updateIntervalInSeconds || (updateIntervalInSeconds && canIncrement(unit)),
+    'Cannot schedule update with unit longer than hour'
+  );
+}
+
+export class FormattedRelativeTime extends React.PureComponent<Props, State> {
+  // Public for testing
+  _updateTimer: any = null;
+  static displayName = 'FormattedRelativeTime';
+  static defaultProps: Pick<Props, 'unit' | 'value'> = {
+    value: 0,
+    unit: 'second',
+  };
+  state: State = {
+    prevUnit: this.props.unit,
+    prevValue: this.props.value,
+    currentValueInSeconds: canIncrement(this.props.unit)
+      ? valueToSeconds(this.props.value, this.props.unit)
+      : 0,
+  };
+
+  constructor(props: Props) {
+    super(props);
+    verifyProps(props.updateIntervalInSeconds, props.unit);
+  }
+
+  scheduleNextUpdate(
+    {updateIntervalInSeconds, unit}: Props,
+    {currentValueInSeconds}: State
+  ): void {
+    clearTimeout(this._updateTimer);
+    this._updateTimer = null;
+    // If there's no interval and we cannot increment this unit, do nothing
+    if (!updateIntervalInSeconds || !canIncrement(unit)) {
+      return;
+    }
+    // Figure out the next interesting time
+    const nextValueInSeconds = currentValueInSeconds - updateIntervalInSeconds;
+    const nextUnit = selectUnit(nextValueInSeconds);
+    // We've reached the max auto incrementable unit, don't schedule another update
+    if (nextUnit === 'day') {
+      return;
+    }
+
+    const unitDuration = getDurationInSeconds(nextUnit);
+    const remainder = nextValueInSeconds % unitDuration;
+    const prevInterestingValueInSeconds = nextValueInSeconds - remainder;
+    const nextInterestingValueInSeconds =
+      prevInterestingValueInSeconds >= currentValueInSeconds
+        ? prevInterestingValueInSeconds - unitDuration
+        : prevInterestingValueInSeconds;
+    const delayInSeconds = Math.abs(
+      nextInterestingValueInSeconds - currentValueInSeconds
+    );
+
+    this._updateTimer = setTimeout(
+      () =>
+        this.setState({
+          currentValueInSeconds: nextInterestingValueInSeconds,
+        }),
+      delayInSeconds * 1e3
+    );
+  }
+
+  componentDidMount(): void {
+    this.scheduleNextUpdate(this.props, this.state);
+  }
+
+  componentDidUpdate(): void {
+    this.scheduleNextUpdate(this.props, this.state);
+  }
+
+  componentWillUnmount(): void {
+    clearTimeout(this._updateTimer);
+    this._updateTimer = null;
+  }
+
+  static getDerivedStateFromProps(
+    props: Props,
+    state: State
+  ): Partial<State> | null {
+    if (props.unit !== state.prevUnit || props.value !== state.prevValue) {
+      return {
+        prevValue: props.value,
+        prevUnit: props.unit,
+        currentValueInSeconds: canIncrement(props.unit)
+          ? valueToSeconds(props.value, props.unit)
+          : 0,
+      };
+    }
+    return null;
+  }
+
+  render(): JSX.Element {
+    return (
+      <Context.Consumer>
+        {(intl): React.ReactNode => {
+          invariantIntlContext(intl);
+
+          const {formatRelativeTime, textComponent: Text} = intl;
+          const {children, value, unit, updateIntervalInSeconds} = this.props;
+          const {currentValueInSeconds} = this.state;
+          let currentValue = value || 0;
+          let currentUnit = unit;
+
+          if (
+            canIncrement(unit) &&
+            typeof currentValueInSeconds === 'number' &&
+            updateIntervalInSeconds
+          ) {
+            currentUnit = selectUnit(currentValueInSeconds);
+            const unitDuration = getDurationInSeconds(currentUnit);
+            currentValue = Math.round(currentValueInSeconds / unitDuration);
+          }
+
+          const formattedRelativeTime = formatRelativeTime(
+            currentValue,
+            currentUnit,
+            {
+              ...this.props,
+            }
+          );
+
+          if (typeof children === 'function') {
+            return children(formattedRelativeTime);
+          }
+          if (Text) {
+            return <Text>{formattedRelativeTime}</Text>;
+          }
+          return formattedRelativeTime;
+        }}
+      </Context.Consumer>
+    );
+  }
+}
+
+export default FormattedRelativeTime;

package/src/components/useIntl.ts

@@ -0,0 +1,10 @@
+import {useContext} from 'react';
+import {Context} from './injectIntl';
+import {invariantIntlContext} from '../utils';
+import {IntlShape} from '../types';
+
+export default function useIntl(): IntlShape {
+  const intl = useContext(Context);
+  invariantIntlContext(intl);
+  return intl;
+}

package/src/formatters/dateTime.ts

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import {Formatters, IntlConfig, IntlFormatters} from '../types';
+
+import {createError, filterProps, getNamedFormat} from '../utils';
+
+const DATE_TIME_FORMAT_OPTIONS: Array<keyof Intl.DateTimeFormatOptions> = [
+  'localeMatcher',
+  'formatMatcher',
+
+  'timeZone',
+  'hour12',
+
+  'weekday',
+  'era',
+  'year',
+  'month',
+  'day',
+  'hour',
+  'minute',
+  'second',
+  'timeZoneName',
+];
+
+export function getFormatter(
+  {
+    locale,
+    formats,
+    onError,
+    timeZone,
+  }: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  type: 'date' | 'time',
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  options: Parameters<IntlFormatters['formatDate']>[1] = {}
+): Intl.DateTimeFormat {
+  const {format} = options;
+  const defaults = {
+    ...(timeZone && {timeZone}),
+    ...(format && getNamedFormat(formats!, type, format, onError)),
+  };
+
+  let filteredOptions = filterProps(
+    options,
+    DATE_TIME_FORMAT_OPTIONS,
+    defaults
+  );
+
+  if (
+    type === 'time' &&
+    !filteredOptions.hour &&
+    !filteredOptions.minute &&
+    !filteredOptions.second
+  ) {
+    // Add default formatting options if hour, minute, or second isn't defined.
+    filteredOptions = {...filteredOptions, hour: 'numeric', minute: 'numeric'};
+  }
+
+  return getDateTimeFormat(locale, filteredOptions);
+}
+
+export function formatDate(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  value?: Parameters<IntlFormatters['formatDate']>[0],
+  options: Parameters<IntlFormatters['formatDate']>[1] = {}
+): string {
+  const date = typeof value === 'string' ? new Date(value || 0) : value;
+  try {
+    return getFormatter(config, 'date', getDateTimeFormat, options).format(
+      date
+    );
+  } catch (e) {
+    config.onError(createError('Error formatting date.', e));
+  }
+
+  return String(date);
+}
+
+export function formatTime(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  value?: Parameters<IntlFormatters['formatTime']>[0],
+  options: Parameters<IntlFormatters['formatTime']>[1] = {}
+): string {
+  const date = typeof value === 'string' ? new Date(value || 0) : value;
+
+  try {
+    return getFormatter(config, 'time', getDateTimeFormat, options).format(
+      date
+    );
+  } catch (e) {
+    config.onError(createError('Error formatting time.', e));
+  }
+
+  return String(date);
+}
+
+export function formatDateToParts(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  value?: Parameters<IntlFormatters['formatDate']>[0],
+  options: Parameters<IntlFormatters['formatDate']>[1] = {}
+): Intl.DateTimeFormatPart[] {
+  const date = typeof value === 'string' ? new Date(value || 0) : value;
+  try {
+    return getFormatter(
+      config,
+      'date',
+      getDateTimeFormat,
+      options
+    ).formatToParts(date);
+  } catch (e) {
+    config.onError(createError('Error formatting date.', e));
+  }
+
+  return [];
+}
+
+export function formatTimeToParts(
+  config: Pick<IntlConfig, 'locale' | 'formats' | 'onError' | 'timeZone'>,
+  getDateTimeFormat: Formatters['getDateTimeFormat'],
+  value?: Parameters<IntlFormatters['formatTime']>[0],
+  options: Parameters<IntlFormatters['formatTime']>[1] = {}
+): Intl.DateTimeFormatPart[] {
+  const date = typeof value === 'string' ? new Date(value || 0) : value;
+
+  try {
+    return getFormatter(
+      config,
+      'time',
+      getDateTimeFormat,
+      options
+    ).formatToParts(date);
+  } catch (e) {
+    config.onError(createError('Error formatting time.', e));
+  }
+
+  return [];
+}

package/src/formatters/list.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {IntlConfig, Formatters, IntlFormatters} from '../types';
+import {filterProps, createError} from '../utils';
+import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat';
+
+const LIST_FORMAT_OPTIONS: Array<keyof IntlListFormatOptions> = [
+  'localeMatcher',
+  'type',
+  'style',
+];
+
+const now = Date.now();
+
+function generateToken(i: number): string {
+  return `${now}_${i}_${now}`;
+}
+
+export function formatList(
+  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
+  getListFormat: Formatters['getListFormat'],
+  values: Array<string>,
+  options: Parameters<IntlFormatters['formatList']>[1]
+): string;
+export function formatList(
+  {locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
+  getListFormat: Formatters['getListFormat'],
+  values: Parameters<IntlFormatters['formatList']>[0],
+  options: Parameters<IntlFormatters['formatList']>[1] = {}
+): React.ReactNode {
+  const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat;
+  if (!ListFormat) {
+    onError(
+      createError(`Intl.ListFormat is not available in this environment.
+Try polyfilling it using "@formatjs/intl-listformat"
+`)
+    );
+  }
+  const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS);
+
+  try {
+    const richValues: Record<string, React.ReactNode> = {};
+    const serializedValues = values.map((v, i) => {
+      if (typeof v === 'object') {
+        const id = generateToken(i);
+        richValues[id] = v;
+        return id;
+      }
+      return String(v);
+    });
+    if (!Object.keys(richValues).length) {
+      return getListFormat(locale, filteredOptions).format(serializedValues);
+    }
+    const parts = getListFormat(locale, filteredOptions).formatToParts(
+      serializedValues
+    );
+    return parts.reduce((all: Array<string | React.ReactNode>, el) => {
+      const val = el.value;
+      if (richValues[val]) {
+        all.push(richValues[val]);
+      } else if (typeof all[all.length - 1] === 'string') {
+        all[all.length - 1] += val;
+      } else {
+        all.push(val);
+      }
+      return all;
+    }, []);
+  } catch (e) {
+    onError(createError('Error formatting list.', e));
+  }
+
+  return values;
+}