diff options
-rw-r--r-- | .gitignore | 27 | ||||
-rw-r--r-- | HISTORY.md | 5 | ||||
-rw-r--r-- | README.md | 58 | ||||
-rw-r--r-- | assets/index.less | 3 | ||||
-rw-r--r-- | examples/pick-time.html | 1 | ||||
-rw-r--r-- | examples/pick-time.js (renamed from examples/pick-time.jsx) | 17 | ||||
-rw-r--r-- | package.json | 16 | ||||
-rw-r--r-- | src/TimePanel.jsx | 2 | ||||
-rw-r--r-- | src/TimePicker.jsx (renamed from src/Picker.jsx) | 18 | ||||
-rw-r--r-- | src/index.js | 2 | ||||
-rw-r--r-- | src/mixin/CommonMixin.js | 2 | ||||
-rw-r--r-- | src/module/Header.jsx | 20 |
12 files changed, 117 insertions, 54 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..037d70d --- /dev/null +++ b/.gitignore | |||
@@ -0,0 +1,27 @@ | |||
1 | *.iml | ||
2 | *.log | ||
3 | .idea/ | ||
4 | .ipr | ||
5 | .iws | ||
6 | *~ | ||
7 | ~* | ||
8 | *.diff | ||
9 | *.patch | ||
10 | *.bak | ||
11 | .DS_Store | ||
12 | Thumbs.db | ||
13 | .project | ||
14 | .*proj | ||
15 | .svn/ | ||
16 | *.swp | ||
17 | *.swo | ||
18 | *.pyc | ||
19 | *.pyo | ||
20 | .build | ||
21 | node_modules | ||
22 | .cache | ||
23 | dist | ||
24 | *.css | ||
25 | build | ||
26 | lib | ||
27 | |||
@@ -3,6 +3,11 @@ History | |||
3 | 3 | ||
4 | --- | 4 | --- |
5 | 5 | ||
6 | 0.2.0 / 2015-11-16 | ||
7 | ------------------ | ||
8 | |||
9 | `update` rename the component, update document. | ||
10 | |||
6 | 0.1.0 / 2015-11-12 | 11 | 0.1.0 / 2015-11-12 |
7 | ------------------ | 12 | ------------------ |
8 | 13 | ||
@@ -1,2 +1,56 @@ | |||
1 | # timepicker | 1 | TimePicker |
2 | Timepicker | 2 | ========== |
3 | |||
4 | React TimePicker | ||
5 | |||
6 | install | ||
7 | ------- | ||
8 | |||
9 | ``` | ||
10 | npm install rc-time-picker | ||
11 | ``` | ||
12 | |||
13 | Usage | ||
14 | ----- | ||
15 | |||
16 | ``` | ||
17 | import TimePicker from 'rc-time-picker'; | ||
18 | import React from 'react'; | ||
19 | import ReactDOM from 'react-dom'; | ||
20 | ReactDOM.render(<TimePicker />, container); | ||
21 | ``` | ||
22 | |||
23 | API | ||
24 | --- | ||
25 | |||
26 | ### TimePanel | ||
27 | |||
28 | | Name | Type | Default | Description | | ||
29 | |---------------|----------------------------|-----------------------------------------------|-----------------------------------------------| | ||
30 | | prefixCls | String | | prefixCls of this component | | ||
31 | | locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | | ||
32 | | defaultValue | GregorianCalendar | null | defaultValue like input's defaultValue | | ||
33 | | placeholder | String | '' | time input's placeholder | | ||
34 | | formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | | | ||
35 | | hourOptions | Array<String> | hour options | | | ||
36 | | minuteOptions | Array<String> | minute options | | | ||
37 | | secondOptions | Array<String> | second options | | | ||
38 | | onChange | Function | null | called when input or select a different value | | ||
39 | |||
40 | ### TimePicker | ||
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 | |||
53 | License | ||
54 | ------- | ||
55 | |||
56 | rc-time-picker is released under the MIT license. | ||
diff --git a/assets/index.less b/assets/index.less index 2ab247b..bc904de 100644 --- a/assets/index.less +++ b/assets/index.less | |||
@@ -1,6 +1,7 @@ | |||
1 | @prefixClass: rc-timepicker; | 1 | @prefixClass: rc-time-picker; |
2 | 2 | ||
3 | .@{prefixClass} { | 3 | .@{prefixClass} { |
4 | display: inline; | ||
4 | box-sizing: border-box; | 5 | box-sizing: border-box; |
5 | * { | 6 | * { |
6 | box-sizing: border-box; | 7 | box-sizing: border-box; |
diff --git a/examples/pick-time.html b/examples/pick-time.html new file mode 100644 index 0000000..48cdce8 --- /dev/null +++ b/examples/pick-time.html | |||
@@ -0,0 +1 @@ | |||
placeholder | |||
diff --git a/examples/pick-time.jsx b/examples/pick-time.js index 33c5d07..8c6b826 100644 --- a/examples/pick-time.jsx +++ b/examples/pick-time.js | |||
@@ -1,14 +1,15 @@ | |||
1 | import '../component/timepicker/assets/index.less'; | 1 | import 'rc-time-picker/assets/index.less'; |
2 | 2 | ||
3 | import React from 'react'; | 3 | import React from 'react'; |
4 | import ReactDom from 'react-dom'; | 4 | import ReactDom from 'react-dom'; |
5 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
6 | import GregorianCalendar from 'gregorian-calendar'; | ||
7 | 5 | ||
8 | import TimePicker from '../component/timepicker/src/Picker'; | 6 | import GregorianCalendar from 'gregorian-calendar'; |
9 | import TimePanel from '../component/timepicker/src/TimePanel'; | ||
10 | import TimepickerLocale from '../component/timepicker/src/locale/zh_CN'; | ||
11 | import DateTimeFormat from 'gregorian-calendar-format'; | 7 | import DateTimeFormat from 'gregorian-calendar-format'; |
8 | import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; | ||
9 | |||
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'; | ||
12 | 13 | ||
13 | const formatter = new DateTimeFormat('HH:mm:ss'); | 14 | const formatter = new DateTimeFormat('HH:mm:ss'); |
14 | 15 | ||
@@ -18,7 +19,7 @@ now.setTime(Date.now()); | |||
18 | const timePanel = ( | 19 | const timePanel = ( |
19 | <TimePanel | 20 | <TimePanel |
20 | defaultValue={now} | 21 | defaultValue={now} |
21 | locale={TimepickerLocale} | 22 | locale={TimePickerLocale} |
22 | formatter={formatter} | 23 | formatter={formatter} |
23 | minuteOptions={[0, 30]} | 24 | minuteOptions={[0, 30]} |
24 | /> | 25 | /> |
@@ -32,5 +33,5 @@ ReactDom.render( | |||
32 | } | 33 | } |
33 | } | 34 | } |
34 | </TimePicker>, | 35 | </TimePicker>, |
35 | document.getElementById('react-content') | 36 | document.getElementById('__react-content') |
36 | ); | 37 | ); |
diff --git a/package.json b/package.json index 3f7b765..483c3d9 100644 --- a/package.json +++ b/package.json | |||
@@ -1,12 +1,13 @@ | |||
1 | { | 1 | { |
2 | "name": "rc-timepicker", | 2 | "name": "rc-time-picker", |
3 | "version": "0.1.0", | 3 | "version": "0.2.0", |
4 | "description": "React Timepicker", | 4 | "description": "React TimePicker", |
5 | "keywords": [ | 5 | "keywords": [ |
6 | "react", | 6 | "react", |
7 | "react-timepicker", | 7 | "react-time-picker", |
8 | "react-component", | 8 | "react-component", |
9 | "timepicker", | 9 | "timepicker", |
10 | "time-picker", | ||
10 | "ui component", | 11 | "ui component", |
11 | "ui", | 12 | "ui", |
12 | "component" | 13 | "component" |
@@ -16,14 +17,14 @@ | |||
16 | "assets/*.css" | 17 | "assets/*.css" |
17 | ], | 18 | ], |
18 | "main": "lib/index", | 19 | "main": "lib/index", |
19 | "homepage": "http://github.com/react-component/timepicker", | 20 | "homepage": "http://github.com/react-component/time-picker", |
20 | "author": "wuzhao.mail@gmail.com", | 21 | "author": "wuzhao.mail@gmail.com", |
21 | "repository": { | 22 | "repository": { |
22 | "type": "git", | 23 | "type": "git", |
23 | "url": "git@github.com:react-component/timepicker.git" | 24 | "url": "git@github.com:react-component/time-picker.git" |
24 | }, | 25 | }, |
25 | "bugs": { | 26 | "bugs": { |
26 | "url": "http://github.com/react-component/timepicker/issues" | 27 | "url": "http://github.com/react-component/time-picker/issues" |
27 | }, | 28 | }, |
28 | "licenses": "MIT", | 29 | "licenses": "MIT", |
29 | "config": { | 30 | "config": { |
@@ -57,6 +58,7 @@ | |||
57 | "lint" | 58 | "lint" |
58 | ], | 59 | ], |
59 | "dependencies": { | 60 | "dependencies": { |
61 | "classnames": "~2.2.0", | ||
60 | "gregorian-calendar": "4.x", | 62 | "gregorian-calendar": "4.x", |
61 | "gregorian-calendar-format": "4.x", | 63 | "gregorian-calendar-format": "4.x", |
62 | "object-assign": "4.x", | 64 | "object-assign": "4.x", |
diff --git a/src/TimePanel.jsx b/src/TimePanel.jsx index dad8036..110ca1e 100644 --- a/src/TimePanel.jsx +++ b/src/TimePanel.jsx | |||
@@ -90,7 +90,7 @@ const TimePanel = React.createClass({ | |||
90 | <div className={`${prefixCls}-panel ${cls}`}> | 90 | <div className={`${prefixCls}-panel ${cls}`}> |
91 | <Header | 91 | <Header |
92 | prefixCls={prefixCls} | 92 | prefixCls={prefixCls} |
93 | gregorianTimepickerLocale={defaultValue.locale} | 93 | gregorianTimePickerLocale={defaultValue.locale} |
94 | locale={locale} | 94 | locale={locale} |
95 | value={value} | 95 | value={value} |
96 | formatter={this.getFormatter()} | 96 | formatter={this.getFormatter()} |
diff --git a/src/Picker.jsx b/src/TimePicker.jsx index f15434a..6bb97a1 100644 --- a/src/Picker.jsx +++ b/src/TimePicker.jsx | |||
@@ -47,10 +47,6 @@ const Picker = React.createClass({ | |||
47 | return { open, value }; | 47 | return { open, value }; |
48 | }, | 48 | }, |
49 | 49 | ||
50 | componentWillMount() { | ||
51 | document.addEventListener('click', this.handleDocumentClick, false); | ||
52 | }, | ||
53 | |||
54 | componentWillReceiveProps(nextProps) { | 50 | componentWillReceiveProps(nextProps) { |
55 | const { value, open } = nextProps; | 51 | const { value, open } = nextProps; |
56 | if (value !== undefined) { | 52 | if (value !== undefined) { |
@@ -61,10 +57,6 @@ const Picker = React.createClass({ | |||
61 | } | 57 | } |
62 | }, | 58 | }, |
63 | 59 | ||
64 | componentWillUnmount() { | ||
65 | document.removeEventListener('click', this.handleDocumentClick, false); | ||
66 | }, | ||
67 | |||
68 | onPanelChange(value) { | 60 | onPanelChange(value) { |
69 | const props = this.props; | 61 | const props = this.props; |
70 | this.setState({ | 62 | this.setState({ |
@@ -114,16 +106,6 @@ const Picker = React.createClass({ | |||
114 | } | 106 | } |
115 | }, | 107 | }, |
116 | 108 | ||
117 | handleDocumentClick(event) { | ||
118 | // hide popup when click outside | ||
119 | if (this.state.open && ReactDOM.findDOMNode(this.panelInstance).contains(event.target)) { | ||
120 | return; | ||
121 | } | ||
122 | this.setState({ | ||
123 | open: false, | ||
124 | }); | ||
125 | }, | ||
126 | |||
127 | focus() { | 109 | focus() { |
128 | if (!this.state.open) { | 110 | if (!this.state.open) { |
129 | ReactDOM.findDOMNode(this).focus(); | 111 | ReactDOM.findDOMNode(this).focus(); |
diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..f72be4f --- /dev/null +++ b/src/index.js | |||
@@ -0,0 +1,2 @@ | |||
1 | import TimePicker from './TimePicker'; | ||
2 | export default TimePicker; | ||
diff --git a/src/mixin/CommonMixin.js b/src/mixin/CommonMixin.js index 4203a9e..0e8ed32 100644 --- a/src/mixin/CommonMixin.js +++ b/src/mixin/CommonMixin.js | |||
@@ -10,7 +10,7 @@ export default { | |||
10 | 10 | ||
11 | getDefaultProps() { | 11 | getDefaultProps() { |
12 | return { | 12 | return { |
13 | prefixCls: 'rc-timepicker', | 13 | prefixCls: 'rc-time-picker', |
14 | locale: enUs, | 14 | locale: enUs, |
15 | }; | 15 | }; |
16 | }, | 16 | }, |
diff --git a/src/module/Header.jsx b/src/module/Header.jsx index f7e443f..92a0089 100644 --- a/src/module/Header.jsx +++ b/src/module/Header.jsx | |||
@@ -4,7 +4,7 @@ const Header = React.createClass({ | |||
4 | propTypes: { | 4 | propTypes: { |
5 | formatter: PropTypes.object, | 5 | formatter: PropTypes.object, |
6 | prefixCls: PropTypes.string, | 6 | prefixCls: PropTypes.string, |
7 | gregorianTimepickerLocale: PropTypes.object, | 7 | gregorianTimePickerLocale: PropTypes.object, |
8 | locale: PropTypes.object, | 8 | locale: PropTypes.object, |
9 | disabledDate: PropTypes.func, | 9 | disabledDate: PropTypes.func, |
10 | placeholder: PropTypes.string, | 10 | placeholder: PropTypes.string, |
@@ -26,7 +26,7 @@ const Header = React.createClass({ | |||
26 | }, | 26 | }, |
27 | 27 | ||
28 | componentWillReceiveProps(nextProps) { | 28 | componentWillReceiveProps(nextProps) { |
29 | const value = this.formatValue(nextProps.value); | 29 | const value = nextProps.value; |
30 | this.setState({ | 30 | this.setState({ |
31 | str: value && nextProps.formatter.format(value) || '', | 31 | str: value && nextProps.formatter.format(value) || '', |
32 | invalid: false, | 32 | invalid: false, |
@@ -39,16 +39,15 @@ const Header = React.createClass({ | |||
39 | str, | 39 | str, |
40 | }); | 40 | }); |
41 | let value = null; | 41 | let value = null; |
42 | const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; | 42 | const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; |
43 | 43 | ||
44 | if (str) { | 44 | if (str) { |
45 | const originalValue = this.props.value; | 45 | const originalValue = this.props.value; |
46 | try { | 46 | try { |
47 | value = formatter.parse(str, { | 47 | value = formatter.parse(str, { |
48 | locale: gregorianTimepickerLocale, | 48 | locale: gregorianTimePickerLocale, |
49 | obeyCount: true, | 49 | obeyCount: true, |
50 | }); | 50 | }); |
51 | value = this.formatValue(value); | ||
52 | } catch (ex) { | 51 | } catch (ex) { |
53 | this.setState({ | 52 | this.setState({ |
54 | invalid: true, | 53 | invalid: true, |
@@ -114,17 +113,6 @@ const Header = React.createClass({ | |||
114 | return <input className={`${prefixCls}-input ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />; | 113 | return <input className={`${prefixCls}-input ${invalidClass}`} value={str} placeholder={placeholder} onChange={this.onInputChange} />; |
115 | }, | 114 | }, |
116 | 115 | ||
117 | formatValue(value) { | ||
118 | const newValue = this.props.value.clone(); | ||
119 | if (!value) { | ||
120 | return newValue; | ||
121 | } | ||
122 | newValue.fields[4] = value.fields[4]; | ||
123 | newValue.fields[5] = value.fields[5]; | ||
124 | newValue.fields[6] = value.fields[6]; | ||
125 | return newValue; | ||
126 | }, | ||
127 | |||
128 | render() { | 116 | render() { |
129 | const { prefixCls } = this.props; | 117 | const { prefixCls } = this.props; |
130 | return ( | 118 | return ( |