diff options
Diffstat (limited to 'src/module/Panel.jsx')
-rw-r--r-- | src/module/Panel.jsx | 49 |
1 files changed, 16 insertions, 33 deletions
diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx index e372774..b91c6fe 100644 --- a/src/module/Panel.jsx +++ b/src/module/Panel.jsx | |||
@@ -1,8 +1,4 @@ | |||
1 | import React, {PropTypes} from 'react'; | 1 | import React, {PropTypes} from 'react'; |
2 | import classnames from 'classnames'; | ||
3 | import GregorianCalendar from 'gregorian-calendar'; | ||
4 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
5 | |||
6 | import CommonMixin from '../mixin/CommonMixin'; | 2 | import CommonMixin from '../mixin/CommonMixin'; |
7 | import Header from './Header'; | 3 | import Header from './Header'; |
8 | import Combobox from './Combobox'; | 4 | import Combobox from './Combobox'; |
@@ -22,11 +18,16 @@ const Panel = React.createClass({ | |||
22 | value: PropTypes.object, | 18 | value: PropTypes.object, |
23 | locale: PropTypes.object, | 19 | locale: PropTypes.object, |
24 | placeholder: PropTypes.string, | 20 | placeholder: PropTypes.string, |
21 | gregorianCalendarLocale: PropTypes.object, | ||
25 | formatter: PropTypes.object, | 22 | formatter: PropTypes.object, |
26 | hourOptions: PropTypes.array, | 23 | hourOptions: PropTypes.array, |
27 | minuteOptions: PropTypes.array, | 24 | minuteOptions: PropTypes.array, |
28 | secondOptions: PropTypes.array, | 25 | secondOptions: PropTypes.array, |
29 | onChange: PropTypes.func, | 26 | onChange: PropTypes.func, |
27 | onEsc: PropTypes.func, | ||
28 | allowEmpty: PropTypes.bool, | ||
29 | showHour: PropTypes.bool, | ||
30 | showSecond: PropTypes.bool, | ||
30 | onClear: PropTypes.func, | 31 | onClear: PropTypes.func, |
31 | }, | 32 | }, |
32 | 33 | ||
@@ -43,26 +44,11 @@ const Panel = React.createClass({ | |||
43 | }, | 44 | }, |
44 | 45 | ||
45 | getInitialState() { | 46 | getInitialState() { |
46 | let value = this.props.value; | ||
47 | if (!value) { | ||
48 | value = new GregorianCalendar(zhCn); | ||
49 | value.setTime(Date.now()); | ||
50 | } | ||
51 | return { | 47 | return { |
52 | value, | 48 | value: this.props.value, |
53 | }; | 49 | }; |
54 | }, | 50 | }, |
55 | 51 | ||
56 | componentWillMount() { | ||
57 | const formatter = this.props.formatter; | ||
58 | const pattern = formatter.originalPattern; | ||
59 | if (pattern === 'HH:mm') { | ||
60 | this.showSecond = false; | ||
61 | } else if (pattern === 'mm:ss') { | ||
62 | this.showHour = false; | ||
63 | } | ||
64 | }, | ||
65 | |||
66 | componentWillReceiveProps(nextProps) { | 52 | componentWillReceiveProps(nextProps) { |
67 | const value = nextProps.value; | 53 | const value = nextProps.value; |
68 | if (value) { | 54 | if (value) { |
@@ -81,37 +67,34 @@ const Panel = React.createClass({ | |||
81 | this.props.onClear(); | 67 | this.props.onClear(); |
82 | }, | 68 | }, |
83 | 69 | ||
84 | showHour: true, | ||
85 | showSecond: true, | ||
86 | |||
87 | render() { | 70 | render() { |
88 | const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; | 71 | const { locale, prefixCls, placeholder, hourOptions, minuteOptions, secondOptions, allowEmpty, showHour, showSecond, formatter, gregorianCalendarLocale } = this.props; |
89 | const value = this.state.value; | 72 | const value = this.state.value; |
90 | const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); | ||
91 | |||
92 | return ( | 73 | return ( |
93 | <div className={`${prefixCls}-panel-inner ${cls}`}> | 74 | <div className={`${prefixCls}-inner`}> |
94 | <Header | 75 | <Header |
95 | prefixCls={prefixCls} | 76 | prefixCls={prefixCls} |
96 | gregorianTimePickerLocale={value.locale} | 77 | gregorianCalendarLocale={gregorianCalendarLocale} |
97 | locale={locale} | 78 | locale={locale} |
98 | value={value} | 79 | value={value} |
99 | formatter={this.getFormatter()} | 80 | onEsc={this.props.onEsc} |
81 | formatter={formatter} | ||
100 | placeholder={placeholder} | 82 | placeholder={placeholder} |
101 | hourOptions={hourOptions} | 83 | hourOptions={hourOptions} |
102 | minuteOptions={minuteOptions} | 84 | minuteOptions={minuteOptions} |
103 | secondOptions={secondOptions} | 85 | secondOptions={secondOptions} |
104 | onChange={this.onChange} | 86 | onChange={this.onChange} |
105 | onClear={this.onClear} | 87 | onClear={this.onClear} |
106 | showClear | 88 | allowEmpty={allowEmpty} |
107 | /> | 89 | /> |
108 | <Combobox | 90 | <Combobox |
109 | prefixCls={prefixCls} | 91 | prefixCls={prefixCls} |
110 | value={value} | 92 | value={value} |
111 | formatter={this.getFormatter()} | 93 | gregorianCalendarLocale={gregorianCalendarLocale} |
94 | formatter={formatter} | ||
112 | onChange={this.onChange} | 95 | onChange={this.onChange} |
113 | showHour={this.showHour} | 96 | showHour={showHour} |
114 | showSecond={this.showSecond} | 97 | showSecond={showSecond} |
115 | hourOptions={hourOptions} | 98 | hourOptions={hourOptions} |
116 | minuteOptions={minuteOptions} | 99 | minuteOptions={minuteOptions} |
117 | secondOptions={secondOptions} | 100 | secondOptions={secondOptions} |