aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/TimePicker.jsx
diff options
context:
space:
mode:
authorMG12 <wuzhao.mail@gmail.com>2015-11-16 14:44:26 +0800
committerMG12 <wuzhao.mail@gmail.com>2015-11-16 14:44:26 +0800
commit78637ac02ce6a469d2021736d3cb12e98c5edbe7 (patch)
tree68de02afaa15b90be1fcc1dd191edb6f48ebb293 /src/TimePicker.jsx
parent02de449a0474765a4796fa607e7e3922252f574f (diff)
downloadtime-picker-78637ac02ce6a469d2021736d3cb12e98c5edbe7.tar.gz
time-picker-78637ac02ce6a469d2021736d3cb12e98c5edbe7.tar.zst
time-picker-78637ac02ce6a469d2021736d3cb12e98c5edbe7.zip
remove toggle feature because rc-trigger included; update example and document0.2.0
Diffstat (limited to 'src/TimePicker.jsx')
-rw-r--r--src/TimePicker.jsx140
1 files changed, 140 insertions, 0 deletions
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
new file mode 100644
index 0000000..6bb97a1
--- /dev/null
+++ b/src/TimePicker.jsx
@@ -0,0 +1,140 @@
1import React, {PropTypes} from 'react';
2import ReactDOM from 'react-dom';
3import Trigger from 'rc-trigger';
4import {createChainedFunction} from 'rc-util';
5import placements from './util/placements';
6import CommonMixin from './mixin/CommonMixin';
7
8function noop() {
9}
10
11function refFn(field, component) {
12 this[field] = component;
13}
14
15const Picker = React.createClass({
16 propTypes: {
17 prefixCls: PropTypes.string,
18 panel: PropTypes.element,
19 children: PropTypes.func,
20 disabled: PropTypes.bool,
21 value: PropTypes.object,
22 open: PropTypes.bool,
23 align: PropTypes.object,
24 placement: PropTypes.any,
25 transitionName: PropTypes.string,
26 onChange: PropTypes.func,
27 onOpen: PropTypes.func,
28 onClose: PropTypes.func,
29 },
30
31 mixins: [CommonMixin],
32
33 getDefaultProps() {
34 return {
35 open: false,
36 align: {},
37 placement: 'bottomLeft',
38 onChange: noop,
39 onOpen: noop,
40 onClose: noop,
41 };
42 },
43
44 getInitialState() {
45 this.savePanelRef = refFn.bind(this, 'panelInstance');
46 const { open, value } = this.props;
47 return { open, value };
48 },
49
50 componentWillReceiveProps(nextProps) {
51 const { value, open } = nextProps;
52 if (value !== undefined) {
53 this.setState({value});
54 }
55 if (open !== undefined) {
56 this.setState({open});
57 }
58 },
59
60 onPanelChange(value) {
61 const props = this.props;
62 this.setState({
63 value: value,
64 });
65 props.onChange(value);
66 },
67
68 onPanelClear() {
69 this.setOpen(false, this.focus);
70 },
71
72 onVisibleChange(open) {
73 this.setOpen(open, () => {
74 if (open) {
75 ReactDOM.findDOMNode(this.panelInstance).focus();
76 }
77 });
78 },
79
80 getPanelElement() {
81 const panel = this.props.panel;
82 const extraProps = {
83 ref: this.savePanelRef,
84 defaultValue: this.state.value || panel.props.defaultValue,
85 onChange: createChainedFunction(panel.props.onChange, this.onPanelChange),
86 onClear: createChainedFunction(panel.props.onClear, this.onPanelClear),
87 };
88
89 return React.cloneElement(panel, extraProps);
90 },
91
92 setOpen(open, callback) {
93 const {onOpen, onClose} = this.props;
94 if (this.state.open !== open) {
95 this.setState({
96 open: open,
97 }, callback);
98 const event = {
99 open: open,
100 };
101 if (open) {
102 onOpen(event);
103 } else {
104 onClose(event);
105 }
106 }
107 },
108
109 focus() {
110 if (!this.state.open) {
111 ReactDOM.findDOMNode(this).focus();
112 }
113 },
114
115 render() {
116 const state = this.state;
117 const props = this.props;
118 const { prefixCls, placement, align, disabled, transitionName, children } = props;
119 return (
120 <Trigger
121 prefixCls={prefixCls}
122 popup={this.getPanelElement()}
123 popupAlign={align}
124 builtinPlacements={placements}
125 popupPlacement={placement}
126 action={disabled ? [] : ['click']}
127 destroyPopupOnHide
128 popupTransitionName={transitionName}
129 popupVisible={state.open}
130 onPopupVisibleChange={this.onVisibleChange}
131 >
132 <span className={`${prefixCls}-picker`}>
133 {children(state, props)}
134 </span>
135 </Trigger>
136 );
137 },
138});
139
140export default Picker;