diff --git a/.eslintrc b/.eslintrc index 15f6bee..4407ac3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,14 +1,7 @@ { - "extends": "airbnb", - "parser": "babel-eslint", + "root": true, + "extends": "@react-native-community", "rules": { - "no-param-reassign": "off", - "jsx-boolean-value": "off", - "no-use-before-define": "off", - "object-shorthand": "off", - "strict": 0, - "no-confusing-arrow": ["error", {"allowParens": true}], - "global-require": "off", - "react/jsx-boolean-value": "off", + "semi": 0 } } diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..85341b7 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "singleQuote": true, + "semi": false +} diff --git a/examples/demoTablesApp/.eslintrc.js b/examples/demoTablesApp/.eslintrc.js index 40c6dcd..bfc7709 100644 --- a/examples/demoTablesApp/.eslintrc.js +++ b/examples/demoTablesApp/.eslintrc.js @@ -1,4 +1,7 @@ module.exports = { root: true, extends: '@react-native-community', + rules: { + semi: 0, + } }; diff --git a/examples/demoTablesApp/.prettierrc b/examples/demoTablesApp/.prettierrc new file mode 100644 index 0000000..85341b7 --- /dev/null +++ b/examples/demoTablesApp/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 2, + "singleQuote": true, + "semi": false +} diff --git a/examples/demoTablesApp/App.js b/examples/demoTablesApp/App.js deleted file mode 100644 index fee529a..0000000 --- a/examples/demoTablesApp/App.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Sample React Native App - * https://github.com/facebook/react-native - * - * @format - * @flow - */ - -import React, {Fragment} from 'react'; -import { - SafeAreaView, - StyleSheet, - ScrollView, - View, - Text, - StatusBar, -} from 'react-native'; - -import { - Header, - LearnMoreLinks, - Colors, - DebugInstructions, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; - -const App = () => { - return ( - - - - -
- - - Step One - - Edit App.js to change this - screen and then come back to see your edits. - - - - See Your Changes - - - - - - Debug - - - - - - Learn More - - Read the docs to discover what to do next: - - - - - - - - ); -}; - -const styles = StyleSheet.create({ - scrollView: { - backgroundColor: Colors.lighter, - }, - body: { - backgroundColor: Colors.white, - }, - sectionContainer: { - marginTop: 32, - paddingHorizontal: 24, - }, - sectionTitle: { - fontSize: 24, - fontWeight: '600', - color: Colors.black, - }, - sectionDescription: { - marginTop: 8, - fontSize: 18, - fontWeight: '400', - color: Colors.dark, - }, - highlight: { - fontWeight: '700', - }, -}); - -export default App; diff --git a/examples/demoTablesApp/index.js b/examples/demoTablesApp/index.js index a850d03..fe4dc8b 100644 --- a/examples/demoTablesApp/index.js +++ b/examples/demoTablesApp/index.js @@ -2,8 +2,8 @@ * @format */ -import {AppRegistry} from 'react-native'; -import App from './App'; -import {name as appName} from './app.json'; +import { AppRegistry } from 'react-native' +import App from './src/App' +import { name as appName } from './app.json' -AppRegistry.registerComponent(appName, () => App); +AppRegistry.registerComponent(appName, () => App) diff --git a/examples/demoTablesApp/package.json b/examples/demoTablesApp/package.json index 350e8a8..24e5d93 100644 --- a/examples/demoTablesApp/package.json +++ b/examples/demoTablesApp/package.json @@ -4,6 +4,8 @@ "private": true, "scripts": { "start": "react-native start", + "runa": "react-native run-android", + "log": "react-native log-android", "test": "jest", "lint": "eslint ." }, diff --git a/examples/demoTablesApp/src/App.js b/examples/demoTablesApp/src/App.js new file mode 100644 index 0000000..0bb876b --- /dev/null +++ b/examples/demoTablesApp/src/App.js @@ -0,0 +1,127 @@ +/** + * Table experiment hole + * https://github.com/facebook/react-native + * + * @format + * @flow + */ + +import React, { Fragment, useState, useCallback, useReducer } from 'react' +import { Button, StatusBar } from 'react-native' +import { DataTable } from './components/DataTable' +import { Row } from './components/Row' +import { Cell } from './components/Cell' + +// Configurable constants for demo data volume +const rowCount = 10 +const columnCount = 4 + +const baseData = [] +const baseColumns = [] + +// Make columns definition used in demo app +for (let index = 0; index < columnCount; index++) { + baseColumns.push({ key: `col${index}`, editable: index === columnCount - 1 }) // index === columnCount - 1 +} + +// Generate data for use in demo app +for (let index = 0; index < rowCount; index++) { + const rowValues = {} + baseColumns.forEach((column, columnIndex) => { + rowValues[column.key] = `row${index}Col${columnIndex}` + }) + + baseData.push({ id: `r${index}`, ...rowValues }) +} + +const keyExtractor = item => item.id +const dataReducer = (data, action) => { + switch (action.type) { + case 'editCell': + const { value, rowKey, columnKey } = action + const rowIndex = data.findIndex(row => keyExtractor(row) === rowKey) + + // Immutable array editing so only the row/cell edited are re-rendered. + // If you don't do this, every row will re-render as well as the cell + // edited. + return data.map((row, index) => { + if (index !== rowIndex) { + return row + } + const rowEdited = { ...row } + rowEdited[columnKey] = value + return rowEdited + }) + case 'reverseData': + return [...data.reverse()] + default: + return data + } +} + +// Action yay +const editCell = (value, rowKey, columnKey) => ({ + type: 'editCell', + value, + rowKey, + columnKey, +}) + +const App = () => { + const [isButtonOof, toggleButton] = useState(false) + const [data, dataDispatch] = useReducer(dataReducer, baseData) + const columns = baseColumns + + const renderCells = useCallback( + (rowData, rowKey) => { + return columns.map(col => ( + + )) + }, + [columns, dataDispatch] + ) + + const renderItem = useCallback( + ({ item, index }) => { + const rowKey = keyExtractor(item) + return ( + + ) + }, + [data, renderCells, dataDispatch] + ) + + return ( + +