react-intl 6.0.5 → 6.0.6

package/src/components/injectIntl.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import hoistNonReactStatics from 'hoist-non-react-statics'
+import {invariantIntlContext} from '../utils'
+import {IntlShape} from '../types'
+
+function getDisplayName(Component: React.ComponentType<any>): string {
+  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
+
+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
+}
+
+export type WrappedComponentProps<IntlPropName extends string = 'intl'> = {
+  [k in IntlPropName]: IntlShape
+}
+
+export type WithIntlProps<P> = Omit<P, keyof WrappedComponentProps> & {
+  forwardedRef?: React.Ref<any>
+}
+
+// TODO: type hoisted static methods.
+// Non ref forwarding overload
+export default function injectIntl<
+  IntlPropName extends string = 'intl',
+  P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>
+>(
+  WrappedComponent: React.ComponentType<P>,
+  options?: Opts<IntlPropName, false>
+): React.FC<WithIntlProps<P>> & {
+  WrappedComponent: React.ComponentType<P>
+}
+// Ref forwarding overload.
+export default function injectIntl<
+  IntlPropName extends string = 'intl',
+  P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
+  T extends React.ComponentType<P> = any
+>(
+  WrappedComponent: React.ComponentType<P>,
+  options?: Opts<IntlPropName, true>
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<WithIntlProps<React.PropsWithChildren<P>>> &
+    React.RefAttributes<T>
+> & {
+  WrappedComponent: React.ComponentType<P>
+}
+export default function injectIntl<
+  IntlPropName extends string = 'intl',
+  P extends WrappedComponentProps<IntlPropName> = WrappedComponentProps<any>,
+  ForwardRef extends boolean = false,
+  T extends React.ComponentType<P> = any
+>(
+  WrappedComponent: React.ComponentType<P>,
+  options?: Opts<IntlPropName, ForwardRef>
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<WithIntlProps<P>> & React.RefAttributes<T>
+> & {
+  WrappedComponent: React.ComponentType<P>
+} {
+  const {
+    intlPropName = 'intl',
+    forwardRef = false,
+    enforceContext = true,
+  } = options || {}
+
+  const WithIntl: React.FC<P & {forwardedRef?: React.Ref<any>}> & {
+    WrappedComponent: React.ComponentType<P>
+  } = props => (
+    <IntlConsumer>
+      {(intl): React.ReactNode => {
+        if (enforceContext) {
+          invariantIntlContext(intl)
+        }
+        const intlProp = {[intlPropName]: intl}
+
+        return (
+          <WrappedComponent
+            {...props}
+            {...intlProp}
+            ref={forwardRef ? props.forwardedRef : null}
+          />
+        )
+      }}
+    </IntlConsumer>
+  )
+  WithIntl.displayName = `injectIntl(${getDisplayName(WrappedComponent)})`
+  WithIntl.WrappedComponent = WrappedComponent
+
+  if (forwardRef) {
+    return hoistNonReactStatics(
+      React.forwardRef<T, P>((props: P, ref) => (
+        <WithIntl {...props} forwardedRef={ref} />
+      )),
+      WrappedComponent
+    ) as any
+  }
+
+  return hoistNonReactStatics(WithIntl, WrappedComponent) as any
+}

package/src/components/message.tsx

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react'
+import type {
+  FormatXMLElementFn,
+  Options as IntlMessageFormatOptions,
+  PrimitiveType,
+} from 'intl-messageformat'
+
+import {MessageDescriptor} from '@formatjs/intl'
+import useIntl from './useIntl'
+import {shallowEqual} from '../utils'
+
+export interface Props<
+  V extends Record<string, any> = Record<
+    string,
+    | React.ReactNode
+    | PrimitiveType
+    | FormatXMLElementFn<React.ReactNode, React.ReactNode>
+  >
+> extends MessageDescriptor {
+  values?: V
+  tagName?: React.ElementType<any>
+  children?(nodes: React.ReactNode[]): React.ReactElement | null
+  ignoreTag?: IntlMessageFormatOptions['ignoreTag']
+}
+
+function areEqual(prevProps: Props, nextProps: Props): boolean {
+  const {values, ...otherProps} = prevProps
+  const {values: nextValues, ...nextOtherProps} = nextProps
+  return (
+    shallowEqual(nextValues, values) &&
+    shallowEqual(otherProps as any, nextOtherProps)
+  )
+}
+
+function FormattedMessage(props: Props) {
+  const intl = useIntl()
+  const {formatMessage, textComponent: Text = React.Fragment} = intl
+  const {
+    id,
+    description,
+    defaultMessage,
+    values,
+    children,
+    tagName: Component = Text,
+    ignoreTag,
+  } = props
+
+  const descriptor = {id, description, defaultMessage}
+  let nodes: React.ReactNode = formatMessage(descriptor, values, {
+    ignoreTag,
+  })
+
+  if (typeof children === 'function') {
+    return children(Array.isArray(nodes) ? nodes : [nodes])
+  }
+
+  if (Component) {
+    return <Component>{React.Children.toArray(nodes)}</Component>
+  }
+  return <>{nodes}</>
+}
+FormattedMessage.displayName = 'FormattedMessage'
+
+const MemoizedFormattedMessage = React.memo<Props>(FormattedMessage, areEqual)
+MemoizedFormattedMessage.displayName = 'MemoizedFormattedMessage'
+
+export default MemoizedFormattedMessage

package/src/components/plural.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+
+import * as React from 'react'
+import {FormatPluralOptions} from '@formatjs/intl'
+import useIntl from './useIntl'
+
+interface Props extends FormatPluralOptions {
+  value: number
+  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 => {
+  const {formatPlural, textComponent: Text} = useIntl()
+  const {value, other, children} = props
+
+  const pluralCategory = formatPlural(value, props)
+  const formattedPlural = props[pluralCategory as 'one'] || other
+
+  if (typeof children === 'function') {
+    return children(formattedPlural)
+  }
+  if (Text) {
+    return <Text>{formattedPlural}</Text>
+  }
+  // Work around @types/react where React.FC cannot return string
+  return formattedPlural as any
+}
+
+FormattedPlural.defaultProps = {
+  type: 'cardinal',
+}
+
+FormattedPlural.displayName = 'FormattedPlural'
+
+export default FormattedPlural

package/src/components/provider.tsx

@@ -0,0 +1,196 @@
+/*
+ * 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 {
+  DEFAULT_INTL_CONFIG,
+  invariantIntlContext,
+  assignUniqueKeysToParts,
+  shallowEqual,
+} from '../utils'
+import type {IntlConfig, IntlShape, ResolvedIntlConfig} from '../types'
+import {
+  formatMessage as coreFormatMessage,
+  IntlCache,
+  createIntl as coreCreateIntl,
+  CreateIntlFn,
+  createIntlCache,
+  FormatMessageFn,
+} from '@formatjs/intl'
+
+import {
+  PrimitiveType,
+  FormatXMLElementFn,
+  isFormatXMLElementFn,
+} from 'intl-messageformat'
+
+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: IntlConfig
+}
+
+function processIntlConfig<P extends IntlConfig = IntlConfig>(
+  config: P
+): IntlConfig {
+  return {
+    locale: config.locale,
+    timeZone: config.timeZone,
+    fallbackOnEmptyString: config.fallbackOnEmptyString,
+    formats: config.formats,
+    textComponent: config.textComponent,
+    messages: config.messages,
+    defaultLocale: config.defaultLocale,
+    defaultFormats: config.defaultFormats,
+    onError: config.onError,
+    onWarn: config.onWarn,
+    wrapRichTextChunksInFragment: config.wrapRichTextChunksInFragment,
+    defaultRichTextElements: config.defaultRichTextElements,
+  }
+}
+
+function assignUniqueKeysToFormatXMLElementFnArgument<
+  T extends Record<
+    string,
+    | PrimitiveType
+    | React.ReactNode
+    | FormatXMLElementFn<React.ReactNode, React.ReactNode>
+  > = Record<
+    string,
+    | PrimitiveType
+    | React.ReactNode
+    | FormatXMLElementFn<React.ReactNode, React.ReactNode>
+  >
+>(values?: T): T | undefined {
+  if (!values) {
+    return values
+  }
+  return Object.keys(values).reduce((acc: T, k) => {
+    const v = values[k]
+    ;(acc as any)[k] = isFormatXMLElementFn<React.ReactNode>(v)
+      ? assignUniqueKeysToParts(v)
+      : v
+    return acc
+  }, {} as T)
+}
+
+const formatMessage: FormatMessageFn<React.ReactNode> = (
+  config,
+  formatters,
+  descriptor,
+  rawValues,
+  ...rest
+) => {
+  const values = assignUniqueKeysToFormatXMLElementFnArgument(rawValues)
+  const chunks = coreFormatMessage(
+    config,
+    formatters,
+    descriptor,
+    values as any,
+    ...rest
+  )
+  if (Array.isArray(chunks)) {
+    return React.Children.toArray(chunks)
+  }
+  return chunks as any
+}
+
+/**
+ * Create intl object
+ * @param config intl config
+ * @param cache cache for formatter instances to prevent memory leak
+ */
+export const createIntl: CreateIntlFn<
+  React.ReactNode,
+  IntlConfig,
+  IntlShape
+> = (
+  {defaultRichTextElements: rawDefaultRichTextElements, ...config},
+  cache
+) => {
+  const defaultRichTextElements = assignUniqueKeysToFormatXMLElementFnArgument(
+    rawDefaultRichTextElements
+  )
+  const coreIntl = coreCreateIntl<React.ReactNode>(
+    {
+      ...DEFAULT_INTL_CONFIG,
+      ...config,
+      defaultRichTextElements,
+    },
+    cache
+  )
+
+  const resolvedConfig: ResolvedIntlConfig = {
+    locale: coreIntl.locale,
+    timeZone: coreIntl.timeZone,
+    fallbackOnEmptyString: coreIntl.fallbackOnEmptyString,
+    formats: coreIntl.formats,
+    defaultLocale: coreIntl.defaultLocale,
+    defaultFormats: coreIntl.defaultFormats,
+    messages: coreIntl.messages,
+    onError: coreIntl.onError,
+    defaultRichTextElements,
+  }
+
+  return {
+    ...coreIntl,
+    // @ts-expect-error fix this
+    formatMessage: formatMessage.bind(
+      null,
+      resolvedConfig,
+      coreIntl.formatters
+    ),
+    // @ts-expect-error fix this
+    $t: formatMessage.bind(null, resolvedConfig, coreIntl.formatters),
+  } as any
+}
+
+export default class IntlProvider extends React.PureComponent<
+  // Exporting children props so it is composable with other HOCs.
+  // See: https://github.com/formatjs/formatjs/issues/1697
+  React.PropsWithChildren<IntlConfig>,
+  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: Readonly<IntlConfig>,
+    {prevConfig, cache}: State
+  ): Partial<State> | null {
+    const config = processIntlConfig(props)
+    if (!shallowEqual(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,192 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+import * as React from 'react'
+import {
+  invariant,
+  RelativeTimeFormatSingularUnit,
+} from '@formatjs/ecma402-abstract'
+import {FormatRelativeTimeOptions} from '@formatjs/intl'
+import useIntl from './useIntl'
+
+const MINUTE = 60
+const HOUR = 60 * 60
+const DAY = 60 * 60 * 24
+
+function selectUnit(seconds: number): RelativeTimeFormatSingularUnit {
+  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?: RelativeTimeFormatSingularUnit): number {
+  switch (unit) {
+    case 'second':
+      return 1
+    case 'minute':
+      return MINUTE
+    case 'hour':
+      return HOUR
+    default:
+      return DAY
+  }
+}
+
+function valueToSeconds(
+  value?: number,
+  unit?: RelativeTimeFormatSingularUnit
+): 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?: RelativeTimeFormatSingularUnit
+  updateIntervalInSeconds?: number
+  children?(value: string): React.ReactElement | null
+}
+
+const INCREMENTABLE_UNITS: RelativeTimeFormatSingularUnit[] = [
+  'second',
+  'minute',
+  'hour',
+]
+function canIncrement(
+  unit: RelativeTimeFormatSingularUnit = 'second'
+): boolean {
+  return INCREMENTABLE_UNITS.indexOf(unit) > -1
+}
+
+const SimpleFormattedRelativeTime: React.FC<
+  Omit<Props, 'updateIntervalInSeconds'>
+> = props => {
+  const {formatRelativeTime, textComponent: Text} = useIntl()
+  const {children, value, unit, ...otherProps} = props
+
+  const formattedRelativeTime = formatRelativeTime(value || 0, unit, otherProps)
+
+  if (typeof children === 'function') {
+    return children(formattedRelativeTime)
+  }
+  if (Text) {
+    return <Text>{formattedRelativeTime}</Text>
+  }
+  return <>{formattedRelativeTime}</>
+}
+
+const FormattedRelativeTime: React.FC<Props> = ({
+  value,
+  unit,
+  updateIntervalInSeconds,
+  ...otherProps
+}) => {
+  invariant(
+    !updateIntervalInSeconds ||
+      !!(updateIntervalInSeconds && canIncrement(unit)),
+    'Cannot schedule update with unit longer than hour'
+  )
+  const [prevUnit, setPrevUnit] = React.useState<
+    RelativeTimeFormatSingularUnit | undefined
+  >()
+  const [prevValue, setPrevValue] = React.useState<number>(0)
+  const [currentValueInSeconds, setCurrentValueInSeconds] =
+    React.useState<number>(0)
+  let updateTimer: number
+
+  if (unit !== prevUnit || value !== prevValue) {
+    setPrevValue(value || 0)
+    setPrevUnit(unit)
+    setCurrentValueInSeconds(
+      canIncrement(unit) ? valueToSeconds(value, unit) : 0
+    )
+  }
+
+  React.useEffect(() => {
+    function clearUpdateTimer() {
+      clearTimeout(updateTimer)
+    }
+    clearUpdateTimer()
+    // If there's no interval and we cannot increment this unit, do nothing
+    if (!updateIntervalInSeconds || !canIncrement(unit)) {
+      return clearUpdateTimer
+    }
+    // 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 clearUpdateTimer
+    }
+
+    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
+    )
+
+    if (currentValueInSeconds !== nextInterestingValueInSeconds) {
+      updateTimer = setTimeout(
+        () => setCurrentValueInSeconds(nextInterestingValueInSeconds),
+        delayInSeconds * 1e3
+      ) as unknown as number
+    }
+    return clearUpdateTimer
+  }, [currentValueInSeconds, updateIntervalInSeconds, unit])
+
+  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)
+  }
+  return (
+    <SimpleFormattedRelativeTime
+      value={currentValue}
+      unit={currentUnit}
+      {...otherProps}
+    />
+  )
+}
+
+FormattedRelativeTime.displayName = 'FormattedRelativeTime'
+FormattedRelativeTime.defaultProps = {
+  value: 0,
+  unit: 'second',
+}
+
+export default FormattedRelativeTime

package/src/components/useIntl.ts

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

package/src/types.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2015, Yahoo Inc.
+ * Copyrights licensed under the New BSD License.
+ * See the accompanying LICENSE file for terms.
+ */
+import * as React from 'react'
+import {
+  ResolvedIntlConfig as CoreResolvedIntlConfig,
+  IntlFormatters,
+  Formatters,
+} from '@formatjs/intl'
+import {DEFAULT_INTL_CONFIG} from './utils'
+export type IntlConfig = Omit<
+  ResolvedIntlConfig,
+  keyof typeof DEFAULT_INTL_CONFIG
+> &
+  Partial<typeof DEFAULT_INTL_CONFIG>
+
+export interface ResolvedIntlConfig
+  extends CoreResolvedIntlConfig<React.ReactNode> {
+  textComponent?: React.ComponentType | keyof React.ReactHTML
+  wrapRichTextChunksInFragment?: boolean
+}
+
+export interface IntlShape
+  extends ResolvedIntlConfig,
+    IntlFormatters<React.ReactNode> {
+  formatters: Formatters
+}