aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--HISTORY.md5
-rw-r--r--README.md23
-rw-r--r--examples/pick-time.js18
-rw-r--r--package.json2
-rw-r--r--src/TimePicker.jsx44
-rw-r--r--src/module/Panel.jsx (renamed from src/TimePanel.jsx)22
6 files changed, 59 insertions, 55 deletions
diff --git a/HISTORY.md b/HISTORY.md
index 676fc17..28516bc 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -3,6 +3,11 @@ History
3 3
4--- 4---
5 5
60.3.0 / 2015-11-17
7------------------
8
9`update` remove TimePanel and merge it to TimePicker.
10
60.2.0 / 2015-11-16 110.2.0 / 2015-11-16
7------------------ 12------------------
8 13
diff --git a/README.md b/README.md
index 998fe4e..c6e8e1c 100644
--- a/README.md
+++ b/README.md
@@ -23,32 +23,23 @@ ReactDOM.render(<TimePicker />, container);
23API 23API
24--- 24---
25 25
26### TimePanel 26### TimePicker
27 27
28| Name | Type | Default | Description | 28| Name | Type | Default | Description |
29|---------------|----------------------------|-----------------------------------------------|-----------------------------------------------| 29|---------------|----------------------------|-----------------------------------------------|-----------------------------------------------|
30| prefixCls | String | | prefixCls of this component | 30| prefixCls | String | | prefixCls of this component |
31| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | 31| locale | Object | import from 'rc-time-picker/lib/locale/en_US' | |
32| defaultValue | GregorianCalendar | null | defaultValue like input's defaultValue | 32| disabled | Boolean | false | whether picker is disabled |
33| open | Boolean | false | current open state of picker. controlled prop |
34| value | GregorianCalendar | null | current value like input's value |
33| placeholder | String | '' | time input's placeholder | 35| placeholder | String | '' | time input's placeholder |
34| formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | | 36| formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | |
35| hourOptions | Array<String> | hour options | | 37| hourOptions | Array<String> | hour options | |
36| minuteOptions | Array<String> | minute options | | 38| minuteOptions | Array<String> | minute options | |
37| secondOptions | Array<String> | second options | | 39| secondOptions | Array<String> | second options | |
38| onChange | Function | null | called when input or select a different value | 40| onChange | Function | null | called when select a different value |
39 41| onOpen | Function | null | called when open picker |
40### TimePicker 42| onClose | Function | null | called when close picker |
41
42| Name | Type | Default | Description |
43|-----------|-------------------------|---------|-----------------------------------------------|
44| prefixCls | String | | prefixCls of this component |
45| panel | TimePanel React Element | | |
46| disabled | Boolean | false | whether picker is disabled |
47| open | Boolean | false | current open state of picker. controlled prop |
48| value | GregorianCalendar | null | current value like input's value |
49| onChange | Function | null | called when select a different value |
50| onOpen | Function | null | called when open picker |
51| onClose | Function | null | called when close picker |
52 43
53License 44License
54------- 45-------
diff --git a/examples/pick-time.js b/examples/pick-time.js
index 8c6b826..54548c7 100644
--- a/examples/pick-time.js
+++ b/examples/pick-time.js
@@ -8,7 +8,6 @@ import DateTimeFormat from 'gregorian-calendar-format';
8import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; 8import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
9 9
10import TimePicker from 'rc-time-picker/src/TimePicker'; 10import TimePicker from 'rc-time-picker/src/TimePicker';
11import TimePanel from 'rc-time-picker/src/TimePanel';
12import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; 11import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN';
13 12
14const formatter = new DateTimeFormat('HH:mm:ss'); 13const formatter = new DateTimeFormat('HH:mm:ss');
@@ -16,22 +15,7 @@ const formatter = new DateTimeFormat('HH:mm:ss');
16const now = new GregorianCalendar(zhCn); 15const now = new GregorianCalendar(zhCn);
17now.setTime(Date.now()); 16now.setTime(Date.now());
18 17
19const timePanel = (
20 <TimePanel
21 defaultValue={now}
22 locale={TimePickerLocale}
23 formatter={formatter}
24 minuteOptions={[0, 30]}
25 />
26);
27
28ReactDom.render( 18ReactDom.render(
29 <TimePicker panel={timePanel} value={now}> 19 <TimePicker formatter={formatter} locale={TimePickerLocale} value={now} />,
30 {
31 ({value}) => {
32 return <input type="text" placeholder="请选择时间" readOnly value={value && formatter.format(value)} />;
33 }
34 }
35 </TimePicker>,
36 document.getElementById('__react-content') 20 document.getElementById('__react-content')
37); 21);
diff --git a/package.json b/package.json
index 483c3d9..520005e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
1{ 1{
2 "name": "rc-time-picker", 2 "name": "rc-time-picker",
3 "version": "0.2.0", 3 "version": "0.3.0",
4 "description": "React TimePicker", 4 "description": "React TimePicker",
5 "keywords": [ 5 "keywords": [
6 "react", 6 "react",
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index 6bb97a1..27a793e 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
2import ReactDOM from 'react-dom'; 2import ReactDOM from 'react-dom';
3import Trigger from 'rc-trigger'; 3import Trigger from 'rc-trigger';
4import {createChainedFunction} from 'rc-util'; 4import {createChainedFunction} from 'rc-util';
5import Panel from 'rc-time-picker/src/module/Panel';
5import placements from './util/placements'; 6import placements from './util/placements';
6import CommonMixin from './mixin/CommonMixin'; 7import CommonMixin from './mixin/CommonMixin';
7 8
@@ -15,7 +16,7 @@ function refFn(field, component) {
15const Picker = React.createClass({ 16const Picker = React.createClass({
16 propTypes: { 17 propTypes: {
17 prefixCls: PropTypes.string, 18 prefixCls: PropTypes.string,
18 panel: PropTypes.element, 19 locale: PropTypes.object,
19 children: PropTypes.func, 20 children: PropTypes.func,
20 disabled: PropTypes.bool, 21 disabled: PropTypes.bool,
21 value: PropTypes.object, 22 value: PropTypes.object,
@@ -23,6 +24,11 @@ const Picker = React.createClass({
23 align: PropTypes.object, 24 align: PropTypes.object,
24 placement: PropTypes.any, 25 placement: PropTypes.any,
25 transitionName: PropTypes.string, 26 transitionName: PropTypes.string,
27 placeholder: PropTypes.string,
28 formatter: PropTypes.object,
29 hourOptions: PropTypes.array,
30 minuteOptions: PropTypes.array,
31 secondOptions: PropTypes.array,
26 onChange: PropTypes.func, 32 onChange: PropTypes.func,
27 onOpen: PropTypes.func, 33 onOpen: PropTypes.func,
28 onClose: PropTypes.func, 34 onClose: PropTypes.func,
@@ -66,19 +72,35 @@ const Picker = React.createClass({
66 }, 72 },
67 73
68 onPanelClear() { 74 onPanelClear() {
69 this.setOpen(false, this.focus); 75 this.setOpen(false);
70 }, 76 },
71 77
72 onVisibleChange(open) { 78 onVisibleChange(open) {
73 this.setOpen(open, () => { 79 this.setOpen(open, () => {
74 if (open) { 80 if (open) {
81 ReactDOM.findDOMNode(this.refs.picker).blur();
75 ReactDOM.findDOMNode(this.panelInstance).focus(); 82 ReactDOM.findDOMNode(this.panelInstance).focus();
76 } 83 }
77 }); 84 });
78 }, 85 },
79 86
87 getPanel() {
88 const { value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props;
89 return (
90 <Panel
91 defaultValue={value}
92 locale={locale}
93 formatter={formatter}
94 placeholder={placeholder}
95 hourOptions={hourOptions}
96 minuteOptions={minuteOptions}
97 secondOptions={secondOptions}
98 />
99 );
100 },
101
80 getPanelElement() { 102 getPanelElement() {
81 const panel = this.props.panel; 103 const panel = this.getPanel();
82 const extraProps = { 104 const extraProps = {
83 ref: this.savePanelRef, 105 ref: this.savePanelRef,
84 defaultValue: this.state.value || panel.props.defaultValue, 106 defaultValue: this.state.value || panel.props.defaultValue,
@@ -106,16 +128,10 @@ const Picker = React.createClass({
106 } 128 }
107 }, 129 },
108 130
109 focus() {
110 if (!this.state.open) {
111 ReactDOM.findDOMNode(this).focus();
112 }
113 },
114
115 render() { 131 render() {
116 const state = this.state; 132 const { prefixCls, placement, align, disabled, transitionName, children, formatter } = this.props;
117 const props = this.props; 133 const { open, value } = this.state;
118 const { prefixCls, placement, align, disabled, transitionName, children } = props; 134
119 return ( 135 return (
120 <Trigger 136 <Trigger
121 prefixCls={prefixCls} 137 prefixCls={prefixCls}
@@ -126,11 +142,11 @@ const Picker = React.createClass({
126 action={disabled ? [] : ['click']} 142 action={disabled ? [] : ['click']}
127 destroyPopupOnHide 143 destroyPopupOnHide
128 popupTransitionName={transitionName} 144 popupTransitionName={transitionName}
129 popupVisible={state.open} 145 popupVisible={open}
130 onPopupVisibleChange={this.onVisibleChange} 146 onPopupVisibleChange={this.onVisibleChange}
131 > 147 >
132 <span className={`${prefixCls}-picker`}> 148 <span className={`${prefixCls}-picker`}>
133 {children(state, props)} 149 <input ref="picker" type="text" placeholder="请选择时间" readOnly disabled={disabled} value={value && formatter.format(value)} />
134 </span> 150 </span>
135 </Trigger> 151 </Trigger>
136 ); 152 );
diff --git a/src/TimePanel.jsx b/src/module/Panel.jsx
index 110ca1e..4220da8 100644
--- a/src/TimePanel.jsx
+++ b/src/module/Panel.jsx
@@ -1,8 +1,11 @@
1import React, {PropTypes} from 'react'; 1import React, {PropTypes} from 'react';
2import classnames from 'classnames'; 2import classnames from 'classnames';
3import CommonMixin from './mixin/CommonMixin'; 3import GregorianCalendar from 'gregorian-calendar';
4import Header from './module/Header'; 4import zhCn from 'gregorian-calendar/lib/locale/zh_CN';
5import Combobox from './module/Combobox'; 5
6import CommonMixin from '../mixin/CommonMixin';
7import Header from './Header';
8import Combobox from './Combobox';
6 9
7function noop() { 10function noop() {
8} 11}
@@ -13,7 +16,7 @@ function generateOptions(length) {
13 }); 16 });
14} 17}
15 18
16const TimePanel = React.createClass({ 19const Panel = React.createClass({
17 propTypes: { 20 propTypes: {
18 prefixCls: PropTypes.string, 21 prefixCls: PropTypes.string,
19 defaultValue: PropTypes.object, 22 defaultValue: PropTypes.object,
@@ -40,8 +43,13 @@ const TimePanel = React.createClass({
40 }, 43 },
41 44
42 getInitialState() { 45 getInitialState() {
46 let defaultValue = this.props.defaultValue;
47 if (!defaultValue) {
48 defaultValue = new GregorianCalendar(zhCn);
49 defaultValue.setTime(Date.now());
50 }
43 return { 51 return {
44 value: this.props.defaultValue, 52 value: defaultValue,
45 }; 53 };
46 }, 54 },
47 55
@@ -90,7 +98,7 @@ const TimePanel = React.createClass({
90 <div className={`${prefixCls}-panel ${cls}`}> 98 <div className={`${prefixCls}-panel ${cls}`}>
91 <Header 99 <Header
92 prefixCls={prefixCls} 100 prefixCls={prefixCls}
93 gregorianTimePickerLocale={defaultValue.locale} 101 gregorianTimePickerLocale={value.locale}
94 locale={locale} 102 locale={locale}
95 value={value} 103 value={value}
96 formatter={this.getFormatter()} 104 formatter={this.getFormatter()}
@@ -118,4 +126,4 @@ const TimePanel = React.createClass({
118 }, 126 },
119}); 127});
120 128
121export default TimePanel; 129export default Panel;