From 4acbf95c7d2693d73b0c8c021ad892b6529d4c06 Mon Sep 17 00:00:00 2001 From: MG12 Date: Tue, 17 Nov 2015 22:16:15 +0800 Subject: remove TimePanel and merge it to TimePicker --- HISTORY.md | 5 ++ README.md | 23 +++------ examples/pick-time.js | 18 +------ package.json | 2 +- src/TimePanel.jsx | 121 ---------------------------------------------- src/TimePicker.jsx | 44 +++++++++++------ src/module/Panel.jsx | 129 ++++++++++++++++++++++++++++++++++++++++++++++++++ 7 files changed, 173 insertions(+), 169 deletions(-) delete mode 100644 src/TimePanel.jsx create mode 100644 src/module/Panel.jsx diff --git a/HISTORY.md b/HISTORY.md index 676fc17..28516bc 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,6 +3,11 @@ History --- +0.3.0 / 2015-11-17 +------------------ + +`update` remove TimePanel and merge it to TimePicker. + 0.2.0 / 2015-11-16 ------------------ diff --git a/README.md b/README.md index 998fe4e..c6e8e1c 100644 --- a/README.md +++ b/README.md @@ -23,32 +23,23 @@ ReactDOM.render(, container); API --- -### TimePanel +### TimePicker | Name | Type | Default | Description | |---------------|----------------------------|-----------------------------------------------|-----------------------------------------------| | prefixCls | String | | prefixCls of this component | | locale | Object | import from 'rc-time-picker/lib/locale/en_US' | | -| defaultValue | GregorianCalendar | null | defaultValue like input's defaultValue | +| disabled | Boolean | false | whether picker is disabled | +| open | Boolean | false | current open state of picker. controlled prop | +| value | GregorianCalendar | null | current value like input's value | | placeholder | String | '' | time input's placeholder | | formatter | GregorianCalendarFormatter | HH:mm:ss or HH:mm or mm:ss | | | hourOptions | Array | hour options | | | minuteOptions | Array | minute options | | | secondOptions | Array | second options | | -| onChange | Function | null | called when input or select a different value | - -### TimePicker - -| Name | Type | Default | Description | -|-----------|-------------------------|---------|-----------------------------------------------| -| prefixCls | String | | prefixCls of this component | -| panel | TimePanel React Element | | | -| disabled | Boolean | false | whether picker is disabled | -| open | Boolean | false | current open state of picker. controlled prop | -| value | GregorianCalendar | null | current value like input's value | -| onChange | Function | null | called when select a different value | -| onOpen | Function | null | called when open picker | -| onClose | Function | null | called when close picker | +| onChange | Function | null | called when select a different value | +| onOpen | Function | null | called when open picker | +| onClose | Function | null | called when close picker | License ------- 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'; import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; import TimePicker from 'rc-time-picker/src/TimePicker'; -import TimePanel from 'rc-time-picker/src/TimePanel'; import TimePickerLocale from 'rc-time-picker/src/locale/zh_CN'; const formatter = new DateTimeFormat('HH:mm:ss'); @@ -16,22 +15,7 @@ const formatter = new DateTimeFormat('HH:mm:ss'); const now = new GregorianCalendar(zhCn); now.setTime(Date.now()); -const timePanel = ( - -); - ReactDom.render( - - { - ({value}) => { - return ; - } - } - , + , document.getElementById('__react-content') ); diff --git a/package.json b/package.json index 483c3d9..520005e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-time-picker", - "version": "0.2.0", + "version": "0.3.0", "description": "React TimePicker", "keywords": [ "react", diff --git a/src/TimePanel.jsx b/src/TimePanel.jsx deleted file mode 100644 index 110ca1e..0000000 --- a/src/TimePanel.jsx +++ /dev/null @@ -1,121 +0,0 @@ -import React, {PropTypes} from 'react'; -import classnames from 'classnames'; -import CommonMixin from './mixin/CommonMixin'; -import Header from './module/Header'; -import Combobox from './module/Combobox'; - -function noop() { -} - -function generateOptions(length) { - return Array.apply(null, {length: length}).map((item, index) => { - return index; - }); -} - -const TimePanel = React.createClass({ - propTypes: { - prefixCls: PropTypes.string, - defaultValue: PropTypes.object, - locale: PropTypes.object, - placeholder: PropTypes.string, - formatter: PropTypes.object, - hourOptions: PropTypes.array, - minuteOptions: PropTypes.array, - secondOptions: PropTypes.array, - onChange: PropTypes.func, - onClear: PropTypes.func, - }, - - mixins: [CommonMixin], - - getDefaultProps() { - return { - hourOptions: generateOptions(24), - minuteOptions: generateOptions(60), - secondOptions: generateOptions(60), - onChange: noop, - onClear: noop, - }; - }, - - getInitialState() { - return { - value: this.props.defaultValue, - }; - }, - - componentWillMount() { - const formatter = this.props.formatter; - const pattern = formatter.originalPattern; - if (pattern === 'HH:mm') { - this.showSecond = false; - } else if (pattern === 'mm:ss') { - this.showHour = false; - } - }, - - onChange(newValue) { - this.setState({ value: newValue }); - this.props.onChange(newValue); - }, - - onClear() { - this.props.onClear(); - }, - - getPlaceholder(placeholder) { - if (placeholder) { - return placeholder; - } - - const { locale } = this.props; - if (!this.showHour) { - return locale.placeholdermmss; - } else if (!this.showSecond) { - return locale.placeholderHHmm; - } - return locale.placeholderHHmmss; - }, - - showHour: true, - showSecond: true, - - render() { - const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; - const value = this.state.value || defaultValue; - const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); - - return ( -
-
- -
- ); - }, -}); - -export default TimePanel; 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'; import ReactDOM from 'react-dom'; import Trigger from 'rc-trigger'; import {createChainedFunction} from 'rc-util'; +import Panel from 'rc-time-picker/src/module/Panel'; import placements from './util/placements'; import CommonMixin from './mixin/CommonMixin'; @@ -15,7 +16,7 @@ function refFn(field, component) { const Picker = React.createClass({ propTypes: { prefixCls: PropTypes.string, - panel: PropTypes.element, + locale: PropTypes.object, children: PropTypes.func, disabled: PropTypes.bool, value: PropTypes.object, @@ -23,6 +24,11 @@ const Picker = React.createClass({ align: PropTypes.object, placement: PropTypes.any, transitionName: PropTypes.string, + placeholder: PropTypes.string, + formatter: PropTypes.object, + hourOptions: PropTypes.array, + minuteOptions: PropTypes.array, + secondOptions: PropTypes.array, onChange: PropTypes.func, onOpen: PropTypes.func, onClose: PropTypes.func, @@ -66,19 +72,35 @@ const Picker = React.createClass({ }, onPanelClear() { - this.setOpen(false, this.focus); + this.setOpen(false); }, onVisibleChange(open) { this.setOpen(open, () => { if (open) { + ReactDOM.findDOMNode(this.refs.picker).blur(); ReactDOM.findDOMNode(this.panelInstance).focus(); } }); }, + getPanel() { + const { value, locale, formatter, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; + return ( + + ); + }, + getPanelElement() { - const panel = this.props.panel; + const panel = this.getPanel(); const extraProps = { ref: this.savePanelRef, defaultValue: this.state.value || panel.props.defaultValue, @@ -106,16 +128,10 @@ const Picker = React.createClass({ } }, - focus() { - if (!this.state.open) { - ReactDOM.findDOMNode(this).focus(); - } - }, - render() { - const state = this.state; - const props = this.props; - const { prefixCls, placement, align, disabled, transitionName, children } = props; + const { prefixCls, placement, align, disabled, transitionName, children, formatter } = this.props; + const { open, value } = this.state; + return ( - {children(state, props)} + ); diff --git a/src/module/Panel.jsx b/src/module/Panel.jsx new file mode 100644 index 0000000..4220da8 --- /dev/null +++ b/src/module/Panel.jsx @@ -0,0 +1,129 @@ +import React, {PropTypes} from 'react'; +import classnames from 'classnames'; +import GregorianCalendar from 'gregorian-calendar'; +import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; + +import CommonMixin from '../mixin/CommonMixin'; +import Header from './Header'; +import Combobox from './Combobox'; + +function noop() { +} + +function generateOptions(length) { + return Array.apply(null, {length: length}).map((item, index) => { + return index; + }); +} + +const Panel = React.createClass({ + propTypes: { + prefixCls: PropTypes.string, + defaultValue: PropTypes.object, + locale: PropTypes.object, + placeholder: PropTypes.string, + formatter: PropTypes.object, + hourOptions: PropTypes.array, + minuteOptions: PropTypes.array, + secondOptions: PropTypes.array, + onChange: PropTypes.func, + onClear: PropTypes.func, + }, + + mixins: [CommonMixin], + + getDefaultProps() { + return { + hourOptions: generateOptions(24), + minuteOptions: generateOptions(60), + secondOptions: generateOptions(60), + onChange: noop, + onClear: noop, + }; + }, + + getInitialState() { + let defaultValue = this.props.defaultValue; + if (!defaultValue) { + defaultValue = new GregorianCalendar(zhCn); + defaultValue.setTime(Date.now()); + } + return { + value: defaultValue, + }; + }, + + componentWillMount() { + const formatter = this.props.formatter; + const pattern = formatter.originalPattern; + if (pattern === 'HH:mm') { + this.showSecond = false; + } else if (pattern === 'mm:ss') { + this.showHour = false; + } + }, + + onChange(newValue) { + this.setState({ value: newValue }); + this.props.onChange(newValue); + }, + + onClear() { + this.props.onClear(); + }, + + getPlaceholder(placeholder) { + if (placeholder) { + return placeholder; + } + + const { locale } = this.props; + if (!this.showHour) { + return locale.placeholdermmss; + } else if (!this.showSecond) { + return locale.placeholderHHmm; + } + return locale.placeholderHHmmss; + }, + + showHour: true, + showSecond: true, + + render() { + const { locale, prefixCls, defaultValue, placeholder, hourOptions, minuteOptions, secondOptions } = this.props; + const value = this.state.value || defaultValue; + const cls = classnames({ 'narrow': !this.showHour || !this.showSecond }); + + return ( +
+
+ +
+ ); + }, +}); + +export default Panel; -- cgit v1.2.3