rc-calendar - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

examples/CalendarInput.js

@@ -47,3 +47,7 @@ /** @jsx React.DOM */
 
+  onChange: function () {
+  },
+
   onCalendarSelect: function (d) {
+    this.refs.input.getDOMNode().focus();
     this.setState({
@@ -53,3 +57,2 @@ value: formatter.format(d),
     });
-    this.refs.input.getDOMNode().focus();
   },
@@ -61,3 +64,3 @@
     if (state.showCalendar) {
-      calendar = (<div style={{position: "absolute", left: 0, top: 21}}>
+      calendar = (<div style={{position: "absolute", left: 0, top: 24}}>
         <Calendar locale={CalendarLocale} value={state.calendarValue} focused="1" onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>
@@ -68,3 +71,3 @@ </div>);
       <span style={{display: "inline-block", position: "relative"}}>
-        <input value={state.value} style={{height: 21}} onFocus={this.onFocus} ref='input' onKeyDown={this.onKeyDown}/>
+        <input value={state.value} style={{height: 21}} onFocus={this.onFocus} onChange={this.onChange} ref='input' onKeyDown={this.onKeyDown}/>
       {calendar}
@@ -71,0 +74,0 @@ </span>)

examples/index.js

@@ -20,3 +20,3 @@ /** @jsx React.DOM */
              React) {
-  var formatter = new GregorianCalendarFormat('yyyy-mm-dd');
+  var formatter = new GregorianCalendarFormat('yyyy-MM-dd');
   var value = new GregorianCalendar();
@@ -30,3 +30,2 @@ value.setTime(Date.now());
     <div>
-      <h1 style={{"textAlign": "center"}}>rc-calendar@1.0.0 demo</h1>
       <h2>calendar (en-us)</h2>
@@ -36,4 +35,4 @@ <Calendar showWeekNumber="1" onSelect={onSelect}/>
       <CalendarInput />
-    </div>, document.body);
+    </div>, document.getElementById('body'));
 
 });

gulpfile.js

@@ -40,6 +40,9 @@ var gulp = require('gulp');
   var less = require('gulp-less');
-  return gulp.src('assets/dpl.less')
+   gulp.src('assets/*.less')
     .pipe(less())
-    .pipe(rename('dpl.css'))
     .pipe(gulp.dest('assets/'));
 });
+
+gulp.task('watch-less',function(){
+  gulp.watch('assets/**/*.less',['less']);
+});

lib/Calendar.js

@@ -101,3 +101,3 @@ /** @jsx React.DOM */
     if (this.props.focused) {
-      this.refs.main.getDOMNode().focus();
+      this.getDOMNode().focus();
     }
@@ -132,24 +132,19 @@ },
 
-  nextMonth: function (e) {
-    e.preventDefault();
+  nextMonth: function () {
     this.goMonth(1);
   },
 
-  previousMonth: function (e) {
-    e.preventDefault();
+  previousMonth: function () {
     this.goMonth(-1);
   },
 
-  nextYear: function (e) {
-    e.preventDefault();
+  nextYear: function () {
     this.goYear(1);
   },
 
-  previousYear: function (e) {
-    e.preventDefault();
+  previousYear: function () {
     this.goYear(-1);
   },
 
-  chooseDay: function (current, e) {
-    e.preventDefault();
+  chooseDay: function (current) {
     var props = this.props;
@@ -174,6 +169,2 @@ var disabledDate = props.disabledDate;
 
-  preventDefault: function (e) {
-    e.preventDefault();
-  },
-
   onKeyDown: function (e) {
@@ -231,7 +222,6 @@ var self = this;
 
-  showMonthPanel: function (e) {
+  showMonthPanel: function () {
     this.setState({
       showMonthPanel: 1
     });
-    e.preventDefault();
   },
@@ -323,13 +313,9 @@
           dateHtml = (
-            <a
+            <span
               key={getIdFromDate(current)}
-              hidefocus="on"
-              unselectable="on"
-              tabIndex="-1"
               className = {dateClass}
-              href="#"
               aria-selected={selected}
               aria-disabled={disabled}>
               {current.getDayOfMonth()}
-            </a>);
+            </span>);
         }
@@ -374,13 +360,7 @@ dateCells.push(
   onFocus: function () {
-    if (this._blurTimer) {
-      clearTimeout(this._blurTimer);
-      this._blurTimer = null;
-    }
+    this.props.onFocus();
   },
 
   onBlur: function () {
-    var self = this;
-    this._blurTimer = setTimeout(function () {
-      self.props.onBlur();
-    }, 40);
+    this.props.onBlur();
   },
@@ -425,5 +405,2 @@
             onClick={this.chooseToday}
-            hidefocus="on"
-            tabIndex="-1"
-            href="#"
             title={this.getTodayTime()}>{locale.today}</a>
@@ -440,26 +417,18 @@ </div>);
     return (
-      <div className = "rc-calendar" tabIndex="-1" onFocus={this.onFocus} onBlur={this.onBlur}>
-        <div style={{outline: 'none'}} tabIndex="0" ref='main' onKeyDown={this.onKeyDown}>
+      <div className = "rc-calendar" tabIndex="0" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}>
+        <div style={{outline: 'none'}}>
           <div className = "rc-calendar-header">
             <a className = "rc-calendar-prev-year-btn"
-              href="#"
-              tabIndex="-1"
               role="button"
               onClick={this.previousYear}
-              title={locale.previousYear}
-              hidefocus="on">
+              title={locale.previousYear}>
+            «
             </a>
             <a className = "rc-calendar-prev-month-btn"
-              href="#"
-              tabIndex="-1"
               role="button"
               onClick={this.previousMonth}
-              title={locale.previousMonth}
-              hidefocus="on">
+              title={locale.previousMonth}>
             </a>
             <a className = "rc-calendar-month-select"
               role="button"
-              href="#"
-              tabIndex="-1"
-              hidefocus="on"
               onClick={this.showMonthPanel}
@@ -471,16 +440,9 @@ title={locale.monthSelect}>
             <a className = "rc-calendar-next-month-btn"
-              href="#"
-              tabIndex="-1"
-              role="button"
               onClick={this.nextMonth}
-              title={locale.nextMonth}
-              hidefocus="on">
+              title={locale.nextMonth}>
             </a>
             <a className = "rc-calendar-next-year-btn"
-              href="#"
-              tabIndex="-1"
-              role="button"
               onClick={this.nextYear}
-              title={locale.nextYear}
-              hidefocus="on">
+              title={locale.nextYear}>
+            »
             </a>
@@ -487,0 +449,0 @@ </div>

lib/DecadePanel.js

@@ -81,8 +81,5 @@ /** @jsx React.DOM */
         >
-          <a hidefocus="on"
-            href="#"
-            tabIndex="-1"
-            unselectable="on"
+          <a
             className="rc-calendar-decade-panel-decade">
-             {startDecade}-{endDecade}
+             {startDecade}<br/>-<br/>{endDecade}
           </a>
@@ -95,11 +92,9 @@ </td>);
     return (
-      <div className="rc-calendar-decade-panel" tabIndex="-1">
+      <div className="rc-calendar-decade-panel">
         <div className = "rc-calendar-decade-panel-header">
           <a className = "rc-calendar-decade-panel-prev-century-btn"
-            href="#"
             role="button"
-            tabIndex="-1"
             onClick={this.previousCentury}
-            title={locale.previousCentury}
-            hidefocus="on">
+            title={locale.previousCentury}>
+          «
           </a>
@@ -110,8 +105,6 @@ <div className = "rc-calendar-decade-panel-century">
           <a className = "rc-calendar-decade-panel-next-century-btn"
-            href="#"
-            tabIndex="-1"
             role="button"
             onClick={this.nextCentury}
-            title={locale.nextCentury}
-            hidefocus="on">
+            title={locale.nextCentury}>
+          »
           </a>
@@ -118,0 +111,0 @@ </div>

lib/MonthPanel.js

@@ -30,21 +30,17 @@ /** @jsx React.DOM */
 
-  nextYear: function (e) {
-    e.preventDefault();
+  nextYear: function () {
     goYear(this, 1);
   },
 
-  previousYear: function (e) {
-    e.preventDefault();
+  previousYear: function () {
     goYear(this, -1);
   },
 
-  chooseMonth: function (month, e) {
+  chooseMonth: function (month) {
     var next = this.state.value.clone();
     next.setMonth(month);
     this.props.onSelect(next);
-    e.preventDefault();
   },
 
-  showYearPanel: function (e) {
-    e.preventDefault();
+  showYearPanel: function () {
     this.setState({
@@ -108,6 +104,3 @@ showYearPanel: 1
             })}>
-            <a hidefocus="on"
-              href="#"
-              tabIndex="-1"
-              unselectable="on"
+            <a
               className = "rc-calendar-month-panel-month">
@@ -127,12 +120,10 @@ {m.content}
     return (
-      <div className="rc-calendar-month-panel" tabIndex="-1">
+      <div className="rc-calendar-month-panel">
         <div>
           <div className = "rc-calendar-month-panel-header">
             <a className = "rc-calendar-month-panel-prev-year-btn"
-              href="#"
-              tabIndex="-1"
               role="button"
               onClick={this.previousYear}
-              title={locale.previousYear}
-              hidefocus="on">
+              title={locale.previousYear}>
+            «
             </a>
@@ -142,5 +133,2 @@
               role="button"
-              href="#"
-              hidefocus="on"
-              tabIndex="-1"
               onClick={this.showYearPanel}
@@ -153,8 +141,6 @@ title={locale.yearSelect}>
             <a className = "rc-calendar-month-panel-next-year-btn"
-              href="#"
-              tabIndex="-1"
               role="button"
               onClick={this.nextYear}
-              title={locale.nextYear}
-              hidefocus="on">
+              title={locale.nextYear}>
+            »
             </a>
@@ -161,0 +147,0 @@ </div>

lib/YearPanel.js

@@ -30,21 +30,17 @@ /** @jsx React.DOM */
 
-  nextDecade: function (e) {
-    e.preventDefault();
+  nextDecade: function () {
     goYear(this, 10);
   },
 
-  previousDecade: function (e) {
+  previousDecade: function () {
     goYear(this, -10);
-  e.preventDefault();
   },
 
-  chooseYear: function (year, e) {
+  chooseYear: function (year) {
     var next = this.state.value.clone();
     next.setYear(year);
     this.props.onSelect(next);
-    e.preventDefault();
   },
 
-  showDecadePanel: function (e) {
-    e.preventDefault();
+  showDecadePanel: function () {
     this.setState({
@@ -112,6 +108,3 @@ showDecadePanel: 1
           >
-            <a hidefocus="on"
-              href="#"
-              tabIndex="-1"
-              unselectable="on"
+            <a
               className="rc-calendar-year-panel-year">
@@ -131,12 +124,10 @@ {y.content}
     return (
-      <div className="rc-calendar-year-panel" tabIndex="-1">
+      <div className="rc-calendar-year-panel">
         <div>
           <div className = "rc-calendar-year-panel-header">
             <a className = "rc-calendar-year-panel-prev-decade-btn"
-              href="#"
               role="button"
-              tabIndex="-1"
               onClick={this.previousDecade}
-              title={locale.previousDecade}
-              hidefocus="on">
+              title={locale.previousDecade}>
+            «
             </a>
@@ -146,5 +137,2 @@
               role="button"
-              href="#"
-              hidefocus="on"
-              tabIndex="-1"
               onClick={this.showDecadePanel}
@@ -159,8 +147,6 @@ title={locale.decadeSelect}>
             <a className = "rc-calendar-year-panel-next-decade-btn"
-              href="#"
               role="button"
-              tabIndex="-1"
               onClick={this.nextDecade}
-              title={locale.nextDecade}
-              hidefocus="on">
+              title={locale.nextDecade}>
+            »
             </a>
@@ -167,0 +153,0 @@ </div>

package.json

 {
   "name": "rc-calendar",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "calendar ui component for react",
@@ -36,2 +36,3 @@ "keywords": [
   "devDependencies": {
+    "console-polyfill": "^0.1.2",
     "es5-shim": "~4.0.5",
@@ -38,0 +39,0 @@ "expect.js": "~0.3.1",

tests/index-spec.js

@@ -15,2 +15,4 @@ /** @jsx React.DOM */
   React.render(<Calendar showToday={1} onSelect={onSelect}/>, document.getElementById('content'));
+
+  it('works',function(){});
 });

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

87878

increased by23.32%

Number of package files

35

increased by20.69%

Lines of code

2387

increased by17.53%

Worsened metrics

Dev dependency count

33

increased by3.13%

No dependency changes