rc-calendar - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

examples/picker.js

@@ -20,7 +20,7 @@ /** @jsx React.DOM */
   handleChange: function (value) {
-    console.log('DatePicker change: ' + (this.props.formatter.format(value)));
+    console.log('DatePicker change: ' + (value && this.props.formatter.format(value)));
   },
 
   handleCalendarSelect: function (value) {
-    console.log('calendar select: ' + (this.props.formatter.format(value)));
+    console.log('calendar select: ' + (value && this.props.formatter.format(value)));
     // controlled value
@@ -59,3 +59,3 @@ this.setState({
       orient={['bottom', 'left']}
-      showTime={this.state.showTime} onSelect={this.handleCalendarSelect}/>;
+      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}>
@@ -62,0 +62,0 @@ <div className="input-group">

examples/simple.js

@@ -17,4 +17,5 @@ /** @jsx React.DOM */
     <h2>calendar (en-us, U.S.A.  California  San Francisco)</h2>
-    <Calendar showWeekNumber={true} onSelect={onSelect} showTime={true}/>
+    <Calendar showWeekNumber={true}
+      onSelect={onSelect} showTime={true}/>
   </div>, document.getElementById('__react-content'));
 

HISTORY.md

@@ -6,2 +6,6 @@ # History
 
+## 2.1.0 / 2015-03-10
+
+`new` [#16](https://github.com/react-component/calendar/issues/16) support clear button
+
 ## 2.0.0 / 2015-03-04
@@ -8,0 +12,0 @@

lib/Calendar.js

@@ -125,3 +125,4 @@ /** @jsx React.DOM */
       onFocus: noop,
-      onBlur: noop
+      onBlur: noop,
+      onClear: noop
     };
@@ -131,5 +132,10 @@ },
   componentWillReceiveProps: function (nextProps) {
-    if (nextProps.value) {
+    var value = nextProps.value;
+    if (value !== undefined) {
+      if (!value) {
+        value = this.state.value.clone();
+        value.setTime(Date.now());
+      }
       this.setState({
-        value: nextProps.value
+        value: value
       });
@@ -201,2 +207,6 @@ }
 
+  clear: function () {
+    this.props.onClear();
+  },
+
   handleKeyDown: function (e) {
@@ -447,2 +457,12 @@ var self = this;
       }
+      var clearEl;
+      if (props.showClear) {
+        clearEl = (<a className = {prefixClsFn("clear-btn")}
+          role="button"
+          onClick={this.clear}>{locale.clear}</a>);
+      }
+      var footerBtn;
+      if (todayEl || clearEl) {
+        footerBtn = <div className={prefixClsFn("footer-btn")}>{todayEl} {clearEl}</div>;
+      }
       var timeEl;
@@ -455,3 +475,3 @@ if (props.showTime) {
         {timeEl}
-        {todayEl}
+        {footerBtn}
         </div>);
@@ -458,0 +478,0 @@ }

lib/Picker.js

@@ -113,2 +113,15 @@ /** @jsx React.DOM */
 
+  handleCalendarClear: function () {
+    var self = this;
+    this.setState({
+      open: false,
+      value: null
+    }, function () {
+      self.refs.input.getDOMNode().focus();
+    });
+    if (this.state.value !== null) {
+      this.props.onChange(null);
+    }
+  },
+
   componentDidMount: function () {
@@ -161,3 +174,4 @@ this.componentDidUpdate();
     if (state.open) {
-      this._cacheCalendar = calendar = cloneWithProps(props.calendar, {
+      var calendarProp = props.calendar;
+      this._cacheCalendar = calendar = cloneWithProps(calendarProp, {
         ref: 'calendar',
@@ -169,3 +183,4 @@ value: value,
         onKeyDown: this.handleCalendarKeyDown,
-        onSelect: createChainedFunction(this.handleCalendarSelect, props.calendar.props.onSelect)
+        onSelect: createChainedFunction(this.handleCalendarSelect, calendarProp.props.onSelect),
+        onClear: createChainedFunction(this.handleCalendarClear, calendarProp.props.onClear)
       });
@@ -172,0 +187,0 @@ }

lib/Time.js

@@ -142,3 +142,3 @@ /** @jsx React.DOM */
     }
-    return (<span>
+    return (<div>
       <input className = {prefixClsFn("time-input")} title={locale.hourInput} readOnly value={padding(hour)}
@@ -156,3 +156,3 @@ onClick={this.onHourClick}
     {panel}
-    </span>);
+    </div>);
   }
@@ -159,0 +159,0 @@ });

package.json

 {
   "name": "rc-calendar",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "calendar ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

webpack.config.js

@@ -6,2 +6,3 @@ var webpack = require("webpack");
   entry: {
+    'defaultValue':['./examples/defaultValue.js'],
     'simple': ['./examples/simple.js'],
@@ -8,0 +9,0 @@ 'disabled': ['./examples/disabled.js'],

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

128977

increased by1.23%

Lines of code

3117

increased by1.46%

No dependency changes