refactor:remove mixin, ref #40 (#41)

refactor:remove mixin, ref #40

package.json

@@ -50,8 +50,7 @@
   },
   "dependencies": {
     "babel-runtime": "6.x",
-    "classnames": "2.x",
-    "create-react-class": "15.x",
+    "classnames": "^2.2.0",
     "rmc-feedback": "^1.0.0",
     "rmc-dialog": "^0.0.1-alpha.2",
     "zscroller": "~0.3.0"

src/MultiPicker.native.tsx

@@ -1,30 +1,28 @@
 import React from 'react';
-import createClass from 'create-react-class';
 import { View } from 'react-native';
 import MultiPickerProps from './MultiPickerProps';
 import MultiPickerMixin from './MultiPickerMixin';
 
-const MultiPicker = createClass<MultiPickerProps, any>({
-  mixins: [MultiPickerMixin],
+export interface IMultiPickerProp {
+  getValue: Function;
+}
 
-  render() {
-    const props = this.props;
-    const {
-      children, style,
-    } = props;
-    const selectedValue = this.getValue();
-    const colElements = React.Children.map(children, (col: any, i) => {
-      return React.cloneElement(col, {
-        selectedValue: selectedValue[i],
-        onValueChange: (...args) => this.onValueChange(i, ...args),
-      });
+const MultiPicker = (props: IMultiPickerProp & MultiPickerProps) => {
+  const {
+    children, style,
+  } = props;
+  const selectedValue = props.getValue();
+  const colElements = React.Children.map(children, (col: any, i) => {
+    return React.cloneElement(col, {
+      selectedValue: selectedValue[i],
+      onValueChange: (...args) => props.onValueChange!(i, ...args),
     });
-    return (
-      <View style={style}>
-        {colElements}
-      </View>
-    );
-  },
-});
+  });
+  return (
+    <View style={style}>
+      {colElements}
+    </View>
+  );
+};
 
-export default MultiPicker;
+export default MultiPickerMixin(MultiPicker);

src/MultiPicker.tsx

@@ -1,35 +1,36 @@
 import React from 'react';
 import classnames from 'classnames';
-import createClass from 'create-react-class';
 import MultiPickerProps from './MultiPickerProps';
 import MultiPickerMixin from './MultiPickerMixin';
 
-const MultiPicker = createClass<MultiPickerProps, any>({
-  mixins: [MultiPickerMixin],
-  render() {
-    const {
-      prefixCls,
-      className,
-      rootNativeProps,
-      children,
-    } = this.props;
-    const selectedValue = this.getValue();
-    const colElements = React.Children.map(children, (col: any, i) => {
-      return React.cloneElement(col, {
-        selectedValue: selectedValue[i],
-        onValueChange: (...args) => this.onValueChange(i, ...args),
-      });
+export interface IMultiPickerProp {
+  getValue: Function;
+}
+
+const MultiPicker = (props: IMultiPickerProp & MultiPickerProps) => {
+  const {
+    prefixCls,
+    className,
+    rootNativeProps,
+    children,
+    style,
+  } = props;
+  const selectedValue = props.getValue();
+  const colElements = React.Children.map(children, (col: any, i) => {
+    return React.cloneElement(col, {
+      selectedValue: selectedValue[i],
+      onValueChange: (...args) => props.onValueChange!(i, ...args),
     });
-    return (
-      <div
-        {...rootNativeProps}
-        style={this.props.style}
-        className={classnames(className, prefixCls)}
-      >
-        {colElements}
-      </div>
-    );
-  },
-});
+  });
+  return (
+    <div
+      {...rootNativeProps}
+      style={style}
+      className={classnames(className, prefixCls)}
+    >
+      {colElements}
+    </div>
+  );
+};
 
-export default MultiPicker;
+export default MultiPickerMixin(MultiPicker);

src/MultiPickerMixin.tsx

@@ -1,32 +1,39 @@
 import React from 'react';
+import MultiPickerProps from './MultiPickerProps';
 
-export default {
-  getDefaultProps() {
-    return {
+export default function(ComposedComponent) {
+  return class extends React.Component<MultiPickerProps, any> {
+    static defaultProps = {
       prefixCls: 'rmc-multi-picker',
       onValueChange() {
       },
     };
-  },
 
-  getValue() {
-    const { children, selectedValue } = this.props;
-    if (selectedValue && selectedValue.length) {
-      return selectedValue;
-    } else {
-      if (!children) {
-        return [];
+    getValue = () => {
+      const { children, selectedValue } = this.props;
+      if (selectedValue && selectedValue.length) {
+        return selectedValue;
+      } else {
+        if (!children) {
+          return [];
+        }
+        return React.Children.map(children, (c: any) => {
+          const cc: any = React.Children.toArray(c.props.children);
+          return cc && cc[0] && cc[0].props.value;
+        });
       }
-      return React.Children.map(children, (c: any) => {
-        const cc: any = React.Children.toArray(c.props.children);
-        return cc && cc[0] && cc[0].props.value;
-      });
     }
-  },
 
-  onValueChange(i, v) {
-    const value = this.getValue().concat();
-    value[i] = v;
-    this.props.onValueChange(value, i);
-  },
+    onValueChange = (i, v) => {
+      const value = this.getValue().concat();
+      value[i] = v;
+      this.props.onValueChange!(value, i);
+    }
+
+    render() {
+      return (
+        <ComposedComponent {...this.props} getValue={this.getValue} onValueChange={this.onValueChange} />
+      );
+    }
+  };
 };

src/NativePicker.android.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ScrollView, View, StyleSheet, PixelRatio, Text } from 'react-native';
-import createClass from 'create-react-class';
 import PickerMixin from './PickerMixin';
 import { IPickerProps } from './PickerTypes';
 
@@ -32,20 +31,25 @@ const styles = StyleSheet.create({
   } as any,
 });
 
-const Picker = createClass<IPickerProps, any>({
-  mixins: [PickerMixin],
+export interface IPickerProp {
+  select: Function;
+  doScrollingComplete: Function;
+}
 
-  statics: {
-    Item() {
-    },
-  },
+class Picker extends React.Component<IPickerProp & IPickerProps, any> {
+  itemHeight: number;
+  itemWidth: number;
+  scrollBuffer: any;
+  scrollerRef: any;
+  contentRef: any;
+  indicatorRef: any;
 
-  onItemLayout(e) {
+  onItemLayout = (e) => {
     const { height, width } = e.nativeEvent.layout;
     // console.log('onItemLayout', height);
     if (this.itemHeight !== height || this.itemWidth !== width) {
       this.itemWidth = width;
-      (this.refs as any).indicator.setNativeProps({
+      this.indicatorRef.setNativeProps({
         style: [
           styles.indicator,
           {
@@ -58,59 +62,59 @@ const Picker = createClass<IPickerProps, any>({
     }
     if (this.itemHeight !== height) {
       this.itemHeight = height;
-      (this.refs as any).scroller.setNativeProps({
+      this.scrollerRef.setNativeProps({
         style: {
           height: height * 7,
         },
       });
-      (this.refs as any).content.setNativeProps({
+      this.contentRef.setNativeProps({
         style: {
           paddingTop: height * 3,
           paddingBottom: height * 3,
         },
       });
       // i do no know why!...
       setTimeout(() => {
-        this.select(this.props.selectedValue);
+        this.props.select(this.props.selectedValue, this.itemHeight, this.scrollTo);
       }, 0);
     }
-  },
+  }
 
   componentDidUpdate() {
-    this.select(this.props.selectedValue);
-  },
+    this.props.select(this.props.selectedValue, this.itemHeight, this.scrollTo);
+  }
 
   componentWillUnMount() {
     this.clearScrollBuffer();
-  },
+  }
 
   clearScrollBuffer() {
     if (this.scrollBuffer) {
       clearTimeout(this.scrollBuffer);
     }
-  },
+  }
 
-  scrollTo(y) {
-    (this.refs as any).scroller.scrollTo({
+  scrollTo = (y) => {
+    this.scrollerRef.scrollTo({
       y,
       animated: false,
     });
-  },
+  }
 
-  fireValueChange(selectedValue) {
+  fireValueChange = (selectedValue) => {
     if (this.props.selectedValue !== selectedValue && this.props.onValueChange) {
       this.props.onValueChange(selectedValue);
     }
-  },
+  }
 
-  onScroll(e) {
+  onScroll = (e) => {
     const { y } = e.nativeEvent.contentOffset;
     this.clearScrollBuffer();
     this.scrollBuffer = setTimeout(() => {
       this.clearScrollBuffer();
-      this.doScrollingComplete(y);
+      this.props.doScrollingComplete(y, this.itemHeight, this.fireValueChange);
     }, 100);
-  },
+  }
 
   render() {
     const { children, itemStyle, selectedValue, style } = this.props;
@@ -122,7 +126,7 @@ const Picker = createClass<IPickerProps, any>({
       totalStyle.push(itemStyle);
       return (
         <View
-          ref={`item${index}`}
+          ref={el => this[`item${index}`] = el}
           onLayout={index === 0 ? this.onItemLayout : undefined}
           key={item.key}
         >
@@ -134,20 +138,20 @@ const Picker = createClass<IPickerProps, any>({
       <View style={style}>
         <ScrollView
           style={styles.scrollView}
-          ref="scroller"
+          ref={el => this.scrollerRef = el}
           onScroll={this.onScroll}
           scrollEventThrottle={16}
           showsVerticalScrollIndicator={false}
           overScrollMode="never"
         >
-          <View ref="content">
+          <View ref={el => this.contentRef = el}>
             {items}
           </View>
         </ScrollView>
-        <View ref="indicator" style={styles.indicator}/>
+        <View ref={el => this.indicatorRef = el} style={styles.indicator}/>
       </View>
     );
-  },
-});
+  }
+}
 
-export default Picker;
+export default PickerMixin(Picker);