#44 Fixed (#46)

* Fixed #44 - State update handling in onChange * Updated example to show state update operation
rinku-k · Nov 30, 2022 · 7cf63e0 · 7cf63e0
1 parent fb32658
commit 7cf63e0
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 59 deletions.
diff --git a/example/customCheckList.js b/example/customCheckList.js
@@ -14,7 +14,9 @@ const data = Emojis;
 
 const renderItem = ({ item }) => {
   return (
-    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+    <View
+      style={{ flexDirection: 'row', alignItems: 'center' }}
+      key={item.name}>
       <Image source={item.src} style={{ width: 50, height: 50 }} />
       <Text
         numberOfLines={1}
@@ -32,62 +34,79 @@ const renderItem = ({ item }) => {
 class Selector extends Component {
   constructor(props) {
     super(props);
+    this.preSelectedItems = data.slice(0, 4);
     this.state = {
       loader: true,
+      selectedItems: [],
     };
   }
 
   componentDidMount() {
-    setTimeout(() => this.setState({ loader: false }), 500);
+    setTimeout(() => {
+      this.setState({ loader: false });
+      this.setState({ selectedItems: this.preSelectedItems });
+    }, 500);
   }
 
   render() {
     const theme = 'red';
     const border = 'grey';
     return (
       <SafeAreaView style={{ flex: 1 }}>
-        <CheckboxList
-          headerName="Emojis"
-          theme={theme}
-          listItems={this.state.loader ? [] : data}
-          onChange={({ ids, items }) => {
-            // eslint-disable-next-line no-console
-            console.log('My updated list :: ', ids);
-          }}
-          onLoading={() => (
-            <View
-              style={{
-                flex: 1,
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}>
-              <ActivityIndicator size="large" color="red" />
-              <Text style={{ fontSize: 16, color: '#555555' }}>
-                Loading....
-              </Text>
-            </View>
-          )}
-          selectedListItems={data.slice(0, 4)}
-          checkboxProp={Platform.select({
-            // Optional
-            ios: {
-              // iOS (supported from v0.3.0)
-              boxType: 'square',
-              tintColor: border,
-              onTintColor: theme,
-              onCheckColor: '#fff',
-              onFillColor: theme,
-            },
-            android: {
-              tintColors: {
-                true: theme,
-                false: border,
+        <View style={{ flex: 1 }}>
+          <CheckboxList
+            headerName="Emojis"
+            theme={theme}
+            listItems={this.state.loader ? [] : data}
+            onChange={({ ids, items }) => {
+              // eslint-disable-next-line no-console
+              console.log('My updated list :: ', ids, items);
+              this.setState({ selectedItems: items });
+            }}
+            onLoading={() => (
+              <View
+                style={{
+                  flex: 1,
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}>
+                <ActivityIndicator size="large" color="red" />
+                <Text style={{ fontSize: 16, color: '#555555' }}>
+                  Loading....
+                </Text>
+              </View>
+            )}
+            selectedListItems={data.slice(0, 4)}
+            checkboxProp={Platform.select({
+              // Optional
+              ios: {
+                // iOS (supported from v0.3.0)
+                boxType: 'square',
+                tintColor: border,
+                onTintColor: theme,
+                onCheckColor: '#fff',
+                onFillColor: theme,
               },
-            },
-          })}
-          renderItem={renderItem}
-          // listItemStyle={{ borderBottomColor: "#eee", borderBottomWidth: 1 }}
-        />
+              android: {
+                tintColors: {
+                  true: theme,
+                  false: border,
+                },
+              },
+            })}
+            renderItem={renderItem}
+          />
+        </View>
+        <View
+          style={{
+            position: 'absolute',
+            top: 20,
+            right: 10,
+            height: 20,
+            borderRadius: 4,
+          }}>
+          <Text>Total selected : {this.state.selectedItems.length}</Text>
+        </View>
       </SafeAreaView>
     );
   }

diff --git a/src/checkList.js b/src/checkList.js
@@ -14,29 +14,34 @@ class CheckboxList extends Component {
     this.selectAllItems = this.selectAllItems.bind(this);
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  handleOnChange() {
     this.props.onChange({
-      ids: nextState.selectedIndexes,
-      items: nextState.selectedListItems,
+      ids: this.state.selectedIndexes,
+      items: this.state.selectedListItems,
     });
-    return true;
   }
 
   unSelectAllItem() {
-    this.setState({
-      selectedIndexes: [],
-      selectedListItems: [],
-    });
+    this.setState(
+      {
+        selectedIndexes: [],
+        selectedListItems: [],
+      },
+      this.handleOnChange,
+    );
   }
 
   selectAllItems() {
     const { selectedIndexes } = this.state;
     const { listItems } = this.props;
     if (selectedIndexes.length < listItems.length) {
-      this.setState({
-        selectedIndexes: listItems.map(item => item.id),
-        selectedListItems: [...listItems],
-      });
+      this.setState(
+        {
+          selectedIndexes: listItems.map(item => item.id),
+          selectedListItems: [...listItems],
+        },
+        this.handleOnChange,
+      );
     } else {
       this.unSelectAllItem();
     }
@@ -55,10 +60,13 @@ class CheckboxList extends Component {
       currentSelectedIds.push(data.id);
       currentSelectedItems.push(data);
     }
-    this.setState({
-      selectedIndexes: currentSelectedIds,
-      selectedListItems: currentSelectedItems,
-    });
+    this.setState(
+      {
+        selectedIndexes: currentSelectedIds,
+        selectedListItems: currentSelectedItems,
+      },
+      this.handleOnChange,
+    );
   }
 
   render() {