From c0d84fe60367283b782f043f3dcb83ee6009b28c Mon Sep 17 00:00:00 2001
From: Wei Zhu <yesmeck@gmail.com>
Date: Mon, 6 Nov 2017 11:49:30 +0800
Subject: [PATCH]  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({
         </DatePicker>
       </div>
     </div>);
-  },
-});
+  }
+}
 
 function onStandaloneSelect(value) {
   console.log('onStandaloneSelect');
@@ -219,10 +222,10 @@ ReactDOM.render((<div
       />
     </div>
     <div style={{ float: 'left', width: 300 }}>
-      <Test defaultValue={now} />
+      <Demo defaultValue={now} />
     </div>
     <div style={{ float: 'right', width: 300 }}>
-      <Test defaultCalendarValue={defaultCalendarValue} />
+      <Demo defaultCalendarValue={defaultCalendarValue} />
     </div>
     <div style={{ clear: 'both' }}></div>
   </div>
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({
         </DatePicker>
       </div>
     </div>);
-  },
-});
+  }
+}
 
 function onStandaloneSelect(value) {
   console.log('month-calendar select', (value && value.format(format)));
@@ -145,7 +149,7 @@ ReactDOM.render(
     />
 
     <div style={{ marginTop: 200 }}>
-      <Test defaultValue={now} />
+      <Demo defaultValue={now} />
     </div>
   </div>)
   , 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({
           }
         }
       </Picker>);
-  },
-});
+  }
+}
 
 ReactDOM.render(
   <div>
@@ -193,6 +191,6 @@ ReactDOM.render(
     <br />
 
     <div style={{ margin: 20 }}>
-      <Test />
+      <Demo />
     </div>
   </div>, 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 (
       <div style={{ zIndex: 1000, position: 'relative' }}>
@@ -78,7 +80,7 @@ const App = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
-ReactDOM.render(<App />, document.getElementById('__react-content'));
+ReactDOM.render(<Demo />, 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 (
       <div style={{ zIndex: 1000, position: 'relative' }}>
@@ -66,7 +66,7 @@ const App = React.createClass({
         />
       </div>
     );
-  },
-});
+  }
+}
 
-ReactDOM.render(<App />, document.getElementById('__react-content'));
+ReactDOM.render(<Demo />, 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({
       &nbsp;
       <button onClick={this.destroy}>destroy</button>
       <Dialog visible={this.state.open} onClose={this.close}>
-        <div id="d" ref="d"/>
+        <div id="d" ref={n => (this.d = n)} />
         <div style={{ marginTop: 20 }}>
           <DatePicker
             getCalendarContainer={this.getCalendarContainer}
@@ -84,7 +88,7 @@ const Test = React.createClass({
         </div>
       </Dialog>
     </div>);
-  },
-});
+  }
+}
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+ReactDOM.render(<Demo />, 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({
           }
         }
       </DatePicker>);
-  },
-});
-
-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({
           />
         </p>
       </div>);
-  },
-});
+  }
+}
 
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+ReactDOM.render(<Demo />, 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 = <TimePickerPanel />;
 
 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 = (<Calendar
@@ -76,25 +75,23 @@ const Picker = React.createClass({
         }
       }
     </DatePicker>);
-  },
-});
-
-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({
         />
       </p>
     </div>);
-  },
-});
+  }
+}
 
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+ReactDOM.render(<Demo />, 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({
       <div className="rc-calendar-date">
         {current.date()}
       </div>);
-  },
+  }
 
-  lastWeek() {
+  lastWeek = () => {
     const value = this.state.value || now;
     value.add(-1, 'weeks');
     this.setState({
       value,
       open: false,
     });
-  },
+  }
 
   renderSidebar() {
     return (
       <div className="week-calendar-sidebar" key="sidebar">
         <button onClick={this.lastWeek} style={{ margin: 20 }}>上一周</button>
       </div>);
-  },
+  }
 
   render() {
     const state = this.state;
@@ -159,8 +158,8 @@ const Test = React.createClass({
         </DatePicker>
       </div>
     </div>);
-  },
-});
+  }
+}
 
 ReactDOM.render((<div
   style={{
@@ -172,6 +171,6 @@ ReactDOM.render((<div
 >
   <style dangerouslySetInnerHTML={{ __html: style }} />
   <div>
-    <Test />
+    <Demo />
   </div>
 </div>), document.getElementById('__react-content'));