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! diff --git a/assets/tick.png b/assets/tick.png new file mode 100644 index 0000000..706a217 Binary files /dev/null and b/assets/tick.png differ diff --git a/src/CheckBox.js b/src/CheckBox.js new file mode 100644 index 0000000..54f2b8b --- /dev/null +++ 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 ( + + + + { initialVal && ( )} + + + ); +}) + +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..efbc748 100644 --- 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) => ( { if (!startObj && !endObj){ isDataAvailable = false; } - + console.log(startObj, endObj) return ( 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 ( - + { - 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 ( - {data[name]} + { + textAlign == 'center' ? ( + + + + ): ( + {data[name]} + ) + } + ); }) }