rc-calendar
Advanced tools
Comparing version 1.2.4 to 1.3.0
@@ -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>) |
@@ -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')); | ||
```` |
@@ -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"> |
{ | ||
"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" |
# 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 |
/** @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); | ||
}); | ||
}); | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskThis module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.
Found 1 instance in 1 package
7
137
0
88342
1930