LocaleProvider 国际化

为组件内建文案提供统一的国际化支持。

使用

LocaleProvider 使用 React 的 context 特性，只需在应用外围包裹一次即可全局生效。

import { LocaleProvider } from 'choerodon-ui';
import zh_CN from 'choerodon-ui/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';
...
return <LocaleProvider locale={zh_CN}><App /></LocaleProvider>;

我们提供了英语，中文，俄语，法语，德语等多种语言支持，所有语言包可以在 这里 找到。

注意：如果你需要使用 UMD 版的 dist 文件，应该引入 choerodon-ui/dist/choerodon-ui-with-locales.js，同时引入 moment 对应的 locale，然后按以下方式使用：

const { LocaleProvider, locales } = window['choerodon-ui'];
...
return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;

增加语言包

如果你找不到你需要的语言包，欢迎你在 英文语言包 的基础上创建一个新的语言包，并给我们 Pull Request。

其他国际化需求

本模块仅用于组件的内建文案，若有业务文案的国际化需求，建议使用 react-intl，可参考示例：Intl demo 1 和 Intl demo 2。

代码演示

国际化

用 LocaleProvider 包裹你的应用，并引用对应的语言包。

import React from 'react';
import ReactDOM from 'react-dom';
import { Pagination, LocaleProvider } from 'choerodon-ui';
import enUS from 'choerodon-ui/lib/locale-provider/en_US';
​
const App = () => (
  <div>
    <Pagination defaultCurrent={1} total={50} showSizeChanger />
  </div>
);
​
ReactDOM.render(
  <LocaleProvider locale={enUS}>
    <App />
  </LocaleProvider>,
  document.getElementById('container'));
​

所有组件

此处列出 Choerodon UI 中需要国际化支持的组件，你可以在演示里切换语言。

​
import React from 'react';
import ReactDOM from 'react-dom';
import {
  LocaleProvider,
  Pagination,
  DatePicker,
  TimePicker,
  Calendar,
  Popconfirm,
  Table,
  Modal,
  Button,
  Select,
  Transfer,
  Radio,
} from 'choerodon-ui';
import zhCN from 'choerodon-ui/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
​
moment.locale('en');
​
const { Option } = Select;
const { RangePicker } = DatePicker;
​
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'filter1',
        value: 'filter1',
      },
    ],
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
];
​
class Page extends React.Component {
  state = {
    visible: false,
  };
​
  showModal = () => {
    this.setState({ visible: true });
  };
​
  hideModal = () => {
    this.setState({ visible: false });
  };
​
  render() {
    const info = () => {
      Modal.info({
        title: 'some info',
        content: 'some info',
      });
    };
    const confirm = () => {
      Modal.confirm({
        title: 'some info',
        content: 'some info',
      });

API