Update examples

amirhossein693 · Nov 6, 2017 · c0d84fe · c0d84fe
1 parent 6492103
commit c0d84fe
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 183 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'));