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 文件，应该引入 antd/dist/antd-with-locales.js，同时引入 moment 对应的 locale，然后按以下方式使用：

const { LocaleProvider, locales } = window.antd;

...

return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;

增加语言包

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

其他国际化需求

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

代码演示

国际化

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

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>,
  mountNode);

所有组件

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

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.Option;
const RangePicker = DatePicker.RangePicker;

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',
      });
    };
    return (
      <div className="locale-components">
        <div className="example">
          <Pagination defaultCurrent={1} total={50} showSizeChanger />
        </div>
        <div className="example">
          <Select showSearch style={{ width: 200 }}>
            <Option value="jack">jack</Option>
            <Option value="lucy">lucy</Option>
          </Select>
          <DatePicker />
          <TimePicker />
          <RangePicker style={{ width: 200 }} />
        </div>
        <div className="example">
          <Button type="primary" onClick={this.showModal}>Show Modal</Button>
          <Button onClick={info}>Show info</Button>
          <Button onClick={confirm}>Show confirm</Button>
          <Popconfirm title="Question?">
            <a href="#">Click to confirm</a>
          </Popconfirm>
        </div>
        <div className="example">
          <Transfer
            dataSource={[]}
            showSearch
            targetKeys={[]}
            render={item => item.title}
          />
        </div>
        <div style={{ width: 319, border: '1px solid #d9d9d9', borderRadius: 4 }}>
          <Calendar fullscreen={false} value={moment()} />
        </div>
        <div className="example">
          <Table dataSource={[]} columns={columns} />
        </div>
        <Modal title="Locale Modal" visible={this.state.visible} onCancel={this.hideModal}>
          <p>Locale Modal</p>
        </Modal>
      </div>
    );
  }
}

let forceRerender = 0;
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      locale: null,
    };
  }

  changeLocale = (e) => {
    const localeValue = e.target.value;
    this.setState({ locale: localeValue });
    if (!localeValue) {
      moment.locale('en');
    } else {
      moment.locale('zh-cn');
    }
  }

  render() {
    return (
      <div>
        <div className="change-locale">
          <span style={{ marginRight: 16 }}>Change locale of components: </span>
          <Radio.Group defaultValue={null} onChange={this.changeLocale}>
            <Radio.Button key="en" value={null}>English</Radio.Button>
            <Radio.Button key="cn" value={zhCN}>中文</Radio.Button>
          </Radio.Group>
        </div>
        <LocaleProvider locale={this.state.locale}>
          <Page key={forceRerender++ /* HACK: just refresh in production environment */} />
        </LocaleProvider>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

API

参数	说明	类型	默认值
locale	语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找	object	-