aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--.travis.yml2
-rw-r--r--HISTORY.md10
-rw-r--r--LICENSE.md9
-rw-r--r--README.md5
-rw-r--r--examples/format.html0
-rw-r--r--examples/format.js26
-rw-r--r--package.json2
-rw-r--r--src/Combobox.jsx6
-rw-r--r--src/Header.jsx18
-rw-r--r--src/Panel.jsx22
-rw-r--r--src/Select.jsx3
-rw-r--r--src/TimePicker.jsx40
12 files changed, 111 insertions, 32 deletions
diff --git a/.travis.yml b/.travis.yml
index e780b32..d2c1fdb 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -7,7 +7,7 @@ notifications:
7 - yiminghe@gmail.com 7 - yiminghe@gmail.com
8 8
9node_js: 9node_js:
10- 4.0.0 10- 6
11 11
12before_install: 12before_install:
13- | 13- |
diff --git a/HISTORY.md b/HISTORY.md
index 8cfc326..c6198f6 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -2,6 +2,16 @@
2 2
3--- 3---
4 4
52.2.0 / 2016-11-11
6---------------------------
7
8Add `showMinute` prop.
9
102.1.0 / 2016-10-25
11---------------------------
12
13Add `addon` prop.
14
52.0.0 / 2016-08-04 152.0.0 / 2016-08-04
6--------------------------- 16---------------------------
7 17
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..1f5a0d9
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,9 @@
1The MIT License (MIT)
2
3Copyright (c) 2014-present yiminghe
4
5Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
7The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
9THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index 5d8822a..c994218 100644
--- a/README.md
+++ b/README.md
@@ -60,6 +60,7 @@ API
60| value | moment | null | current value | 60| value | moment | null | current value |
61| placeholder | String | '' | time input's placeholder | 61| placeholder | String | '' | time input's placeholder |
62| showHour | Boolean | whether show hour | | 62| showHour | Boolean | whether show hour | |
63| showMinute | Boolean | whether show minute | |
63| showSecond | Boolean | whether show second | | 64| showSecond | Boolean | whether show second | |
64| format | String | | | 65| format | String | | |
65| disabledHours | Function | disabled hour options | | 66| disabledHours | Function | disabled hour options | |
@@ -67,10 +68,10 @@ API
67| disabledSeconds | Function | disabled second options | | 68| disabledSeconds | Function | disabled second options | |
68| hideDisabledOptions | Boolean | whether hide disabled options | | 69| hideDisabledOptions | Boolean | whether hide disabled options | |
69| onChange | Function | null | called when select a different value | 70| onChange | Function | null | called when select a different value |
71| addon | Function | nothing | called from timepicker panel to render some addon to its bottom, like an OK button. Receives panel instance as parameter, to be able to close it like `panel.close()`.|
70| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | 72| placement | String | bottomLeft | one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] |
71| transitionName | String | '' | | 73| transitionName | String | '' | |
72| autoComplete | String | 'yes' | one of ['yes', 'no'] | 74| name | String | nothing | sets the name of the generated input |
73
74 75
75## Test Case 76## Test Case
76 77
diff --git a/examples/format.html b/examples/format.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/examples/format.html
diff --git a/examples/format.js b/examples/format.js
new file mode 100644
index 0000000..c9a9539
--- /dev/null
+++ b/examples/format.js
@@ -0,0 +1,26 @@
1import 'rc-time-picker/assets/index.less';
2import React from 'react';
3import ReactDom from 'react-dom';
4import moment from 'moment';
5import TimePicker from 'rc-time-picker';
6
7const App = React.createClass({
8 render() {
9 return (
10 <div>
11 <TimePicker defaultValue={moment()} showHour={false} />
12 <TimePicker defaultValue={moment()} showMinute={false} />
13 <TimePicker defaultValue={moment()} showSecond={false} />
14
15 <TimePicker defaultValue={moment()} showMinute={false} showSecond={false} />
16 <TimePicker defaultValue={moment()} showHour={false} showSecond={false}/>
17 <TimePicker defaultValue={moment()} showHour={false} showMinute={false} />
18 </div>
19 );
20 },
21});
22
23ReactDom.render(
24 <App />,
25 document.getElementById('__react-content')
26);
diff --git a/package.json b/package.json
index 4690f1e..1a4d828 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": "2.0.0", 3 "version": "2.2.1",
4 "description": "React TimePicker", 4 "description": "React TimePicker",
5 "keywords": [ 5 "keywords": [
6 "react", 6 "react",
diff --git a/src/Combobox.jsx b/src/Combobox.jsx
index 9d9da16..013617c 100644
--- a/src/Combobox.jsx
+++ b/src/Combobox.jsx
@@ -26,6 +26,7 @@ const Combobox = React.createClass({
26 value: PropTypes.object, 26 value: PropTypes.object,
27 onChange: PropTypes.func, 27 onChange: PropTypes.func,
28 showHour: PropTypes.bool, 28 showHour: PropTypes.bool,
29 showMinute: PropTypes.bool,
29 showSecond: PropTypes.bool, 30 showSecond: PropTypes.bool,
30 hourOptions: PropTypes.array, 31 hourOptions: PropTypes.array,
31 minuteOptions: PropTypes.array, 32 minuteOptions: PropTypes.array,
@@ -73,7 +74,10 @@ const Combobox = React.createClass({
73 }, 74 },
74 75
75 getMinuteSelect(minute) { 76 getMinuteSelect(minute) {
76 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue } = this.props; 77 const { prefixCls, minuteOptions, disabledMinutes, defaultOpenValue, showMinute } = this.props;
78 if (!showMinute) {
79 return null;
80 }
77 const value = this.props.value || defaultOpenValue; 81 const value = this.props.value || defaultOpenValue;
78 const disabledOptions = disabledMinutes(value.hour()); 82 const disabledOptions = disabledMinutes(value.hour());
79 83
diff --git a/src/Header.jsx b/src/Header.jsx
index 4196ea9..2ef9827 100644
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -151,14 +151,16 @@ const Header = React.createClass({
151 const { prefixCls, placeholder } = this.props; 151 const { prefixCls, placeholder } = this.props;
152 const { invalid, str } = this.state; 152 const { invalid, str } = this.state;
153 const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''; 153 const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
154 return (<input 154 return (
155 className={`${prefixCls}-input ${invalidClass}`} 155 <input
156 ref="input" 156 className={`${prefixCls}-input ${invalidClass}`}
157 onKeyDown={this.onKeyDown} 157 ref="input"
158 value={str} 158 onKeyDown={this.onKeyDown}
159 placeholder={placeholder} 159 value={str}
160 onChange={this.onInputChange} 160 placeholder={placeholder}
161 />); 161 onChange={this.onInputChange}
162 />
163 );
162 }, 164 },
163 165
164 render() { 166 render() {
diff --git a/src/Panel.jsx b/src/Panel.jsx
index f70cf38..fddea1c 100644
--- a/src/Panel.jsx
+++ b/src/Panel.jsx
@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
2import Header from './Header'; 2import Header from './Header';
3import Combobox from './Combobox'; 3import Combobox from './Combobox';
4import moment from 'moment'; 4import moment from 'moment';
5import classNames from 'classnames';
5 6
6function noop() { 7function noop() {
7} 8}
@@ -20,6 +21,7 @@ const Panel = React.createClass({
20 propTypes: { 21 propTypes: {
21 clearText: PropTypes.string, 22 clearText: PropTypes.string,
22 prefixCls: PropTypes.string, 23 prefixCls: PropTypes.string,
24 className: PropTypes.string,
23 defaultOpenValue: PropTypes.object, 25 defaultOpenValue: PropTypes.object,
24 value: PropTypes.object, 26 value: PropTypes.object,
25 placeholder: PropTypes.string, 27 placeholder: PropTypes.string,
@@ -32,8 +34,10 @@ const Panel = React.createClass({
32 onEsc: PropTypes.func, 34 onEsc: PropTypes.func,
33 allowEmpty: PropTypes.bool, 35 allowEmpty: PropTypes.bool,
34 showHour: PropTypes.bool, 36 showHour: PropTypes.bool,
37 showMinute: PropTypes.bool,
35 showSecond: PropTypes.bool, 38 showSecond: PropTypes.bool,
36 onClear: PropTypes.func, 39 onClear: PropTypes.func,
40 addon: PropTypes.func,
37 }, 41 },
38 42
39 getDefaultProps() { 43 getDefaultProps() {
@@ -41,7 +45,11 @@ const Panel = React.createClass({
41 prefixCls: 'rc-time-picker-panel', 45 prefixCls: 'rc-time-picker-panel',
42 onChange: noop, 46 onChange: noop,
43 onClear: noop, 47 onClear: noop,
48 disabledHours: noop,
49 disabledMinutes: noop,
50 disabledSeconds: noop,
44 defaultOpenValue: moment(), 51 defaultOpenValue: moment(),
52 addon: noop,
45 }; 53 };
46 }, 54 },
47 55
@@ -74,11 +82,15 @@ const Panel = React.createClass({
74 this.setState({ currentSelectPanel }); 82 this.setState({ currentSelectPanel });
75 }, 83 },
76 84
85 close() {
86 this.props.onEsc();
87 },
88
77 render() { 89 render() {
78 const { 90 const {
79 prefixCls, placeholder, disabledHours, disabledMinutes, 91 prefixCls, className, placeholder, disabledHours, disabledMinutes,
80 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showSecond, 92 disabledSeconds, hideDisabledOptions, allowEmpty, showHour, showMinute, showSecond,
81 format, defaultOpenValue, clearText, onEsc, 93 format, defaultOpenValue, clearText, onEsc, addon,
82 } = this.props; 94 } = this.props;
83 const { 95 const {
84 value, currentSelectPanel, 96 value, currentSelectPanel,
@@ -92,7 +104,7 @@ const Panel = React.createClass({
92 const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions); 104 const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions);
93 105
94 return ( 106 return (
95 <div className={`${prefixCls}-inner`}> 107 <div className={classNames({ [`${prefixCls}-inner`]: true, [className]: !!className })}>
96 <Header 108 <Header
97 clearText={clearText} 109 clearText={clearText}
98 prefixCls={prefixCls} 110 prefixCls={prefixCls}
@@ -119,6 +131,7 @@ const Panel = React.createClass({
119 format={format} 131 format={format}
120 onChange={this.onChange} 132 onChange={this.onChange}
121 showHour={showHour} 133 showHour={showHour}
134 showMinute={showMinute}
122 showSecond={showSecond} 135 showSecond={showSecond}
123 hourOptions={hourOptions} 136 hourOptions={hourOptions}
124 minuteOptions={minuteOptions} 137 minuteOptions={minuteOptions}
@@ -128,6 +141,7 @@ const Panel = React.createClass({
128 disabledSeconds={disabledSeconds} 141 disabledSeconds={disabledSeconds}
129 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange} 142 onCurrentSelectPanelChange={this.onCurrentSelectPanelChange}
130 /> 143 />
144 {addon(this)}
131 </div> 145 </div>
132 ); 146 );
133 }, 147 },
diff --git a/src/Select.jsx b/src/Select.jsx
index e25bb29..238a776 100644
--- a/src/Select.jsx
+++ b/src/Select.jsx
@@ -75,6 +75,9 @@ const Select = React.createClass({
75 // move to selected item 75 // move to selected item
76 const select = ReactDom.findDOMNode(this); 76 const select = ReactDom.findDOMNode(this);
77 const list = ReactDom.findDOMNode(this.refs.list); 77 const list = ReactDom.findDOMNode(this.refs.list);
78 if (!list) {
79 return;
80 }
78 let index = this.props.selectedIndex; 81 let index = this.props.selectedIndex;
79 if (index < 0) { 82 if (index < 0) {
80 index = 0; 83 index = 0;
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index da0c57b..7d2395d 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -29,9 +29,10 @@ const Picker = React.createClass({
29 placeholder: PropTypes.string, 29 placeholder: PropTypes.string,
30 format: PropTypes.string, 30 format: PropTypes.string,
31 showHour: PropTypes.bool, 31 showHour: PropTypes.bool,
32 showMinute: PropTypes.bool,
33 showSecond: PropTypes.bool,
32 style: PropTypes.object, 34 style: PropTypes.object,
33 className: PropTypes.string, 35 className: PropTypes.string,
34 showSecond: PropTypes.bool,
35 disabledHours: PropTypes.func, 36 disabledHours: PropTypes.func,
36 disabledMinutes: PropTypes.func, 37 disabledMinutes: PropTypes.func,
37 disabledSeconds: PropTypes.func, 38 disabledSeconds: PropTypes.func,
@@ -39,6 +40,8 @@ const Picker = React.createClass({
39 onChange: PropTypes.func, 40 onChange: PropTypes.func,
40 onOpen: PropTypes.func, 41 onOpen: PropTypes.func,
41 onClose: PropTypes.func, 42 onClose: PropTypes.func,
43 addon: PropTypes.func,
44 name: PropTypes.string,
42 autoComplete: PropTypes.string, 45 autoComplete: PropTypes.string,
43 }, 46 },
44 47
@@ -53,6 +56,7 @@ const Picker = React.createClass({
53 defaultOpenValue: moment(), 56 defaultOpenValue: moment(),
54 allowEmpty: true, 57 allowEmpty: true,
55 showHour: true, 58 showHour: true,
59 showMinute: true,
56 showSecond: true, 60 showSecond: true,
57 disabledHours: noop, 61 disabledHours: noop,
58 disabledMinutes: noop, 62 disabledMinutes: noop,
@@ -62,11 +66,12 @@ const Picker = React.createClass({
62 onChange: noop, 66 onChange: noop,
63 onOpen: noop, 67 onOpen: noop,
64 onClose: noop, 68 onClose: noop,
65 autoComplete: 'yes', 69 addon: noop,
66 }; 70 };
67 }, 71 },
68 72
69 getInitialState() { 73 getInitialState() {
74 this.saveInputRef = refFn.bind(this, 'picker');
70 this.savePanelRef = refFn.bind(this, 'panelInstance'); 75 this.savePanelRef = refFn.bind(this, 'panelInstance');
71 const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props; 76 const { defaultOpen, defaultValue, open = defaultOpen, value = defaultValue } = this.props;
72 return { 77 return {
@@ -102,7 +107,7 @@ const Picker = React.createClass({
102 107
103 onEsc() { 108 onEsc() {
104 this.setOpen(false); 109 this.setOpen(false);
105 this.refs.picker.focus(); 110 this.picker.focus();
106 }, 111 },
107 112
108 onKeyDown(e) { 113 onKeyDown(e) {
@@ -121,24 +126,23 @@ const Picker = React.createClass({
121 }, 126 },
122 127
123 getFormat() { 128 getFormat() {
124 const format = this.props.format; 129 const { format, showHour, showMinute, showSecond } = this.props;
125 if (format) { 130 if (format) {
126 return format; 131 return format;
127 } 132 }
128 if (!this.props.showSecond) { 133 return [
129 return 'HH:mm'; 134 showHour ? 'HH' : '',
130 } 135 showMinute ? 'mm' : '',
131 if (!this.props.showHour) { 136 showSecond ? 'ss' : '',
132 return 'mm:ss'; 137 ].filter(item => !!item).join(':');
133 }
134 return 'HH:mm:ss';
135 }, 138 },
136 139
137 getPanelElement() { 140 getPanelElement() {
138 const { 141 const {
139 prefixCls, placeholder, disabledHours, 142 prefixCls, placeholder, disabledHours,
140 disabledMinutes, disabledSeconds, hideDisabledOptions, 143 disabledMinutes, disabledSeconds, hideDisabledOptions,
141 allowEmpty, showHour, showSecond, defaultOpenValue, clearText, 144 allowEmpty, showHour, showMinute, showSecond, defaultOpenValue, clearText,
145 addon,
142 } = this.props; 146 } = this.props;
143 return ( 147 return (
144 <Panel 148 <Panel
@@ -150,8 +154,9 @@ const Picker = React.createClass({
150 onClear={this.onPanelClear} 154 onClear={this.onPanelClear}
151 defaultOpenValue={defaultOpenValue} 155 defaultOpenValue={defaultOpenValue}
152 showHour={showHour} 156 showHour={showHour}
153 onEsc={this.onEsc} 157 showMinute={showMinute}
154 showSecond={showSecond} 158 showSecond={showSecond}
159 onEsc={this.onEsc}
155 allowEmpty={allowEmpty} 160 allowEmpty={allowEmpty}
156 format={this.getFormat()} 161 format={this.getFormat()}
157 placeholder={placeholder} 162 placeholder={placeholder}
@@ -159,6 +164,7 @@ const Picker = React.createClass({
159 disabledMinutes={disabledMinutes} 164 disabledMinutes={disabledMinutes}
160 disabledSeconds={disabledSeconds} 165 disabledSeconds={disabledSeconds}
161 hideDisabledOptions={hideDisabledOptions} 166 hideDisabledOptions={hideDisabledOptions}
167 addon={addon}
162 /> 168 />
163 ); 169 );
164 }, 170 },
@@ -184,11 +190,12 @@ const Picker = React.createClass({
184 const { 190 const {
185 prefixCls, placeholder, placement, align, 191 prefixCls, placeholder, placement, align,
186 disabled, transitionName, style, className, showHour, 192 disabled, transitionName, style, className, showHour,
193 showMinute, showSecond, getPopupContainer, name,
187 showSecond, getPopupContainer, autoComplete, 194 showSecond, getPopupContainer, autoComplete,
188 } = this.props; 195 } = this.props;
189 const { open, value } = this.state; 196 const { open, value } = this.state;
190 let popupClassName; 197 let popupClassName;
191 if (!showHour || !showSecond) { 198 if (!showHour || !showMinute || !showSecond) {
192 popupClassName = `${prefixCls}-panel-narrow`; 199 popupClassName = `${prefixCls}-panel-narrow`;
193 } 200 }
194 return ( 201 return (
@@ -209,7 +216,10 @@ const Picker = React.createClass({
209 <span className={`${prefixCls} ${className}`} style={style}> 216 <span className={`${prefixCls} ${className}`} style={style}>
210 <input 217 <input
211 className={`${prefixCls}-input`} 218 className={`${prefixCls}-input`}
212 ref="picker" type="text" placeholder={placeholder} 219 ref={this.saveInputRef}
220 type="text"
221 placeholder={placeholder}
222 name={name}
213 readOnly 223 readOnly
214 onKeyDown={this.onKeyDown} 224 onKeyDown={this.onKeyDown}
215 disabled={disabled} value={value && value.format(this.getFormat()) || ''} 225 disabled={disabled} value={value && value.format(this.getFormat()) || ''}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-13 22:19:51 +0000