Fix some whyDidYouRender issues (#538)

* Fix some whyDidYouRender issues

* Remove static and fix title

Author: M-i-k-e-l

demo/src/screens/componentScreens/DialogScreen.js

@@ -14,38 +14,43 @@ import {
 } from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DialogScreen extends Component {
-  static colors = [
-    {value: Colors.red10, label: 'Red10'},
-    {value: Colors.red30, label: 'Red30'},
-    {value: Colors.red50, label: 'Red50'},
-    {value: Colors.red70, label: 'Red70'},
-    {value: Colors.blue10, label: 'Blue10'},
-    {value: Colors.blue30, label: 'Blue30'},
-    {value: Colors.blue50, label: 'Blue50'},
-    {value: Colors.blue70, label: 'Blue70'},
-    {value: Colors.purple10, label: 'Purple10'},
-    {value: Colors.purple30, label: 'Purple30'},
-    {value: Colors.purple50, label: 'Purple50'},
-    {value: Colors.purple70, label: 'Purple70'},
-    {value: Colors.green10, label: 'Green10'},
-    {value: Colors.green30, label: 'Green30'},
-    {value: Colors.green50, label: 'Green50'},
-    {value: Colors.green70, label: 'Green70'},
-    {value: Colors.yellow10, label: 'Yellow10'},
-    {value: Colors.yellow30, label: 'Yellow30'},
-    {value: Colors.yellow50, label: 'Yellow50'},
-    {value: Colors.yellow70, label: 'Yellow70'}
-  ];
-
   constructor(props) {
     super(props);
 
+    this.content = {};
+
     this.SCROLL_TYPE = {
       NONE: 'none',
       VERTICAL: 'vertical',
       HORIZONTAL: 'horizontal'
     };
 
+    this.pannableTitle = {title: 'This is a pannable header Dialog'};
+    this.title = 'This is a Dialog';
+    this.supportedOrientations = ['portrait', 'landscape'];
+    this.colors = [
+      {value: Colors.red10, label: 'Red10'},
+      {value: Colors.red30, label: 'Red30'},
+      {value: Colors.red50, label: 'Red50'},
+      {value: Colors.red70, label: 'Red70'},
+      {value: Colors.blue10, label: 'Blue10'},
+      {value: Colors.blue30, label: 'Blue30'},
+      {value: Colors.blue50, label: 'Blue50'},
+      {value: Colors.blue70, label: 'Blue70'},
+      {value: Colors.purple10, label: 'Purple10'},
+      {value: Colors.purple30, label: 'Purple30'},
+      {value: Colors.purple50, label: 'Purple50'},
+      {value: Colors.purple70, label: 'Purple70'},
+      {value: Colors.green10, label: 'Green10'},
+      {value: Colors.green30, label: 'Green30'},
+      {value: Colors.green50, label: 'Green50'},
+      {value: Colors.green70, label: 'Green70'},
+      {value: Colors.yellow10, label: 'Yellow10'},
+      {value: Colors.yellow30, label: 'Yellow30'},
+      {value: Colors.yellow50, label: 'Yellow50'},
+      {value: Colors.yellow70, label: 'Yellow70'}
+    ];
+
     this.state = {
       panDirection: PanningProvider.Directions.DOWN,
       position: 'bottom',
@@ -61,15 +66,21 @@ export default class DialogScreen extends Component {
   };
 
   setPanDirection = panDirection => {
-    this.setState({panDirection});
+    if (panDirection !== this.state.panDirection) {
+      this.setState({panDirection});
+    }
   };
 
   setPosition = position => {
-    this.setState({position});
+    if (position !== this.state.position) {
+      this.setState({position});
+    }
   };
 
   setScroll = scroll => {
-    this.setState({scroll});
+    if (scroll !== this.state.scroll) {
+      this.setState({scroll});
+    }
   };
 
   toggleShowHeader = () => {
@@ -92,11 +103,6 @@ export default class DialogScreen extends Component {
     this.setState({showDialog: false});
   };
 
-  getTitle = () => {
-    const {showHeader} = this.state;
-    return showHeader ? 'This is a pannable header Dialog' : 'This is a Dialog';
-  };
-
   getWarning = () => {
     const {showHeader, scroll, panDirection} = this.state;
     if (!showHeader && scroll !== this.SCROLL_TYPE.NONE) {
@@ -151,7 +157,7 @@ Scroll: ${scroll}`;
       <FlatList
         showsVerticalScrollIndicator={false}
         style={styles.verticalScroll}
-        data={DialogScreen.colors}
+        data={this.colors}
         renderItem={this.renderVerticalItem}
         keyExtractor={this.keyExtractor}
       />
@@ -168,7 +174,7 @@ Scroll: ${scroll}`;
         <FlatList
           horizontal
           showsHorizontalScrollIndicator={false}
-          data={DialogScreen.colors}
+          data={this.colors}
           renderItem={this.renderHorizontalItem}
           keyExtractor={this.keyExtractor}
         />
@@ -183,6 +189,10 @@ Scroll: ${scroll}`;
 
   renderContent = () => {
     const {scroll, showHeader} = this.state;
+    if (this.content[scroll + showHeader]) {
+      return this.content[scroll + showHeader];
+    }
+
     let content;
     switch (scroll) {
       case this.SCROLL_TYPE.VERTICAL:
@@ -197,16 +207,19 @@ Scroll: ${scroll}`;
         break;
     }
 
-    return (
+    const data = (
       <View spread flex={scroll !== this.SCROLL_TYPE.NONE}>
         <View marginT-20 marginH-20>
-          {!showHeader && <Text text50>{this.getTitle()}</Text>}
+          {!showHeader && <Text text50>{this.title}</Text>}
           <Text marginT-20={!showHeader}>{this.getMessage()}</Text>
           {this.getWarning()}
         </View>
         {content}
       </View>
     );
+
+    this.content[scroll + showHeader] = data;
+    return data;
   };
 
   getDialogKey = height => {
@@ -228,12 +241,12 @@ Scroll: ${scroll}`;
         bottom={position === 'bottom'}
         height={height}
         panDirection={panDirection}
-        containerStyle={[styles.dialog, isRounded && styles.roundedDialog]}
+        containerStyle={isRounded ? styles.roundedDialog : styles.dialog}
         visible={showDialog}
         onDismiss={this.hideDialog}
         renderPannableHeader={renderPannableHeader}
-        pannableHeaderProps={{title: this.getTitle()}}
-        supportedOrientations={['portrait', 'landscape']}
+        pannableHeaderProps={this.pannableTitle}
+        supportedOrientations={this.supportedOrientations}
       >
         {this.renderContent()}
       </Dialog>
@@ -303,6 +316,7 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.white
   },
   roundedDialog: {
+    backgroundColor: Colors.white,
     marginBottom: Constants.isIphoneX ? 0 : 20,
     borderRadius: 12
   },