fix: memoize styles/colors

Author: renrizzolo

exampleapp/App.js

@@ -312,8 +312,7 @@ export default class App extends Component {
       selectChildren: false,
       hideChipRemove: false,
       hasErrored: false,
-      isDarkMode: false,
-      selectToggleTextColor: 'black'
+      isDarkMode: false
     }
     this.termId = 100
     this.maxItems = 5
@@ -714,10 +713,7 @@ export default class App extends Component {
           selectedItems={this.state.selectedItems}
           colors={{
             primary: '#5c3a9e',
-            success: '#bada55',
-            subItemBackground:
-              this.state.selectedItems.length > 2 ? 'purple' : 'gold',
-            selectToggleTextColor: this.state.selectToggleTextColor,
+            success: '#5c3a9e',
             chipColor: this.state.isDarkMode ? '#f7f7f7' : '#333'
           }}
           itemNumberOfLines={3}
@@ -797,20 +793,7 @@ export default class App extends Component {
             onPress={() => this.onSwitchToggle('hideChipRemove')}
             val={this.state.hideChipRemove}
           />
-          <TouchableWithoutFeedback
-            onPress={() => this.setState({ selectToggleTextColor: 'pink' })}
-          >
-            <View style={styles.switch}>
-              <Text style={styles.label}>Color test</Text>
-            </View>
-          </TouchableWithoutFeedback>
-          <TouchableWithoutFeedback
-            onPress={() => this.setState({ selectToggleTextColor: 'green' })}
-          >
-            <View style={styles.switch}>
-              <Text style={styles.label}>Color test</Text>
-            </View>
-          </TouchableWithoutFeedback>
+
           <TouchableWithoutFeedback
             onPress={() => this.SectionedMultiSelect._removeAllItems()}
           >

lib/components/RowSubItem.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import isEqual from 'lodash.isequal'
 import { View, TouchableOpacity, Text } from 'react-native'
 import ItemIcon from './ItemIcon'
 import { callIfFunction } from '../helpers'
@@ -43,7 +44,10 @@ class RowSubItem extends Component {
         }
       }
     }
-    if (this.props.mergedStyles !== nextProps.mergedStyles) {
+    if (!isEqual(this.props.mergedStyles, nextProps.mergedStyles)) {
+      return true
+    }
+    if (!isEqual(this.props.mergedColors, nextProps.mergedColors)) {
       return true
     }
     return false

lib/sectioned-multi-select.js

@@ -15,6 +15,7 @@ import {
   ActivityIndicator
 } from 'react-native'
 import isEqual from 'lodash.isequal'
+import memoize from 'memoize-one'
 import { RowItem } from './components'
 import { callIfFunction } from './helpers'
 
@@ -322,24 +323,18 @@ class SectionedMultiSelect extends PureComponent {
     this.state = {
       selector: false,
       searchTerm: '',
-      highlightedChildren: [],
-      styles: StyleSheet.flatten([defaultStyles, props.styles]),
-      colors: StyleSheet.flatten([defaultColors, props.colors])
+      highlightedChildren: []
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if (!isEqual(prevProps.styles, this.props.styles)) {
-      this.setState({
-        styles: StyleSheet.flatten([defaultStyles, this.props.styles])
-      })
-    }
-    if (!isEqual(prevProps.colors, this.props.colors)) {
-      this.setState({
-        colors: StyleSheet.flatten([defaultColors, this.props.colors])
-      })
-    }
-  }
+  getStyles = memoize(
+    (styles) => StyleSheet.flatten([defaultStyles, styles]),
+    isEqual
+  )
+  getColors = memoize(
+    (colors) => StyleSheet.flatten([defaultColors, colors]),
+    isEqual
+  )
 
   // componentWillUpdate() { date = new Date();}
   // componentDidUpdate() {console.log(new Date().valueOf() - date.valueOf())}
@@ -390,7 +385,10 @@ class SectionedMultiSelect extends PureComponent {
       renderSelectText,
       selectLabelNumberOfLines
     } = this.props
-    const { colors, styles } = this.state
+
+    const styles = this.getStyles(this.props.styles)
+    const colors = this.getColors(this.props.colors)
+
     let customSelect = null
 
     if (renderSelectText) {
@@ -789,7 +787,9 @@ class SectionedMultiSelect extends PureComponent {
   }
 
   _customChipsRenderer = () => {
-    const { styles, colors } = this.state
+    const styles = this.getStyles(this.props.styles)
+    const colors = this.getColors(this.props.colors)
+
     const {
       displayKey,
       items,
@@ -814,7 +814,9 @@ class SectionedMultiSelect extends PureComponent {
   }
 
   _renderChips = () => {
-    const { styles, colors } = this.state
+    const styles = this.getStyles(this.props.styles)
+    const colors = this.getColors(this.props.colors)
+
     const {
       selectedItems,
       single,
@@ -900,7 +902,9 @@ class SectionedMultiSelect extends PureComponent {
       hideChipRemove,
       IconRenderer
     } = this.props
-    const { styles, colors } = this.state
+    const styles = this.getStyles(this.props.styles)
+    const colors = this.getColors(this.props.colors)
+
     return selectedItems.map((singleSelectedItem) => {
       const item = this._findItem(singleSelectedItem)
 
@@ -979,27 +983,33 @@ class SectionedMultiSelect extends PureComponent {
     })
   }
 
-  _renderSeparator = () => (
-    <View
-      style={[
-        {
-          flex: 1,
-          height: StyleSheet.hairlineWidth,
-          alignSelf: 'stretch',
-          backgroundColor: '#dadada'
-        },
-        this.state.styles.separator
-      ]}
-    />
-  )
+  _renderSeparator = () => {
+    const styles = this.getStyles(this.props.styles)
+    return (
+      <View
+        style={[
+          {
+            flex: 1,
+            height: StyleSheet.hairlineWidth,
+            alignSelf: 'stretch',
+            backgroundColor: '#dadada'
+          },
+          styles.separator
+        ]}
+      />
+    )
+  }
 
   _renderFooter = () => {
     const { footerComponent } = this.props
     return <View>{footerComponent && callIfFunction(footerComponent)}</View>
   }
 
   _renderItemFlatList = ({ item }) => {
-    const { styles, colors } = this.state
+    const styles = this.getStyles(this.props.styles)
+    const colors = this.getColors(this.props.colors)
+
+    // const { styles, colors } = this.state
 
     const { searchTerm } = this.state
     return (
@@ -1020,7 +1030,8 @@ class SectionedMultiSelect extends PureComponent {
   }
   ModalContentWrapper = ({ children }) => {
     const { modalWithSafeAreaView } = this.props
-    const { styles } = this.state
+    const styles = this.getStyles(this.props.styles)
+
     const Component = modalWithSafeAreaView ? SafeAreaView : View
     return (
       <Component
@@ -1088,7 +1099,10 @@ class SectionedMultiSelect extends PureComponent {
       disabled,
       itemsFlatListProps
     } = this.props
-    const { searchTerm, selector, styles, colors } = this.state
+    const { searchTerm, selector } = this.state
+    const styles = this.getStyles(this.props.styles)
+    const colors = this.getColors(this.props.colors)
+    console.log({ styles, colors })
     const renderItems = searchTerm
       ? this._filterItems(searchTerm.trim())
       : items