rc-calendar - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

examples/ant-design-picker.js

@@ -60,2 +60,3 @@ /** @jsx React.DOM */
   position: absolute;
+  -webkit-user-select:none;
 }
@@ -76,8 +77,2 @@
 var Test = React.createClass({
-  open: function () {
-    this.refs.picker.setState({
-      open: true
-    });
-  },
-
   handleChange: function (value) {
@@ -132,8 +127,8 @@ console.log('DatePicker change: ' + (value && this.props.formatter.format(value)));
       <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>
@@ -140,0 +135,0 @@ </div>;

examples/picker.js

@@ -13,6 +13,4 @@ /** @jsx React.DOM */
 var Test = React.createClass({
-  open: function () {
-    this.refs.picker.setState({
-      open: true
-    });
+  toggle: function () {
+    this.refs.picker.toggle();
   },
@@ -59,3 +57,3 @@
       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}>
@@ -72,3 +70,7 @@ <div className="input-group">
         </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>
@@ -81,2 +83,6 @@ </span>
 
+function prevent(e) {
+  e.preventDefault();
+}
+
 React.render(<div>
@@ -83,0 +89,0 @@ <h1>zh-cn</h1>

HISTORY.md

 # 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
@@ -5,0 +9,0 @@

lib/Picker.jsx

@@ -1,2 +0,1 @@
-
 var React = require('react');
@@ -42,3 +41,4 @@ var DateTimeFormat = require('gregorian-calendar-format');
     [
-      'handleInputClick', 'handleCalendarBlur', 'handleCalendarClear', 'handleCalendarKeyDown',
+      'handleInputClick', 'handleCalendarBlur', 'handleTriggerClick',
+      'handleCalendarClear', 'handleCalendarKeyDown',
       'handleKeyDown', 'handleCalendarSelect'
@@ -73,5 +73,15 @@ ].forEach(m => {
   handleInputClick() {
-    this.open();
+    this.toggle();
   }
 
+  handleTriggerClick() {
+    this.toggle();
+  }
+
+  toggle(callback) {
+    this.setState({
+      open: !this.state.open
+    }, callback);
+  }
+
   handleKeyDown(e) {
@@ -81,3 +91,3 @@ // down
       e.preventDefault();
-      this.handleInputClick();
+      this.open();
     }
@@ -225,6 +235,18 @@ }
     }
-    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 = {
@@ -231,0 +253,0 @@ onChange: React.PropTypes.func

package.json

 {
   "name": "rc-calendar",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "calendar ui component for react",
@@ -45,2 +45,3 @@ "keywords": [
     "rc-server": "^2.0.0",
+    "rc-style": "1.0.x",
     "rc-tools": "2.x",
@@ -51,3 +52,8 @@ "react": "^0.13.0"
     "transform": [
-      ["reactify", {"es6": true}],
+      [
+        "reactify",
+        {
+          "es6": true
+        }
+      ],
       "envify"
@@ -54,0 +60,0 @@ ]

README.md

@@ -184,2 +184,8 @@ # rc-calendar
         <tr>
+          <td>trigger</td>
+          <td>React.Element</td>
+          <td></td>
+          <td>additional trigger appended to picker</td>
+        </tr>
+        <tr>
           <td>value</td>
@@ -186,0 +192,0 @@ <td>GregorianCalendar</td>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

156529

increased by0.19%

Lines of code

3801

increased by0.56%

Number of lines in readme file

236

increased by2.61%

Worsened metrics

Dev dependency count

8

increased by14.29%

No dependency changes