diff options
author | MG12 <wuzhao.mail@gmail.com> | 2015-11-17 22:16:15 +0800 |
---|---|---|
committer | MG12 <wuzhao.mail@gmail.com> | 2015-11-17 22:16:15 +0800 |
commit | 4acbf95c7d2693d73b0c8c021ad892b6529d4c06 (patch) | |
tree | 1e1780ba90895d8f5901472a7c67a77186741a4f | |
parent | 78637ac02ce6a469d2021736d3cb12e98c5edbe7 (diff) | |
download | time-picker-0.3.1.tar.gz time-picker-0.3.1.tar.zst time-picker-0.3.1.zip |
-rw-r--r-- | HISTORY.md | 5 | ||||
-rw-r--r-- | README.md | 23 | ||||
-rw-r--r-- | examples/pick-time.js | 18 | ||||
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | src/TimePicker.jsx | 44 | ||||
-rw-r--r-- | src/module/Panel.jsx (renamed from src/TimePanel.jsx) | 22 |
6 files changed, 59 insertions, 55 deletions
@@ -3,6 +3,11 @@ History | |||
3 | 3 | ||
4 | --- | 4 | --- |
5 | 5 | ||
6 | 0.3.0 / 2015-11-17 | ||
7 | ------------------ | ||
8 | |||
9 | `update` remove TimePanel and merge it to TimePicker. | ||
10 | |||
6 | 0.2.0 / 2015-11-16 | 11 | 0.2.0 / 2015-11-16 |
7 | ------------------ | 12 | ------------------ |
8 | 13 | ||
@@ -23,32 +23,23 @@ ReactDOM.render(<TimePicker />, container); | |||
23 | API | 23 | API |
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 | ||
53 | License | 44 | License |
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'; | |||
8 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | 8 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; |
9 | 9 | ||
10 | import TimePicker from 'rc-time-picker/src/TimePicker'; | 10 | import TimePicker from 'rc-time-picker/src/TimePicker'; |
11 | import TimePanel from 'rc-time-picker/src/TimePanel'; | ||
12 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; | 11 | import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; |
13 | 12 | ||
14 | const formatter = new DateTimeFormat('HH:mm:ss'); | 13 | const formatter = new DateTimeFormat('HH:mm:ss'); |
@@ -16,22 +15,7 @@ const formatter = new DateTimeFormat('HH:mm:ss'); | |||
16 | const now = new GregorianCalendar(zhCn); | 15 | const now = new GregorianCalendar(zhCn); |
17 | now.setTime(Date.now()); | 16 | now.setTime(Date.now()); |
18 | 17 | ||
19 | const timePanel = ( | ||
20 | <TimePanel | ||
21 | defaultValue={now} | ||
22 | locale={TimePickerLocale} | ||
23 | formatter={formatter} | ||
24 | minuteOptions={[0, 30]} | ||
25 | /> | ||
26 | ); | ||
27 | |||
28 | ReactDom.render( | 18 | ReactDom.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'; | |||
2 | import ReactDOM from 'react-dom'; | 2 | import ReactDOM from 'react-dom'; |
3 | import Trigger from 'rc-trigger'; | 3 | import Trigger from 'rc-trigger'; |
4 | import {createChainedFunction} from 'rc-util'; | 4 | import {createChainedFunction} from 'rc-util'; |
5 | import Panel from 'rc-time-picker/src/module/Panel'; | ||
5 | import placements from './util/placements'; | 6 | import placements from './util/placements'; |
6 | import CommonMixin from './mixin/CommonMixin'; | 7 | import CommonMixin from './mixin/CommonMixin'; |
7 | 8 | ||
@@ -15,7 +16,7 @@ function refFn(field, component) { | |||
15 | const Picker = React.createClass({ | 16 | const 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 @@ | |||
1 | import React, {PropTypes} from 'react'; | 1 | import React, {PropTypes} from 'react'; |
2 | import classnames from 'classnames'; | 2 | import classnames from 'classnames'; |
3 | import CommonMixin from './mixin/CommonMixin'; | 3 | import GregorianCalendar from 'gregorian-calendar'; |
4 | import Header from './module/Header'; | 4 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; |
5 | import Combobox from './module/Combobox'; | 5 | |
6 | import CommonMixin from '../mixin/CommonMixin'; | ||
7 | import Header from './Header'; | ||
8 | import Combobox from './Combobox'; | ||
6 | 9 | ||
7 | function noop() { | 10 | function noop() { |
8 | } | 11 | } |
@@ -13,7 +16,7 @@ function generateOptions(length) { | |||
13 | }); | 16 | }); |
14 | } | 17 | } |
15 | 18 | ||
16 | const TimePanel = React.createClass({ | 19 | const 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 | ||
121 | export default TimePanel; | 129 | export default Panel; |