From d0c7b9c204fc89812f3762ac533c667f9a35b6fa Mon Sep 17 00:00:00 2001 From: Muhammad Rafeh Date: Tue, 3 Aug 2021 19:42:29 +0500 Subject: [PATCH 1/4] Corrected & inserted checkBoxes --- assets/tick.png | Bin 0 -> 220 bytes src/CheckBox.js | 58 +++++++++++++++++++++++++++++++++++++++++ src/DataTable.js | 2 +- src/DataTableHeader.js | 11 ++++++-- src/DataTableRow.js | 20 ++++++++++---- 5 files changed, 83 insertions(+), 8 deletions(-) create mode 100644 assets/tick.png create mode 100644 src/CheckBox.js diff --git a/assets/tick.png b/assets/tick.png new file mode 100644 index 0000000000000000000000000000000000000000..706a217c73aaf484a5696212340c74c58f35d669 GIT binary patch literal 220 zcmeAS@N?(olHy`uVBq!ia0vp^{20zMl#xk5j&$T_N3F~xr2h;tAznH6Z$IFaQL?+$D8 z8#N#2e17|a*(UeCh~4;E z^pHh6=7QhV-RpO(T~on&#wOm-Ns|4{<|8J_cQzc9TiU@>JLf`Y*Zzl$JyS$>@>aK0 Q03FBR>FVdQ&MBb@0GzK>3jhEB literal 0 HcmV?d00001 diff --git a/src/CheckBox.js b/src/CheckBox.js new file mode 100644 index 0000000..3e4b348 --- /dev/null +++ b/src/CheckBox.js @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import { View, Image, StyleSheet, TouchableOpacity } from 'react-native'; +import PropTypes from 'prop-types'; + +const CheckBox = props => { //props: initialVal + + const [isSelected, setIsSelected] = useState(props.initialVal || false); + + const onSelect = () => { + props?.onPress?.bind(null, !isSelected) + setIsSelected(!isSelected) + } + + return ( + + + + { isSelected && ( )} + + + ); +} + +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 index 92bc233..e8b3d4f 100644 --- a/src/DataTable.js +++ b/src/DataTable.js @@ -12,7 +12,7 @@ export const COL_TYPES = { // RADIO: 'RADIO', INT: 'INT', STRING: 'STRING', - // ICON: 'ICON' + CHECK_BOX: 'CHECK_BOX' } const TOTAL_WIDTH = 100; //'100%' diff --git a/src/DataTableHeader.js b/src/DataTableHeader.js index 2b93b4f..c83d309 100644 --- 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 ( + + {' ' + colName[0].toUpperCase() + colName.substring(1)} + + ) + } return ( - + { + //data is object const { data, colNames, style, mapColNameToType, widthOfLine } = props; - // console.log(highlighted) + 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,20 @@ const DataTableRow = React.memo((props) => { paddingLeft = 1; } + console.log(data[name]) return ( - {data[name]} + { + textAlign == 'center' ? ( + + + + ): ( + {data[name]} + ) + } + ); }) } From da917cc6a3ae4f09b67317a142f0506e4d979b79 Mon Sep 17 00:00:00 2001 From: Muhammad Rafeh Date: Wed, 4 Aug 2021 18:00:58 +0500 Subject: [PATCH 2/4] Improved logic of keeping props snap and implement ID in rows data --- src/DataTable.js | 26 +++++++++++++++++--------- src/DataTableFooter.js | 2 +- src/DataTableRow.js | 2 +- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/DataTable.js b/src/DataTable.js index e8b3d4f..075d6c8 100644 --- a/src/DataTable.js +++ b/src/DataTable.js @@ -17,8 +17,9 @@ export const COL_TYPES = { const TOTAL_WIDTH = 100; //'100%' -class DataTable extends React.PureComponent { +class DataTable extends React.Component { state = { + dataPropSnap: null, data: [], //[{...}, {...}, ....] displayData: [], //currentlyDisplayData colNames: [],//['ad', 'asd', ...] @@ -89,16 +90,17 @@ 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 + console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa') + if (JSON.stringify(props.data) === JSON.stringify(currentState.dataPropSnap)) return null; 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 +125,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 }, @@ -160,6 +167,7 @@ class DataTable extends React.PureComponent { { if (!startObj && !endObj){ isDataAvailable = false; } - + console.log(startObj, endObj) return ( diff --git a/src/DataTableRow.js b/src/DataTableRow.js index 6193727..7cf8203 100644 --- a/src/DataTableRow.js +++ b/src/DataTableRow.js @@ -42,7 +42,7 @@ const DataTableRow = React.memo((props) => { { textAlign == 'center' ? ( - + ): ( From 9e21275dc307e7c1a53c4fb7d6568c31288eaced Mon Sep 17 00:00:00 2001 From: Muhammad Rafeh Date: Wed, 4 Aug 2021 19:19:26 +0500 Subject: [PATCH 3/4] Improved Logic & Implemented select Functionality --- src/CheckBox.js | 21 ++++++++------------- src/DataTable.js | 23 +++++++++++++++++++++-- src/DataTableRow.js | 10 +++++++--- 3 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/CheckBox.js b/src/CheckBox.js index 3e4b348..54f2b8b 100644 --- a/src/CheckBox.js +++ b/src/CheckBox.js @@ -1,25 +1,20 @@ -import React, { useState } from 'react'; +import React from 'react'; import { View, Image, StyleSheet, TouchableOpacity } from 'react-native'; import PropTypes from 'prop-types'; -const CheckBox = props => { //props: initialVal +const CheckBox = React.memo((props) => { //props: initialVal - const [isSelected, setIsSelected] = useState(props.initialVal || false); - - const onSelect = () => { - props?.onPress?.bind(null, !isSelected) - setIsSelected(!isSelected) - } + const {initialVal, handleOnRowSelect, info} = props; return ( - - - - { isSelected && ( )} + + + + { initialVal && ( )} ); -} +}) export default CheckBox; diff --git a/src/DataTable.js b/src/DataTable.js index 075d6c8..efbc748 100644 --- a/src/DataTable.js +++ b/src/DataTable.js @@ -65,6 +65,24 @@ class DataTable extends React.Component { } } + 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 @@ -91,9 +109,8 @@ class DataTable extends React.Component { static getDerivedStateFromProps(props, currentState) { //this called on every setState() & on mount & on prop changes - console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa') 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; @@ -165,6 +182,7 @@ class DataTable extends React.Component { { this.state.displayData.map((item, index) => ( { //data is object - const { data, colNames, style, mapColNameToType, widthOfLine } = props; + const { data, colNames, style, mapColNameToType, widthOfLine, handleOnRowSelect } = props; let color = 'black'; let backgroundColor = 'transparent'; @@ -37,13 +37,17 @@ const DataTableRow = React.memo((props) => { paddingLeft = 1; } - console.log(data[name]) + + // const handleOnCheckPress = (isChecked) => { + // handleOnRowSelect(isChecked, data.id, name) + // } + // console.log(data[name]) return ( { textAlign == 'center' ? ( - + ): ( {data[name]} From 21bda2a1ffda3a1f2fb799b8eaff2bdf9e26075e Mon Sep 17 00:00:00 2001 From: Muhammad Rafeh Atique Date: Wed, 4 Aug 2021 19:52:44 +0500 Subject: [PATCH 4/4] Update README.md --- README.md | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 5632aec..9cef45a 100644 --- 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 - {//margin: 20} + //margin: 20} @@ -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( + {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!