From d20a0ffb368c00fbcbae35f252e6c419fcb565de Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 12 Jul 2017 15:30:08 +0800 Subject: [PATCH 001/176] test: update snapshot --- tests/__snapshots__/Calendar.spec.jsx.snap | 4 ++-- tests/__snapshots__/RangeCalendar.spec.jsx.snap | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/__snapshots__/Calendar.spec.jsx.snap b/tests/__snapshots__/Calendar.spec.jsx.snap index 726b9ef0..daaf7028 100644 --- a/tests/__snapshots__/Calendar.spec.jsx.snap +++ b/tests/__snapshots__/Calendar.spec.jsx.snap @@ -59,7 +59,7 @@ exports[`Calendar render render correctly 1`] = ` role="button" title="选择月份" > - 三月 + 3月 - March + Mar - March + Mar - April + Apr Date: Mon, 24 Jul 2017 05:19:27 +0300 Subject: [PATCH 002/176] feat: add el_GR locale (Greek) (#279) * Add el_GR locale (Greek) * decadeSelect string translated to greek --- src/locale/el_GR.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/el_GR.js diff --git a/src/locale/el_GR.js b/src/locale/el_GR.js new file mode 100644 index 00000000..980218d4 --- /dev/null +++ b/src/locale/el_GR.js @@ -0,0 +1,27 @@ +export default { + today: 'Σήμερα', + now: 'Τώρα', + backToToday: 'Πίσω στη σημερινή μέρα', + ok: 'Ok', + clear: 'Καθαρισμός', + month: 'Μήνας', + year: 'Έτος', + timeSelect: 'Επιλογή ώρας', + dateSelect: 'Επιλογή ημερομηνίας', + monthSelect: 'Επιλογή μήνα', + yearSelect: 'Επιλογή έτους', + decadeSelect: 'Επιλογή δεκαετίας', + yearFormat: 'YYYY', + dateFormat: 'D/M/YYYY', + dayFormat: 'D', + dateTimeFormat: 'D/M/YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Προηγούμενος μήνας (PageUp)', + nextMonth: 'Επόμενος μήνας (PageDown)', + previousYear: 'Προηγούμενο έτος (Control + αριστερά)', + nextYear: 'Επόμενο έτος (Control + δεξιά)', + previousDecade: 'Προηγούμενη δεκαετία', + nextDecade: 'Επόμενη δεκαετία', + previousCentury: 'Προηγούμενος αιώνας', + nextCentury: 'Επόμενος αιώνας', +}; From c3780a0d9d5f611227e9e88a3103356310382ec3 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 24 Jul 2017 10:20:25 +0800 Subject: [PATCH 003/176] bump 8.4.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aa21b977..4cab56f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "8.4.6", + "version": "8.4.7", "description": "React Calendar", "keywords": [ "react", From 74da6c48bf8f2808645c480686d5f0bb7d5f12e9 Mon Sep 17 00:00:00 2001 From: coderpawz Date: Tue, 25 Jul 2017 21:43:20 -0400 Subject: [PATCH 004/176] update react refs to use callback instead of strings for more info see the documentation at https://facebook.github.io/react/docs/refs-and-the-dom.html --- src/Calendar.jsx | 5 ++++- src/RangeCalendar.js | 6 +++++- src/date/DateInput.js | 10 ++++++++-- src/mixin/CalendarMixin.js | 6 +++++- src/mixin/CommonMixin.js | 4 ++-- 5 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 028206f1..9f1ddcc2 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -202,6 +202,9 @@ const Calendar = createReactClass({ showTimePicker: false, }); }, + saveDateInput(dateInput) { + this.dateInputInstance = dateInput; + }, render() { const props = this.props; const { @@ -227,7 +230,7 @@ const Calendar = createReactClass({ }) : null; const dateInputElement = props.showDateInput ? (
Date: Wed, 26 Jul 2017 22:03:29 -0400 Subject: [PATCH 005/176] remove an unsed ref to dateInput --- src/Calendar.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 9f1ddcc2..4679c80f 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -202,9 +202,6 @@ const Calendar = createReactClass({ showTimePicker: false, }); }, - saveDateInput(dateInput) { - this.dateInputInstance = dateInput; - }, render() { const props = this.props; const { @@ -230,7 +227,6 @@ const Calendar = createReactClass({ }) : null; const dateInputElement = props.showDateInput ? ( Date: Wed, 26 Jul 2017 22:33:03 -0400 Subject: [PATCH 006/176] move saveRoot to CommonMixin remove saveRoot from Calendar and CalendarMixin --- src/RangeCalendar.js | 4 ---- src/mixin/CalendarMixin.js | 4 ---- src/mixin/CommonMixin.js | 4 ++++ 3 files changed, 4 insertions(+), 8 deletions(-) diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js index c9cf2500..e2806560 100644 --- a/src/RangeCalendar.js +++ b/src/RangeCalendar.js @@ -413,10 +413,6 @@ const RangeCalendar = createReactClass({ return month.isSameOrBefore(value[0], 'month'); }, - saveRoot(root) { - this.rootInstance = root; - }, - render() { const props = this.props; const state = this.state; diff --git a/src/mixin/CalendarMixin.js b/src/mixin/CalendarMixin.js index 9ae2b106..59f92783 100644 --- a/src/mixin/CalendarMixin.js +++ b/src/mixin/CalendarMixin.js @@ -66,10 +66,6 @@ const CalendarMixin = { this.setSelectedValue(value, cause); }, - saveRoot(root) { - this.rootInstance = root; - }, - renderRoot(newProps) { const props = this.props; const prefixCls = props.prefixCls; diff --git a/src/mixin/CommonMixin.js b/src/mixin/CommonMixin.js index bb27ebc9..7c4039c4 100644 --- a/src/mixin/CommonMixin.js +++ b/src/mixin/CommonMixin.js @@ -57,4 +57,8 @@ export default { this.rootInstance.focus(); } }, + + saveRoot(root) { + this.rootInstance = root; + }, }; From 30cb5561e8d2185633e1645f92aad95b3c45d48c Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Thu, 27 Jul 2017 13:46:47 +0800 Subject: [PATCH 007/176] bump 9.0.0 --- HISTORY.md | 3 +++ package.json | 8 +++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 8670a6c7..24a3f6bd 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,6 +1,9 @@ # History ---- +## 9.0.0 / 2017-07-27 +- Replace react string refs with function way [https://github.com/react-component/calendar/pull/282](#282) + ## 8.4.0 / 2017-05-31 - Supporting Bulgarian. diff --git a/package.json b/package.json index 4cab56f7..a0447407 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "8.4.7", + "version": "9.0.0", "description": "React Calendar", "keywords": [ "react", @@ -60,15 +60,13 @@ } }, "devDependencies": { - "async": "~0.9.0", + "async": "~2.5.0", "bootstrap": "~3.3.2", "coveralls": "^2.11.15", "enzyme": "^2.8.0", "enzyme-to-json": "^1.5.0", - "jest": "^19.0.0", - "jquery": "~1.11.3", + "jest": "^20.0.4", "mockdate": "^2.0.1", - "object-assign": "4.x", "pre-commit": "1.x", "rc-dialog": "^6.0.1", "rc-select": "^6.0.6", From 4f9d518b84328f16cbdae719a42ac086ac626488 Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Fri, 28 Jul 2017 13:53:01 +0800 Subject: [PATCH 008/176] docs: fix md syntax --- HISTORY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/HISTORY.md b/HISTORY.md index 24a3f6bd..0d6590e7 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,7 +2,7 @@ ---- ## 9.0.0 / 2017-07-27 -- Replace react string refs with function way [https://github.com/react-component/calendar/pull/282](#282) +- Replace react string refs with function way [#282](https://github.com/react-component/calendar/pull/282) ## 8.4.0 / 2017-05-31 From 329186ab31b64063d24635b51d200eb3a9a48b39 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Aug 2017 10:29:17 +0800 Subject: [PATCH 009/176] Controlled Panels (#284) * refactor: simply relation between header and panels * feat: make DatePicker's mode and onPanelChange works * feat: make RangePicker's mode and onPanelChange works * test: add test cases and fix some bugs * chore: update API and API docs * docs: add demo about control panel * chore: update details --- README.md | 24 + examples/control-panel.html | 0 examples/control-panel.js | 84 + src/Calendar.jsx | 52 +- src/RangeCalendar.js | 66 +- src/calendar/CalendarHeader.jsx | 82 +- src/month/MonthPanel.jsx | 27 +- src/range-calendar/CalendarPart.js | 2 + src/year/YearPanel.jsx | 31 +- tests/Calendar.spec.jsx | 65 + tests/RangeCalendar.spec.jsx | 65 + tests/__snapshots__/Calendar.spec.jsx.snap | 1928 +++++++++ .../__snapshots__/RangeCalendar.spec.jsx.snap | 3816 +++++++++++++++++ 13 files changed, 6111 insertions(+), 131 deletions(-) create mode 100644 examples/control-panel.html create mode 100644 examples/control-panel.js diff --git a/README.md b/README.md index 2acaf168..9d4af14f 100644 --- a/README.md +++ b/README.md @@ -212,6 +212,18 @@ http://react-component.github.io/calendar/examples/index.html date input's placeholder + + mode + enum('time', 'date', 'month', 'year', 'decade') + 'date' + controll which kind of panel should be shown + + + onPanelChange + Function(date: moment, mode) + + called when panel changed + @@ -348,6 +360,18 @@ http://react-component.github.io/calendar/examples/index.html both whether fix start or end selected value. check start-end-range example + + mode + enum('date', 'month', 'year', 'decade')[] + ['date', 'date'] + controll which kind of panels should be shown + + + onPanelChange + Function(date: moment[], mode) + + called when panels changed + diff --git a/examples/control-panel.html b/examples/control-panel.html new file mode 100644 index 00000000..e69de29b diff --git a/examples/control-panel.js b/examples/control-panel.js new file mode 100644 index 00000000..6de7eb0c --- /dev/null +++ b/examples/control-panel.js @@ -0,0 +1,84 @@ +/* eslint react/no-multi-comp:0, no-console:0, no-unused-vars:0 */ +import 'rc-calendar/assets/index.less'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import Calendar from 'rc-calendar/src'; +import RangeCalendar from 'rc-calendar/src/RangeCalendar'; + +import Select, { Option } from 'rc-select'; +import 'rc-select/assets/index.css'; + +const App = React.createClass({ + getInitialState() { + return { + mode: 'month', + rangeStartMode: 'date', + rangeEndMode: 'date', + }; + }, + onModeChange(key) { + return function _handleChange(e) { + let mode; + if (e && e.target) { + mode = e.target.value; + } else { + mode = e; + } + console.log('change to: ', mode); + this.setState({ + [key]: mode, + }); + }.bind(this); + }, + handlePanelChange(...args) { + console.log('on panel change', ...args); + }, + handleRangePanelChange(...args) { + console.log('on range panel change', ...args); + }, + render() { + return ( +
+

controle Calendar panel

+ + +

controle RangeCalendar panel

+ + + +
+ ); + }, +}); + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 4679c80f..fdbd14c3 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -50,27 +50,28 @@ function goDay(direction) { const Calendar = createReactClass({ propTypes: { - disabledDate: PropTypes.func, - disabledTime: PropTypes.any, + prefixCls: PropTypes.string, + className: PropTypes.string, + style: PropTypes.object, + defaultValue: PropTypes.object, value: PropTypes.object, selectedValue: PropTypes.object, - defaultValue: PropTypes.object, - className: PropTypes.string, + mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']), locale: PropTypes.object, + showDateInput: PropTypes.bool, showWeekNumber: PropTypes.bool, - style: PropTypes.object, showToday: PropTypes.bool, - showDateInput: PropTypes.bool, - visible: PropTypes.bool, + showOk: PropTypes.bool, onSelect: PropTypes.func, onOk: PropTypes.func, - showOk: PropTypes.bool, - prefixCls: PropTypes.string, onKeyDown: PropTypes.func, timePicker: PropTypes.element, dateInputPlaceholder: PropTypes.any, onClear: PropTypes.func, onChange: PropTypes.func, + onPanelChange: PropTypes.func, + disabledDate: PropTypes.func, + disabledTime: PropTypes.any, renderFooter: PropTypes.func, renderSidebar: PropTypes.func, }, @@ -83,13 +84,19 @@ const Calendar = createReactClass({ showDateInput: true, timePicker: null, onOk: noop, + onPanelChange: noop, }; }, getInitialState() { return { - showTimePicker: false, + mode: this.props.mode || 'date', }; }, + componentWillReceiveProps(nextProps) { + if ('mode' in nextProps && this.state.mode !== nextProps.mode) { + this.setState({ mode: nextProps.mode }); + } + }, onKeyDown(event) { if (event.target.nodeName.toLowerCase() === 'input') { return undefined; @@ -189,28 +196,31 @@ const Calendar = createReactClass({ source: 'todayButton', }); }, + onPanelChange(mode) { + const { props, state } = this; + if (!('mode' in props)) { + this.setState({ mode }); + } + props.onPanelChange(state.value, mode); + }, getRootDOMNode() { return ReactDOM.findDOMNode(this); }, openTimePicker() { - this.setState({ - showTimePicker: true, - }); + this.onPanelChange('time'); }, closeTimePicker() { - this.setState({ - showTimePicker: false, - }); + this.onPanelChange('date'); }, render() { - const props = this.props; + const { props, state } = this; const { locale, prefixCls, disabledDate, dateInputPlaceholder, timePicker, disabledTime, } = props; - const state = this.state; - const { value, selectedValue, showTimePicker } = state; + const { value, selectedValue, mode } = state; + const showTimePicker = mode === 'time'; const disabledTimeConfig = showTimePicker && disabledTime && timePicker ? getTimeConfig(selectedValue, disabledTime) : null; @@ -248,8 +258,10 @@ const Calendar = createReactClass({
diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js index e2806560..6fe88a79 100644 --- a/src/RangeCalendar.js +++ b/src/RangeCalendar.js @@ -10,13 +10,25 @@ import TimePickerButton from './calendar/TimePickerButton'; import CommonMixin from './mixin/CommonMixin'; import { syncTime, getTodayTime, isAllowedDate } from './util/'; -function noop() { -} +function noop() {} function isEmptyArray(arr) { return Array.isArray(arr) && (arr.length === 0 || arr.every(i => !i)); } +function isArraysEqual(a, b) { + if (a === b) return true; + if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') { + return false; + } + if (a.length !== b.length) return false; + + for (let i = 0; i < a.length; ++i) { + if (a[i] !== b[i]) return false; + } + return true; +} + function getValueFromSelectedValue(selectedValue) { const [start, end] = selectedValue; const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end; @@ -62,6 +74,7 @@ const RangeCalendar = createReactClass({ defaultValue: PropTypes.any, value: PropTypes.any, hoverValue: PropTypes.any, + mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])), timePicker: PropTypes.any, showOk: PropTypes.bool, showToday: PropTypes.bool, @@ -74,6 +87,7 @@ const RangeCalendar = createReactClass({ onSelect: PropTypes.func, onValueChange: PropTypes.func, onHoverChange: PropTypes.func, + onPanelChange: PropTypes.func, format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), onClear: PropTypes.func, type: PropTypes.any, @@ -89,6 +103,7 @@ const RangeCalendar = createReactClass({ defaultSelectedValue: [], onValueChange: noop, onHoverChange: noop, + onPanelChange: noop, disabledTime: noop, showToday: true, }; @@ -105,12 +120,12 @@ const RangeCalendar = createReactClass({ hoverValue: props.hoverValue || [], value, showTimePicker: false, - isStartMonthYearPanelShow: false, - isEndMonthYearPanelShow: false, + mode: props.mode || ['date', 'date'], }; }, componentWillReceiveProps(nextProps) { + const { state } = this; const newState = {}; if ('value' in nextProps) { if (nextProps.value) { @@ -120,7 +135,7 @@ const RangeCalendar = createReactClass({ } this.setState(newState); } - if ('hoverValue' in nextProps) { + if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) { this.setState({ hoverValue: nextProps.hoverValue }); } if ('selectedValue' in nextProps) { @@ -128,6 +143,9 @@ const RangeCalendar = createReactClass({ newState.prevSelectedValue = nextProps.selectedValue; this.setState(newState); } + if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) { + this.setState({ mode: nextProps.mode }); + } }, onDatePanelEnter() { @@ -243,12 +261,26 @@ const RangeCalendar = createReactClass({ return this.fireValueChange(value); }, - onStartPanelChange({ showMonthPanel, showYearPanel }) { - this.setState({ isStartMonthYearPanelShow: showMonthPanel || showYearPanel }); + onStartPanelChange(mode) { + const { props, state } = this; + const newMode = [mode, state.mode[1]]; + if (!('mode' in props)) { + this.setState({ + mode: newMode, + }); + } + props.onPanelChange(state.value, newMode); }, - onEndPanelChange({ showMonthPanel, showYearPanel }) { - this.setState({ isEndMonthYearPanelShow: showMonthPanel || showYearPanel }); + onEndPanelChange(mode) { + const { props, state } = this; + const newMode = [state.mode[0], mode]; + if (!('mode' in props)) { + this.setState({ + mode: newMode, + }); + } + props.onPanelChange(state.value, newMode); }, getStartValue() { @@ -316,6 +348,10 @@ const RangeCalendar = createReactClass({ isAllowedDate(selectedValue[1], this.props.disabledDate, this.disabledEndTime); }, + isMonthYearPanelShow(mode) { + return ['month', 'year', 'decade'].indexOf(mode) > -1; + }, + hasSelectedValue() { const { selectedValue } = this.state; return !!selectedValue[1] && !!selectedValue[0]; @@ -414,9 +450,7 @@ const RangeCalendar = createReactClass({ }, render() { - const props = this.props; - const state = this.state; - const { showTimePicker, isStartMonthYearPanelShow, isEndMonthYearPanelShow } = state; + const { props, state } = this; const { prefixCls, dateInputPlaceholder, timePicker, showOk, locale, showClear, @@ -425,6 +459,8 @@ const RangeCalendar = createReactClass({ const { hoverValue, selectedValue, + mode, + showTimePicker, } = state; const className = { [props.className]: !!props.className, @@ -501,6 +537,7 @@ const RangeCalendar = createReactClass({ disabledMonth={this.disabledStartMonth} format={this.getFormat()} value={startValue} + mode={mode[0]} placeholder={placeholder1} onInputSelect={this.onStartInputSelect} onValueChange={this.onStartValueChange} @@ -508,7 +545,7 @@ const RangeCalendar = createReactClass({ timePicker={timePicker} showTimePicker={showTimePicker} enablePrev - enableNext={!isClosestMonths || isEndMonthYearPanelShow} + enableNext={!isClosestMonths || this.isMonthYearPanelShow(mode[1])} /> ~
diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx index 2b52ebd6..bd51c363 100644 --- a/src/calendar/CalendarHeader.jsx +++ b/src/calendar/CalendarHeader.jsx @@ -1,9 +1,10 @@ import React from 'react'; import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; +import toFragment from 'rc-util/lib/Children/mapSelf'; import MonthPanel from '../month/MonthPanel'; import YearPanel from '../year/YearPanel'; -import toFragment from 'rc-util/lib/Children/mapSelf'; +import DecadePanel from '../decade/DecadePanel'; function goMonth(direction) { const next = this.props.value.clone(); @@ -27,8 +28,6 @@ const CalendarHeader = createReactClass({ value: PropTypes.object, onValueChange: PropTypes.func, showTimePicker: PropTypes.bool, - showMonthPanel: PropTypes.bool, - showYearPanel: PropTypes.bool, onPanelChange: PropTypes.func, locale: PropTypes.object, enablePrev: PropTypes.any, @@ -50,36 +49,24 @@ const CalendarHeader = createReactClass({ this.previousMonth = goMonth.bind(this, -1); this.nextYear = goYear.bind(this, 1); this.previousYear = goYear.bind(this, -1); - const { showMonthPanel, showYearPanel } = this.props; - return { showMonthPanel, showYearPanel }; + return { yearPanelReferer: null }; }, - componentWillReceiveProps() { - const props = this.props; - if ('showMonthpanel' in props) { - this.setState({ showMonthPanel: props.showMonthPanel }); - } - if ('showYearpanel' in props) { - this.setState({ showYearPanel: props.showYearPanel }); - } + onMonthSelect(value) { + this.props.onPanelChange('date'); + this.props.onValueChange(value); }, - onSelect(value) { - this.triggerPanelChange({ - showMonthPanel: 0, - showYearPanel: 0, - }); + onYearSelect(value) { + const referer = this.state.yearPanelReferer; + this.setState({ yearPanelReferer: null }); + this.props.onPanelChange(referer); this.props.onValueChange(value); }, - triggerPanelChange(panelStatus) { - if (!('showMonthPanel' in this.props)) { - this.setState({ showMonthPanel: panelStatus.showMonthPanel }); - } - if (!('showYearPanel' in this.props)) { - this.setState({ showYearPanel: panelStatus.showYearPanel }); - } - this.props.onPanelChange(panelStatus); + onDecadeSelect(value) { + this.props.onPanelChange('year'); + this.props.onValueChange(value); }, monthYearElement(showTimePicker) { @@ -93,7 +80,7 @@ const CalendarHeader = createReactClass({ const year = ( this.showYearPanel('date')} title={locale.yearSelect} > {value.format(locale.yearFormat)} @@ -127,24 +114,24 @@ const CalendarHeader = createReactClass({ }, showMonthPanel() { - this.triggerPanelChange({ - showMonthPanel: 1, - showYearPanel: 0, - }); + this.props.onPanelChange('month'); }, - showYearPanel() { - this.triggerPanelChange({ - showMonthPanel: 0, - showYearPanel: 1, - }); + showYearPanel(referer) { + this.setState({ yearPanelReferer: referer }); + this.props.onPanelChange('year'); + }, + + showDecadePanel() { + this.props.onPanelChange('decade'); }, render() { - const { props, state } = this; + const { props } = this; const { prefixCls, locale, + mode, value, showTimePicker, enableNext, @@ -153,23 +140,36 @@ const CalendarHeader = createReactClass({ } = props; let panel = null; - if (state.showMonthPanel) { + if (mode === 'month') { panel = ( this.showYearPanel('month')} disabledDate={disabledMonth} /> ); - } else if (state.showYearPanel) { + } + if (mode === 'year') { panel = ( + ); + } + if (mode === 'decade') { + panel = ( + ); } diff --git a/src/month/MonthPanel.jsx b/src/month/MonthPanel.jsx index f6997005..4eebd521 100644 --- a/src/month/MonthPanel.jsx +++ b/src/month/MonthPanel.jsx @@ -1,7 +1,6 @@ import React from 'react'; import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; -import YearPanel from '../year/YearPanel'; import MonthTable from './MonthTable'; function goYear(direction) { @@ -47,14 +46,6 @@ const MonthPanel = createReactClass({ } }, - onYearPanelSelect(current) { - this.setState({ - showYearPanel: 0, - }); - this.setAndChangeValue(current); - }, - - setAndChangeValue(value) { this.setValue(value); this.props.onChange(value); @@ -73,12 +64,6 @@ const MonthPanel = createReactClass({ } }, - showYearPanel() { - this.setState({ - showYearPanel: 1, - }); - }, - render() { const props = this.props; const value = this.state.value; @@ -87,15 +72,6 @@ const MonthPanel = createReactClass({ const locale = props.locale; const year = value.year(); const prefixCls = this.prefixCls; - let yearPanel; - if (this.state.showYearPanel) { - yearPanel = (); - } return (
@@ -110,7 +86,7 @@ const MonthPanel = createReactClass({ {year} @@ -136,7 +112,6 @@ const MonthPanel = createReactClass({ />
- {yearPanel}
); }, }); diff --git a/src/range-calendar/CalendarPart.js b/src/range-calendar/CalendarPart.js index 494e4c0c..7d0d94e8 100644 --- a/src/range-calendar/CalendarPart.js +++ b/src/range-calendar/CalendarPart.js @@ -32,6 +32,7 @@ const CalendarPart = createReactClass({ value, hoverValue, selectedValue, + mode, direction, locale, format, placeholder, disabledDate, timePicker, disabledTime, @@ -79,6 +80,7 @@ const CalendarPart = createReactClass({
{ - this[method] = this[method].bind(this); - }); - } - - onDecadePanelSelect(current) { - this.setState({ - value: current, - showDecadePanel: 0, - }); } years() { @@ -64,13 +53,6 @@ class YearPanel extends React.Component { } return years; } - - showDecadePanel() { - this.setState({ - showDecadePanel: 1, - }); - } - render() { const props = this.props; const value = this.state.value; @@ -115,16 +97,6 @@ class YearPanel extends React.Component { return ({tds}); }); - let decadePanel; - if (this.state.showDecadePanel) { - decadePanel = (); - } - return (
@@ -138,7 +110,7 @@ class YearPanel extends React.Component { @@ -162,7 +134,6 @@ class YearPanel extends React.Component {
- {decadePanel}
); } } diff --git a/tests/Calendar.spec.jsx b/tests/Calendar.spec.jsx index a3c370e2..7c4066d1 100644 --- a/tests/Calendar.spec.jsx +++ b/tests/Calendar.spec.jsx @@ -86,6 +86,71 @@ describe('Calendar', () => { }); }); + describe('controlled panels', () => { + it('render controlled panels correctly', () => { + const MonthPicker = mount(); + expect(renderToJson(MonthPicker.render())).toMatchSnapshot(); + MonthPicker.find('.rc-calendar-month-panel-year-select').at(0).simulate('click'); + expect(MonthPicker.find('.rc-calendar-year-panel').length).toBe(0); + expect(MonthPicker.find('.rc-calendar-month-panel').length).toBe(1); + + const YearPicker = mount(); + expect(renderToJson(YearPicker.render())).toMatchSnapshot(); + YearPicker.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); + expect(YearPicker.find('.rc-calendar-decade-panel').length).toBe(0); + expect(YearPicker.find('.rc-calendar-year-panel').length).toBe(1); + }); + + it('support controlled mode', () => { + const timePicker = ; + class ControlledCalendar extends React.Component { + state = { mode: 'date' }; + + handlePanelChange = (value, mode) => { + this.setState({ mode }); + } + + render() { + return ( + + ); + } + } + const wrapper = mount(); + + wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); + expect(wrapper.find('.rc-calendar-time-picker').length).toBe(1); + wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); + expect(wrapper.find('.rc-calendar-time-picker').length).toBe(0); + + wrapper.find('.rc-calendar-month-select').simulate('click'); + expect(wrapper.find('.rc-calendar-month-panel').length).toBe(1); + wrapper.find('.rc-calendar-month-panel-year-select').simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(1); + wrapper.find('.rc-calendar-year-panel-decade-select').simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(1); + wrapper.find('.rc-calendar-decade-panel-selected-cell').simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); + wrapper.find('.rc-calendar-year-panel-selected-cell').simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0); + wrapper.find('.rc-calendar-month-panel-selected-cell').simulate('click'); + expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0); + + wrapper.find('.rc-calendar-year-select').simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(1); + wrapper.find('.rc-calendar-year-panel-decade-select').simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(1); + wrapper.find('.rc-calendar-decade-panel-selected-cell').simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); + wrapper.find('.rc-calendar-year-panel-selected-cell').simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0); + }); + }); + describe('after render', () => { beforeEach((done) => { ReactDOM.render(, container, function ok() { diff --git a/tests/RangeCalendar.spec.jsx b/tests/RangeCalendar.spec.jsx index ea9fc83a..7691d8d0 100644 --- a/tests/RangeCalendar.spec.jsx +++ b/tests/RangeCalendar.spec.jsx @@ -257,4 +257,69 @@ describe('RangeCalendar', () => { expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('3/18/2017 23:59:59'); }); }); + + describe('controlled panels', () => { + it('render controlled panels correctly', () => { + const RangeMonthPicker = mount(); + expect(renderToJson(RangeMonthPicker.render())).toMatchSnapshot(); + RangeMonthPicker.find('.rc-calendar-month-panel-year-select').at(0).simulate('click'); + RangeMonthPicker.find('.rc-calendar-month-panel-year-select').at(1).simulate('click'); + expect(RangeMonthPicker.find('.rc-calendar-year-panel').length).toBe(0); + expect(RangeMonthPicker.find('.rc-calendar-month-panel').length).toBe(2); + + const RangeYearPicker = mount(); + expect(renderToJson(RangeYearPicker.render())).toMatchSnapshot(); + RangeYearPicker.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); + RangeYearPicker.find('.rc-calendar-year-panel-decade-select').at(1).simulate('click'); + expect(RangeYearPicker.find('.rc-calendar-decade-panel').length).toBe(0); + expect(RangeYearPicker.find('.rc-calendar-year-panel').length).toBe(2); + }); + + it('support controlled mode', () => { + class ControlledRangeCalendar extends React.Component { + state = { mode: ['date', 'date'] }; + + handlePanelChange = (value, mode) => { + this.setState({ mode }); + } + + render() { + return ; + } + } + const wrapper = mount(); + + wrapper.find('.rc-calendar-month-select').at(0).simulate('click'); + wrapper.find('.rc-calendar-month-select').at(1).simulate('click'); + expect(wrapper.find('.rc-calendar-month-panel').length).toBe(2); + wrapper.find('.rc-calendar-month-panel-year-select').at(0).simulate('click'); + wrapper.find('.rc-calendar-month-panel-year-select').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(2); + wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); + wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(2); + wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); + wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); + wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click'); + wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0); + wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click'); + wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0); + + wrapper.find('.rc-calendar-year-select').at(0).simulate('click'); + wrapper.find('.rc-calendar-year-select').at(1).simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(2); + wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); + wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(2); + wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); + wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); + wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click'); + wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click'); + expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0); + }); + }); }); diff --git a/tests/__snapshots__/Calendar.spec.jsx.snap b/tests/__snapshots__/Calendar.spec.jsx.snap index daaf7028..fd0f2968 100644 --- a/tests/__snapshots__/Calendar.spec.jsx.snap +++ b/tests/__snapshots__/Calendar.spec.jsx.snap @@ -1,5 +1,1933 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Calendar controlled panels render controlled panels correctly 1`] = ` +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+
+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+
+ + + Today + + +
+
+
+
+`; + +exports[`Calendar controlled panels render controlled panels correctly 2`] = ` +
+
+
+
+ +
+ +
+
+
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+
+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+
+ + + Today + + +
+
+
+
+`; + exports[`Calendar render render correctly 1`] = `
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+
+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+
+
+ + ~ + +
+
+
+ +
+
+
+
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+
+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+
+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+
+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+
+
+
+
+
+
+
+ + Back to today + +
+
+
+
+`; + +exports[`RangeCalendar controlled panels render controlled panels correctly 2`] = ` +
+
+
+
+
+
+ +
+
+
+
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+
+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+
+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+
+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+
+
+ + ~ + +
+
+
+ +
+
+
+
+ +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Su + + + + Mo + + + + Tu + + + + We + + + + Th + + + + Fr + + + + Sa + +
+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+ 		+
+ 1 +
+
+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+
+
+ 9 +
+ 		+
+ 10 +
+ 		+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+
+
+ 16 +
+ 		+
+ 17 +
+ 		+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+
+
+ 23 +
+ 		+
+ 24 +
+ 		+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+
+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+
+
+
+
+
+
+
+ + Back to today + +
+
+
+
+`; + exports[`RangeCalendar render hoverValue correctly 1`] = `
Date: Tue, 1 Aug 2017 10:32:02 +0800 Subject: [PATCH 010/176] Bump 9.1.0 --- .travis.yml | 1 + HISTORY.md | 3 +++ package.json | 16 ++++++++-------- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/.travis.yml b/.travis.yml index 8fd19782..ee46f7e3 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,6 +5,7 @@ sudo: false notifications: email: - yiminghe@gmail.com + - hust2012jiangkai@gmail.com node_js: - 6.9.1 diff --git a/HISTORY.md b/HISTORY.md index 0d6590e7..00bfc15b 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,6 +1,9 @@ # History ---- +## 9.1.0 / 2017-07-27 +- Support control panel [#284](https://github.com/react-component/calendar/pull/284) + ## 9.0.0 / 2017-07-27 - Replace react string refs with function way [#282](https://github.com/react-component/calendar/pull/282) diff --git a/package.json b/package.json index a0447407..6ac14ae6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.0.0", + "version": "9.1.0", "description": "React Calendar", "keywords": [ "react", @@ -19,12 +19,6 @@ ], "main": "lib/index", "module": "es/index", - "entry": { - "rc-calendar": [ - "./assets/index.less", - "./src/index.js" - ] - }, "homepage": "http://github.com/react-component/calendar", "author": "yiminghe@gmail.com", "repository": { @@ -36,7 +30,13 @@ }, "licenses": "MIT", "config": { - "port": 8002 + "port": 8002, + "entry": { + "rc-calendar": [ + "./assets/index.less", + "./src/index.js" + ] + } }, "scripts": { "build": "rc-tools run build", From 1ae7bd90776cfb272bdec3fe96105a909c6578ac Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Aug 2017 14:52:43 +0800 Subject: [PATCH 011/176] fix: MonthCalendar should work --- src/MonthCalendar.jsx | 60 +++++++++++++++++++++++++++++++++---- tests/MonthCalendar.spec.js | 10 +++++++ 2 files changed, 65 insertions(+), 5 deletions(-) diff --git a/src/MonthCalendar.jsx b/src/MonthCalendar.jsx index 2d3ff7d0..889cd2fe 100644 --- a/src/MonthCalendar.jsx +++ b/src/MonthCalendar.jsx @@ -3,6 +3,8 @@ import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import KeyCode from 'rc-util/lib/KeyCode'; import MonthPanel from './month/MonthPanel'; +import YearPanel from './year/YearPanel'; +import DecadePanel from './decade/DecadePanel'; import CalendarMixin from './mixin/CalendarMixin'; import CommonMixin from './mixin/CommonMixin'; @@ -13,6 +15,10 @@ const MonthCalendar = createReactClass({ }, mixins: [CommonMixin, CalendarMixin], + getInitialState() { + return { mode: 'month' }; + }, + onKeyDown(event) { const keyCode = event.keyCode; const ctrlKey = event.ctrlKey || event.metaKey; @@ -60,21 +66,65 @@ const MonthCalendar = createReactClass({ } }, + handleYearPanelShow() { + this.setState({ mode: 'year' }); + }, + + handleYearSelect(...args) { + this.setState({ mode: 'month' }); + this.onSelect(...args); + }, + + handleDecadePanelShow() { + this.setState({ mode: 'decade' }); + }, + + handleDecadeSelect(...args) { + this.setState({ mode: 'year' }); + this.onSelect(...args); + }, + render() { - const props = this.props; - const children = ( + const { props, state } = this; + const { mode, value } = state; + const children = [ - ); + onYearPanelShow={this.handleYearPanelShow} + />, + ]; + if (mode === 'year') { + children.push( + + ); + } + if (mode === 'decade') { + children.push( + + ); + } return this.renderRoot({ children, }); diff --git a/tests/MonthCalendar.spec.js b/tests/MonthCalendar.spec.js index 69598b27..565c5eb6 100644 --- a/tests/MonthCalendar.spec.js +++ b/tests/MonthCalendar.spec.js @@ -6,6 +6,16 @@ import moment from 'moment'; import MonthCalendar from '../src/MonthCalendar'; describe('MonthCalendar', () => { + it('year or decade panel work correctly', () => { + const format = 'YYYY-MM'; + const wrapper = mount(); + wrapper.find('.rc-calendar-month-panel-year-select').simulate('click'); + wrapper.find('.rc-calendar-year-panel-decade-select').simulate('click'); + wrapper.find('.rc-calendar-decade-panel-selected-cell').simulate('click'); + wrapper.find('.rc-calendar-year-panel-selected-cell').simulate('click'); + wrapper.find('.rc-calendar-month-panel-selected-cell').simulate('click'); + expect(wrapper.state('selectedValue').format(format)).toBe('2010-03'); + }); describe('keyboard', () => { it('enter to select works', () => { const onSelect = jest.fn(); From 956e87bd3569767b3860248f2e9fa31cea0a74d8 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Aug 2017 15:26:20 +0800 Subject: [PATCH 012/176] fix: onPanelChange's value should be new show value --- src/Calendar.jsx | 8 ++++---- src/RangeCalendar.js | 10 ++++++---- src/calendar/CalendarHeader.jsx | 13 +++++++------ tests/Calendar.spec.jsx | 6 +++++- tests/RangeCalendar.spec.jsx | 6 +++++- 5 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/Calendar.jsx b/src/Calendar.jsx index fdbd14c3..cd122c11 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -196,21 +196,21 @@ const Calendar = createReactClass({ source: 'todayButton', }); }, - onPanelChange(mode) { + onPanelChange(value, mode) { const { props, state } = this; if (!('mode' in props)) { this.setState({ mode }); } - props.onPanelChange(state.value, mode); + props.onPanelChange(value || state.value, mode); }, getRootDOMNode() { return ReactDOM.findDOMNode(this); }, openTimePicker() { - this.onPanelChange('time'); + this.onPanelChange(null, 'time'); }, closeTimePicker() { - this.onPanelChange('date'); + this.onPanelChange(null, 'date'); }, render() { const { props, state } = this; diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js index 6fe88a79..41a87cc7 100644 --- a/src/RangeCalendar.js +++ b/src/RangeCalendar.js @@ -261,7 +261,7 @@ const RangeCalendar = createReactClass({ return this.fireValueChange(value); }, - onStartPanelChange(mode) { + onStartPanelChange(value, mode) { const { props, state } = this; const newMode = [mode, state.mode[1]]; if (!('mode' in props)) { @@ -269,10 +269,11 @@ const RangeCalendar = createReactClass({ mode: newMode, }); } - props.onPanelChange(state.value, newMode); + const newValue = [value || state.value[0], state.value[1]]; + props.onPanelChange(newValue, newMode); }, - onEndPanelChange(mode) { + onEndPanelChange(value, mode) { const { props, state } = this; const newMode = [state.mode[0], mode]; if (!('mode' in props)) { @@ -280,7 +281,8 @@ const RangeCalendar = createReactClass({ mode: newMode, }); } - props.onPanelChange(state.value, newMode); + const newValue = [state.value[0], value || state.value[1]]; + props.onPanelChange(newValue, newMode); }, getStartValue() { diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx index bd51c363..98793534 100644 --- a/src/calendar/CalendarHeader.jsx +++ b/src/calendar/CalendarHeader.jsx @@ -53,19 +53,19 @@ const CalendarHeader = createReactClass({ }, onMonthSelect(value) { - this.props.onPanelChange('date'); + this.props.onPanelChange(value, 'date'); this.props.onValueChange(value); }, onYearSelect(value) { const referer = this.state.yearPanelReferer; this.setState({ yearPanelReferer: null }); - this.props.onPanelChange(referer); + this.props.onPanelChange(value, referer); this.props.onValueChange(value); }, onDecadeSelect(value) { - this.props.onPanelChange('year'); + this.props.onPanelChange(value, 'year'); this.props.onValueChange(value); }, @@ -114,16 +114,17 @@ const CalendarHeader = createReactClass({ }, showMonthPanel() { - this.props.onPanelChange('month'); + // null means that users' interaction doesn't change value + this.props.onPanelChange(null, 'month'); }, showYearPanel(referer) { this.setState({ yearPanelReferer: referer }); - this.props.onPanelChange('year'); + this.props.onPanelChange(null, 'year'); }, showDecadePanel() { - this.props.onPanelChange('decade'); + this.props.onPanelChange(null, 'decade'); }, render() { diff --git a/tests/Calendar.spec.jsx b/tests/Calendar.spec.jsx index 7c4066d1..2c7aa88f 100644 --- a/tests/Calendar.spec.jsx +++ b/tests/Calendar.spec.jsx @@ -103,10 +103,12 @@ describe('Calendar', () => { it('support controlled mode', () => { const timePicker = ; + let value = null; class ControlledCalendar extends React.Component { state = { mode: 'date' }; - handlePanelChange = (value, mode) => { + handlePanelChange = (v, mode) => { + value = v; this.setState({ mode }); } @@ -133,12 +135,14 @@ describe('Calendar', () => { expect(wrapper.find('.rc-calendar-year-panel').length).toBe(1); wrapper.find('.rc-calendar-year-panel-decade-select').simulate('click'); expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(1); + expect(value.isSame(moment(), 'day')); wrapper.find('.rc-calendar-decade-panel-selected-cell').simulate('click'); expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); wrapper.find('.rc-calendar-year-panel-selected-cell').simulate('click'); expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0); wrapper.find('.rc-calendar-month-panel-selected-cell').simulate('click'); expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0); + expect(value.isSame(moment('2010-03-29'), 'day')); wrapper.find('.rc-calendar-year-select').simulate('click'); expect(wrapper.find('.rc-calendar-year-panel').length).toBe(1); diff --git a/tests/RangeCalendar.spec.jsx b/tests/RangeCalendar.spec.jsx index 7691d8d0..a5229ce2 100644 --- a/tests/RangeCalendar.spec.jsx +++ b/tests/RangeCalendar.spec.jsx @@ -276,10 +276,12 @@ describe('RangeCalendar', () => { }); it('support controlled mode', () => { + let value = null; class ControlledRangeCalendar extends React.Component { state = { mode: ['date', 'date'] }; - handlePanelChange = (value, mode) => { + handlePanelChange = (v, mode) => { + value = v; this.setState({ mode }); } @@ -298,6 +300,7 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(2); + expect(value[0].isSame(moment(), 'day'), expect(value[1].isSame(moment().add(1, 'month'), 'day'))); wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); @@ -307,6 +310,7 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click'); wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0); + expect(value[0].isSame(moment('2010-03-29'), 'day'), expect(value[1].isSame(moment('2010-04-29'), 'day'))); wrapper.find('.rc-calendar-year-select').at(0).simulate('click'); wrapper.find('.rc-calendar-year-select').at(1).simulate('click'); From fe6741346a873d3dd3b4b0ca64473b23716a5204 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Aug 2017 15:27:12 +0800 Subject: [PATCH 013/176] bump 9.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6ac14ae6..4a692108 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.0", + "version": "9.1.1", "description": "React Calendar", "keywords": [ "react", From c6bdd676f28095bf661c539cc0244de6d8d81807 Mon Sep 17 00:00:00 2001 From: paranoidjk Date: Tue, 1 Aug 2017 16:51:47 +0800 Subject: [PATCH 014/176] docs: add hoverValue https://github.com/react-component/calendar/pull/261 --- README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/README.md b/README.md index 9d4af14f..a2221081 100644 --- a/README.md +++ b/README.md @@ -372,6 +372,18 @@ http://react-component.github.io/calendar/examples/index.html called when panels changed + + hoverValue + moment[] + + controll hover value + + + onHoverChange + Function(hoverValue: moment[]) + + called when hover value change + From 136f123dbaf1a9e9c9d7b7325204eebee1636cec Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Aug 2017 17:06:38 +0800 Subject: [PATCH 015/176] refactor: simplify the implementation of MonthCalendar --- assets/common/RangeCalendar.less | 3 +- assets/index.less | 6 ++- src/MonthCalendar.jsx | 75 ++++++++------------------------ src/calendar/CalendarHeader.jsx | 8 +++- 4 files changed, 33 insertions(+), 59 deletions(-) diff --git a/assets/common/RangeCalendar.less b/assets/common/RangeCalendar.less index f2aa4411..286ae4a2 100644 --- a/assets/common/RangeCalendar.less +++ b/assets/common/RangeCalendar.less @@ -94,7 +94,8 @@ } .@{prefixClass}-year-panel, - .@{prefixClass}-month-panel { + .@{prefixClass}-month-panel, + .@{prefixClass}-decade-panel { top: @input-box-height; } .@{prefixClass}-month-panel .@{prefixClass}-year-panel { diff --git a/assets/index.less b/assets/index.less index 5e00f20e..91787674 100644 --- a/assets/index.less +++ b/assets/index.less @@ -7,4 +7,8 @@ @import "index/YearPanel"; @import "index/DecadePanel"; @import "common/RangeCalendar"; -@import "common/FullCalendar"; \ No newline at end of file +@import "common/FullCalendar"; + +.@{prefixClass}-month-calendar { + height: 308px; +} \ No newline at end of file diff --git a/src/MonthCalendar.jsx b/src/MonthCalendar.jsx index 889cd2fe..8e4e00aa 100644 --- a/src/MonthCalendar.jsx +++ b/src/MonthCalendar.jsx @@ -2,9 +2,7 @@ import React from 'react'; import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import KeyCode from 'rc-util/lib/KeyCode'; -import MonthPanel from './month/MonthPanel'; -import YearPanel from './year/YearPanel'; -import DecadePanel from './decade/DecadePanel'; +import CalendarHeader from './calendar/CalendarHeader'; import CalendarMixin from './mixin/CalendarMixin'; import CommonMixin from './mixin/CommonMixin'; @@ -66,66 +64,31 @@ const MonthCalendar = createReactClass({ } }, - handleYearPanelShow() { - this.setState({ mode: 'year' }); - }, - - handleYearSelect(...args) { - this.setState({ mode: 'month' }); - this.onSelect(...args); - }, - - handleDecadePanelShow() { - this.setState({ mode: 'decade' }); - }, - - handleDecadeSelect(...args) { - this.setState({ mode: 'year' }); - this.onSelect(...args); + handlePanelChange(_, mode) { + if (mode !== 'date') { + this.setState({ mode }); + } }, render() { const { props, state } = this; const { mode, value } = state; - const children = [ - , - ]; - if (mode === 'year') { - children.push( - - ); - } - if (mode === 'decade') { - children.push( - - ); - } + locale={props.locale} + disabledMonth={props.disabledDate} + monthCellRender={props.monthCellRender} + monthCellContentRender={props.monthCellContentRender} + onMonthSelect={this.onSelect} + onValueChange={this.setValue} + onPanelChange={this.handlePanelChange} + /> + ); return this.renderRoot({ + className: `${props.prefixCls}-month-calendar`, children, }); }, diff --git a/src/calendar/CalendarHeader.jsx b/src/calendar/CalendarHeader.jsx index 98793534..13bc5e12 100644 --- a/src/calendar/CalendarHeader.jsx +++ b/src/calendar/CalendarHeader.jsx @@ -54,7 +54,11 @@ const CalendarHeader = createReactClass({ onMonthSelect(value) { this.props.onPanelChange(value, 'date'); - this.props.onValueChange(value); + if (this.props.onMonthSelect) { + this.props.onMonthSelect(value); + } else { + this.props.onValueChange(value); + } }, onYearSelect(value) { @@ -150,6 +154,8 @@ const CalendarHeader = createReactClass({ onSelect={this.onMonthSelect} onYearPanelShow={() => this.showYearPanel('month')} disabledDate={disabledMonth} + cellRender={props.monthCellRender} + contentRender={props.monthCellContentRender} /> ); } From 85ddedbc1c6d0fd735c6334996a6ef029c9ff370 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 1 Aug 2017 17:07:08 +0800 Subject: [PATCH 016/176] bump 9.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4a692108..f248f85a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.1", + "version": "9.1.2", "description": "React Calendar", "keywords": [ "react", From ea30755d0a0729e9d9dd2a231acb970d46c3b336 Mon Sep 17 00:00:00 2001 From: Stefan Paunovic Date: Mon, 7 Aug 2017 03:39:22 +0200 Subject: [PATCH 017/176] feat: serbian localization (#287) --- src/locale/sr_RS.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/sr_RS.js diff --git a/src/locale/sr_RS.js b/src/locale/sr_RS.js new file mode 100644 index 00000000..a797bf58 --- /dev/null +++ b/src/locale/sr_RS.js @@ -0,0 +1,27 @@ +export default { + today: 'Danas', + now: 'Sada', + backToToday: 'Vrati se na danas', + ok: 'U redu', + clear: 'Obriši', + month: 'Mesec', + year: 'Godina', + timeSelect: 'Izaberi vreme', + dateSelect: 'Izaberi datum', + monthSelect: 'Izaberi mesec', + yearSelect: 'Izaberi godinu', + decadeSelect: 'Izaberi deceniju', + yearFormat: 'YYYY', + dateFormat: 'DD.MM.YYYY', + dayFormat: 'D', + dateTimeFormat: 'DD.MM.YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Prethodni mesec (PageUp)', + nextMonth: 'Sledeći mesec (PageDown)', + previousYear: 'Prethodna godina (Control + left)', + nextYear: 'Sledeća godina (Control + right)', + previousDecade: 'Prethodna decenija', + nextDecade: 'Sledeća decenija', + previousCentury: 'Prethodni vek', + nextCentury: 'Sledeći vek', +}; From ca43d5556caffc7c90d0907acd7cb4256f7f91d3 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 7 Aug 2017 09:40:17 +0800 Subject: [PATCH 018/176] bump 9.1.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f248f85a..72a28bba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.2", + "version": "9.1.3", "description": "React Calendar", "keywords": [ "react", From 00b347deff92ae383bebed8254b6550b73cc811d Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 8 Sep 2017 11:34:07 +0800 Subject: [PATCH 019/176] fix: should align showDate, close: ant-design/ant-design#7320 (#293) --- src/RangeCalendar.js | 6 +----- tests/RangeCalendar.spec.jsx | 10 ++++++++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/RangeCalendar.js b/src/RangeCalendar.js index 41a87cc7..cf9cb5f3 100644 --- a/src/RangeCalendar.js +++ b/src/RangeCalendar.js @@ -128,11 +128,7 @@ const RangeCalendar = createReactClass({ const { state } = this; const newState = {}; if ('value' in nextProps) { - if (nextProps.value) { - newState.value = nextProps.value; - } else { - newState.value = normalizeAnchor(nextProps, 0); - } + newState.value = normalizeAnchor(nextProps, 0); this.setState(newState); } if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) { diff --git a/tests/RangeCalendar.spec.jsx b/tests/RangeCalendar.spec.jsx index a5229ce2..010d1f01 100644 --- a/tests/RangeCalendar.spec.jsx +++ b/tests/RangeCalendar.spec.jsx @@ -325,5 +325,15 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-year-panel-selected-cell').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-year-panel').length).toBe(0); }); + + it('controlled value works correctly', () => { + const wrapper = mount(); + const initialValue = wrapper.state('value'); + expect(initialValue[0].add(1, 'month').isSame(initialValue[1], 'month')).toBe(true); + + wrapper.setProps({ value: [moment(), moment()] }); + const updatedValue = wrapper.state('value'); + expect(updatedValue[0].add(1, 'month').isSame(updatedValue[1], 'month')).toBe(true); + }); }); }); From 8afce2a1b0dc2c885049d8c7ee3fb32ec4d527ec Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 8 Sep 2017 14:48:26 +0800 Subject: [PATCH 020/176] bump 9.1.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 72a28bba..5902d1de 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.3", + "version": "9.1.4", "description": "React Calendar", "keywords": [ "react", From 6e5f9907eeecdc7b2dbd20d5ca2ad25508cd9be1 Mon Sep 17 00:00:00 2001 From: Stefan Paunovic Date: Mon, 11 Sep 2017 04:53:51 +0200 Subject: [PATCH 021/176] feat: add is_IS Locale (#295) --- src/locale/is_IS.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/is_IS.js diff --git a/src/locale/is_IS.js b/src/locale/is_IS.js new file mode 100644 index 00000000..13de5e1e --- /dev/null +++ b/src/locale/is_IS.js @@ -0,0 +1,27 @@ +export default { + today: 'Í dag', + now: 'Núna', + backToToday: 'Til baka til dagsins í dag', + ok: 'Í lagi', + clear: 'Hreinsa', + month: 'Mánuður', + year: 'Ár', + timeSelect: 'Velja tíma', + dateSelect: 'Velja dag', + monthSelect: 'Velja mánuð', + yearSelect: 'Velja ár', + decadeSelect: 'Velja áratug', + yearFormat: 'YYYY', + dateFormat: 'D/M/YYYY', + dayFormat: 'D', + dateTimeFormat: 'D/M/YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Fyrri mánuður (PageUp)', + nextMonth: 'Næsti mánuður (PageDown)', + previousYear: 'Fyrra ár (Control + left)', + nextYear: 'Næsta ár (Control + right)', + previousDecade: 'Fyrri áratugur', + nextDecade: 'Næsti áratugur', + previousCentury: 'Fyrri öld', + nextCentury: 'Næsta öld', +}; From fa657512fb372239e9df7bf55f4e278bc39659e4 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 11 Sep 2017 10:58:14 +0800 Subject: [PATCH 022/176] bump 9.1.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5902d1de..b2758b96 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.4", + "version": "9.1.5", "description": "React Calendar", "keywords": [ "react", From e2ff15bffcd0e158be9870044aeac263773cb7bf Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Sun, 17 Sep 2017 21:22:03 -0500 Subject: [PATCH 023/176] fix: compatible with React 0.14 (#298) React 0.14 pass undefined prop to the original element props, for example: ``` element.props = { foo: 'bar' } newElement = React.cloneElement(element, { foo: undefined }) newElement.props // React 0.14 { foo: undefined }, React 15 { foo: 'bar' } ``` --- src/Calendar.jsx | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/src/Calendar.jsx b/src/Calendar.jsx index cd122c11..0c6dd0ab 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -224,17 +224,27 @@ const Calendar = createReactClass({ const disabledTimeConfig = showTimePicker && disabledTime && timePicker ? getTimeConfig(selectedValue, disabledTime) : null; - const timePickerEle = timePicker && showTimePicker ? React.cloneElement(timePicker, { - showHour: true, - showSecond: true, - showMinute: true, - ...timePicker.props, - ...disabledTimeConfig, - onChange: this.onDateInputChange, - defaultOpenValue: timePicker.props.defaultValue, - value: selectedValue, - disabledTime, - }) : null; + let timePickerEle = null; + + if (timePicker && showTimePicker) { + const timePickerProps = { + showHour: true, + showSecond: true, + showMinute: true, + ...timePicker.props, + ...disabledTimeConfig, + onChange: this.onDateInputChange, + value: selectedValue, + disabledTime, + }; + + if (timePicker.props.defaultValue !== undefined) { + timePickerProps.defaultOpenValue = timePicker.props.defaultValue; + } + + timePickerEle = React.cloneElement(timePicker, timePickerProps); + } + const dateInputElement = props.showDateInput ? ( Date: Mon, 18 Sep 2017 10:24:00 +0800 Subject: [PATCH 024/176] bump 9.1.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b2758b96..4f1be566 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.5", + "version": "9.1.6", "description": "React Calendar", "keywords": [ "react", From 6d5efe14570ec4e955f42f5aa71394cd2d089c18 Mon Sep 17 00:00:00 2001 From: Marco Afonso Date: Wed, 20 Sep 2017 02:27:24 +0100 Subject: [PATCH 025/176] feat: add pt_PT locale (#300) --- src/locale/pt_PT.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/pt_PT.js diff --git a/src/locale/pt_PT.js b/src/locale/pt_PT.js new file mode 100644 index 00000000..121faba2 --- /dev/null +++ b/src/locale/pt_PT.js @@ -0,0 +1,27 @@ +export default { + today: 'Hoje', + now: 'Agora', + backToToday: 'Hoje', + ok: 'Ok', + clear: 'Limpar', + month: 'Mês', + year: 'Ano', + timeSelect: 'Selecionar hora', + dateSelect: 'Selecionar data', + monthSelect: 'Selecionar mês', + yearSelect: 'Selecionar ano', + decadeSelect: 'Selecionar década', + yearFormat: 'YYYY', + dateFormat: 'D/M/YYYY', + dayFormat: 'D', + dateTimeFormat: 'D/M/YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Mês anterior (PageUp)', + nextMonth: 'Mês seguinte (PageDown)', + previousYear: 'Ano anterior (Control + left)', + nextYear: 'Ano seguinte (Control + right)', + previousDecade: 'Década anterior', + nextDecade: 'Década seguinte', + previousCentury: 'Século anterior', + nextCentury: 'Século seguinte', +}; From 1aebb19ebac795e5fcd6d859995c83e03e0b75cf Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Wed, 20 Sep 2017 09:29:23 +0800 Subject: [PATCH 026/176] bump 9.1.7 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4f1be566..3c8e6920 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.6", + "version": "9.1.7", "description": "React Calendar", "keywords": [ "react", From 3fbbeb9d9bfe40fc493a1c21d50bfc16b9c9e3f9 Mon Sep 17 00:00:00 2001 From: Constantine Golub Date: Fri, 22 Sep 2017 04:28:08 +0300 Subject: [PATCH 027/176] fix: broken calendar when showToday is hidden (#301) --- assets/index/DecadePanel.less | 5 ++++- assets/index/MonthPanel.less | 5 ++++- assets/index/YearPanel.less | 5 ++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/assets/index/DecadePanel.less b/assets/index/DecadePanel.less index 879e0c19..97ac157c 100644 --- a/assets/index/DecadePanel.less +++ b/assets/index/DecadePanel.less @@ -63,12 +63,15 @@ .@{prefixClass}-decade-panel-body { padding: 9px 10px 10px; + position: absolute; + bottom: 0; + top: 34px; } .@{prefixClass}-decade-panel-table { table-layout: fixed; width: 100%; - height: 255px; + height: 100%; border-collapse: separate; } diff --git a/assets/index/MonthPanel.less b/assets/index/MonthPanel.less index 2f37737d..22b57ea5 100644 --- a/assets/index/MonthPanel.less +++ b/assets/index/MonthPanel.less @@ -72,12 +72,15 @@ .@{prefixClass}-month-panel-body { padding: 9px 10px 10px; + position: absolute; + top: 34px; + bottom: 0; } .@{prefixClass}-month-panel-table { table-layout: fixed; width: 100%; - height:255px; + height: 100%; border-collapse: separate; } diff --git a/assets/index/YearPanel.less b/assets/index/YearPanel.less index cde32fcf..f629d2e9 100644 --- a/assets/index/YearPanel.less +++ b/assets/index/YearPanel.less @@ -72,12 +72,15 @@ .@{prefixClass}-year-panel-body { padding: 9px 10px 10px; + position: absolute; + bottom: 0; + top: 34px; } .@{prefixClass}-year-panel-table { table-layout: fixed; width: 100%; - height: 255px; + height: 100%; border-collapse: separate; } From 321b5a0c4ef9a14f84f045b589cfab5d406c055d Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 22 Sep 2017 09:31:41 +0800 Subject: [PATCH 028/176] bump 9.1.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3c8e6920..34848259 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.7", + "version": "9.1.8", "description": "React Calendar", "keywords": [ "react", From f1910bb1bf2afb5f52cb881365ec92f2d7e325ba Mon Sep 17 00:00:00 2001 From: Mohamed Seada Date: Tue, 10 Oct 2017 03:20:09 +0200 Subject: [PATCH 029/176] feat: create ar_EG.js (#304) --- src/locale/ar_EG.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/ar_EG.js diff --git a/src/locale/ar_EG.js b/src/locale/ar_EG.js new file mode 100644 index 00000000..75b44ac4 --- /dev/null +++ b/src/locale/ar_EG.js @@ -0,0 +1,27 @@ +export default { + today: 'اليوم', + now: 'الأن', + backToToday: 'العودة إلى اليوم', + ok: 'تأكيد', + clear: 'مسح', + month: 'الشهر', + year: 'السنة', + timeSelect: 'اختيار الوقت', + dateSelect: 'اختيار التاريخ', + monthSelect: 'اختيار الشهر', + yearSelect: 'اختيار السنة', + decadeSelect: 'اختيار العقد', + yearFormat: 'YYYY', + dateFormat: 'M/D/YYYY', + dayFormat: 'D', + dateTimeFormat: 'M/D/YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'الشهر السابق (PageUp)', + nextMonth: 'الشهر التالى(PageDown)', + previousYear: 'العام السابق (Control + left)', + nextYear: 'العام التالى (Control + right)', + previousDecade: 'العقد السابق', + nextDecade: 'العقد التالى', + previousCentury: 'القرن السابق', + nextCentury: 'القرن التالى', +}; From 83a923dbbed225357826204849cd7e28a7b9edda Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 10 Oct 2017 09:20:58 +0800 Subject: [PATCH 030/176] bump 9.1.9 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 34848259..8638bba0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.8", + "version": "9.1.9", "description": "React Calendar", "keywords": [ "react", From fec452c39ce71b083e44cd0420b846a234fb5880 Mon Sep 17 00:00:00 2001 From: Dmitry Bublik Date: Mon, 16 Oct 2017 05:33:05 +0300 Subject: [PATCH 031/176] feat: uk_UA locale added (#308) --- src/locale/uk_UA.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/uk_UA.js diff --git a/src/locale/uk_UA.js b/src/locale/uk_UA.js new file mode 100644 index 00000000..2d9c17b1 --- /dev/null +++ b/src/locale/uk_UA.js @@ -0,0 +1,27 @@ +export default { + today: 'Сьогодні', + now: 'Зараз', + backToToday: 'Поточна дата', + ok: 'Ok', + clear: 'Очистити', + month: 'Місяць', + year: 'Рік', + timeSelect: 'Обрати час', + dateSelect: 'Обрати дату', + monthSelect: 'Обрати місяць', + yearSelect: 'Обрати рік', + decadeSelect: 'Обрати десятиріччя', + yearFormat: 'YYYY', + dateFormat: 'D-M-YYYY', + dayFormat: 'D', + dateTimeFormat: 'D-M-YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Попередній місяць (PageUp)', + nextMonth: 'Наступний місяць (PageDown)', + previousYear: 'Попередній рік (Control + left)', + nextYear: 'Наступний рік (Control + right)', + previousDecade: 'Попереднє десятиріччя', + nextDecade: 'Наступне десятиріччя', + previousCentury: 'Попереднє століття', + nextCentury: 'Наступне століття', +}; From 02b9e1344ea5d2dcdbdf33e68ee961abfc683723 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Mon, 16 Oct 2017 10:34:15 +0800 Subject: [PATCH 032/176] bump 9.1.10 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8638bba0..04ed633a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.9", + "version": "9.1.10", "description": "React Calendar", "keywords": [ "react", From 7f61a57bda2ac37d8b5a2768c61c1610e18d61f2 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 31 Oct 2017 17:14:24 +0800 Subject: [PATCH 033/176] fix: should keep selection after input valid date string, close: ant-design/ant-design#7443 --- package.json | 2 +- src/date/DateInput.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 04ed633a..7aac9d9e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.10", + "version": "9.1.11", "description": "React Calendar", "keywords": [ "react", diff --git a/src/date/DateInput.js b/src/date/DateInput.js index 22c94ccc..333f75e2 100644 --- a/src/date/DateInput.js +++ b/src/date/DateInput.js @@ -29,11 +29,15 @@ const DateInput = createReactClass({ }, componentWillReceiveProps(nextProps) { + const cachedSelectionStart = this.dateInputInstance.selectionStart; + const cachedSelectionEnd = this.dateInputInstance.selectionEnd; // when popup show, click body will call this, bug! const selectedValue = nextProps.selectedValue; this.setState({ str: selectedValue && selectedValue.format(nextProps.format) || '', invalid: false, + }, () => { + this.dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd); }); }, From 09fa993edcb4fde843bc15ae4e0ff8c892be04f2 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Tue, 31 Oct 2017 17:19:40 +0800 Subject: [PATCH 034/176] test: fix ci --- src/date/DateInput.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/date/DateInput.js b/src/date/DateInput.js index 333f75e2..7de245d4 100644 --- a/src/date/DateInput.js +++ b/src/date/DateInput.js @@ -29,18 +29,20 @@ const DateInput = createReactClass({ }, componentWillReceiveProps(nextProps) { - const cachedSelectionStart = this.dateInputInstance.selectionStart; - const cachedSelectionEnd = this.dateInputInstance.selectionEnd; + this.cachedSelectionStart = this.dateInputInstance.selectionStart; + this.cachedSelectionEnd = this.dateInputInstance.selectionEnd; // when popup show, click body will call this, bug! const selectedValue = nextProps.selectedValue; this.setState({ str: selectedValue && selectedValue.format(nextProps.format) || '', invalid: false, - }, () => { - this.dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd); }); }, + componentDidUpdate() { + this.dateInputInstance.setSelectionRange(this.cachedSelectionStart, this.cachedSelectionEnd); + }, + onInputChange(event) { const str = event.target.value; this.setState({ From 487c9b20c99f8b1007f81b284b04f0ccfaff49f3 Mon Sep 17 00:00:00 2001 From: Tom Hornos Date: Fri, 3 Nov 2017 06:54:29 +0100 Subject: [PATCH 035/176] feat: added Hungarian translation, ref: #312 --- src/locale/hu_HU.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 src/locale/hu_HU.js diff --git a/src/locale/hu_HU.js b/src/locale/hu_HU.js new file mode 100644 index 00000000..3f046877 --- /dev/null +++ b/src/locale/hu_HU.js @@ -0,0 +1,27 @@ +export default { + today: 'Ma', // 'Today', + now: 'Most', // 'Now', + backToToday: 'Vissza a mai napra', // 'Back to today', + ok: 'Ok', + clear: 'Törlés', // 'Clear', + month: 'Hónap', // 'Month', + year: 'Év', // 'Year', + timeSelect: 'Időpont kiválasztása', // 'Select time', + dateSelect: 'Dátum kiválasztása', // 'Select date', + monthSelect: 'Hónap kiválasztása', // 'Choose a month', + yearSelect: 'Év kiválasztása', // 'Choose a year', + decadeSelect: 'Évtized kiválasztása', // 'Choose a decade', + yearFormat: 'YYYY', + dateFormat: 'YYYY/MM/DD', // 'M/D/YYYY', + dayFormat: 'DD', // 'D', + dateTimeFormat: 'YYYY/MM/DD HH:mm:ss', // 'M/D/YYYY HH:mm:ss', + monthBeforeYear: true, + previousMonth: 'Előző hónap (PageUp)', // 'Previous month (PageUp)', + nextMonth: 'Következő hónap (PageDown)', // 'Next month (PageDown)', + previousYear: 'Múlt év (Control + left)', // 'Last year (Control + left)', + nextYear: 'Jövő év (Control + right)', // 'Next year (Control + right)', + previousDecade: 'Előző évtized', // 'Last decade', + nextDecade: 'Következő évtized', // 'Next decade', + previousCentury: 'Múlt évszázad', // 'Last century', + nextCentury: 'Jövő évszázad', // 'Next century', +}; From d227d0bf65e061e443d900f18f4373fd60a86b10 Mon Sep 17 00:00:00 2001 From: Benjy Cui Date: Fri, 3 Nov 2017 13:55:17 +0800 Subject: [PATCH 036/176] bump 9.1.12 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7aac9d9e..ad220f75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rc-calendar", - "version": "9.1.11", + "version": "9.1.12", "description": "React Calendar", "keywords": [ "react", From 64921039034139f91de7c611524c0fda8c941e63 Mon Sep 17 00:00:00 2001 From: Wei Zhu Date: Mon, 6 Nov 2017 11:22:48 +0800 Subject: [PATCH 037/176] Update dependencies --- package.json | 26 +- tests/Calendar.spec.jsx | 441 ++++++------------ tests/FullCalendar.spec.js | 5 +- tests/Picker.spec.jsx | 202 +++----- tests/RangeCalendar.spec.jsx | 49 +- tests/__mocks__/rc-trigger.js | 3 + tests/__snapshots__/Calendar.spec.jsx.snap | 8 +- tests/__snapshots__/FullCalendar.spec.js.snap | 12 +- .../__snapshots__/RangeCalendar.spec.jsx.snap | 16 +- tests/setup.js | 9 + 10 files changed, 276 insertions(+), 495 deletions(-) create mode 100644 tests/__mocks__/rc-trigger.js diff --git a/package.json b/package.json index ad220f75..25a394d8 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,9 @@ "setupFiles": [ "./tests/setup.js" ], + "snapshotSerializers": [ + "enzyme-to-json/serializer" + ], "transform": { "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js" } @@ -63,18 +66,19 @@ "async": "~2.5.0", "bootstrap": "~3.3.2", "coveralls": "^2.11.15", - "enzyme": "^2.8.0", - "enzyme-to-json": "^1.5.0", - "jest": "^20.0.4", + "enzyme": "^3.1.0", + "enzyme-adapter-react-16": "^1.0.2", + "enzyme-to-json": "^3.1.4", + "jest": "^21.2.1", "mockdate": "^2.0.1", "pre-commit": "1.x", - "rc-dialog": "^6.0.1", - "rc-select": "^6.0.6", - "rc-time-picker": "2.x", + "rc-dialog": "^7.0.0", + "rc-select": "^7.1.0", + "rc-time-picker": "^3.1.0", "rc-tools": "^6.2.2", - "react": "15.x", - "react-dom": "15.x", - "react-test-renderer": "15.x" + "react": "^16.0.0", + "react-dom": "^16.0.0", + "react-test-renderer": "^16.0.0" }, "pre-commit": [ "lint" @@ -85,7 +89,7 @@ "create-react-class": "^15.5.2", "moment": "2.x", "prop-types": "^15.5.8", - "rc-trigger": "1.x", - "rc-util": "^4.0.4" + "rc-trigger": "^2.2.0", + "rc-util": "^4.1.1" } } diff --git a/tests/Calendar.spec.jsx b/tests/Calendar.spec.jsx index 2c7aa88f..645591af 100644 --- a/tests/Calendar.spec.jsx +++ b/tests/Calendar.spec.jsx @@ -1,45 +1,31 @@ /* eslint-disable no-undef */ import React from 'react'; -import ReactDOM from 'react-dom'; -import TestUtils from 'react-dom/test-utils'; import keyCode from 'rc-util/lib/KeyCode'; import moment from 'moment'; import { mount, render } from 'enzyme'; -import { renderToJson } from 'enzyme-to-json'; -import async from 'async'; import TimePickerPanel from 'rc-time-picker/lib/Panel'; import Calendar from '../index'; import zhCN from '../src/locale/zh_CN'; import enUS from '../src/locale/en_US'; -const Simulate = TestUtils.Simulate; const format = ('YYYY-MM-DD'); describe('Calendar', () => { - let calendar; - let input; - const container = document.createElement('div'); - document.body.appendChild(container); - - afterEach(() => { - ReactDOM.unmountComponentAtNode(container); - }); - describe('render', () => { it('render correctly', () => { const zhWrapper = render( ); - expect(renderToJson(zhWrapper)).toMatchSnapshot(); + expect(zhWrapper).toMatchSnapshot(); const enWrapper = render( ); - expect(renderToJson(enWrapper)).toMatchSnapshot(); + expect(enWrapper).toMatchSnapshot(); }); it('render showToday false correctly', () => { - const wrapper = mount(, container); + const wrapper = mount(); expect(wrapper.find('.rc-calendar-today-btn').length).toBe(0); }); }); @@ -51,7 +37,7 @@ describe('Calendar', () => { wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); const selectedValues = wrapper.find('.rc-time-picker-panel-select-option-selected'); for (let i = 0; i < selectedValues.length; i += 1) { - expect(selectedValues.get(i).innerHTML).toBe('00'); + expect(selectedValues.at(i).text()).toBe('00'); } }); @@ -63,7 +49,7 @@ describe('Calendar', () => { wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); const selectedValues = wrapper.find('.rc-time-picker-panel-select-option-selected'); for (let i = 0; i < selectedValues.length; i += 1) { - expect(selectedValues.get(i).innerHTML).toBe('01'); + expect(selectedValues.at(i).text()).toBe('01'); } }); @@ -73,29 +59,35 @@ describe('Calendar', () => { wrapper.find('.rc-calendar-today').simulate('click'); // use timePicker's defaultValue if users haven't select a time - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/29/2017 00:00:00'); + expect( + wrapper.find('.rc-calendar-input').at(0).getDOMNode().value + ).toBe('3/29/2017 00:00:00'); wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); wrapper.find('.rc-time-picker-panel-select ul').at(0).find('li').at(6).simulate('click'); // update time to timePicker's time - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/29/2017 06:00:00'); + expect( + wrapper.find('.rc-calendar-input').at(0).getDOMNode().value + ).toBe('3/29/2017 06:00:00'); wrapper.find('.rc-calendar-cell').at(10).simulate('click'); // still use timePicker's time - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/8/2017 06:00:00'); + expect( + wrapper.find('.rc-calendar-input').at(0).getDOMNode().value + ).toBe('3/8/2017 06:00:00'); }); }); describe('controlled panels', () => { it('render controlled panels correctly', () => { const MonthPicker = mount(); - expect(renderToJson(MonthPicker.render())).toMatchSnapshot(); + expect(MonthPicker.render()).toMatchSnapshot(); MonthPicker.find('.rc-calendar-month-panel-year-select').at(0).simulate('click'); expect(MonthPicker.find('.rc-calendar-year-panel').length).toBe(0); expect(MonthPicker.find('.rc-calendar-month-panel').length).toBe(1); const YearPicker = mount(); - expect(renderToJson(YearPicker.render())).toMatchSnapshot(); + expect(YearPicker.render()).toMatchSnapshot(); YearPicker.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); expect(YearPicker.find('.rc-calendar-decade-panel').length).toBe(0); expect(YearPicker.find('.rc-calendar-year-panel').length).toBe(1); @@ -156,148 +148,103 @@ describe('Calendar', () => { }); describe('after render', () => { - beforeEach((done) => { - ReactDOM.render(, container, function ok() { - calendar = this; - input = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-input')[0]; - done(); - }); + let calendar; + let input; + beforeEach(() => { + calendar = mount(); + input = calendar.find('.rc-calendar-input').hostNodes().at(0); }); describe('keyboard works', () => { - it('left works', (done) => { - const original = calendar.state.value; + it('left works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(-1, 'day'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { - keyCode: keyCode.LEFT, - }); - setTimeout(() => { - expect(calendar.state.value.date()) - .toBe(expected.date()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + + calendar.simulate('keyDown', { keyCode: keyCode.LEFT }); + expect(calendar.state().value.date()).toBe(expected.date()); + expect(input.getDOMNode().value).toBe(''); }); - it('right works', (done) => { - const original = calendar.state.value; + it('right works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(1, 'day'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { - keyCode: keyCode.RIGHT, - }); - setTimeout(() => { - expect(calendar.state.value.date()) - .toBe(expected.date()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + calendar.simulate('keyDown', { keyCode: keyCode.RIGHT }); + expect(calendar.state().value.date()).toBe(expected.date()); + expect(input.getDOMNode().value).toBe(''); }); - it('up works', (done) => { - const original = calendar.state.value; + it('up works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(-7, 'day'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { - keyCode: keyCode.UP, - }); - setTimeout(() => { - expect(calendar.state.value.date()) - .toBe(expected.date()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + calendar.simulate('keyDown', { keyCode: keyCode.UP }); + expect(calendar.state().value.date()).toBe(expected.date()); + expect(input.getDOMNode().value).toBe(''); }); - it('down works', (done) => { - const original = calendar.state.value; + it('down works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(7, 'day'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { - keyCode: keyCode.DOWN, - }); - setTimeout(() => { - expect(calendar.state.value.date()) - .toBe(expected.date()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + calendar.simulate('keyDown', { keyCode: keyCode.DOWN }); + expect(calendar.state().value.date()).toBe(expected.date()); + expect(input.getDOMNode().value).toBe(''); }); - it('pageDown works', (done) => { - const original = calendar.state.value; + it('pageDown works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(1, 'month'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { - keyCode: keyCode.PAGE_DOWN, - }); - setTimeout(() => { - expect(calendar.state.value.month()) - .toBe(expected.month()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + calendar.simulate('keyDown', { keyCode: keyCode.PAGE_DOWN }); + expect(calendar.state().value.month()).toBe(expected.month()); + expect(input.getDOMNode().value).toBe(''); }); - it('pageUp works', (done) => { - const original = calendar.state.value; + it('pageUp works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(-1, 'month'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { - keyCode: keyCode.PAGE_UP, - }); - setTimeout(() => { - expect(calendar.state.value.month()) - .toBe(expected.month()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + calendar.simulate('keyDown', { keyCode: keyCode.PAGE_UP }); + expect(calendar.state().value.month()).toBe(expected.month()); + expect(input.getDOMNode().value).toBe(''); }); - it('ctrl left works', (done) => { - const original = calendar.state.value; + it('ctrl left works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(-1, 'year'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { + calendar.simulate('keyDown', { keyCode: keyCode.LEFT, ctrlKey: 1, }); - setTimeout(() => { - expect(calendar.state.value.year()) - .toBe(expected.year()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + expect(calendar.state().value.year()).toBe(expected.year()); + expect(input.getDOMNode().value).toBe(''); }); - it('ctrl right works', (done) => { - const original = calendar.state.value; + + it('ctrl right works', () => { + const original = calendar.state().value; const expected = original.clone(); expected.add(1, 'year'); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { + calendar.simulate('keyDown', { keyCode: keyCode.RIGHT, ctrlKey: 1, }); - setTimeout(() => { - expect(calendar.state.value.year()) - .toBe(expected.year()); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + expect(calendar.state().value.year()).toBe(expected.year()); + expect(input.getDOMNode().value).toBe(''); }); it('enter to select works', () => { const onSelect = jest.fn(); let today; - calendar = ReactDOM.render( - , - container + calendar = mount( + ); - today = calendar.state.value; + today = calendar.state().value; - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { + calendar.simulate('keyDown', { keyCode: keyCode.ENTER, }); expect(onSelect).toHaveBeenCalledWith(today, { @@ -318,15 +265,14 @@ describe('Calendar', () => { return current.valueOf() < date.valueOf(); } - calendar = ReactDOM.render( - , - container + calendar = mount( + ); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { + calendar.simulate('keyDown', { keyCode: keyCode.LEFT, }); - Simulate.keyDown(ReactDOM.findDOMNode(calendar), { + calendar.simulate('keyDown', { keyCode: keyCode.ENTER, }); @@ -334,212 +280,133 @@ describe('Calendar', () => { }); }); - it('next month works', (done) => { - let month = calendar.state.value.month(); + it('next month works', () => { + let month = calendar.state().value.month(); if (month === 11) { month = -1; } - Simulate.click(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-next-month-btn')[0]); - setTimeout(() => { - expect(calendar.state.value.month()).toBe(month + 1); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + + calendar.find('.rc-calendar-next-month-btn').hostNodes().at(0).simulate('click'); + + expect(calendar.state().value.month()).toBe(month + 1); + expect(input.getDOMNode().value).toBe(''); }); - it('previous month works', (done) => { - let month = calendar.state.value.month(); + it('previous month works', () => { + let month = calendar.state().value.month(); if (month === 0) { month = 12; } - Simulate.click(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-prev-month-btn')[0]); - setTimeout(() => { - expect(calendar.state.value.month()).toBe(month - 1); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - done(); - }, 10); + + calendar.find('.rc-calendar-prev-month-btn').hostNodes().at(0).simulate('click'); + + expect(calendar.state().value.month()).toBe(month - 1); + expect(input.getDOMNode().value).toBe(''); }); - it('next year works', (done) => { - const year = calendar.state.value.year(); - Simulate.click(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-next-year-btn')[0]); - setTimeout(() => { - expect(calendar.state.value.year()).toBe(year + 1); - done(); - }, 10); + it('next year works', () => { + const year = calendar.state().value.year(); + + calendar.find('.rc-calendar-next-year-btn').hostNodes().at(0).simulate('click'); + + expect(calendar.state().value.year()).toBe(year + 1); }); - it('previous year works', (done) => { - const year = calendar.state.value.year(); - Simulate.click(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-prev-year-btn')[0]); - setTimeout(() => { - expect(calendar.state.value.year()).toBe(year - 1); - done(); - }, 10); + it('previous year works', () => { + const year = calendar.state().value.year(); + + calendar.find('.rc-calendar-prev-year-btn').hostNodes().at(0).simulate('click'); + + expect(calendar.state().value.year()).toBe(year - 1); }); - it('onSelect works', (done) => { + it('onSelect works', () => { let day; - function onSelect(d) { - expect(d.date()).toBe(parseInt(day.innerHTML, 10)); - done(); - } + const onSelect = jest.fn(); - calendar = ReactDOM.render( + calendar = mount( , container); - day = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-date')[5]; - Simulate.click(day); - expect(ReactDOM.findDOMNode(input).value) - .toBe(calendar.state.value.format(format)); + /> + ); + + day = calendar.find('.rc-calendar-date').hostNodes().at(5); + day.simulate('click'); + + input = calendar.find('.rc-calendar-input').hostNodes().at(0); + + expect(input.getDOMNode().value).toBe(calendar.state().value.format(format)); + expect(onSelect.mock.calls[0][0].date()).toBe(parseInt(day.text(), 10)); }); - it('month panel shows', (done) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-month-panel').length).toBe(0); - async.series([(next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-month-select')); - setTimeout(next, 10); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-month-panel').length).toBe(1); - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-month-panel-month').length).toBe(12); - const m = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-month-panel-month')[9]; - Simulate.click(m); - setTimeout(next, 10); - }, (next) => { - expect(calendar.state.value.month()).toBe(9); - next(); - }], done); + it('month panel shows', () => { + expect(calendar.find('.rc-calendar-month-panel').length).toBe(0); + calendar.find('.rc-calendar-month-select').hostNodes().simulate('click'); + expect(calendar.find('.rc-calendar-month-panel').hostNodes().length).toBe(1); + expect(calendar.find('.rc-calendar-month-panel-month').hostNodes().length).toBe(12); + calendar.find('.rc-calendar-month-panel-month').hostNodes().at(9).simulate('click'); + expect(calendar.state().value.month()).toBe(9); }); - it('top year panel shows', (done) => { + it('top year panel shows', () => { let text; - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel').length).toBe(0); - async.series([(next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-year-select')); - setTimeout(next, 10); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel').length).toBe(1); - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel-year').length).toBe(12); - const year = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel-year')[9]; - text = year.innerHTML; - Simulate.click(year); - setTimeout(next, 10); - }, (next) => { - expect(String(calendar.state.value.year())).toBe(text); - next(); - }], done); + expect(calendar.find('.rc-calendar-year-panel').length).toBe(0); + calendar.find('.rc-calendar-year-select').hostNodes().simulate('click'); + expect(calendar.find('.rc-calendar-year-panel').hostNodes().length).toBe(1); + expect(calendar.find('.rc-calendar-year-panel-year').hostNodes().length).toBe(12); + const year = calendar.find('.rc-calendar-year-panel-year').hostNodes().at(9); + year.simulate('click'); + text = year.text(); + expect(String(calendar.state().value.year())).toBe(text); }); - it('year panel works', (done) => { + it('year panel works', () => { let text; - async.series([(next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-month-select')); - setTimeout(next, 10); - }, (next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-month-panel-year-select')); - setTimeout(next, 10); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel').length).toBe(1); - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel-year').length).toBe(12); - const year = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-year-panel-year')[9]; - text = year.innerHTML; - Simulate.click(year); - setTimeout(next, 10); - }, (next) => { - const m = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-month-panel-month')[9]; - Simulate.click(m); - setTimeout(next, 10); - }, (next) => { - expect(String(calendar.state.value.year())).toBe(text); - expect(ReactDOM.findDOMNode(input).value).toBe(''); - next(); - }], done); + calendar.find('.rc-calendar-month-select').hostNodes().simulate('click'); + calendar.find('.rc-calendar-month-panel-year-select').hostNodes().simulate('click'); + expect(calendar.find('.rc-calendar-year-panel').hostNodes().length).toBe(1); + expect(calendar.find('.rc-calendar-year-panel-year').hostNodes().length).toBe(12); + const year = calendar.find('.rc-calendar-year-panel-year').hostNodes().at(9); + year.simulate('click'); + text = year.text(); + calendar.find('.rc-calendar-month-panel-month').hostNodes().at(9).simulate('click'); + expect(String(calendar.state().value.year())).toBe(text); + expect(input.getDOMNode().value).toBe(''); }); - it('decade panel works', (done) => { - async.series([(next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-month-select')); - setTimeout(next, 10); - }, (next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-month-panel-year-select')); - setTimeout(next, 10); - }, (next) => { - Simulate.click(TestUtils.findRenderedDOMComponentWithClass(calendar, - 'rc-calendar-year-panel-decade-select')); - setTimeout(next, 10); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-decade-panel').length).toBe(1); - expect(TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-decade-panel-decade').length).toBe(12); - next(); - }], done); + it('decade panel works', () => { + calendar.find('.rc-calendar-month-select').hostNodes().simulate('click'); + calendar.find('.rc-calendar-month-panel-year-select').hostNodes().simulate('click'); + calendar.find('.rc-calendar-year-panel-decade-select').hostNodes().simulate('click'); + + expect(calendar.find('.rc-calendar-decade-panel').hostNodes().length).toBe(1); + expect(calendar.find('.rc-calendar-decade-panel-decade').hostNodes().length).toBe(12); }); }); describe('input', () => { - it('change will fire onSelect/onChange', (done) => { - let count = 0; + it('change will fire onSelect/onChange', () => { const expected = '2017-01-21'; - function check() { - count++; - if (count === 2) { - done(); - } - } - - function onSelect(d) { - expect(d.format(format)).toBe(expected); - check(); - } + const onSelect = jest.fn(); + const onChange = jest.fn(); - function onChange(d) { - expect(d.format(format)).toBe(expected); - check(); - } - - ReactDOM.render(, container, function ok() { - calendar = this; - input = TestUtils.scryRenderedDOMComponentsWithClass(calendar, - 'rc-calendar-input')[0]; - }); - ReactDOM.findDOMNode(input).value = expected; - Simulate.change(input); + />); + const input = calendar.find('.rc-calendar-input').hostNodes().at(0); + input.simulate('change', { target: { value: expected } }); + + expect(onSelect.mock.calls[0][0].format(format)).toBe(expected); + expect(onChange.mock.calls[0][0].format(format)).toBe(expected); }); }); }); diff --git a/tests/FullCalendar.spec.js b/tests/FullCalendar.spec.js index 71073789..28c25536 100644 --- a/tests/FullCalendar.spec.js +++ b/tests/FullCalendar.spec.js @@ -2,7 +2,6 @@ import React from 'react'; import Select from 'rc-select'; import { render } from 'enzyme'; -import { renderToJson } from 'enzyme-to-json'; import moment from 'moment'; import FullCalendar from '../src/FullCalendar'; import zhCN from '../src/locale/zh_CN'; @@ -18,7 +17,7 @@ describe('FullCalendar', () => { defaultValue={moment().locale('zh-cn')} /> ); - expect(renderToJson(zhWrapper)).toMatchSnapshot(); + expect(zhWrapper).toMatchSnapshot(); const enWrapper = render( { defaultValue={moment().locale('en')} /> ); - expect(renderToJson(enWrapper)).toMatchSnapshot(); + expect(enWrapper).toMatchSnapshot(); }); }); diff --git a/tests/Picker.spec.jsx b/tests/Picker.spec.jsx index 0858e215..89ee717c 100644 --- a/tests/Picker.spec.jsx +++ b/tests/Picker.spec.jsx @@ -1,20 +1,15 @@ -/* eslint-disable no-undef */ +import React from 'react'; +import moment from 'moment'; +import { mount } from 'enzyme'; import Calendar from '../index'; import DatePicker from '../src/Picker'; import RangeCalendar from '../src/RangeCalendar'; -import ReactDOM from 'react-dom'; -import React from 'react'; -import TestUtils from 'react-dom/test-utils'; -const Simulate = TestUtils.Simulate; -import async from 'async'; import CalendarLocale from '../src/locale/en_US'; -import moment from 'moment'; + const format = ('YYYY-MM-DD'); const VALUE = moment([2015, 5, 1]); describe('DatePicker', () => { - let div; - function noop() { } @@ -38,7 +33,7 @@ describe('DatePicker', () => { } function renderPicker(props) { - return ReactDOM.render( { {...props} > {renderOne} - , div); + ); } function renderRangePicker(props) { - return ReactDOM.render( { {...props} > {renderRange} - , div); + ); } - beforeEach(() => { - div = document.createElement('div'); - document.body.appendChild(div); - }); - - afterEach(() => { - ReactDOM.unmountComponentAtNode(div); - document.body.removeChild(div); - }); - - it('popup correctly', (done) => { + it('popup correctly', () => { let change; const picker = renderPicker({ onChange(v) { change = v; }, }); - expect(picker.state.open).toBeFalsy(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, - 'rc-calendar-picker-input')[0]; - async.series([(next) => { - Simulate.click(input); - setTimeout(next, 100); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar')[0]).not.toBeFalsy(); - expect(picker.state.open).toEqual(true); - const day = TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar-date')[2]; - Simulate.click(day); - setTimeout(next, 100); - }, (next) => { - expect(change).not.toBeFalsy(); - expect(change.year()).toEqual(2015); - expect(change.month()).toEqual(5); - expect(change.date()).toEqual(2); - expect(ReactDOM.findDOMNode(input).value).toEqual('2015-06-02'); - expect(picker.state.open).toBeFalsy(); - next(); - }], () => { - done(); - }); + expect(picker.state().open).toBeFalsy(); + const input = picker.find('.rc-calendar-picker-input').hostNodes().first(); + input.simulate('click'); + expect(picker.find('.rc-calendar').hostNodes().first()).not.toBeFalsy(); + expect(picker.state().open).toEqual(true); + const day = picker.find('.rc-calendar-date').hostNodes().at(2); + day.simulate('click'); + expect(change).not.toBeFalsy(); + expect(change.year()).toEqual(2015); + expect(change.month()).toEqual(5); + expect(change.date()).toEqual(2); + expect(input.getDOMNode().value).toEqual('2015-06-02'); + expect(picker.state().open).toBeFalsy(); }); - it('popup range calendar correctly', (done) => { - if (navigator.userAgent.toLowerCase().indexOf('phantomjs') !== -1) { - return done(); - } + it('popup range calendar correctly', () => { let change; const picker = renderRangePicker({ onChange(v) { change = v; }, }); - expect(picker.state.open).toBeFalsy(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, - 'rc-calendar-picker-input')[0]; - async.series([(next) => { - Simulate.click(input); - setTimeout(next, 10); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar')[0]).not.toBeFalsy(); - expect(picker.state.open).toEqual(true); - const day1 = TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar-date')[2]; - Simulate.click(day1); - const day2 = TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar-date')[3]; - Simulate.click(day2); - setTimeout(next, 10); - }, (next) => { - expect(change).not.toBeFalsy(); - expect(change.length).toEqual(2); - expect(change[0].year()).toEqual(2015); - expect(change[0].month()).toEqual(5); - expect(change[0].date()).toEqual(2); - expect(change[1].year()).toEqual(2015); - expect(change[1].month()).toEqual(5); - expect(change[1].date()).toEqual(3); - expect(input.value).toEqual('2015-06-02 - 2015-06-03'); - expect(picker.state.open).toBeFalsy(); - next(); - }], () => { - done(); - }); + expect(picker.state().open).toBeFalsy(); + const input = picker.find('.rc-calendar-picker-input').hostNodes().first(); + input.simulate('click'); + expect(picker.find('.rc-calendar').hostNodes().first()).not.toBeFalsy(); + expect(picker.state().open).toEqual(true); + const day1 = picker.find('.rc-calendar-date').hostNodes().at(2); + const day2 = picker.find('.rc-calendar-date').hostNodes().at(3); + day1.simulate('click'); + day2.simulate('click'); + expect(change).not.toBeFalsy(); + expect(change.length).toEqual(2); + expect(change[0].year()).toEqual(2015); + expect(change[0].month()).toEqual(5); + expect(change[0].date()).toEqual(2); + expect(change[1].year()).toEqual(2015); + expect(change[1].month()).toEqual(5); + expect(change[1].date()).toEqual(3); + expect(input.getDOMNode().value).toEqual('2015-06-02 - 2015-06-03'); + expect(picker.state().open).toBeFalsy(); }); describe('render calendar to body', () => { - it('support correctly', (done) => { - let change; - const picker = renderPicker({ - onChange(v) { - change = v; - }, - }); - expect(picker.state.open).toBeFalsy(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, - 'rc-calendar-picker-input')[0]; - async.series([(next) => { - Simulate.click(input); - setTimeout(next, 100); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, - 'rc-calendar')[0]).toBeFalsy(); - expect(picker.state.open).toEqual(true); - const day = TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar-date')[2]; - Simulate.click(day); - setTimeout(next, 100); - }, (next) => { - expect(change).not.toBeFalsy(); - expect(change.year()).toEqual(2015); - expect(change.month()).toEqual(5); - expect(change.date()).toEqual(2); - expect(ReactDOM.findDOMNode(input).value).toEqual('2015-06-02'); - expect(picker.state.open).toBeFalsy(); - next(); - }], () => { - done(); - }); - }); - - it('destroy correctly', (done) => { - if (navigator.userAgent.toLowerCase().indexOf('phantomjs') !== -1) { - return done(); - } + it('destroy correctly', () => { const picker = renderPicker(); - expect(picker.state.open).toBeFalsy(); - const input = TestUtils.scryRenderedDOMComponentsWithClass(picker, - 'rc-calendar-picker-input')[0]; - async.series([(next) => { - Simulate.click(input); - setTimeout(next, 100); - }, (next) => { - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker, - 'rc-calendar')[0]).toBeFalsy(); - expect(picker.state.open).toEqual(true); - if (document.querySelectorAll) { - expect(document.querySelectorAll('.rc-calendar-picker').length).not.toEqual(0); - } - expect(TestUtils.scryRenderedDOMComponentsWithClass(picker.calendarInstance, - 'rc-calendar-date')[0]).not.toBeFalsy(); - ReactDOM.unmountComponentAtNode(div); - setTimeout(next, 100); - }, (next) => { - if (document.querySelectorAll) { - expect(document.querySelectorAll('.rc-calendar-picker').length).toEqual(0); - } - expect(picker.calendarInstance).toBeFalsy(); - next(); - }], () => { - done(); - }); + expect(picker.state().open).toBeFalsy(); + const input = picker.find('.rc-calendar-picker-input').hostNodes().first(); + input.simulate('click'); + expect(picker.find('.rc-calendar').hostNodes().first()).not.toBeFalsy(); + expect(picker.state().open).toEqual(true); + expect(picker.find('.rc-calendar-picker').length).not.toEqual(0); + expect(picker.find('.rc-calendar-date').hostNodes().at(0)).not.toBeFalsy(); + picker.unmount(); + expect(document.querySelectorAll('.rc-calendar-picker').length).toEqual(0); + expect(picker.calendarInstance).toBeFalsy(); }); }); }); diff --git a/tests/RangeCalendar.spec.jsx b/tests/RangeCalendar.spec.jsx index 010d1f01..2778a40c 100644 --- a/tests/RangeCalendar.spec.jsx +++ b/tests/RangeCalendar.spec.jsx @@ -2,7 +2,6 @@ import React from 'react'; import moment from 'moment'; import { mount, render } from 'enzyme'; -import { renderToJson } from 'enzyme-to-json'; import TimePickerPanel from 'rc-time-picker/lib/Panel'; import RangeCalendar from '../src/RangeCalendar'; @@ -16,7 +15,7 @@ describe('RangeCalendar', () => { it('render hoverValue correctly', () => { const wrapper = render(); - expect(renderToJson(wrapper)).toMatchSnapshot(); + expect(wrapper).toMatchSnapshot(); }); it('next month works', () => { @@ -114,9 +113,9 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-range-left .rc-calendar-month-select').simulate('click'); const monthCells = wrapper.find('.rc-calendar-range-left .rc-calendar-month-panel-cell'); const rightPanelMonth = wrapper.state('value')[1].month(); - expect(monthCells.get(rightPanelMonth).className) + expect(monthCells.get(rightPanelMonth).props.className) .toMatch('rc-calendar-month-panel-cell-disabled'); - expect(monthCells.get(rightPanelMonth + 1).className) + expect(monthCells.get(rightPanelMonth + 1).props.className) .toMatch('rc-calendar-month-panel-cell-disabled'); }); @@ -125,9 +124,9 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-range-right .rc-calendar-month-select').simulate('click'); const monthCells = wrapper.find('.rc-calendar-range-right .rc-calendar-month-panel-cell'); const leftPanelMonth = wrapper.state('value')[0].month(); - expect(monthCells.get(leftPanelMonth).className) + expect(monthCells.get(leftPanelMonth).props.className) .toMatch('rc-calendar-month-panel-cell-disabled'); - expect(monthCells.get(leftPanelMonth - 1).className) + expect(monthCells.get(leftPanelMonth - 1).props.className) .toMatch('rc-calendar-month-panel-cell-disabled'); }); @@ -166,9 +165,9 @@ describe('RangeCalendar', () => { /> ); wrapper.find('.rc-calendar-range-left .rc-calendar-date').at(5).simulate('click'); // 9.4 - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('2015-09-04'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('2015-09-04'); wrapper.find('.rc-calendar-range-right .rc-calendar-date').at(5).simulate('click'); // 10.2 - expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('2015-10-02'); + expect(wrapper.find('.rc-calendar-input').at(1).getDOMNode().value).toBe('2015-10-02'); }); it('onSelect works reversely', () => { @@ -189,11 +188,11 @@ describe('RangeCalendar', () => { ); wrapper.find('.rc-calendar-range-left .rc-calendar-date').at(15).simulate('click'); // 9.14 - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('2015-09-14'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('2015-09-14'); wrapper.find('.rc-calendar-range-left .rc-calendar-date').at(5).simulate('click'); // 9.4 - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('2015-09-04'); - expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('2015-09-14'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('2015-09-04'); + expect(wrapper.find('.rc-calendar-input').at(1).getDOMNode().value).toBe('2015-09-14'); }); it('onHoverChange works', () => { @@ -215,7 +214,7 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); const selectedValues = wrapper.find('.rc-time-picker-panel-select-option-selected'); for (let i = 0; i < selectedValues.length; i += 1) { - expect(selectedValues.get(i).innerHTML).toBe('01'); + expect(selectedValues.at(i).text()).toBe('01'); } }); @@ -225,23 +224,23 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-today').at(0).simulate('click').simulate('click'); // use timePicker's defaultValue if users haven't select a time - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/29/2017 00:00:00'); - expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('3/29/2017 23:59:59'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('3/29/2017 00:00:00'); + expect(wrapper.find('.rc-calendar-input').at(1).getDOMNode().value).toBe('3/29/2017 23:59:59'); wrapper.find('.rc-calendar-time-picker-btn').simulate('click'); // update time to timePicker's time wrapper.find('.rc-calendar-range-left .rc-time-picker-panel-select ul').at(0).find('li').at(6).simulate('click'); - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/29/2017 06:00:00'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('3/29/2017 06:00:00'); wrapper.find('.rc-calendar-range-right .rc-time-picker-panel-select ul').at(0).find('li').at(6).simulate('click'); - expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('3/29/2017 06:59:59'); + expect(wrapper.find('.rc-calendar-input').at(1).getDOMNode().value).toBe('3/29/2017 06:59:59'); wrapper.find('.rc-calendar-range-left .rc-calendar-cell').at(10).simulate('click'); - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/8/2017 06:00:00'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('3/8/2017 06:00:00'); wrapper.find('.rc-calendar-range-left .rc-calendar-cell').at(20).simulate('click'); - expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('3/18/2017 06:59:59'); + expect(wrapper.find('.rc-calendar-input').at(1).getDOMNode().value).toBe('3/18/2017 06:59:59'); }); it('works fine when select reversely', () => { @@ -253,22 +252,22 @@ describe('RangeCalendar', () => { // It can only be re-produced at second time. wrapper.find('.rc-calendar-cell').at(20).simulate('click'); wrapper.find('.rc-calendar-cell').at(10).simulate('click'); - expect(wrapper.find('.rc-calendar-input').get(0).value).toBe('3/8/2017 00:00:00'); - expect(wrapper.find('.rc-calendar-input').get(1).value).toBe('3/18/2017 23:59:59'); + expect(wrapper.find('.rc-calendar-input').at(0).getDOMNode().value).toBe('3/8/2017 00:00:00'); + expect(wrapper.find('.rc-calendar-input').at(1).getDOMNode().value).toBe('3/18/2017 23:59:59'); }); }); describe('controlled panels', () => { it('render controlled panels correctly', () => { const RangeMonthPicker = mount(); - expect(renderToJson(RangeMonthPicker.render())).toMatchSnapshot(); + expect(RangeMonthPicker.render()).toMatchSnapshot(); RangeMonthPicker.find('.rc-calendar-month-panel-year-select').at(0).simulate('click'); RangeMonthPicker.find('.rc-calendar-month-panel-year-select').at(1).simulate('click'); expect(RangeMonthPicker.find('.rc-calendar-year-panel').length).toBe(0); expect(RangeMonthPicker.find('.rc-calendar-month-panel').length).toBe(2); const RangeYearPicker = mount(); - expect(renderToJson(RangeYearPicker.render())).toMatchSnapshot(); + expect(RangeYearPicker.render()).toMatchSnapshot(); RangeYearPicker.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); RangeYearPicker.find('.rc-calendar-year-panel-decade-select').at(1).simulate('click'); expect(RangeYearPicker.find('.rc-calendar-decade-panel').length).toBe(0); @@ -300,7 +299,8 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); wrapper.find('.rc-calendar-year-panel-decade-select').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(2); - expect(value[0].isSame(moment(), 'day'), expect(value[1].isSame(moment().add(1, 'month'), 'day'))); + expect(value[0].isSame(moment(), 'day')).toBe(true); + expect(value[1].isSame(moment().add(1, 'month'), 'day')).toBe(true); wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); wrapper.find('.rc-calendar-decade-panel-selected-cell').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-decade-panel').length).toBe(0); @@ -310,7 +310,8 @@ describe('RangeCalendar', () => { wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click'); wrapper.find('.rc-calendar-month-panel-selected-cell').at(0).simulate('click'); expect(wrapper.find('.rc-calendar-month-panel').length).toBe(0); - expect(value[0].isSame(moment('2010-03-29'), 'day'), expect(value[1].isSame(moment('2010-04-29'), 'day'))); + expect(value[0].isSame(moment('2010-03-29'), 'day')).toBe(true); + expect(value[1].isSame(moment('2010-04-29'), 'day')).toBe(true); wrapper.find('.rc-calendar-year-select').at(0).simulate('click'); wrapper.find('.rc-calendar-year-select').at(1).simulate('click'); diff --git a/tests/__mocks__/rc-trigger.js b/tests/__mocks__/rc-trigger.js new file mode 100644 index 00000000..32303075 --- /dev/null +++ b/tests/__mocks__/rc-trigger.js @@ -0,0 +1,3 @@ +import Trigger from 'rc-trigger/lib/mock'; + +export default Trigger; diff --git a/tests/__snapshots__/Calendar.spec.jsx.snap b/tests/__snapshots__/Calendar.spec.jsx.snap index fd0f2968..12424fde 100644 --- a/tests/__snapshots__/Calendar.spec.jsx.snap +++ b/tests/__snapshots__/Calendar.spec.jsx.snap @@ -1054,9 +1054,7 @@ exports[`Calendar controlled panels render controlled panels correctly 2`] = ` - 2010 - - - 2019 + 2010-2019
Date: Mon, 6 Nov 2017 11:49:30 +0800 Subject: [PATCH 038/176] Update examples --- examples/antd-calendar.js | 45 +++++++++++----------- examples/antd-month-calendar.js | 38 ++++++++++--------- examples/antd-range-calendar.js | 26 ++++++------- examples/control-panel.js | 36 +++++++++--------- examples/full-calendar.js | 22 +++++------ examples/getCalendarContainer.js | 44 ++++++++++++---------- examples/start-end-range.js | 64 ++++++++++++++++---------------- examples/start-end.js | 51 ++++++++++++------------- examples/week.js | 45 +++++++++++----------- 9 files changed, 188 insertions(+), 183 deletions(-) diff --git a/examples/antd-calendar.js b/examples/antd-calendar.js index f90c8ca4..950e5c32 100644 --- a/examples/antd-calendar.js +++ b/examples/antd-calendar.js @@ -3,6 +3,7 @@ import 'rc-calendar/assets/index.less'; import React from 'react'; import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; import Calendar from 'rc-calendar'; import DatePicker from 'rc-calendar/src/Picker'; import zhCN from 'rc-calendar/src/locale/zh_CN'; @@ -63,45 +64,47 @@ function disabledDate(current) { return current.valueOf() < date.valueOf(); // can not select days before today } -const Test = React.createClass({ - propTypes: { - defaultValue: React.PropTypes.object, - defaultCalendarValue: React.PropTypes.object, - }, +class Demo extends React.Component { + static propTypes = { + defaultValue: PropTypes.object, + defaultCalendarValue: PropTypes.object, + } - getInitialState() { - return { + constructor(props) { + super(props); + + this.state = { showTime: true, showDateInput: true, disabled: false, - value: this.props.defaultValue, + value: props.defaultValue, }; - }, + } - onChange(value) { + onChange = (value) => { console.log('DatePicker change: ', (value && value.format(format))); this.setState({ value, }); - }, + } - onShowTimeChange(e) { + onShowTimeChange = (e) => { this.setState({ showTime: e.target.checked, }); - }, + } - onShowDateInputChange(e) { + onShowDateInputChange = (e) => { this.setState({ showDateInput: e.target.checked, }); - }, + } - toggleDisabled() { + toggleDisabled = () => { this.setState({ disabled: !this.state.disabled, }); - }, + } render() { const state = this.state; @@ -180,8 +183,8 @@ const Test = React.createClass({
); - }, -}); + } +} function onStandaloneSelect(value) { console.log('onStandaloneSelect'); @@ -219,10 +222,10 @@ ReactDOM.render((
- +
- +
diff --git a/examples/antd-month-calendar.js b/examples/antd-month-calendar.js index 5b6b52c3..b2467f90 100644 --- a/examples/antd-month-calendar.js +++ b/examples/antd-month-calendar.js @@ -3,6 +3,7 @@ import 'rc-calendar/assets/index.less'; import React from 'react'; import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; import MonthCalendar from 'rc-calendar/src/MonthCalendar'; import DatePicker from 'rc-calendar/src/Picker'; @@ -26,36 +27,39 @@ if (cn) { const defaultCalendarValue = now.clone(); defaultCalendarValue.add(-1, 'month'); -const Test = React.createClass({ - propTypes: { - defaultValue: React.PropTypes.object, - }, - getInitialState() { - return { +class Demo extends React.Component { + static propTypes = { + defaultValue: PropTypes.object, + } + + constructor(props) { + super(props); + + this.state = { showTime: true, disabled: false, - value: this.props.defaultValue, + value: props.defaultValue, }; - }, + } - onChange(value) { + onChange = (value) => { console.log(`DatePicker change: ${value && value.format(format)}`); this.setState({ value, }); - }, + } - onShowTimeChange(e) { + onShowTimeChange = (e) => { this.setState({ showTime: e.target.checked, }); - }, + } - toggleDisabled() { + toggleDisabled = () => { this.setState({ disabled: !this.state.disabled, }); - }, + } render() { const state = this.state; @@ -104,8 +108,8 @@ const Test = React.createClass({
); - }, -}); + } +} function onStandaloneSelect(value) { console.log('month-calendar select', (value && value.format(format))); @@ -145,7 +149,7 @@ ReactDOM.render( />
- +
) , document.getElementById('__react-content')); diff --git a/examples/antd-range-calendar.js b/examples/antd-range-calendar.js index bd132d8e..6cf77a3b 100644 --- a/examples/antd-range-calendar.js +++ b/examples/antd-range-calendar.js @@ -115,22 +115,20 @@ function onStandaloneSelect(value) { console.log(format(value[0]), format(value[1])); } -const Test = React.createClass({ - getInitialState() { - return { - value: [], - hoverValue: [], - }; - }, +class Demo extends React.Component { + state = { + value: [], + hoverValue: [], + } - onChange(value) { + onChange = (value) => { console.log('onChange', value); this.setState({ value }); - }, + } - onHoverChange(hoverValue) { + onHoverChange = (hoverValue) => { this.setState({ hoverValue }); - }, + } render() { const state = this.state; @@ -168,8 +166,8 @@ const Test = React.createClass({ } } ); - }, -}); + } +} ReactDOM.render(
@@ -193,6 +191,6 @@ ReactDOM.render(
- +
, document.getElementById('__react-content')); diff --git a/examples/control-panel.js b/examples/control-panel.js index 6de7eb0c..0a8ac633 100644 --- a/examples/control-panel.js +++ b/examples/control-panel.js @@ -8,15 +8,14 @@ import RangeCalendar from 'rc-calendar/src/RangeCalendar'; import Select, { Option } from 'rc-select'; import 'rc-select/assets/index.css'; -const App = React.createClass({ - getInitialState() { - return { - mode: 'month', - rangeStartMode: 'date', - rangeEndMode: 'date', - }; - }, - onModeChange(key) { +class Demo extends React.Component { + state = { + mode: 'month', + rangeStartMode: 'date', + rangeEndMode: 'date', + }; + + onModeChange = (key) => { return function _handleChange(e) { let mode; if (e && e.target) { @@ -29,13 +28,16 @@ const App = React.createClass({ [key]: mode, }); }.bind(this); - }, - handlePanelChange(...args) { + } + + handlePanelChange = (...args) => { console.log('on panel change', ...args); - }, - handleRangePanelChange(...args) { + } + + handleRangePanelChange = (...args) => { console.log('on range panel change', ...args); - }, + } + render() { return (
@@ -78,7 +80,7 @@ const App = React.createClass({ />
); - }, -}); + } +} -ReactDOM.render(, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/full-calendar.js b/examples/full-calendar.js index 0e8b9658..2cf7ed64 100644 --- a/examples/full-calendar.js +++ b/examples/full-calendar.js @@ -32,17 +32,17 @@ function onSelect(value) { console.log('select', value.format(format)); } -const App = React.createClass({ - getInitialState() { - return { - type: 'month', - }; - }, - onTypeChange(type) { +class Demo extends React.Component { + state = { + type: 'month', + }; + + onTypeChange = (type) => { this.setState({ type, }); - }, + } + render() { return (
@@ -66,7 +66,7 @@ const App = React.createClass({ />
); - }, -}); + } +} -ReactDOM.render(, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/getCalendarContainer.js b/examples/getCalendarContainer.js index a70ccc45..fe3c4fd1 100644 --- a/examples/getCalendarContainer.js +++ b/examples/getCalendarContainer.js @@ -26,32 +26,36 @@ if (cn) { const defaultCalendarValue = now.clone(); defaultCalendarValue.add(-1, 'month'); -const Test = React.createClass({ - getInitialState() { - return { - open: false, - destroy: false, - }; - }, +class Demo extends React.Component { + state = { + open: false, + destroy: false, + }; + getCalendarContainer() { - return this.refs.d || document.getElementById('d'); - }, + return this.d || document.getElementById('d'); + } + setVisible(open) { this.setState({ open, }); - }, - open() { + } + + open = () => { this.setVisible(true); - }, - close() { + } + + close = () => { this.setVisible(false); - }, - destroy() { + } + + destroy = () => { this.setState({ destroy: true, }); - }, + } + render() { if (this.state.destroy) { return null; @@ -61,7 +65,7 @@ const Test = React.createClass({   -
+
(this.d = n)} />
); - }, -}); + } +} -ReactDOM.render(, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/start-end-range.js b/examples/start-end-range.js index a1088112..013dfd1d 100644 --- a/examples/start-end-range.js +++ b/examples/start-end-range.js @@ -25,16 +25,16 @@ if (cn) { now.locale('en-gb').utcOffset(0); } -const Picker = React.createClass({ - getInitialState() { - return { - hoverValue: [], - }; - }, - onHoverChange(hoverValue) { +class Picker extends React.Component { + state = { + hoverValue: [], + }; + + onHoverChange = (hoverValue) => { console.log(hoverValue); this.setState({ hoverValue }); - }, + } + render() { const props = this.props; const { showValue } = props; @@ -71,46 +71,44 @@ const Picker = React.createClass({ } } ); - }, -}); - -const Test = React.createClass({ - getInitialState() { - return { - startValue: null, - endValue: null, - startOpen: false, - endOpen: false, - }; - }, + } +} + +class Demo extends React.Component { + state = { + startValue: null, + endValue: null, + startOpen: false, + endOpen: false, + }; - onStartOpenChange(startOpen) { + onStartOpenChange = (startOpen) => { this.setState({ startOpen, }); - }, + } - onEndOpenChange(endOpen) { + onEndOpenChange = (endOpen) => { this.setState({ endOpen, }); - }, + } - onStartChange(value) { + onStartChange = (value) => { this.setState({ startValue: value[0], startOpen: false, endOpen: true, }); - }, + } - onEndChange(value) { + onEndChange = (value) => { this.setState({ endValue: value[1], }); - }, + } - disabledStartDate(endValue) { + disabledStartDate = (endValue) => { if (!endValue) { return false; } @@ -119,7 +117,7 @@ const Test = React.createClass({ return false; } return endValue.diff(startValue, 'days') < 0; - }, + } render() { const state = this.state; @@ -150,8 +148,8 @@ const Test = React.createClass({ />

); - }, -}); + } +} -ReactDOM.render(, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/start-end.js b/examples/start-end.js index aa8721c2..8014be62 100644 --- a/examples/start-end.js +++ b/examples/start-end.js @@ -38,13 +38,12 @@ const timePickerElement = ; const SHOW_TIME = true; -const Picker = React.createClass({ - getDefaultProps() { - return { - showTime: SHOW_TIME, - disabled: false, - }; - }, +class Picker extends React.Component { + state = { + showTime: SHOW_TIME, + disabled: false, + }; + render() { const props = this.props; const calendar = (); - }, -}); - -const Test = React.createClass({ - getInitialState() { - return { - startValue: null, - endValue: null, - }; - }, - - onChange(field, value) { + } +} + +class Demo extends React.Component { + state = { + startValue: null, + endValue: null, + }; + + onChange = (field, value) => { console.log('onChange', field, value && value.format(getFormat(SHOW_TIME))); this.setState({ [field]: value, }); - }, + } - disabledEndDate(endValue) { + disabledEndDate = (endValue) => { if (!endValue) { return false; } @@ -104,9 +101,9 @@ const Test = React.createClass({ } return SHOW_TIME ? endValue.isBefore(startValue) : endValue.diff(startValue, 'days') <= 0; - }, + } - disabledStartDate(startValue) { + disabledStartDate = (startValue) => { if (!startValue) { return false; } @@ -116,7 +113,7 @@ const Test = React.createClass({ } return SHOW_TIME ? endValue.isBefore(startValue) : endValue.diff(startValue, 'days') <= 0; - }, + } render() { const state = this.state; @@ -139,8 +136,8 @@ const Test = React.createClass({ />

); - }, -}); + } +} -ReactDOM.render(, document.getElementById('__react-content')); +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/examples/week.js b/examples/week.js index 025d4c66..245b98e0 100644 --- a/examples/week.js +++ b/examples/week.js @@ -3,6 +3,7 @@ import 'rc-calendar/assets/index.less'; import React from 'react'; import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; import Calendar from 'rc-calendar'; import DatePicker from 'rc-calendar/src/Picker'; import zhCN from 'rc-calendar/src/locale/zh_CN'; @@ -49,33 +50,31 @@ const style = ` } `; -const Test = React.createClass({ - propTypes: { - defaultValue: React.PropTypes.object, - defaultCalendarValue: React.PropTypes.object, - }, +class Demo extends React.Component { + static propTypes = { + defaultValue: PropTypes.object, + defaultCalendarValue: PropTypes.object, + } - getInitialState() { - return { - value: undefined, - open: false, - }; - }, + state = { + value: undefined, + open: false, + }; - onChange(value) { + onChange = (value) => { console.log('DatePicker change: ', (value && value.format(format))); this.setState({ value, }); - }, + } - onOpenChange(open) { + onOpenChange = (open) => { this.setState({ open, }); - }, + } - dateRender(current) { + dateRender = (current) => { const selectedValue = this.state.value; if (selectedValue && current.year() === selectedValue.year() && current.week() === selectedValue.week()) { @@ -89,23 +88,23 @@ const Test = React.createClass({
{current.date()}
); - }, + } - lastWeek() { + lastWeek = () => { const value = this.state.value || now; value.add(-1, 'weeks'); this.setState({ value, open: false, }); - }, + } renderSidebar() { return (
); - }, + } render() { const state = this.state; @@ -159,8 +158,8 @@ const Test = React.createClass({ ); - }, -}); + } +} ReactDOM.render((