Skip to content

Commit 7aeedf6

Browse files
MuhammadRafehMuhammadRafeh
authored
Merge pull request #3 from MuhammadRafeh/select-rows-branch
Select rows branch
2 parents 25ddc33 + 21bda2a commit 7aeedf6

7 files changed

Lines changed: 159 additions & 23 deletions

File tree

‎README.md‎

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ import DataTable from 'react-native-datatable-component';
4040
```js
4141

4242
import React from 'react';
43+
import DataTable, {COL_TYPES} from 'react-native-datatable-component';
4344

4445
const someComponent = props => {
4546
return (
@@ -53,7 +54,7 @@ const someComponent = props => {
5354
{ name: 'Muhammad Moiz', age: 13, gender: 'male' }
5455
]} // list of objects
5556
colNames={['name', 'age', 'gender']} //List of Strings
56-
colSettings={[{ name: 'name', type: 'STRING' }, { name: 'age', type: 'INT' }, {name: 'gender', type: 'STRING'}]}//List of Objects
57+
colSettings={[{ name: 'name', type: COL_TYPES.STRING }, { name: 'age', type: COL_TYPES.INT }, {name: 'gender', type: COL_TYPES.STRING}]}//List of Objects
5758
noOfPages={2} //number
5859
/>
5960
);
@@ -68,7 +69,7 @@ You can easily control it's width by wrapping it with View
6869

6970
```js
7071

71-
<View style={{width: '80%', alignSelf: 'center'}}> {//margin: 20}
72+
<View style={{width: '80%', alignSelf: 'center'}}> //margin: 20}
7273
<DataTable {...props} />
7374
</View>
7475

@@ -87,6 +88,7 @@ data | [] of {} | - | Yes
8788
colNames | [] of Strings | - | Yes
8889
colSettings | [] of {} | - | No
8990
noOfPages | Number | 2 | No
91+
onRowSelect | Func | - | No
9092

9193
## Constants
9294

@@ -97,8 +99,9 @@ noOfPages | Number | 2 | No
9799
// Values
98100
// COL_TYPES.INT
99101
// COL_TYPES.STRING
102+
// COL_TYPES.CHECK_BOX
100103

101-
//Below You will learn while providing colSettings, In type you'll Provide Above these.
104+
//Below You will learn how to use constants while doing colSettings.
102105

103106
```
104107

@@ -169,6 +172,38 @@ Below is the shape of Objects.
169172

170173
How Many Pages/Sections You want in DataTable!!!
171174

175+
`onRowSelect` *Function*
176+
177+
DataTable passes full row in Object in which colName's value will change according to check press!
178+
179+
```js
180+
181+
import DataTable, {COL_TYPES} from 'react-native-datatable-component';
182+
183+
const someCom = () => {
184+
185+
//You can pass COL_TYPES.CHECK_BOX Column's value in true/false, by default it will be false means checkBox will be uncheck!
186+
187+
const data = [
188+
{ menu: 'Chicken Biryani', select: false }, //If user select this row then this whole object will return to you with select true in this case
189+
{ menu: 'Chiken koofta', select: true },
190+
{ menu: 'Chicken sharwma', select: false }
191+
]
192+
193+
const nameOfCols = ['menu', 'select'];
194+
195+
return(
196+
<DataTable
197+
onRowSelect={(row) => {console.log('ROW => ',row)}}
198+
data={data}
199+
colNames={nameOfCols}
200+
colSettings={[{name: 'select', type: COL_TYPES.CHECK_BOX}]}
201+
/>
202+
)
203+
}
204+
205+
```
206+
172207
## In Development
173208

174209
We are developing the rest of Functionality! Soon we made the release!

‎assets/tick.png‎

220 Bytes
Loading

‎src/CheckBox.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { View, Image, StyleSheet, TouchableOpacity } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
5+
const CheckBox = React.memo((props) => { //props: initialVal
6+
7+
const {initialVal, handleOnRowSelect, info} = props;
8+
9+
return (
10+
<TouchableOpacity style={styles.touchableOpacity} onPress={handleOnRowSelect?.bind(null, !initialVal, info.id, info.name)} disabled={props?.disabled}>
11+
<View style={[styles.backLayer, {backgroundColor: initialVal ? 'rgba(42, 187, 155, 0.1)' : 'transparent'}]} />
12+
<View style={[styles.container, { backgroundColor: initialVal ? (props?.backgroundColor ? props?.backgroundColor : 'blue') : 'transparent', borderColor: props?.backgroundColor ? props?.backgroundColor : 'blue' }]}>
13+
{ initialVal && ( <Image source={require('../assets/tick.png')} style={[{tintColor: props?.tickColor ? props.tickColor: 'white'} ]} resizeMode={'cover'} /> )}
14+
</View>
15+
</TouchableOpacity>
16+
);
17+
})
18+
19+
export default CheckBox;
20+
21+
const styles = StyleSheet.create({
22+
container: {
23+
width: 20,
24+
height: 20,
25+
borderWidth: 1.5,
26+
justifyContent: 'center',
27+
alignItems: 'center',
28+
borderColor: 'blue',
29+
borderRadius: 2,
30+
},
31+
touchableOpacity: {
32+
width: 35,
33+
height: 33,
34+
justifyContent: 'center',
35+
alignItems: 'center'
36+
// borderWidth: 1
37+
},
38+
backLayer: {
39+
position: 'absolute',
40+
top: 4.5,
41+
left: 6,
42+
width: 24,
43+
height: 24,
44+
borderRadius: 3,
45+
}
46+
})
47+
48+
CheckBox.propTypes = {
49+
onPress: PropTypes.func,
50+
disabled: PropTypes.bool,
51+
tickColor: PropTypes.string,
52+
backgroundColor: PropTypes.string
53+
}

‎src/DataTable.js‎

Lines changed: 38 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ export const COL_TYPES = {
1212
// RADIO: 'RADIO',
1313
INT: 'INT',
1414
STRING: 'STRING',
15-
// ICON: 'ICON'
15+
CHECK_BOX: 'CHECK_BOX'
1616
}
1717

1818
const TOTAL_WIDTH = 100; //'100%'
1919

20-
class DataTable extends React.PureComponent {
20+
class DataTable extends React.Component {
2121
state = {
22+
dataPropSnap: null,
2223
data: [], //[{...}, {...}, ....]
2324
displayData: [], //currentlyDisplayData
2425
colNames: [],//['ad', 'asd', ...]
@@ -64,6 +65,24 @@ class DataTable extends React.PureComponent {
6465
}
6566
}
6667

68+
handleOnRowSelect = (isChecked, id, colName) => {
69+
const data = this.state.data.map(row => {
70+
if (row.id != id) return row;
71+
if ('onRowSelect' in this.props) this.props?.onRowSelect({...row, [colName]: isChecked}) // Sending props
72+
return {...row, [colName]: isChecked}
73+
})
74+
75+
const displayData = this.state.displayData.map(row => {
76+
if (row.id != id) return row;
77+
return {...row, [colName]: isChecked}
78+
})
79+
80+
this.setState({
81+
data,
82+
displayData
83+
})
84+
}
85+
6786
handleNextPreviousPagePress = (type) => {//next | back
6887
if (type == 'next') {
6988
// this.state.activeDisplayDataId
@@ -89,16 +108,16 @@ class DataTable extends React.PureComponent {
89108
}
90109

91110
static getDerivedStateFromProps(props, currentState) {
92-
// console.log(props)
93-
if (JSON.stringify(props.data) === JSON.stringify(currentState.data)) return null;
94-
111+
//this called on every setState() & on mount & on prop changes
112+
if (JSON.stringify(props.data) === JSON.stringify(currentState.dataPropSnap)) return null;
113+
//Here below code means that data prop is changed
95114
let data = props?.data
96115
let colNames = props?.colNames;
97116

98-
if (typeof (data) != 'object') {
117+
if (typeof(data) != 'object') {
99118
data = [];
100119
}
101-
if (typeof (colNames) != 'object') {
120+
if (typeof(colNames) != 'object') {
102121
colNames = ['No Columns'];
103122
}
104123

@@ -123,11 +142,16 @@ class DataTable extends React.PureComponent {
123142
isSortedAssending[name] = false;
124143
})
125144

126-
const cloneData = [...data];
127-
145+
// const modifiedData = [...data];
146+
const modifiedData = data.map((row, index) => {
147+
if (!row.id) return {...row, id: index}
148+
return row;
149+
})
150+
// console.log(modifiedData)
128151
return {
129-
data: cloneData,
130-
displayData: cloneData.slice(0, end[0]?.endData),
152+
dataPropSnap: props?.data,
153+
data: modifiedData,
154+
displayData: modifiedData.slice(0, end[0]?.endData),
131155
colNames: [...colNames],
132156
defaultEachColumnWidth: TOTAL_WIDTH / noOfCols + '%',
133157
isSortedAssending: { ...currentState.isSortedAssending, ...isSortedAssending },
@@ -158,8 +182,10 @@ class DataTable extends React.PureComponent {
158182
{
159183
this.state.displayData.map((item, index) => (
160184
<DataTableRow
185+
handleOnRowSelect={this.handleOnRowSelect}
161186
widthOfLine={this.state.widthOfContainer}
162187
key={index}
188+
index={index}
163189
data={item}
164190
mapColNameToType={this.state.mapColNameToType}
165191
colNames={this.state.colNames}
@@ -203,5 +229,6 @@ DataTable.propTypes = {
203229
})
204230
),
205231
noOfPages: PropTypes.number,
232+
onRowSelect: PropTypes.func
206233
// showNoOfRowsPerDisplay: PropTypes.number //default all
207234
}

‎src/DataTableFooter.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const DataTableFooter = React.memo((props) => {
2323
if (!startObj && !endObj){
2424
isDataAvailable = false;
2525
}
26-
26+
console.log(startObj, endObj)
2727
return (
2828
<View style={styles.lastRow}>
2929
<View style={styles.noOfPages}>

‎src/DataTableHeader.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const DataTableHeader = React.memo((props) => {
1414
{
1515
colNames.map((colName, index) => {
1616
const colType = mapColNameToType[colName]
17-
const justifyContent = (colType == COL_TYPES.STRING || colType == null) ? 'flex-start' : (colType == COL_TYPES.ICON || colType == COL_TYPES.RADIO) ? 'center' : 'flex-end'
17+
const justifyContent = (colType == COL_TYPES.STRING || colType == null) ? 'flex-start' : (colType == COL_TYPES.CHECK_BOX || colType == COL_TYPES.RADIO) ? 'center' : 'flex-end'
1818
let paddingLeft = 0;
1919
let paddingRight = 0;
2020
if (justifyContent == 'flex-start') {
@@ -24,12 +24,19 @@ const DataTableHeader = React.memo((props) => {
2424
paddingRight = 13;
2525
paddingLeft = 1
2626
}
27+
if (colType == COL_TYPES.CHECK_BOX){
28+
return (
29+
<View style={[styles.headerRow, { width: defaultEachColumnWidth, justifyContent }]}>
30+
<Text style={[styles.headerLabel, {textAlign: 'center'}]}>{' ' + colName[0].toUpperCase() + colName.substring(1)}</Text>
31+
</View>
32+
)
33+
}
2734
return (
2835
<TouchableOpacity key={index} style={[styles.headerRow, { width: defaultEachColumnWidth, justifyContent }]} onPress={handleColPress.bind(null, colName)}>
2936
<View style={{ paddingLeft }}>
3037
<Image source={require('../assets/doubleArrow.png')} />
3138
</View>
32-
<View style={{}}>
39+
<View>
3340
<Text
3441
style={[styles.headerLabel, {
3542
paddingRight

‎src/DataTableRow.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import React from 'react';
22
import { View, Text, StyleSheet, Dimensions } from 'react-native';
33
import { COL_TYPES } from './DataTable';
44
import Line from './Line';
5-
// import { PADDING_HORIZONTAL } from './DataTable';
5+
import CheckBox from './CheckBox';
66
const { width, height } = Dimensions.get('window');
77

8-
98
const DataTableRow = React.memo((props) => {
109

11-
const { data, colNames, style, mapColNameToType, widthOfLine } = props;
12-
// console.log(highlighted)
10+
//data is object
11+
const { data, colNames, style, mapColNameToType, widthOfLine, handleOnRowSelect } = props;
12+
1313
let color = 'black';
1414
let backgroundColor = 'transparent';
1515
if (data.doHighlight && data.doHighlight != 'default') {
@@ -26,7 +26,7 @@ const DataTableRow = React.memo((props) => {
2626
{
2727
colNames.map((name, index) => {
2828
const colType = mapColNameToType[name]
29-
const textAlign = (colType == COL_TYPES.STRING || colType == null) ? 'left' : (colType == COL_TYPES.ICON || colType == COL_TYPES.RADIO) ? 'center' : 'right'
29+
const textAlign = (colType == COL_TYPES.STRING || colType == null) ? 'left' : (colType == COL_TYPES.CHECK_BOX || colType == COL_TYPES.RADIO) ? 'center' : 'right'
3030
let paddingLeft = 0;
3131
let paddingRight = 0;
3232
if (textAlign == 'left') {
@@ -37,10 +37,24 @@ const DataTableRow = React.memo((props) => {
3737
paddingLeft = 1;
3838

3939
}
40+
41+
// const handleOnCheckPress = (isChecked) => {
42+
// handleOnRowSelect(isChecked, data.id, name)
43+
// }
44+
// console.log(data[name])
4045
return (
4146
<View key={index} style={[styles.rowCellContainer, { width: style.defaultEachColumnWidth }]}>
42-
<Text style={[styles.rowCellText, { paddingLeft, paddingRight, textAlign, color }]}>{data[name]}</Text>
47+
{
48+
textAlign == 'center' ? (
49+
<View style={{width: '100%', height: 20, alignItems: 'center', justifyContent: 'center'}}>
50+
<CheckBox info={{name, id: data.id}} handleOnRowSelect={handleOnRowSelect} initialVal={data[name] == true ? true: false}/>
51+
</View>
52+
): (
53+
<Text style={[styles.rowCellText, { paddingLeft, paddingRight, textAlign, color }]}>{data[name]}</Text>
54+
)
55+
}
4356
</View>
57+
4458
);
4559
})
4660
}

0 commit comments

Comments
 (0)