diff --git a/.gitignore b/.gitignore index 04f78bff..9146790c 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,5 @@ lib es coverage yarn.lock -.vscode \ No newline at end of file +.vscode +package-lock.json \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 8fd19782..7aff03e0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -5,9 +5,10 @@ sudo: false notifications: email: - yiminghe@gmail.com + - hust2012jiangkai@gmail.com node_js: -- 6.9.1 +- 10 before_install: - | @@ -21,7 +22,8 @@ before_install: script: - | if [ "$TEST_TYPE" = test ]; then - npm test + npm test -- --coverage && \ + bash <(curl -s https://codecov.io/bash) else npm run $TEST_TYPE fi @@ -29,4 +31,3 @@ env: matrix: - TEST_TYPE=lint - TEST_TYPE=test - - TEST_TYPE=coverage diff --git a/HISTORY.md b/HISTORY.md index 8670a6c7..13665b7f 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -1,6 +1,56 @@ # History ---- +## 9.13.0 / 2019-04-02 + +- Support close onBlur + +## 9.12.0 / 2019-03-16 + +- RangerPicker support null as start or end + +## 9.11.0 / 2019-03-14 + +- RangerPicker can select same month + +## 9.10.0 / 2019-01-02 + +- add `focusablePanel` prop. + +## 9.9.0 / 2018-12-23 + +- `renderFooter(mode)` support all modes. + +## 9.8.0 / 2018-11-30 + +- DateInput support multiple date format + +## 9.7.0 / 2018-08-07 + +- Add clearIcon. + +## 9.6.0 / 2018-02-08 + +- Add Picker[dropdownClassName] + +## 9.5.0 / 2017-12-26 + +- Add Kurdish + +## 9.4.0 / 2017-12-26 + +- Add Uyghur + +## 9.2.0 / 2017-11-06 + +- React 16 support + +## 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) + ## 8.4.0 / 2017-05-31 - Supporting Bulgarian. diff --git a/README.md b/README.md index 2acaf168..642e3277 100644 --- a/README.md +++ b/README.md @@ -5,22 +5,28 @@ React Calendar [![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] -[![Test coverage][coveralls-image]][coveralls-url] +[![Test coverage][codecov-image]][codecov-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![npm download][download-image]][download-url] +[![Code Quality: Javascript][lgtm-badge]][lgtm-badge-url] +[![Total alerts][lgtm-alerts]][lgtm-alerts-url] [npm-image]: http://img.shields.io/npm/v/rc-calendar.svg?style=flat-square [npm-url]: http://npmjs.org/package/rc-calendar [travis-image]: https://img.shields.io/travis/react-component/calendar.svg?style=flat-square [travis-url]: https://travis-ci.org/react-component/calendar -[coveralls-image]: https://img.shields.io/coveralls/react-component/calendar.svg?style=flat-square -[coveralls-url]: https://coveralls.io/r/react-component/calendar?branch=master +[codecov-image]: https://img.shields.io/codecov/c/github/react-component/calendar/master.svg?style=flat-square +[codecov-url]: https://codecov.io/gh/react-component/calendar/branch/master [gemnasium-image]: http://img.shields.io/gemnasium/react-component/calendar.svg?style=flat-square [gemnasium-url]: https://gemnasium.com/react-component/calendar [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square [node-url]: http://nodejs.org/download/ [download-image]: https://img.shields.io/npm/dm/rc-calendar.svg?style=flat-square [download-url]: https://npmjs.org/package/rc-calendar +[lgtm-badge]: https://img.shields.io/lgtm/grade/javascript/g/react-component/calendar.svg?logo=lgtm&logoWidth=18 +[lgtm-badge-url]: https://lgtm.com/projects/g/react-component/calendar/context:javascript +[lgtm-alerts]: https://img.shields.io/lgtm/alerts/g/react-component/calendar.svg?logo=lgtm&logoWidth=18 +[lgtm-alerts-url]: https://lgtm.com/projects/g/react-component/calendar/alerts ## Screenshots @@ -124,7 +130,7 @@ http://react-component.github.io/calendar/examples/index.html renderFooter - () => React.Node + (mode) => React.Node extra footer @@ -148,9 +154,10 @@ http://react-component.github.io/calendar/examples/index.html format - String + String | String[] depends on whether you set timePicker and your locale - use to format/parse date(without time) value to/from input + use to format/parse date(without time) value to/from input. + When an array is provided, all values are used for parsing and first value for display. disabledDate @@ -200,18 +207,48 @@ http://react-component.github.io/calendar/examples/index.html called when a date is selected from calendar + + onClear + Function() + + called when a date is cleared from calendar + onChange Function(date: moment) called when a date is changed inside calendar (next year/next month/keyboard) + + onOk + Function(date: moment) + + called when ok button is pressed, only if it's visible + dateInputPlaceholder String date input's placeholder + + mode + enum('time', 'date', 'month', 'year', 'decade') + 'date' + control which kind of panel should be shown + + + onPanelChange + Function(date: moment, mode) + + called when panel changed + + + clearIcon + ReactNode + + specific the clear icon. + @@ -324,12 +361,30 @@ http://react-component.github.io/calendar/examples/index.html called when a date range is selected from calendar + + onInputSelect + Function(date: moment[]) + + called when a valid date entered in input + + + onClear + Function() + + called when a date range is cleared from calendar + onChange Function(date: moment[]) called when a date range is changed inside calendar (next year/next month/keyboard) + + onOk + Function(date: moment) + + called when ok button is pressed, only if it's visible + dateInputPlaceholder String[] @@ -342,12 +397,48 @@ http://react-component.github.io/calendar/examples/index.html a function which return a object with member of disabledHours/disabledMinutes/disabledSeconds according to rc-time-picker + + showDateInput + Boolean + true + whether to show date inputs on top of calendar panels + type enum('both','start', 'end') both whether fix start or end selected value. check start-end-range example + + mode + enum('date', 'month', 'year', 'decade')[] + ['date', 'date'] + control which kind of panels should be shown + + + onPanelChange + Function(date: moment[], mode) + + called when panels changed + + + hoverValue + moment[] + + control hover value + + + onHoverChange + Function(hoverValue: moment[]) + + called when hover value change + + + clearIcon + ReactNode + + specific the clear icon. + @@ -436,6 +527,12 @@ http://react-component.github.io/calendar/examples/index.html called when a date is changed inside calendar (next year/next month/keyboard) + + renderFooter + () => React.Node + + extra footer + @@ -529,6 +626,12 @@ http://react-component.github.io/calendar/examples/index.html () => {return document.body;} dom node where calendar to be rendered into + + dropdownClassName + string + + additional className applied to dropdown + diff --git a/assets/common/Calendar.less b/assets/common/Calendar.less index d23143c6..d4eff32d 100644 --- a/assets/common/Calendar.less +++ b/assets/common/Calendar.less @@ -31,9 +31,7 @@ } &-select { width: 84px; - ul { - max-height: 217px; - } + max-height: 217px; li { text-align: center; padding: 0; 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..89e11059 100644 --- a/assets/index.less +++ b/assets/index.less @@ -7,4 +7,4 @@ @import "index/YearPanel"; @import "index/DecadePanel"; @import "common/RangeCalendar"; -@import "common/FullCalendar"; \ No newline at end of file +@import "common/FullCalendar"; diff --git a/assets/index/Calendar.less b/assets/index/Calendar.less index 3da58f19..3a755cb2 100644 --- a/assets/index/Calendar.less +++ b/assets/index/Calendar.less @@ -81,6 +81,10 @@ cursor: pointer; color: #23c0fa; } + &.@{prefixClass}-time-status:hover{ + cursor: pointer; + color: #666; + } } &-prev-month-btn, @@ -288,4 +292,4 @@ &-today-btn { padding-left: 10px; } -} +} \ No newline at end of file diff --git a/assets/index/DecadePanel.less b/assets/index/DecadePanel.less index 879e0c19..f83c591d 100644 --- a/assets/index/DecadePanel.less +++ b/assets/index/DecadePanel.less @@ -7,6 +7,8 @@ z-index: 10; position: absolute; outline: none; + display: flex; + flex-direction: column; } .@{prefixClass}-decade-panel-hidden { @@ -62,13 +64,19 @@ } .@{prefixClass}-decade-panel-body { + flex: 1; padding: 9px 10px 10px; } +.@{prefixClass}-decade-panel-footer { + border-top: 1px solid #ccc; + line-height: 38px; +} + .@{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..1b35f0e6 100644 --- a/assets/index/MonthPanel.less +++ b/assets/index/MonthPanel.less @@ -7,6 +7,12 @@ z-index: 10; position: absolute; outline: none; + + > div { + height: 100%; + display: flex; + flex-direction: column; + } } .@{prefixClass}-month-panel-hidden { @@ -71,13 +77,19 @@ } .@{prefixClass}-month-panel-body { + flex: 1; padding: 9px 10px 10px; } +.@{prefixClass}-month-panel-footer { + border-top: 1px solid #ccc; + line-height: 38px; +} + .@{prefixClass}-month-panel-table { table-layout: fixed; width: 100%; - height:255px; + height: 100%; border-collapse: separate; } @@ -116,8 +128,6 @@ } } - - .@{prefixClass}-month-panel-selected-cell .@{prefixClass}-month-panel-month { background: #3fc7fa; color: #fff; @@ -127,3 +137,8 @@ color: #fff; } } + +.@{prefixClass}-month-header-wrap { + position: relative; + height: 308px; +} \ No newline at end of file diff --git a/assets/index/Picker.less b/assets/index/Picker.less index 69a88b2c..06150dda 100644 --- a/assets/index/Picker.less +++ b/assets/index/Picker.less @@ -107,4 +107,4 @@ } } } -} +} \ No newline at end of file diff --git a/assets/index/YearPanel.less b/assets/index/YearPanel.less index cde32fcf..6b31dc8e 100644 --- a/assets/index/YearPanel.less +++ b/assets/index/YearPanel.less @@ -7,6 +7,12 @@ z-index: 10; position: absolute; outline: none; + + > div { + height: 100%; + display: flex; + flex-direction: column; + } } .@{prefixClass}-year-panel-hidden { @@ -71,13 +77,19 @@ } .@{prefixClass}-year-panel-body { + flex: 1; padding: 9px 10px 10px; } +.@{prefixClass}-year-panel-footer { + border-top: 1px solid #ccc; + line-height: 38px; +} + .@{prefixClass}-year-panel-table { table-layout: fixed; width: 100%; - height: 255px; + height: 100%; border-collapse: separate; } diff --git a/examples/antd-calendar.js b/examples/antd-calendar.js index f90c8ca4..2d2e64cb 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,58 +64,78 @@ 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.calendarContainerRef = React.createRef(); + + this.state = { showTime: true, showDateInput: true, disabled: false, - value: this.props.defaultValue, + open: false, + 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, }); - }, + } + + onOpenChange = (open) => { + this.setState({ + open, + }); + } + + onReadOnlyFocus = () => { + this.setState({ + open: true, + }); + } + + getCalendarContainer = () => this.calendarContainerRef.current; - toggleDisabled() { + toggleDisabled = () => { this.setState({ disabled: !this.state.disabled, }); - }, + } render() { const state = this.state; const calendar = (); return (
@@ -155,24 +176,28 @@ const Test = React.createClass({ > { ({ value }) => { return ( - - + + +
); } @@ -180,8 +205,47 @@ const Test = React.createClass({
); - }, -}); + } +} + +const multiFormats = ['DD/MM/YYYY', 'DD/MM/YY', 'DDMMYY', 'D/M/YY']; + +class DemoMultiFormat extends React.Component { + constructor(props) { + super(props); + + this.state = { + value: now, + }; + } + + onChange = (value) => { + console.log('Calendar change: ', (value && value.format(format))); + this.setState({ + value, + }); + } + + render() { + const state = this.state; + return (
+
+ Accepts multiple input formats +
+ {multiFormats.join(', ')} +
+ +
); + } +} function onStandaloneSelect(value) { console.log('onStandaloneSelect'); @@ -210,20 +274,24 @@ ReactDOM.render((
({mode} extra footer)} />
- +
- +
+
+ +
), document.getElementById('__react-content')); diff --git a/examples/antd-month-calendar.js b/examples/antd-month-calendar.js index 5b6b52c3..15ed13f2 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))); @@ -142,10 +146,11 @@ ReactDOM.render( onChange={onStandaloneChange} monthCellContentRender={onMonthCellContentRender} defaultValue={defaultCalendarValue} + renderFooter={() => 'extra footer'} />
- +
) , document.getElementById('__react-content')); diff --git a/examples/antd-range-calendar.js b/examples/antd-range-calendar.js index bd132d8e..717d77a1 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(
@@ -188,11 +186,12 @@ ReactDOM.render( disabledDate={disabledDate} timePicker={timePickerElement} disabledTime={disabledTime} + renderFooter={() => extra footer} />

- +
, document.getElementById('__react-content')); 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..0a8ac633 --- /dev/null +++ b/examples/control-panel.js @@ -0,0 +1,86 @@ +/* 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'; + +class Demo extends React.Component { + state = { + 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/examples/custom-clear-icon.html b/examples/custom-clear-icon.html new file mode 100644 index 00000000..b3a42524 --- /dev/null +++ b/examples/custom-clear-icon.html @@ -0,0 +1 @@ +placeholder \ No newline at end of file diff --git a/examples/custom-clear-icon.js b/examples/custom-clear-icon.js new file mode 100644 index 00000000..93b8d4c3 --- /dev/null +++ b/examples/custom-clear-icon.js @@ -0,0 +1,89 @@ +/* eslint react/no-multi-comp:0, no-console:0 */ + +import 'rc-calendar/assets/index.less'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import Calendar from 'rc-calendar'; +import RangeCalendar from 'rc-calendar/src/RangeCalendar'; +import 'rc-time-picker/assets/index.css'; + +import 'moment/locale/zh-cn'; +import 'moment/locale/en-gb'; + +const clearPath = 'M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 ' + + '290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0' + + ' 335.8-115 394.6-276.1 1.5-4.2-0.7-8.9-4.9-10.3l-56.7-19.5c-4.1-1.4-8.6' + + ' 0.7-10.1 4.8-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4-31.6' + + ' 31.6-68.4 56.4-109.3 73.8-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133' + + '.8-27-40.9-17.3-77.7-42.1-109.3-73.8-31.6-31.6-56.4-68.4-73.7-109.4-17.9-42' + + '.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6' + + ' 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5' + + ' 9.1 133.8 27 40.9 17.3 77.7 42.1 109.3 73.8 9.9 9.9 19.2 20.4 27.8' + + ' 31.4l-60.2 47c-5.3 4.1-3.5 12.5 3 14.1l175.6 43c5 1.2 9.9-2.6 9.9' + + '-7.7l0.8-180.9c-0.1-6.6-7.8-10.3-13-6.2z'; + +const svg = ( + + + + + +); + +const calendars = ['time', 'date', 'month', 'year', 'decade'].map((mode) => { + return ( +
+
{mode}
+ +
+ ); +}); + +ReactDOM.render((
+
+
+ +
+ {calendars} +
+ +
+
), 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((