From 78637ac02ce6a469d2021736d3cb12e98c5edbe7 Mon Sep 17 00:00:00 2001 From: MG12 Date: Mon, 16 Nov 2015 14:44:26 +0800 Subject: remove toggle feature because rc-trigger included; update example and document --- .gitignore | 27 ++++++++ HISTORY.md | 5 ++ README.md | 58 ++++++++++++++++- assets/index.less | 3 +- examples/pick-time.html | 1 + examples/pick-time.js | 37 +++++++++++ examples/pick-time.jsx | 36 ----------- package.json | 16 ++--- src/Picker.jsx | 158 ----------------------------------------------- src/TimePanel.jsx | 2 +- src/TimePicker.jsx | 140 +++++++++++++++++++++++++++++++++++++++++ src/index.js | 2 + src/mixin/CommonMixin.js | 2 +- src/module/Header.jsx | 20 ++---- 14 files changed, 285 insertions(+), 222 deletions(-) create mode 100644 .gitignore create mode 100644 examples/pick-time.html create mode 100644 examples/pick-time.js delete mode 100644 examples/pick-time.jsx delete mode 100644 src/Picker.jsx create mode 100644 src/TimePicker.jsx create mode 100644 src/index.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..037d70d --- /dev/null +++ b/.gitignore @@ -0,0 +1,27 @@ +*.iml +*.log +.idea/ +.ipr +.iws +*~ +~* +*.diff +*.patch +*.bak +.DS_Store +Thumbs.db +.project +.*proj +.svn/ +*.swp +*.swo +*.pyc +*.pyo +.build +node_modules +.cache +dist +*.css +build +lib + diff --git a/HISTORY.md b/HISTORY.md index e2ad063..676fc17 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -3,6 +3,11 @@ History --- +0.2.0 / 2015-11-16 +------------------ + +`update` rename the component, update document. + 0.1.0 / 2015-11-12 ------------------ diff --git a/README.md b/README.md index 40cb7c4..998fe4e 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,56 @@ -# timepicker -Timepicker +TimePicker +========== + +React TimePicker + +install +------- + +``` +npm install rc-time-picker +``` + +Usage +----- + +``` +import TimePicker from 'rc-time-picker'; +import React from 'react'; +import ReactDOM from 'react-dom'; +ReactDOM.render(, container); +``` + +API +--- + +### TimePanel + +| 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 | +| 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 | + +License +------- + +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 @@ -@prefixClass: rc-timepicker; +@prefixClass: rc-time-picker; .@{prefixClass} { + display: inline; box-sizing: border-box; * { 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.js b/examples/pick-time.js new file mode 100644 index 0000000..8c6b826 --- /dev/null +++ b/examples/pick-time.js @@ -0,0 +1,37 @@ +import 'rc-time-picker/assets/index.less'; + +import React from 'react'; +import ReactDom from 'react-dom'; + +import GregorianCalendar from 'gregorian-calendar'; +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'); + +const now = new GregorianCalendar(zhCn); +now.setTime(Date.now()); + +const timePanel = ( + +); + +ReactDom.render( + + { + ({value}) => { + return ; + } + } + , + document.getElementById('__react-content') +); diff --git a/examples/pick-time.jsx b/examples/pick-time.jsx deleted file mode 100644 index 33c5d07..0000000 --- a/examples/pick-time.jsx +++ /dev/null @@ -1,36 +0,0 @@ -import '../component/timepicker/assets/index.less'; - -import React from 'react'; -import ReactDom from 'react-dom'; -import zhCn from 'gregorian-calendar/lib/locale/zh_CN'; -import GregorianCalendar from 'gregorian-calendar'; - -import TimePicker from '../component/timepicker/src/Picker'; -import TimePanel from '../component/timepicker/src/TimePanel'; -import TimepickerLocale from '../component/timepicker/src/locale/zh_CN'; -import DateTimeFormat from 'gregorian-calendar-format'; - -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 3f7b765..483c3d9 100644 --- a/package.json +++ b/package.json @@ -1,12 +1,13 @@ { - "name": "rc-timepicker", - "version": "0.1.0", - "description": "React Timepicker", + "name": "rc-time-picker", + "version": "0.2.0", + "description": "React TimePicker", "keywords": [ "react", - "react-timepicker", + "react-time-picker", "react-component", "timepicker", + "time-picker", "ui component", "ui", "component" @@ -16,14 +17,14 @@ "assets/*.css" ], "main": "lib/index", - "homepage": "http://github.com/react-component/timepicker", + "homepage": "http://github.com/react-component/time-picker", "author": "wuzhao.mail@gmail.com", "repository": { "type": "git", - "url": "git@github.com:react-component/timepicker.git" + "url": "git@github.com:react-component/time-picker.git" }, "bugs": { - "url": "http://github.com/react-component/timepicker/issues" + "url": "http://github.com/react-component/time-picker/issues" }, "licenses": "MIT", "config": { @@ -57,6 +58,7 @@ "lint" ], "dependencies": { + "classnames": "~2.2.0", "gregorian-calendar": "4.x", "gregorian-calendar-format": "4.x", "object-assign": "4.x", diff --git a/src/Picker.jsx b/src/Picker.jsx deleted file mode 100644 index f15434a..0000000 --- a/src/Picker.jsx +++ /dev/null @@ -1,158 +0,0 @@ -import React, {PropTypes} from 'react'; -import ReactDOM from 'react-dom'; -import Trigger from 'rc-trigger'; -import {createChainedFunction} from 'rc-util'; -import placements from './util/placements'; -import CommonMixin from './mixin/CommonMixin'; - -function noop() { -} - -function refFn(field, component) { - this[field] = component; -} - -const Picker = React.createClass({ - propTypes: { - prefixCls: PropTypes.string, - panel: PropTypes.element, - children: PropTypes.func, - disabled: PropTypes.bool, - value: PropTypes.object, - open: PropTypes.bool, - align: PropTypes.object, - placement: PropTypes.any, - transitionName: PropTypes.string, - onChange: PropTypes.func, - onOpen: PropTypes.func, - onClose: PropTypes.func, - }, - - mixins: [CommonMixin], - - getDefaultProps() { - return { - open: false, - align: {}, - placement: 'bottomLeft', - onChange: noop, - onOpen: noop, - onClose: noop, - }; - }, - - getInitialState() { - this.savePanelRef = refFn.bind(this, 'panelInstance'); - const { open, value } = this.props; - return { open, value }; - }, - - componentWillMount() { - document.addEventListener('click', this.handleDocumentClick, false); - }, - - componentWillReceiveProps(nextProps) { - const { value, open } = nextProps; - if (value !== undefined) { - this.setState({value}); - } - if (open !== undefined) { - this.setState({open}); - } - }, - - componentWillUnmount() { - document.removeEventListener('click', this.handleDocumentClick, false); - }, - - onPanelChange(value) { - const props = this.props; - this.setState({ - value: value, - }); - props.onChange(value); - }, - - onPanelClear() { - this.setOpen(false, this.focus); - }, - - onVisibleChange(open) { - this.setOpen(open, () => { - if (open) { - ReactDOM.findDOMNode(this.panelInstance).focus(); - } - }); - }, - - getPanelElement() { - const panel = this.props.panel; - const extraProps = { - ref: this.savePanelRef, - defaultValue: this.state.value || panel.props.defaultValue, - onChange: createChainedFunction(panel.props.onChange, this.onPanelChange), - onClear: createChainedFunction(panel.props.onClear, this.onPanelClear), - }; - - return React.cloneElement(panel, extraProps); - }, - - setOpen(open, callback) { - const {onOpen, onClose} = this.props; - if (this.state.open !== open) { - this.setState({ - open: open, - }, callback); - const event = { - open: open, - }; - if (open) { - onOpen(event); - } else { - onClose(event); - } - } - }, - - handleDocumentClick(event) { - // hide popup when click outside - if (this.state.open && ReactDOM.findDOMNode(this.panelInstance).contains(event.target)) { - return; - } - this.setState({ - open: false, - }); - }, - - 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; - return ( - - - {children(state, props)} - - - ); - }, -}); - -export default Picker; 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({
{ + if (open) { + ReactDOM.findDOMNode(this.panelInstance).focus(); + } + }); + }, + + getPanelElement() { + const panel = this.props.panel; + const extraProps = { + ref: this.savePanelRef, + defaultValue: this.state.value || panel.props.defaultValue, + onChange: createChainedFunction(panel.props.onChange, this.onPanelChange), + onClear: createChainedFunction(panel.props.onClear, this.onPanelClear), + }; + + return React.cloneElement(panel, extraProps); + }, + + setOpen(open, callback) { + const {onOpen, onClose} = this.props; + if (this.state.open !== open) { + this.setState({ + open: open, + }, callback); + const event = { + open: open, + }; + if (open) { + onOpen(event); + } else { + onClose(event); + } + } + }, + + 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; + return ( + + + {children(state, props)} + + + ); + }, +}); + +export default Picker; 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 @@ +import TimePicker from './TimePicker'; +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 { getDefaultProps() { return { - prefixCls: 'rc-timepicker', + prefixCls: 'rc-time-picker', locale: enUs, }; }, 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({ propTypes: { formatter: PropTypes.object, prefixCls: PropTypes.string, - gregorianTimepickerLocale: PropTypes.object, + gregorianTimePickerLocale: PropTypes.object, locale: PropTypes.object, disabledDate: PropTypes.func, placeholder: PropTypes.string, @@ -26,7 +26,7 @@ const Header = React.createClass({ }, componentWillReceiveProps(nextProps) { - const value = this.formatValue(nextProps.value); + const value = nextProps.value; this.setState({ str: value && nextProps.formatter.format(value) || '', invalid: false, @@ -39,16 +39,15 @@ const Header = React.createClass({ str, }); let value = null; - const {formatter, gregorianTimepickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; + const {formatter, gregorianTimePickerLocale, hourOptions, minuteOptions, secondOptions, onChange} = this.props; if (str) { const originalValue = this.props.value; try { value = formatter.parse(str, { - locale: gregorianTimepickerLocale, + locale: gregorianTimePickerLocale, obeyCount: true, }); - value = this.formatValue(value); } catch (ex) { this.setState({ invalid: true, @@ -114,17 +113,6 @@ const Header = React.createClass({ return ; }, - formatValue(value) { - const newValue = this.props.value.clone(); - if (!value) { - return newValue; - } - newValue.fields[4] = value.fields[4]; - newValue.fields[5] = value.fields[5]; - newValue.fields[6] = value.fields[6]; - return newValue; - }, - render() { const { prefixCls } = this.props; return ( -- cgit v1.2.3