Fix react16 warning

.gitignore

@@ -1,5 +1,6 @@
 *.iml
 *.log
+*.log.*
 .idea
 .ipr
 .iws
@@ -22,6 +23,7 @@ node_modules
 *.css
 build
 lib
+es
 coverage
 *.js
 *.jsx

examples/multi-picker.native.tsx

@@ -36,18 +36,18 @@ const cols = [
   },
 ];
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
+export class Test extends React.Component<any, any> {
+  state = {
       value: ['1', '2'],
-    };
-  },
-  onChange(value) {
+  };
+
+  onChange = (value) => {
     console.log('onChange', value);
     this.setState({
       value,
     });
-  },
+  }
+
   render() {
     return (
       <View style={{ borderWidth: 2, padding: 10 }}>
@@ -59,8 +59,8 @@ const Test = React.createClass({
         </MultiPicker>
       </View>
     );
-  },
-});
+  }
+}
 
 export const Demo = Test;
 export const title = 'multi-picker';

examples/multi-picker.tsx

@@ -38,18 +38,18 @@ const cols = [
   },
 ];
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
+class Test extends React.Component<any, any> {
+  state = {
       value: ['1', '2'],
-    };
-  },
-  onChange(value) {
+  };
+
+  onChange = (value) => {
     console.log('onChange', value);
     this.setState({
       value,
     });
-  },
+  }
+
   render() {
     return (
       <div style={{ border: '1px solid black', padding: 10 }}>
@@ -61,7 +61,7 @@ const Test = React.createClass({
         </MultiPicker>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Test />, document.getElementById('__react-content'));

examples/picker.native.tsx

@@ -16,20 +16,18 @@ const styles = StyleSheet.create({
   },
 });
 
-const PickerDemo = React.createClass({
-  getInitialState() {
-    return {
-      items: this.getItems(count),
-      value: `${count + len / 2}`,
-    };
-  },
+export class PickerDemo extends React.Component<any, any> {
+  state = {
+    items: this.getItems(count),
+    value: `${count + len / 2}`,
+  };
 
-  onChange(value) {
+  onChange = (value) => {
     console.log('onChange', value);
     this.setState({
       value,
     });
-  },
+  }
 
   getItems(start) {
     const items: any[] = [];
@@ -40,16 +38,16 @@ const PickerDemo = React.createClass({
       });
     }
     return items;
-  },
+  }
 
-  rerender() {
+  rerender = () => {
     count += len;
     const items = this.getItems(count);
     this.setState({
       items,
       value: String(count),
     });
-  },
+  }
 
   render() {
     return (<View style={{ padding: 10 }}>
@@ -64,8 +62,8 @@ const PickerDemo = React.createClass({
         {this.state.items}
       </Picker>
     </View>);
-  },
-});
+  }
+}
 
 export const Demo = PickerDemo;
 export const title = 'picker';

examples/picker.tsx

@@ -8,25 +8,26 @@ import ReactDOM from 'react-dom';
 let count = 0;
 const len = 10;
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
-      disabled: false,
-      items: this.getItems(count),
-      value: `${count}`,
-    };
-  },
-  onChange(value) {
+class PickerDemo extends React.Component<any, any> {
+  state =  {
+    disabled: false,
+    items: this.getItems(count),
+    value: `${count}`,
+  };
+
+  onChange = (value) => {
     console.log('onChange', value);
     this.setState({
       value,
     });
-  },
-  disable() {
+  }
+
+  disable = () => {
     this.setState({
       disabled: !this.state.disabled,
     });
-  },
+  }
+
   getItems(start) {
     const items: any[] = [];
     for (let i = start; i < start + len; i++) {
@@ -36,15 +37,17 @@ const Test = React.createClass({
       });
     }
     return items;
-  },
-  rerender() {
+  }
+
+  rerender = () => {
     count += len;
     const items = this.getItems(count);
     this.setState({
       items,
       value: String(count),
     });
-  },
+  }
+
   render() {
     return (
       <div style={{ border: '1px solid black', padding: 10 }}>
@@ -60,7 +63,7 @@ const Test = React.createClass({
         </Picker>
       </div>
     );
-  },
-});
+  }
+}
 
-ReactDOM.render(<Test />, document.getElementById('__react-content'));
+ReactDOM.render(<PickerDemo />, document.getElementById('__react-content'));

examples/popup.tsx

@@ -11,27 +11,29 @@ import Popup from '../src/Popup';
 
 const colData = [{ label: '1', value: '1' }, { label: '2', value: '2' }];
 
-const Demo = React.createClass({
-  getInitialState() {
-    return {
-      disabled: false,
-      value: null,
-    };
-  },
-  disable() {
+class Demo extends React.Component<any, any> {
+  state = {
+    disabled: false,
+    value: null,
+  };
+
+  disable = () => {
     this.setState({
       disabled: !this.state.disabled,
     });
-  },
-  onOk(value) {
+  }
+
+  onOk = (value) => {
     console.log('onOk', value);
     this.setState({
       value,
     });
-  },
-  onDismiss() {
+  }
+
+  onDismiss = () => {
     console.log('onDismiss');
-  },
+  }
+
   render() {
     return (
       <div style={{ margin: '10px 30px' }}>
@@ -54,7 +56,7 @@ const Demo = React.createClass({
         </div>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<Demo />, document.getElementById('__react-content'));

package.json

@@ -48,6 +48,7 @@
     "object-assign": "4.x",
     "rc-dialog": "^6.4.0",
     "rc-touchable": "^1.0.2",
+    "react-mixin": "^3.0.5",
     "zscroller": "~0.3.0"
   },
   "devDependencies": {
@@ -64,7 +65,7 @@
     "react": "15.5.x",
     "react-dom": "15.5.x",
     "react-native": "0.41.x",
-    "react-native-index-page": "~0.1.0"
+    "react-native-index-page": "~0.2.0"
   },
   "typings": "./lib/index.d.ts",
   "pre-commit": [

src/MultiPicker.native.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import reactMixin from 'react-mixin';
 import Picker from './Picker';
 import MultiPickerProps from './MultiPickerProps';
 import MultiPickerMixin from './MultiPickerMixin';
@@ -16,8 +17,9 @@ const styles = StyleSheet.create({
   },
 });
 
-const MultiPicker = React.createClass<MultiPickerProps, any>({
-  mixins: [MultiPickerMixin],
+class MultiPicker extends React.Component<MultiPickerProps, any> {
+  getValue: () => any;
+  onValueChange: (i: number) => any;
 
   render() {
     const props = this.props;
@@ -45,7 +47,9 @@ const MultiPicker = React.createClass<MultiPickerProps, any>({
         {colElements}
       </View>
     );
-  },
-});
+  }
+}
+
+reactMixin.onClass(MultiPicker, MultiPickerMixin);
 
 export default MultiPicker;

src/MultiPicker.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
 import classnames from 'classnames';
+import reactMixin from 'react-mixin';
 import Picker from './Picker';
 import MultiPickerProps from './MultiPickerProps';
 import MultiPickerMixin from './MultiPickerMixin';
 
-const MultiPicker = React.createClass<MultiPickerProps, any>({
-  mixins: [MultiPickerMixin],
+class MultiPicker extends React.Component<MultiPickerProps, any> {
+  getValue: () => any;
+  onValueChange: (i: number) => any;
 
   render() {
-    const props = this.props;
     const {
       prefixCls, pickerPrefixCls,
       className, rootNativeProps,
       disabled, pickerItemStyle,
       indicatorStyle,
       pure, children,
-    } = props;
+    } = this.props;
     const selectedValue = this.getValue();
     const colElements = children.map((col, i) => {
       return (
@@ -38,7 +39,9 @@ const MultiPicker = React.createClass<MultiPickerProps, any>({
         {colElements}
       </div>
     );
-  },
-});
+  }
+}
+
+reactMixin.onClass(MultiPicker, MultiPickerMixin);
 
 export default MultiPicker;

src/MultiPickerProps.tsx

@@ -15,6 +15,8 @@ interface IMultiPickerProps {
   rootNativeProps?: any;
   indicatorStyle?: any;
   onValueChange?: (v?: any) => void;
+  children?: any;
+  style?: any;
 }
 
 export default IMultiPickerProps;