From 387bedd8f54a9dfa5484fc5e6e61f5c70bee1d3a Mon Sep 17 00:00:00 2001 From: Derek Lieu Date: Thu, 1 Jun 2017 17:59:58 +0100 Subject: [PATCH 1/4] Include dummy table view, top bar item --- src/components/table/index.js | 10 ++++++++++ src/containers/index_route.js | 4 ++++ src/containers/top_bar.js | 5 +++++ 3 files changed, 19 insertions(+) create mode 100644 src/components/table/index.js diff --git a/src/components/table/index.js b/src/components/table/index.js new file mode 100644 index 0000000..8ccfbc9 --- /dev/null +++ b/src/components/table/index.js @@ -0,0 +1,10 @@ +import React from 'react' + +class TableView extends React.Component { + + render () { + return
+ } +} + +export default TableView diff --git a/src/containers/index_route.js b/src/containers/index_route.js index 4f8d93a..4c16b80 100644 --- a/src/containers/index_route.js +++ b/src/containers/index_route.js @@ -14,6 +14,7 @@ import Settings from '../components/settings' import MapView from '../components/map' import ReportView from '../components/report' import MediaView from '../components/media' +import TableView from '../components/table' const styles = { outer: { @@ -90,6 +91,9 @@ IndexRoute.defaultProps = { }, { id: 'report', component: ReportView + }, { + id: 'table', + component: TableView }] } diff --git a/src/containers/top_bar.js b/src/containers/top_bar.js index 731014c..0cd4545 100644 --- a/src/containers/top_bar.js +++ b/src/containers/top_bar.js @@ -63,6 +63,11 @@ const messages = defineMessages({ id: 'topbar.report', defaultMessage: 'Report', description: 'Report tab name' + }, + table: { + id: 'topbar.table', + defaultMessage: 'Table', + description: 'Table tab name' } }) From 507edd0be1d1343ad0a3b9f2d638f4def6cfbb53 Mon Sep 17 00:00:00 2001 From: Derek Lieu Date: Thu, 1 Jun 2017 19:14:19 +0100 Subject: [PATCH 2/4] First render --- src/components/table/index.js | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/components/table/index.js b/src/components/table/index.js index 8ccfbc9..e32046e 100644 --- a/src/components/table/index.js +++ b/src/components/table/index.js @@ -1,9 +1,37 @@ import React from 'react' +import Table from 'react-virtualized/dist/commonjs/Table/Table' +import Column from 'react-virtualized/dist/commonjs/Table/Column' +import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' -class TableView extends React.Component { +const rowHeight = 30 +class TableView extends React.Component { render () { - return
+ console.log(this.props) + const { features } = this.props + const rowGetter = ({ index }) => features[index].properties + return ( +
+ + {({ width, height }) => ( + + +
+ )} + +
+ ) } } From 645fdd2d7f78658fdc4756623dcce3e7d4272da1 Mon Sep 17 00:00:00 2001 From: Derek Lieu Date: Thu, 1 Jun 2017 19:31:35 +0100 Subject: [PATCH 3/4] Use filteredFeatures and render every column --- src/components/table/index.js | 35 +++++++++++++++++++++++++++-------- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/src/components/table/index.js b/src/components/table/index.js index e32046e..0ad9a0e 100644 --- a/src/components/table/index.js +++ b/src/components/table/index.js @@ -3,30 +3,49 @@ import Table from 'react-virtualized/dist/commonjs/Table/Table' import Column from 'react-virtualized/dist/commonjs/Table/Column' import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' +require('react-virtualized/styles.css') + const rowHeight = 30 class TableView extends React.Component { + shouldComponentUpdate (nextProps) { + return nextProps.filteredFeatures !== this.props.filteredFeatures + } + + getColumns () { + const { filteredFeatures } = this.props + const featureWithProperties = filteredFeatures.find(d => d.hasOwnProperty('properties')) + if (!featureWithProperties) { return false } + return Object.keys(featureWithProperties.properties) + } + render () { - console.log(this.props) - const { features } = this.props - const rowGetter = ({ index }) => features[index].properties + const { filteredFeatures } = this.props + const rowGetter = ({ index }) => filteredFeatures[index].properties + const columns = this.getColumns() return (
{({ width, height }) => ( - + {columns.map(column => ( + + ))}
)} From e223778567103ad4304b00b579eb5610e74c8e75 Mon Sep 17 00:00:00 2001 From: Derek Lieu Date: Thu, 1 Jun 2017 19:48:37 +0100 Subject: [PATCH 4/4] Calculate column width, taking scrollbar into account --- src/components/table/index.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/table/index.js b/src/components/table/index.js index 0ad9a0e..4cfef1a 100644 --- a/src/components/table/index.js +++ b/src/components/table/index.js @@ -2,6 +2,7 @@ import React from 'react' import Table from 'react-virtualized/dist/commonjs/Table/Table' import Column from 'react-virtualized/dist/commonjs/Table/Column' import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' +import getScrollBarWidth from 'get-scrollbar-width' require('react-virtualized/styles.css') @@ -12,22 +13,31 @@ class TableView extends React.Component { return nextProps.filteredFeatures !== this.props.filteredFeatures } + componentWillMount () { + this.scrollbarWidth = getScrollBarWidth() + } + getColumns () { const { filteredFeatures } = this.props const featureWithProperties = filteredFeatures.find(d => d.hasOwnProperty('properties')) - if (!featureWithProperties) { return false } + if (!featureWithProperties) { return [] } return Object.keys(featureWithProperties.properties) } render () { const { filteredFeatures } = this.props const rowGetter = ({ index }) => filteredFeatures[index].properties + const rowLength = filteredFeatures.length const columns = this.getColumns() return (
- {({ width, height }) => ( - { + const totalHeight = rowHeight * rowLength + const overflow = totalHeight > height + const columnWidth = overflow ? (width - this.scrollbarWidth) / columns.length + : width / columns.length + return
))}
- )} + }}
)