TypeScript react-intl.defineMessages函數代碼示例

/* eslint-env browser */
import { defineMessages } from 'react-intl';
import { useAppContext } from './useAppContext';

const messages = defineMessages({
  areYouSure: {
    defaultMessage: 'Are you sure?',
    id: 'confirm.areYouSure',
  },
});

export const useConfirm = () => {
  const { intl } = useAppContext();

  const confirm = () => {
    // eslint-disable-next-line no-alert
    return window.confirm(intl.formatMessage(messages.areYouSure));
  };

  return confirm;
};

import { handleApiGraphQLError } from '@app/api/handleApiGraphQLError';
import Router from 'next/router';
import { useState, useRef, useEffect, useMemo } from 'react';
import { defineMessages } from 'react-intl';
import { commitMutation, GraphQLTaggedNode } from 'react-relay';
import { Disposable } from 'relay-runtime';
import { useAppHref } from './useAppHref';
import { useAppContext } from './useAppContext';

const messages = defineMessages({
  forbidden: {
    defaultMessage: 'This action is forbidden.',
    id: 'useMutation.forbidden',
  },
  noInternetAccess: {
    defaultMessage: 'Please check your internet connection.',
    id: 'useMutation.noInternetAccess',
  },
  notFound: {
    defaultMessage: 'Not found.',
    id: 'useMutation.notFound',
  },
});

// While it's possible to have multiple fields (mutations) in one mutation,
// I don't think it's a good pattern for client usage. There are questions
// related to transactions, race conditions, and batching. I believe server
// API should provide well tailored mutation for such use case.
// Therefore, this Hook supports only the one mutation with the one input.
// https://graphql.org/learn/queries/#multiple-fields-in-mutations

interface Focusable {

/*
 * Vmform Messages
 *
 * This contains all the text for the Vmform component.
 */
import { defineMessages } from 'react-intl';

export default defineMessages({
  infrastructure: {
    id: 'app.components.Vmform.infrastructure',
    defaultMessage: 'Infrastructure settings',
  },
  account: {
    id: 'app.components.Vmform.account',
    defaultMessage: 'Account settings',
  },
  resources: {
    id: 'app.components.Vmform.resources',
    defaultMessage: 'Resources settings',
  },
  hooks: {
    id: 'app.components.Vmform.hooks',
    defaultMessage: 'Post-creation hooks settings',
  },
  network: {
    id: 'app.components.Vmform.network',
    defaultMessage: 'Network connection settings'
  }
});

import { defineMessages } from 'react-intl';
import { useMemo } from 'react';
import { useAppContext } from './useAppContext';

export const pageTitles = defineMessages({
  index: {
    defaultMessage: 'Este',
    id: 'pageTitles.index',
  },
  me: {
    defaultMessage: 'Me',
    id: 'pageTitles.me',
  },
  signIn: {
    defaultMessage: 'Sign in',
    id: 'pageTitles.signIn',
  },
});

// Page titles can not be collocated within pages because that would defeat
// code splitting. One nav component would import many pages.
export const usePageTitles = () => {
  const { intl } = useAppContext();
  const titles = useMemo(() => {
    return {
      // Note we can add function for formatMessage values.
      index: intl.formatMessage(pageTitles.index),
      me: intl.formatMessage(pageTitles.me),
      signIn: intl.formatMessage(pageTitles.signIn),
    };
  }, [intl]);