Update styles & remove avoid mutating props

tableflip · Feb 28, 2018 · ecde364 · ecde364
1 parent f02ea77
commit ecde364
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -113,6 +113,7 @@ class App extends Component {
 | selectedRowStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/view.html#style) for the row container when selected. |
 | selectedCheckboxStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/image.html#style) for the checkbox image when selected. |
 | selectedLabelStyle | [default styles](src/SelectMultiple.styles.js) | `object` | [Style](https://facebook.github.io/react-native/docs/text.html#style) for the text label when selected. |
+| renderCheckbox | null | `func` | Function for render custom checkbox. | 
 | renderLabel | null | `func` | Function for render label. |
 
 ## Contribute

diff --git a/src/SelectMultiple.js b/src/SelectMultiple.js
@@ -115,52 +115,55 @@ export default class SelectMultiple extends Component {
     return <ListView style={style} dataSource={dataSource} renderRow={renderItemRow} {...(listViewProps || {})} />
   }
 
-  renderLabel = (label, style, selected) => {
+  renderLabel = (row) => {
+    const {labelStyle, selectedLabelStyle} = this.props
+    const labelStyleToRender = row.selected 
+      ? mergeStyles(styles.label, labelStyle, selectedLabelStyle) 
+      : mergeStyles(styles.label, labelStyle);
+
     if (this.props.renderLabel) {
-      return this.props.renderLabel(label, style, selected)
+      return this.props.renderLabel(row.label, labelStyleToRender, row.selected)
     }
     return (
-      <Text style={style}>{label}</Text>
+      <Text style={labelStyleToRender}>{row.label}</Text>
     )
   }
 
-  renderItemRow = (row) => {
-    let {
-      checkboxSource,
-      rowStyle,
-      labelStyle,
-      checkboxStyle
-    } = this.props
+  getCheckboxStyle = (row) => {
+    const {renderCheckbox, selectedCheckboxStyle, checkboxStyle} = this.props
+
+    if (row.selected) {
+      return mergeStyles(styles.checkbox, checkboxStyle, selectedCheckboxStyle)
+    } else {
+      return mergeStyles(styles.checkbox, checkboxStyle)
+    }
+  }
+
+  getRowStyle = (row) => {
+    const {rowStyle, selectedRowStyle} = this.props;
 
+    if (row.selected) {
+      return mergeStyles(styles.row, rowStyle, selectedRowStyle)
+    } else {
+      return mergeStyles(styles.row, rowStyle)
+    }
+  }
+
+  renderItemRow = (row) => {
     const {
+      checkboxSource,
       renderCheckbox,
-      selectedCheckboxSource,
-      selectedRowStyle,
-      selectedCheckboxStyle,
-      selectedLabelStyle
+      selectedCheckboxSource
     } = this.props
 
-    if (!renderCheckbox) {
-      if (row.selected) {
-        checkboxSource = selectedCheckboxSource
-        rowStyle = mergeStyles(styles.row, rowStyle, selectedRowStyle)
-        checkboxStyle = mergeStyles(styles.checkbox, checkboxStyle, selectedCheckboxStyle)
-        labelStyle = mergeStyles(styles.label, labelStyle, selectedLabelStyle)
-      } else {
-        rowStyle = mergeStyles(styles.row, rowStyle)
-        checkboxStyle = mergeStyles(styles.checkbox, checkboxStyle)
-        labelStyle = mergeStyles(styles.label, labelStyle)
-      }
-    }
-
     return (
       <TouchableWithoutFeedback onPress={() => this.onRowPress(row)}>
-        <View style={rowStyle}>
+        <View style={this.getRowStyle(row)}>
           {renderCheckbox 
             ? renderCheckbox(row.selected)
-            : <Image style={checkboxStyle} source={checkboxSource} />
+            : <Image style={this.getCheckboxStyle(row)} source={row.selected ? selectedCheckboxSource : checkboxSource} />
           }
-          {this.renderLabel(row.label, labelStyle, row.selected)}
+          {this.renderLabel(row)}
         </View>
       </TouchableWithoutFeedback>
     )