Merge pull request #3 from MuhammadRafeh/select-rows-branch

MuhammadRafeh · web-flow · commit 7aeedf653207 · 2021-08-05T10:01:54.000+05:00
Select rows branch
diff --git a/README.md b/README.md
@@ -40,6 +40,7 @@ import DataTable from 'react-native-datatable-component';
 ```js
 
 import React from 'react';
+import DataTable, {COL_TYPES} from 'react-native-datatable-component';
 
 const someComponent = props => {
     return (
@@ -53,7 +54,7 @@ const someComponent = props => {
                 { name: 'Muhammad Moiz', age: 13, gender: 'male' }
             ]} // list of objects
             colNames={['name', 'age', 'gender']} //List of Strings
-            colSettings={[{ name: 'name', type: 'STRING' }, { name: 'age', type: 'INT' }, {name: 'gender', type: 'STRING'}]}//List of Objects
+            colSettings={[{ name: 'name', type: COL_TYPES.STRING }, { name: 'age', type: COL_TYPES.INT }, {name: 'gender', type: COL_TYPES.STRING}]}//List of Objects
             noOfPages={2} //number
         />
     );
@@ -68,7 +69,7 @@ You can easily control it's width by wrapping it with View
 
 ```js
 
-<View style={{width: '80%', alignSelf: 'center'}}> {//margin: 20}
+<View style={{width: '80%', alignSelf: 'center'}}> //margin: 20}
   <DataTable {...props} />
 </View>
 
@@ -87,6 +88,7 @@ data | [] of {} | - | Yes
 colNames | [] of Strings | - | Yes 
 colSettings | [] of {} | - | No
 noOfPages | Number | 2 | No
+onRowSelect | Func | - | No
 
 ## Constants
 
@@ -97,8 +99,9 @@ noOfPages | Number | 2 | No
   // Values
   // COL_TYPES.INT
   // COL_TYPES.STRING
+  // COL_TYPES.CHECK_BOX
 
-  //Below You will learn while providing colSettings, In type you'll Provide Above these.
+  //Below You will learn how to use constants while doing colSettings.
 
 ```
 
@@ -169,6 +172,38 @@ Below is the shape of Objects.
 
 How Many Pages/Sections You want in DataTable!!!
 
+`onRowSelect` *Function*
+
+DataTable passes full row in Object in which colName's value will change according to check press! 
+
+```js
+     
+import DataTable, {COL_TYPES} from 'react-native-datatable-component';
+    
+const someCom = () => {
+
+     //You can pass COL_TYPES.CHECK_BOX Column's value in true/false, by default it will be false means checkBox will be uncheck!
+     
+     const data = [
+           { menu: 'Chicken Biryani', select: false }, //If user select this row then this whole object will return to you with select true in this case
+           { menu: 'Chiken koofta', select: true },
+           { menu: 'Chicken sharwma', select: false }
+     ]
+     
+     const nameOfCols = ['menu', 'select'];
+     
+     return(
+          <DataTable
+               onRowSelect={(row) => {console.log('ROW => ',row)}}
+               data={data}
+               colNames={nameOfCols}
+               colSettings={[{name: 'select', type: COL_TYPES.CHECK_BOX}]}
+          />
+     )
+}
+
+```
+
 ## In Development
 
 We are developing the rest of Functionality! Soon we made the release!
diff --git a/assets/tick.png b/assets/tick.png
diff --git a/src/CheckBox.js b/src/CheckBox.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
+import PropTypes from 'prop-types';
+
+const CheckBox = React.memo((props) => { //props: initialVal
+
+  const {initialVal, handleOnRowSelect, info} = props;
+  
+  return (
+      <TouchableOpacity style={styles.touchableOpacity} onPress={handleOnRowSelect?.bind(null, !initialVal, info.id, info.name)} disabled={props?.disabled}>
+        <View style={[styles.backLayer, {backgroundColor: initialVal ? 'rgba(42, 187, 155, 0.1)' : 'transparent'}]} />
+        <View style={[styles.container, { backgroundColor: initialVal ? (props?.backgroundColor ? props?.backgroundColor : 'blue') : 'transparent', borderColor: props?.backgroundColor ? props?.backgroundColor : 'blue'  }]}>
+          { initialVal && ( <Image source={require('../assets/tick.png')} style={[{tintColor: props?.tickColor ? props.tickColor: 'white'} ]} resizeMode={'cover'} /> )}
+        </View>
+      </TouchableOpacity>
+  );
+})
+
+export default CheckBox;
+
+const styles = StyleSheet.create({
+  container: {
+    width: 20,
+    height: 20,
+    borderWidth: 1.5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor: 'blue',
+    borderRadius: 2,
+  },
+  touchableOpacity: {
+    width: 35, 
+    height: 33, 
+    justifyContent: 'center', 
+    alignItems: 'center'
+    // borderWidth: 1
+  },
+  backLayer: {
+    position: 'absolute', 
+    top: 4.5, 
+    left: 6, 
+    width: 24, 
+    height: 24, 
+    borderRadius: 3,
+  }
+})
+
+CheckBox.propTypes = {
+  onPress: PropTypes.func,
+  disabled: PropTypes.bool,
+  tickColor: PropTypes.string,
+  backgroundColor: PropTypes.string
+}
diff --git a/src/DataTable.js b/src/DataTable.js
@@ -12,13 +12,14 @@ export const COL_TYPES = {
     // RADIO: 'RADIO',
     INT: 'INT',
     STRING: 'STRING',
-    // ICON: 'ICON'
+    CHECK_BOX: 'CHECK_BOX'
 }
 
 const TOTAL_WIDTH = 100; //'100%'
 
-class DataTable extends React.PureComponent {
+class DataTable extends React.Component {
     state = {
+        dataPropSnap: null,
         data: [], //[{...}, {...}, ....]
         displayData: [], //currentlyDisplayData
         colNames: [],//['ad', 'asd', ...]
@@ -64,6 +65,24 @@ class DataTable extends React.PureComponent {
         }
     }
 
+    handleOnRowSelect = (isChecked, id, colName) => {
+        const data = this.state.data.map(row => {
+            if (row.id != id) return row;
+            if ('onRowSelect' in this.props) this.props?.onRowSelect({...row, [colName]: isChecked}) // Sending props
+            return {...row, [colName]: isChecked} 
+        })
+        
+        const displayData = this.state.displayData.map(row => {
+            if (row.id != id) return row;
+            return {...row, [colName]: isChecked} 
+        })
+
+        this.setState({
+            data,
+            displayData
+        })
+    }
+
     handleNextPreviousPagePress = (type) => {//next | back
         if (type == 'next') {
             // this.state.activeDisplayDataId
@@ -89,16 +108,16 @@ class DataTable extends React.PureComponent {
     }
 
     static getDerivedStateFromProps(props, currentState) {
-        // console.log(props)
-        if (JSON.stringify(props.data) === JSON.stringify(currentState.data)) return null;
-
+        //this called on every setState() & on mount & on prop changes
+        if (JSON.stringify(props.data) === JSON.stringify(currentState.dataPropSnap)) return null;
+        //Here below code means that data prop is changed
         let data = props?.data
         let colNames = props?.colNames;
 
-        if (typeof (data) != 'object') {
+        if (typeof(data) != 'object') {
             data = [];
         }
-        if (typeof (colNames) != 'object') {
+        if (typeof(colNames) != 'object') {
             colNames = ['No Columns'];
         }
 
@@ -123,11 +142,16 @@ class DataTable extends React.PureComponent {
             isSortedAssending[name] = false;
         })
 
-        const cloneData = [...data];
-
+        // const modifiedData = [...data];
+        const modifiedData = data.map((row, index) => {
+            if (!row.id) return {...row, id: index}
+            return row;
+        })
+        // console.log(modifiedData)
         return {
-            data: cloneData,
-            displayData: cloneData.slice(0, end[0]?.endData),
+            dataPropSnap: props?.data,
+            data: modifiedData,
+            displayData: modifiedData.slice(0, end[0]?.endData),
             colNames: [...colNames],
             defaultEachColumnWidth: TOTAL_WIDTH / noOfCols + '%',
             isSortedAssending: { ...currentState.isSortedAssending, ...isSortedAssending },
@@ -158,8 +182,10 @@ class DataTable extends React.PureComponent {
                 {
                     this.state.displayData.map((item, index) => (
                         <DataTableRow
+                            handleOnRowSelect={this.handleOnRowSelect}
                             widthOfLine={this.state.widthOfContainer}
                             key={index}
+                            index={index}
                             data={item}
                             mapColNameToType={this.state.mapColNameToType}
                             colNames={this.state.colNames}
@@ -203,5 +229,6 @@ DataTable.propTypes = {
         })
     ),
     noOfPages: PropTypes.number,
+    onRowSelect: PropTypes.func
     // showNoOfRowsPerDisplay: PropTypes.number //default all
 }
diff --git a/src/DataTableFooter.js b/src/DataTableFooter.js
@@ -23,7 +23,7 @@ const DataTableFooter = React.memo((props) => {
     if (!startObj && !endObj){
         isDataAvailable = false;
     }
-
+    console.log(startObj, endObj)
     return (
         <View style={styles.lastRow}>
             <View style={styles.noOfPages}>
diff --git a/src/DataTableHeader.js b/src/DataTableHeader.js
@@ -14,7 +14,7 @@ const DataTableHeader = React.memo((props) => {
             {
                 colNames.map((colName, index) => {
                     const colType = mapColNameToType[colName]
-                    const justifyContent = (colType == COL_TYPES.STRING || colType == null) ? 'flex-start' : (colType == COL_TYPES.ICON || colType == COL_TYPES.RADIO) ? 'center' : 'flex-end'
+                    const justifyContent = (colType == COL_TYPES.STRING || colType == null) ? 'flex-start' : (colType == COL_TYPES.CHECK_BOX || colType == COL_TYPES.RADIO) ? 'center' : 'flex-end'
                     let paddingLeft = 0;
                     let paddingRight = 0;
                     if (justifyContent == 'flex-start') {
@@ -24,12 +24,19 @@ const DataTableHeader = React.memo((props) => {
                         paddingRight = 13;
                         paddingLeft = 1
                     }
+                    if (colType == COL_TYPES.CHECK_BOX){
+                        return (
+                            <View style={[styles.headerRow, { width: defaultEachColumnWidth, justifyContent }]}>
+                                <Text style={[styles.headerLabel, {textAlign: 'center'}]}>{' ' + colName[0].toUpperCase() + colName.substring(1)}</Text>
+                            </View>
+                        )
+                    }
                     return (
                         <TouchableOpacity key={index} style={[styles.headerRow, { width: defaultEachColumnWidth, justifyContent }]} onPress={handleColPress.bind(null, colName)}>
                             <View style={{ paddingLeft }}>
                                 <Image source={require('../assets/doubleArrow.png')} />
                             </View>
-                            <View style={{}}>
+                            <View>
                                 <Text
                                     style={[styles.headerLabel, {
                                         paddingRight
diff --git a/src/DataTableRow.js b/src/DataTableRow.js
@@ -2,14 +2,14 @@ import React from 'react';
 import { View, Text, StyleSheet, Dimensions } from 'react-native';
 import { COL_TYPES } from './DataTable';
 import Line from './Line';
-// import { PADDING_HORIZONTAL } from './DataTable';
+import CheckBox from './CheckBox';
 const { width, height } = Dimensions.get('window');
 
-
 const DataTableRow = React.memo((props) => {
 
-    const { data, colNames, style, mapColNameToType, widthOfLine } = props;
-    // console.log(highlighted)
+    //data is object
+    const { data, colNames, style, mapColNameToType, widthOfLine, handleOnRowSelect } = props;
+
     let color = 'black';
     let backgroundColor = 'transparent';
     if (data.doHighlight && data.doHighlight != 'default') {
@@ -26,7 +26,7 @@ const DataTableRow = React.memo((props) => {
                 {
                     colNames.map((name, index) => {
                         const colType = mapColNameToType[name]
-                        const textAlign = (colType == COL_TYPES.STRING || colType == null) ? 'left' : (colType == COL_TYPES.ICON || colType == COL_TYPES.RADIO) ? 'center' : 'right'
+                        const textAlign = (colType == COL_TYPES.STRING || colType == null) ? 'left' : (colType == COL_TYPES.CHECK_BOX || colType == COL_TYPES.RADIO) ? 'center' : 'right'
                         let paddingLeft = 0;
                         let paddingRight = 0;
                         if (textAlign == 'left') {
@@ -37,10 +37,24 @@ const DataTableRow = React.memo((props) => {
                             paddingLeft = 1;
 
                         }
+
+                        // const handleOnCheckPress = (isChecked) => {
+                            // handleOnRowSelect(isChecked, data.id, name)
+                        // }
+                        // console.log(data[name])
                         return (
                             <View key={index} style={[styles.rowCellContainer, { width: style.defaultEachColumnWidth }]}>
-                                <Text style={[styles.rowCellText, { paddingLeft, paddingRight, textAlign, color }]}>{data[name]}</Text>
+                                {
+                                    textAlign == 'center' ? (
+                                        <View style={{width: '100%', height: 20, alignItems: 'center', justifyContent: 'center'}}>
+                                            <CheckBox info={{name, id: data.id}} handleOnRowSelect={handleOnRowSelect} initialVal={data[name] == true ? true: false}/> 
+                                        </View>
+                                    ): (
+                                        <Text style={[styles.rowCellText, { paddingLeft, paddingRight, textAlign, color }]}>{data[name]}</Text>
+                                    )
+                                }
                             </View>
+                            
                         );
                     })
                 }

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ const DataTableFooter = React.memo((props) => {`
`23`	`23`	`if (!startObj && !endObj){`
`24`	`24`	`isDataAvailable = false;`
`25`	`25`	`}`
`26`		`-`
	`26`	`+ console.log(startObj, endObj)`
`27`	`27`	`return (`
`28`	`28`	`<View style={styles.lastRow}>`
`29`	`29`	`<View style={styles.noOfPages}>`