Merge pull request #2 from MuhammadRafeh/component-update-branch

Component update branch

Author: MuhammadRafeh

README.md

@@ -86,7 +86,7 @@ Name | Type| Default | Is Require
 data | [] of {} | - | Yes 
 colNames | [] of Strings | - | Yes 
 colSettings | [] of {} | - | No
-noOfPages | Number | 3 | No
+noOfPages | Number | 2 | No
 
 ## Constants
 

functions/showCurrentProgress.js

@@ -1,4 +1,4 @@
-const showCurrentProgress = (numOfPages = 3, fullLengthOfData) => { //default is 3
+const showCurrentProgress = (numOfPages = 2, fullLengthOfData) => { //default is 3
     if (+numOfPages < 1) {
         throw new Error('No Of Pages Should be equal or greater Than 1')
     }

src/DataTable.js

@@ -7,9 +7,6 @@ import DataTableHeader from './DataTableHeader';
 import Line from './Line';
 import sortData from '../functions/sort';
 import showCurrentProgress from '../functions/showCurrentProgress';
-// import 'react-native-gesture-handlerasd'
-
-const { width, height } = Dimensions.get('window');
 
 export const COL_TYPES = {
     // RADIO: 'RADIO',
@@ -18,34 +15,25 @@ export const COL_TYPES = {
     // ICON: 'ICON'
 }
 
-// let TouchableComponent = TouchableOpacity
-// export const PADDING_HORIZONTAL = 10;
-
-// if (Platform.OS == 'android' && Platform.Version >= 21) {
-//     TouchableComponent = TouchableNativeFeedback
-// }
-
-const PADDING_HORIZONTAL = 10;
-
 const TOTAL_WIDTH = 100; //'100%'
 
-const defaultShowRows = 3; //means 3 percent
-
 class DataTable extends React.PureComponent {
     state = {
         data: [], //[{...}, {...}, ....]
         displayData: [], //currentlyDisplayData
         colNames: [],//['ad', 'asd', ...]
         defaultEachColumnWidth: '50%',
         // noOfCols: 0, //default 2, set 0 because of fast rendering at start
-        widthOfContainer: width,
+        widthOfContainer: 0,
         isSortedAssending: { recentlySortedCol: null }, //ColName: true||false
         startDataArray: [],//[{id: startData}]
         endDataArray: [], //[{id, endData}]
         noOfPages: 3, //default
-        activeDisplayDataId: 0
+        activeDisplayDataId: 0,
+        mapColNameToType: {}
     }
 
+
     handleColPress = name => {
         const newData = [...this.state.displayData];
 
@@ -100,51 +88,54 @@ class DataTable extends React.PureComponent {
         }
     }
 
-    componentDidMount() {
-        let data = this.props?.data
-        let colNames = this.props?.colNames;
+    static getDerivedStateFromProps(props, currentState) {
+        // console.log(props)
+        if (JSON.stringify(props.data) === JSON.stringify(currentState.data)) return null;
 
-        if (typeof(data) != 'object'){
+        let data = props?.data
+        let colNames = props?.colNames;
+
+        if (typeof (data) != 'object') {
             data = [];
-        } 
-        if (typeof(colNames) != 'object'){
+        }
+        if (typeof (colNames) != 'object') {
             colNames = ['No Columns'];
         }
 
-        this.mapColNameToType = {}
-        this.props.colSettings?.forEach(setting => {
+        const mapColNameToType = {}
+        props.colSettings?.forEach(setting => {
             if (!colNames.includes(setting.name)) throw new Error('No Column exists which mentioned in provided colSettings prop Name!')
-            this.mapColNameToType[setting.name] = setting.type;
+            mapColNameToType[setting.name] = setting.type;
         })
         let start = [];
         let end = []
         if (data.length != 0) {
-            const progress = showCurrentProgress(this.props?.noOfPages, data?.length) //[{id, endData}]
+            const progress = showCurrentProgress(props?.noOfPages, data?.length) //[{id, endData}]
             if (progress) {
                 start = progress.start;
                 end = progress.end;
             }
         }
-        this.setState((state) => {
-            const noOfCols = colNames.length;
-            const isSortedAssending = {};
-            colNames.forEach(name => {
-                isSortedAssending[name] = false;
-            })
-
-            const cloneData = [...data];
-
-            return {
-                data: cloneData,
-                displayData: cloneData.slice(0, end[0]?.endData),
-                colNames: [...colNames],
-                defaultEachColumnWidth: TOTAL_WIDTH / noOfCols + '%',
-                isSortedAssending: { ...state.isSortedAssending, ...isSortedAssending },
-                activeDisplayDataId: 0, //by default it's zero
-                startDataArray: start,
-                endDataArray: end
-            }
-        });
+
+        const noOfCols = colNames.length;
+        const isSortedAssending = {};
+        colNames.forEach(name => {
+            isSortedAssending[name] = false;
+        })
+
+        const cloneData = [...data];
+
+        return {
+            data: cloneData,
+            displayData: cloneData.slice(0, end[0]?.endData),
+            colNames: [...colNames],
+            defaultEachColumnWidth: TOTAL_WIDTH / noOfCols + '%',
+            isSortedAssending: { ...currentState.isSortedAssending, ...isSortedAssending },
+            activeDisplayDataId: 0, //by default it's zero
+            startDataArray: start,
+            endDataArray: end,
+            mapColNameToType
+        };
     }
 
     render() {
@@ -157,20 +148,20 @@ class DataTable extends React.PureComponent {
 
                 <DataTableHeader
                     colNames={this.state.colNames}
-                    mapColNameToType={this.mapColNameToType}
+                    mapColNameToType={this.state.mapColNameToType}
                     defaultEachColumnWidth={this.state.defaultEachColumnWidth}
                     handleColPress={this.handleColPress}
                 />
 
                 <Line width={this.state.widthOfContainer} header />
 
-                {this.state.data &&
+                {
                     this.state.displayData.map((item, index) => (
                         <DataTableRow
                             widthOfLine={this.state.widthOfContainer}
                             key={index}
                             data={item}
-                            mapColNameToType={this.mapColNameToType}
+                            mapColNameToType={this.state.mapColNameToType}
                             colNames={this.state.colNames}
                             style={{ defaultEachColumnWidth: this.state.defaultEachColumnWidth }}
                         />

src/DataTableRow.js

@@ -62,21 +62,11 @@ const styles = StyleSheet.create({
     },
     rowCellText: {
         color: 'black',
-        fontSize: 14.5,
-        // backgroundColor: 'green',
-        // flex: 1
-        // flexWrap: 'wrap'
+        fontSize: 14.5
     },
     rowCellContainer: {
         paddingTop: 10,
         paddingBottom: 10,
-        // backgroundColor: 'green',
-    },
-    // line: {
-    //     height: 1,
-    //     backgroundColor: '#e3e3e3',
-    //     alignSelf: 'center',
-    //     width
-    // }
+    }
 });