UNPKG

@ant-design/react-native

Version:

基于蚂蚁金服移动设计规范的 React Native 组件库

135 lines (127 loc) 4.32 kB
import _classCallCheck from 'babel-runtime/helpers/classCallCheck'; import _createClass from 'babel-runtime/helpers/createClass'; import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn'; import _inherits from 'babel-runtime/helpers/inherits'; import React from 'react'; import { View } from 'react-native'; import LocaleProvider from '..'; import { DatePicker, List, Pagination, Picker, SearchBar, WhiteSpace, WingBlank } from '../../'; import enUS from '../en_US'; import esES from '../es_ES'; import ptBR from '../pt_BR'; import ruRU from '../ru_RU'; import zhCN from '../zh_CN'; var maxDate = new Date(2018, 11, 3, 22, 0); var minDate = new Date(2015, 7, 6, 8, 30); var seasons = [[{ label: '2013', value: '2013' }, { label: '2014', value: '2014' }], [{ label: '春', value: '春' }, { label: '夏', value: '夏' }]]; var Page = function Page() { return React.createElement( View, null, React.createElement(Pagination, { total: 5, current: 1 }), React.createElement(WhiteSpace, null), React.createElement( List, { style: { backgroundColor: 'white' } }, React.createElement( DatePicker, { mode: 'date', title: 'Select date', minDate: minDate, maxDate: maxDate }, React.createElement( List.Item, { arrow: 'horizontal' }, 'DatePicker' ) ), React.createElement( Picker, { data: seasons, cascade: false }, React.createElement( List.Item, { arrow: 'horizontal' }, 'Picker' ) ), React.createElement(WhiteSpace, null), React.createElement(SearchBar, { placeholder: 'Search', showCancelButton: true }) ) ); }; var LocaleProviderExample = function (_React$Component) { _inherits(LocaleProviderExample, _React$Component); function LocaleProviderExample(props) { _classCallCheck(this, LocaleProviderExample); var _this = _possibleConstructorReturn(this, (LocaleProviderExample.__proto__ || Object.getPrototypeOf(LocaleProviderExample)).call(this, props)); _this.onChange = function (value) { _this.setState({ locale: value[0] }); }; _this.state = { locale: 'English' }; return _this; } _createClass(LocaleProviderExample, [{ key: 'render', value: function render() { var locale = this.state.locale; var languages = [{ value: '中国', label: '中国', language: zhCN }, { value: 'English', label: 'English', language: enUS }, { value: 'Русский', label: 'Русский', language: ruRU }, { value: 'Español', label: 'Español', language: esES }, { value: 'Português - BR', label: 'Português - BR', language: ptBR }]; var currentLocale = languages.find(function (item) { return item.value === locale; }).language; return React.createElement( WingBlank, null, React.createElement( Picker, { data: languages, onChange: this.onChange, cols: 1, value: [locale] }, React.createElement( List.Item, { arrow: 'horizontal' }, 'Choose language' ) ), React.createElement(WhiteSpace, null), React.createElement( LocaleProvider, { locale: currentLocale }, React.createElement(Page, null) ) ); } }]); return LocaleProviderExample; }(React.Component); export default LocaleProviderExample;