1 import React, {PropTypes} from 'react';
2 import ReactDOM from 'react-dom';
3 import Trigger from 'rc-trigger';
4 import {createChainedFunction} from 'rc-util';
5 import placements from './util/placements';
6 import CommonMixin from './mixin/CommonMixin';
11 function refFn(field, component) {
12 this[field] = component;
15 const Picker = React.createClass({
17 prefixCls: PropTypes.string,
18 panel: PropTypes.element,
19 children: PropTypes.func,
20 disabled: PropTypes.bool,
21 value: PropTypes.object,
23 align: PropTypes.object,
24 placement: PropTypes.any,
25 transitionName: PropTypes.string,
26 onChange: PropTypes.func,
27 onOpen: PropTypes.func,
28 onClose: PropTypes.func,
31 mixins: [CommonMixin],
37 placement: 'bottomLeft',
45 this.savePanelRef = refFn.bind(this, 'panelInstance');
46 const { open, value } = this.props;
47 return { open, value };
50 componentWillMount() {
51 document.addEventListener('click', this.handleDocumentClick, false);
54 componentWillReceiveProps(nextProps) {
55 const { value, open } = nextProps;
56 if (value !== undefined) {
57 this.setState({value});
59 if (open !== undefined) {
60 this.setState({open});
64 componentWillUnmount() {
65 document.removeEventListener('click', this.handleDocumentClick, false);
68 onPanelChange(value) {
69 const props = this.props;
73 props.onChange(value);
77 this.setOpen(false, this.focus);
80 onVisibleChange(open) {
81 this.setOpen(open, () => {
83 ReactDOM.findDOMNode(this.panelInstance).focus();
89 const panel = this.props.panel;
91 ref: this.savePanelRef,
92 defaultValue: this.state.value || panel.props.defaultValue,
93 onChange: createChainedFunction(panel.props.onChange, this.onPanelChange),
94 onClear: createChainedFunction(panel.props.onClear, this.onPanelClear),
97 return React.cloneElement(panel, extraProps);
100 setOpen(open, callback) {
101 const {onOpen, onClose} = this.props;
102 if (this.state.open !== open) {
117 handleDocumentClick(event) {
118 // hide popup when click outside
119 if (this.state.open && ReactDOM.findDOMNode(this.panelInstance).contains(event.target)) {
128 if (!this.state.open) {
129 ReactDOM.findDOMNode(this).focus();
134 const state = this.state;
135 const props = this.props;
136 const { prefixCls, placement, align, disabled, transitionName, children } = props;
139 prefixCls={prefixCls}
140 popup={this.getPanelElement()}
142 builtinPlacements={placements}
143 popupPlacement={placement}
144 action={disabled ? [] : ['click']}
146 popupTransitionName={transitionName}
147 popupVisible={state.open}
148 onPopupVisibleChange={this.onVisibleChange}
150 <span className={`${prefixCls}-picker`}>
151 {children(state, props)}
158 export default Picker;