rc-calendar - npm Package Compare versions

Comparing version 1.2.4 to 1.3.0

examples/CalendarInput.js

@@ -10,2 +10,3 @@ /** @jsx React.DOM */
 var CalendarLocale = require('../lib/locale/zh-cn');
+require('./calendar-input.css');
 
@@ -63,9 +64,7 @@ var CalendarInput = React.createClass({
     if (state.showCalendar) {
-      calendar = (<div style={{position: "absolute", left: 0, top: 24}}>
-        <Calendar locale={CalendarLocale} value={state.calendarValue} focused="1" onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>
-      </div>);
+      calendar = (<Calendar className="rc-popup-calendar" orient={['left','bottom']} locale={CalendarLocale} value={state.calendarValue} focused="1" onBlur={this.onCalendarBlur} onSelect={this.onCalendarSelect}/>);
     }
     return (
-      <span style={{display: "inline-block", position: "relative"}}>
-        <input value={state.value} style={{height: 21}} onFocus={this.onFocus} onChange={this.onChange} ref='input' onKeyDown={this.onKeyDown}/>
+      <span className='rc-calendar-input'>
+        <input value={state.value} onFocus={this.onFocus} onChange={this.onChange} ref='input' onKeyDown={this.onKeyDown}/>
       {calendar}
@@ -72,0 +71,0 @@ </span>)

examples/index.md

@@ -1,6 +0,58 @@
-# rc-calendar@1.0.0 demo
+# rc-calendar@1.x demo
+---
 
-```js
-document.writeln('<div id="body"></div>');
-(window.require || window.seajs.use)(['./index']);
-```
+````html
+<div id='skin'></div>
+````
+
+````js
+require('./skin');
+````
+
+## render standalone
+
+````html
+<div id='react-content-standalone'></div>
+````
+
+````js
+/** @jsx React.DOM */
+var Calendar = require('../');
+var CalendarInput = require('./CalendarInput');
+var GregorianCalendar = require('gregorian-calendar');
+var GregorianCalendarFormat = require('gregorian-calendar-format');
+var React = require('react');
+var formatter = new GregorianCalendarFormat('yyyy-MM-dd');
+var value = new GregorianCalendar();
+value.setTime(Date.now());
+
+function onSelect(value) {
+  console.log('onSelect');
+  console.log(formatter.format(value))
+}
+
+React.render(
+  <div>
+    <h2>calendar (en-us)</h2>
+    <Calendar showWeekNumber="1" onSelect={onSelect}/>
+  </div>, document.getElementById('react-content-standalone'));
+````
+
+## render with input
+
+please create your own CalendarInput
+
+````html
+<div id='react-content-input'></div>
+````
+
+````js
+/** @jsx React.DOM */
+var React = require('react');
+var CalendarInput = require('./CalendarInput');
+React.render(
+  <div>
+    <h2>input (zh-cn)</h2>
+    <CalendarInput />
+  </div>, document.getElementById('react-content-input'));
+````

lib/Calendar.js

@@ -95,2 +95,3 @@ /** @jsx React.DOM */
     return {
+      orient: this.props.orient,
       value: value
@@ -109,2 +110,3 @@ };
       locale: require('./locale/en-us'),
+      className: '',
       showToday: 1,
@@ -368,3 +370,4 @@ onSelect: noop,
     var locale = props.locale;
-    var value = this.state.value;
+    var state = this.state;
+    var value = state.value;
     var dateLocale = value.getLocale();
@@ -407,9 +410,20 @@ var veryShortWeekdays = [];
     var monthPanel;
-    if (this.state.showMonthPanel) {
+    if (state.showMonthPanel) {
       monthPanel = <MonthPanel locale={locale} value={value} onSelect={this.onMonthPanelSelect}/>;
     }
+
+    var className = "rc-calendar";
+    if (props.className) {
+      className += ' ' + props.className;
+    }
     // TODO need focusin focusout
     // https://github.com/facebook/react/issues/2011
+    var orient = state.orient;
+    if (orient) {
+      orient.forEach(function (o) {
+        className += ' rc-calendar-orient-' + o;
+      });
+    }
     return (
-      <div className = "rc-calendar" tabIndex="0" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}>
+      <div className = {className} tabIndex="0" onFocus={this.onFocus} onBlur={this.onBlur} onKeyDown={this.onKeyDown}>
         <div style={{outline: 'none'}}>
@@ -416,0 +430,0 @@ <div className = "rc-calendar-header">

package.json

 {
   "name": "rc-calendar",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "calendar ui component for react",
@@ -8,2 +8,3 @@ "keywords": [
     "react-calendar",
+    "react-component",
     "calendar",
@@ -28,8 +29,9 @@ "ui component",
   "scripts": {
-    "prepublish": "gulp less",
+    "less": "rc-tools run less",
+    "history": "rc-tools run history",
     "start": "node --harmony node_modules/.bin/rc-server",
-    "publish": "spm publish && gulp tag",
-    "lint": "gulp lint",
+    "publish": "spm publish && rc-tools run tag",
+    "lint": "rc-tools run lint",
     "test": "",
-    "saucelabs": "DEBUG=saucelabs-runner gulp saucelabs",
+    "saucelabs": "DEBUG=saucelabs-runner rc-tools run saucelabs",
     "browser-test": "mocha-phantomjs http://localhost:$npm_package_config_port/tests/runner.html",
@@ -39,27 +41,13 @@ "browser-test-cover": "mocha-phantomjs -R node_modules/rc-server/node_modules/node-jscover/lib/reporters/mocha/console http://localhost:$npm_package_config_port/tests/runner.html?coverage"
   "devDependencies": {
+    "precommit-hook": "^1.0.7",
+    "rc-server": "^1.4.2",
+    "rc-tools": "^1.0.1",
     "async": "~0.9.0",
     "expect.js": "~0.3.1",
-    "gh-changelog": "^1.0.5",
-    "gulp": "^3.8.7",
-    "gulp-jscs": "^1.1.0",
-    "gulp-jshint": "^1.8.4",
-    "gulp-jsx": "~0.6.0",
-    "gulp-less": "~2.0.1",
-    "gulp-rename": "~1.2.0",
-    "gulp-util": "^3.0.1",
-    "jquery": "~1.11.1",
-    "jshint": "^2.5.5",
-    "jshint-stylish": "^0.4.0",
     "modulex": "^1.7.4",
-    "precommit-hook": "^1.0.7",
-    "rc-server": "^1.0.0",
-    "rc-test-utils": "~1.0.0",
-    "react": "~0.12.1",
-    "saucelabs-runner": "~2.0.0",
-    "simulate-dom-event": "^1.0.1",
-    "sinon": "^1.12.1",
-    "wd": "^0.3.11"
+    "react": "~0.12.1"
   },
   "precommit": [
-    "lint"
+    "lint",
+    "less"
   ],
@@ -92,2 +80,6 @@ "browserify-shim": {
     },
+    "devDependencies": {
+      "async": "~0.9.0",
+      "expect.js": "~0.3.1"
+    },
     "output": [
@@ -94,0 +86,0 @@ "lib/locale/*.js"

README.md

 # rc-calendar
+---
 
@@ -6,2 +7,3 @@ calendar ui component for react, port from https://github.com/kissyteam/date-picker
 [![NPM version][npm-image]][npm-url]
+[![SPM version](http://spmjs.io/badge/rc-calendar)](http://spmjs.io/package/rc-calendar)
 [![build status][travis-image]][travis-url]
@@ -31,4 +33,6 @@ [![Test coverage][coveralls-image]][coveralls-url]
 
-![rc-calendar](http://gtms04.alicdn.com/tps/i4/TB1WifJGVXXXXa3XXXX6tFy4VXX-328-742.png)
+![rc-calendar](http://gtms01.alicdn.com/tps/i1/TB1cC0cHXXXXXbOXpXX06lmNXXX-684-684.png)
 
+![rc-calendar-input](http://gtms03.alicdn.com/tps/i3/TB1lmz_GFXXXXbEXVXXbMpwQXXX-692-732.png)
+
 ## Feature
@@ -109,2 +113,5 @@
 
+
+online docs: http://spmjs.io/docs/rc-calendar/
+
 ## Development
@@ -121,2 +128,3 @@
 
+online example: http://spmjs.io/docs/rc-calendar/examples/
 
@@ -123,0 +131,0 @@ ## Test Case

tests/index-spec.js

 /** @jsx React.DOM */
-
-var expect = require('expect.js');
-var Calendar = require('../index');
-var React = require('react/addons');
+if (location.href.indexOf('spmjs.io')!==-1) {
+  alert('not support SPM!');
+} else {
+  var expect = require('expect.js');
+  var Calendar = require('../index');
+  var React = require('react/addons');
 // var sinon = require('sinon');
-var $ = require('jquery');
-var TestUtils = React.addons.TestUtils;
-var Simulate = TestUtils.Simulate;
-var async = require('async');
+  var TestUtils = React.addons.TestUtils;
+  var Simulate = TestUtils.Simulate;
+  var async = require('async');
+  require('/assets/dpl.css');
 
-describe('calendar', function () {
-  $('<link href="/assets/dpl.css" rel="stylesheet"/>').appendTo(document.getElementsByTagName('head')[0]);
+  describe('calendar', function () {
+    var calendar;
+    var container = document.createElement('div');
+    document.body.appendChild(container);
 
-  var calendar;
-  var container = $('#content')[0];
+    beforeEach(function (done) {
+      React.render(<Calendar showToday={1} />, container, function () {
+        calendar = this;
+        done();
+      });
+    });
 
-  beforeEach(function (done) {
-    React.render(<Calendar showToday={1} />, container, function () {
-      calendar = this;
-      done();
+    afterEach(function () {
+      React.unmountComponentAtNode(container);
     });
-  });
 
-  afterEach(function () {
-    React.unmountComponentAtNode(container);
-  });
+    it('render works', function () {
+      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-cell').length).to.above(0);
+    });
 
-  it('render works', function () {
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-cell').length).to.above(0);
-  });
+    it('onSelect works', function (done) {
+      var day;
+      calendar.setProps({
+        onSelect: function (d) {
+          expect(d.getDayOfMonth()).to.be(parseInt(day.props.children), 10);
+          done();
+        }
+      }, function () {
+        calendar = this;
+        day = TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-date')[5];
+        Simulate.click(day);
+      });
+    });
 
-  it('onSelect works', function (done) {
-    var day;
-    calendar.setProps({
-      onSelect: function (d) {
-        expect(d.getDayOfMonth()).to.be(parseInt(day.props.children), 10);
+    it('month panel shows', function (done) {
+      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-month-panel').length).to.be(0);
+      Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-select'));
+      setTimeout(function () {
+        expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-month-panel').length).to.be(1);
+        expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-month-panel-month').length).to.be(12);
         done();
-      }
-    }, function () {
-      calendar = this;
-      day = TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-date')[5];
-      Simulate.click(day);
+      }, 10);
+
     });
-  });
 
-  it('month panel shows', function (done) {
-    expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-month-panel').length).to.be(0);
-    Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-select'));
-    setTimeout(function () {
-      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-month-panel').length).to.be(1);
-      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-month-panel-month').length).to.be(12);
-      done();
-    }, 10);
+    it('year panel works', function (done) {
+      async.series([function (done) {
+        Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-select'));
+        setTimeout(done, 10);
+      }, function (done) {
+        Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-panel-year-select'));
+        setTimeout(done, 10);
+      }, function (done) {
+        expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-year-panel').length).to.be(1);
+        expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-year-panel-year').length).to.be(12);
+        done();
+      }], done);
+    });
 
+    it('decade panel works', function (done) {
+      async.series([function (done) {
+        Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-select'));
+        setTimeout(done, 10);
+      }, function (done) {
+        Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-panel-year-select'));
+        setTimeout(done, 10);
+      }, function (done) {
+        Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-year-panel-decade-select'));
+        setTimeout(done, 10);
+      }, function (done) {
+        expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-decade-panel').length).to.be(1);
+        expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-decade-panel-decade').length).to.be(12);
+        done();
+      }], done);
+    });
   });
-
-  it('year panel works', function (done) {
-    async.series([function (done) {
-      Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-select'));
-      setTimeout(done, 10);
-    }, function (done) {
-      Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-panel-year-select'));
-      setTimeout(done, 10);
-    }, function (done) {
-      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-year-panel').length).to.be(1);
-      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-year-panel-year').length).to.be(12);
-      done();
-    }], done);
-  });
-
-  it('decade panel works', function (done) {
-    async.series([function (done) {
-      Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-select'));
-      setTimeout(done, 10);
-    }, function (done) {
-      Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-month-panel-year-select'));
-      setTimeout(done, 10);
-    }, function (done) {
-      Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, 'rc-calendar-year-panel-decade-select'));
-      setTimeout(done, 10);
-    }, function (done) {
-      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-decade-panel').length).to.be(1);
-      expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, 'rc-calendar-decade-panel-decade').length).to.be(12);
-      done();
-    }], done);
-  });
-});
+}

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

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

7

decreased by-68.18%

Number of lines in readme file

137

increased by6.2%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

88342

decreased by-0.28%

Lines of code

1930

decreased by-20.41%

No dependency changes