diff --git a/package.json b/package.json index 91b20163..7ac52953 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "@ucloud-fe/react-components", "version": "0.3.1", - "title": "ucloud react components", - "description": "ucloud react components", + "title": "UCloud react components", + "description": "UCloud react components", "keywords": [ "react", "react-component", diff --git a/src/components/LocaleProvider/LocaleProvider.jsx b/src/components/LocaleProvider/LocaleProvider.jsx index 9163847b..85941e29 100644 --- a/src/components/LocaleProvider/LocaleProvider.jsx +++ b/src/components/LocaleProvider/LocaleProvider.jsx @@ -1,7 +1,14 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import { setRuntimeLocale } from './locale/runtime'; + class LocaleProvider extends Component { + constructor(props) { + super(props); + const { locale } = props; + setRuntimeLocale(locale); + } static propTypes = { children: PropTypes.node, locale: PropTypes.object @@ -19,6 +26,11 @@ class LocaleProvider extends Component { } }; } + componentWillReceiveProps = nextProps => { + if (nextProps.locale !== this.props.locale) { + setRuntimeLocale(nextProps.locale); + } + }; render() { return React.Children.only(this.props.children); } diff --git a/src/components/LocaleProvider/LocaleProvider.md b/src/components/LocaleProvider/LocaleProvider.md index a77e66c2..90fc6359 100644 --- a/src/components/LocaleProvider/LocaleProvider.md +++ b/src/components/LocaleProvider/LocaleProvider.md @@ -3,6 +3,11 @@ * 国际化语言组件,用于外围包裹来支持统一控制组件的语言 * 语言控制分为 3 层,开发者可控制的为 2 层,均为可选,优先级从低到高分别是: `组件默认语言(开发者不可控) -> LocaleProvider.locale -> Component.locale` +### 注意点 + +* 通过 Modal.method 生成的 Modal 组件的语言控制无法通过 context 简单的传输,所以使用了 runtimeLocale,如果一个页面用到了两个传入不同 locale 的 LocaleProvider,那么 runtimeLocale 可能会错乱,请务必注意 +* 如用到 DatePicker、Calendar 等日期相关组件,LocaleProvider 由于生命周期顺序的问题无法实时变更语言,需要手动设置 moment 的语言。 + ### 演示 * 自定义语言 @@ -21,6 +26,8 @@ ```js static import locale from '@ucloud-fe/react-components/lib/components/LocaleProvider/locale/en_US'; +// 使用到DatePicker等日期相关组件的情况下需要手动设置moment语言 +moment.locale('en'); const Demo = () => (