add trigger prop for Picker.Fixes #21

react-component · May 19, 2015 · c25693c · c25693c
1 parent 45df326
commit c25693c
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 21 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,10 @@
 # History
 ----
 
+## 3.4.0 / 2015-05-19
+
+`new` [#21](https://github.com/react-component/calendar/issues/21) add trigger prop for DatePicker
+
 ## 3.3.0 / 2015-05-13
 
 use jsx as extension name

diff --git a/README.md b/README.md
@@ -180,6 +180,12 @@ For details to see: [https://github.com/yiminghe/learning-react/tree/master/exam
           <td></td>
           <td>use to format/parse value to/from input</td>
         </tr>
+        <tr>
+          <td>trigger</td>
+          <td>React.Element</td>
+          <td></td>
+          <td>additional trigger appended to picker</td>
+        </tr>
         <tr>
           <td>value</td>
           <td>GregorianCalendar</td>

diff --git a/examples/ant-design-picker.js b/examples/ant-design-picker.js
@@ -57,6 +57,7 @@ var style = `
 
 .datepicker-icon {
   position: absolute;
+  -webkit-user-select:none;
 }
 
 .datepicker-icon:after {
@@ -72,12 +73,6 @@ var style = `
 `;
 
 var Test = React.createClass({
-  open: function () {
-    this.refs.picker.setState({
-      open: true
-    });
-  },
-
   handleChange: function (value) {
     console.log('DatePicker change: ' + (value && this.props.formatter.format(value)));
   },
@@ -127,12 +122,12 @@ var Test = React.createClass({
           showTime</span>
       </div>
       <div className="date-picker-wrap">
-        <DatePicker ref='picker' formatter={this.props.formatter} calendar={calendar}
+        <DatePicker
+          trigger={<span className="datepicker-icon" />}
+          formatter={this.props.formatter} calendar={calendar}
           value={state.value} onChange={this.handleChange}>
           <input type="text" className="datepicker-input" style={{background: 'white', cursor: 'pointer'}}/>
         </DatePicker>
-        <span className="datepicker-icon" onClick={this.open}>
-        </span>
       </div>
     </div>;
   }

diff --git a/examples/picker.js b/examples/picker.js
@@ -10,10 +10,8 @@ var GregorianCalendar = require('gregorian-calendar');
 var CalendarLocale = require('../lib/locale/zh-cn');
 
 var Test = React.createClass({
-  open: function () {
-    this.refs.picker.setState({
-      open: true
-    });
+  toggle: function () {
+    this.refs.picker.toggle();
   },
 
   handleChange: function (value) {
@@ -55,7 +53,7 @@ var Test = React.createClass({
     var state = this.state;
     var calendar = <Calendar locale={CalendarLocale}
       orient={['top', 'left']}
-      showTime={this.state.showTime} onSelect={this.handleCalendarSelect} onClear={this.handleCalendarSelect.bind(this,null)} showClear={true}/>;
+      showTime={this.state.showTime} onSelect={this.handleCalendarSelect} onClear={this.handleCalendarSelect.bind(this, null)} showClear={true}/>;
     return <div className="form-group" style={{width: 400, margin: 20}} data-time={this.state.time}>
       <div className="input-group">
         <span>
@@ -67,14 +65,22 @@ var Test = React.createClass({
           value={state.value} onChange={this.handleChange}>
           <input type="text" className="form-control" style={{background: 'white', cursor: 'pointer'}}/>
         </DatePicker>
-        <span className="input-group-addon" onClick={this.open}>
+        <span className="input-group-addon"
+          style={{'-webkit-user-select': 'none'}}
+          onMouseDown={prevent}
+          unselectable="unselectable"
+          onClick={this.toggle}>
           <span className="glyphicon glyphicon-calendar"></span>
         </span>
       </div>
     </div>;
   }
 });
 
+function prevent(e) {
+  e.preventDefault();
+}
+
 React.render(<div>
   <h1>zh-cn</h1>
   <Test />

diff --git a/lib/Picker.jsx b/lib/Picker.jsx
@@ -1,4 +1,3 @@
-
 var React = require('react');
 var DateTimeFormat = require('gregorian-calendar-format');
 var rcUtil = require('rc-util');
@@ -39,7 +38,8 @@ class Picker extends React.Component {
 
     // bind methods
     [
-      'handleInputClick', 'handleCalendarBlur', 'handleCalendarClear', 'handleCalendarKeyDown',
+      'handleInputClick', 'handleCalendarBlur', 'handleTriggerClick',
+      'handleCalendarClear', 'handleCalendarKeyDown',
       'handleKeyDown', 'handleCalendarSelect'
     ].forEach(m => {
         this[m] = this[m].bind(this);
@@ -69,14 +69,24 @@ class Picker extends React.Component {
   }
 
   handleInputClick() {
-    this.open();
+    this.toggle();
+  }
+
+  handleTriggerClick() {
+    this.toggle();
+  }
+
+  toggle(callback) {
+    this.setState({
+      open: !this.state.open
+    }, callback);
   }
 
   handleKeyDown(e) {
     // down
     if (e.keyCode === KeyCode.DOWN) {
       e.preventDefault();
-      this.handleInputClick();
+      this.open();
     }
   }
 
@@ -219,10 +229,22 @@ class Picker extends React.Component {
     if (state.open) {
       classes.push(props.prefixCls + '-open');
     }
-    return <span className={classes.join(' ')}>{[input, calendar]}</span>;
+    var trigger = props.trigger;
+    if (trigger) {
+      trigger = React.cloneElement(trigger, {
+        onClick: this.handleTriggerClick,
+        unselectable: true,
+        onMouseDown: prevent
+      });
+    }
+    return <span className={classes.join(' ')}>{[input, calendar, trigger]}</span>;
   }
 }
 
+function prevent(e) {
+  e.preventDefault();
+}
+
 Picker.propTypes = {
   onChange: React.PropTypes.func
 };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rc-calendar",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "calendar ui component for react",
   "keywords": [
     "react",