Use arrow instead of bind (d-a-n#40)

* Use arrow functions instead of manually bind methods * Remove unused state variable * Use proptypes from Modal-library instead of creating own ones * Set initial state in constructor, not in componentDidMount
bdelville · Feb 5, 2018 · f995108 · f995108
1 parent 1eacde0
commit f995108
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 38 deletions.
diff --git a/BaseComponent.js b/BaseComponent.js
diff --git a/index.js b/index.js
@@ -15,7 +15,6 @@ import {
 } from 'react-native';
 
 import styles from './style';
-import BaseComponent from './BaseComponent';
 
 const ViewPropTypes = RNViewPropTypes || View.propTypes;
 
@@ -40,7 +39,7 @@ const propTypes = {
     overlayStyle:              ViewPropTypes.style,
     cancelText:                PropTypes.string,
     disabled:                  PropTypes.bool,
-    supportedOrientations:     PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'landscape', 'portrait-upside-down', 'landscape-left', 'landscape-right'])),
+    supportedOrientations:     Modal.propTypes.supportedOrientations,
     keyboardShouldPersistTaps: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     backdropPressToClose:      PropTypes.bool,
 };
@@ -69,39 +68,26 @@ const defaultProps = {
     backdropPressToClose:      false,
 };
 
-export default class ModalSelector extends BaseComponent {
+export default class ModalSelector extends React.Component {
 
-    constructor() {
-
-        super();
-
-        this._bind(
-            'onChange',
-            'open',
-            'close',
-            'renderChildren'
-        );
+    constructor(props) {
+        super(props);
 
         this.state = {
-            modalVisible: false,
-            transparent:  false,
-            selected:     'please select',
-            changedItem:  undefined,
+            modalVisible:  false,
+            selected:      props.initValue,
+            cancelText:    props.cancelText,
+            changedItem:   undefined,
         };
     }
 
-    componentDidMount() {
-        this.setState({selected: this.props.initValue});
-        this.setState({cancelText: this.props.cancelText});
-    }
-
     componentWillReceiveProps(nextProps) {
         if (nextProps.initValue !== this.props.initValue) {
             this.setState({selected: nextProps.initValue});
         }
     }
 
-    onChange(item) {
+    onChange = (item) => {
         if (Platform.OS === 'android' || !Modal.propTypes.onDismiss) {
             // RN >= 0.50 on iOS comes with the onDismiss prop for Modal which solves RN issue #10471
             this.props.onChange(item);
@@ -110,28 +96,28 @@ export default class ModalSelector extends BaseComponent {
         this.close();
     }
 
-    close() {
+    close = () => {
         this.setState({
             modalVisible: false,
         });
     }
 
-    open() {
+    open = () => {
         this.setState({
             modalVisible: true,
             changedItem:  undefined,
         });
     }
 
-    renderSection(section) {
+    renderSection = (section) => {
         return (
             <View key={section.key} style={[styles.sectionStyle,this.props.sectionStyle]}>
                 <Text style={[styles.sectionTextStyle,this.props.sectionTextStyle]}>{section.label}</Text>
             </View>
         );
     }
 
-    renderOption(option, isLastItem) {
+    renderOption = (option, isLastItem) => {
         return (
             <TouchableOpacity key={option.key} onPress={() => this.onChange(option)}>
                 <View style={[styles.optionStyle, this.props.optionStyle, isLastItem &&
@@ -141,7 +127,7 @@ export default class ModalSelector extends BaseComponent {
             </TouchableOpacity>);
     }
 
-    renderOptionList() {
+    renderOptionList = () => {
 
         let options = this.props.data.map((item, index) => {
             if (item.section) {
@@ -175,7 +161,7 @@ export default class ModalSelector extends BaseComponent {
             </TouchableWithoutFeedback>);
     }
 
-    renderChildren() {
+    renderChildren = () => {
 
         if(this.props.children) {
             return this.props.children;