From a2fa89f2b96ffc28c43a2f813128de1ef76e33a4 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Wed, 2 Jun 2021 15:41:21 +0300
Subject: [PATCH] Unify props for ResultTableCell
---
.../components/facet_results/ResultTable.js | 47 ++++++++++---------
.../facet_results/ResultTableCell.js | 4 +-
.../main_layout/InstanceHomePageTable.js | 21 ++++++---
3 files changed, 43 insertions(+), 29 deletions(-)
diff --git a/src/client/components/facet_results/ResultTable.js b/src/client/components/facet_results/ResultTable.js
index b530c290..9461af64 100644
--- a/src/client/components/facet_results/ResultTable.js
+++ b/src/client/components/facet_results/ResultTable.js
@@ -17,7 +17,6 @@ import ResultTableHead from './ResultTableHead'
import TablePagination from '@material-ui/core/TablePagination'
import ResultTablePaginationActions from './ResultTablePaginationActions'
import history from '../../History'
-import has from 'lodash'
const styles = theme => ({
tableContainer: {
@@ -177,10 +176,18 @@ class ResultTable extends React.Component {
}
rowRenderer = row => {
- const { classes } = this.props
+ const { classes, screenSize } = this.props
const expanded = this.state.expandedRows.has(row.id)
let hasExpandableContent = false
const dataCells = this.props.data.properties.map(column => {
+ const {
+ id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
+ linkAsButton, collapsedMaxWords, sourceExternalLink, renderAsHTML, HTMLParserTask
+ } = column
+ let { previewImageHeight } = column
+ if (screenSize === 'xs' || screenSize === 'sm') {
+ previewImageHeight = 50
+ }
if (column.onlyOnInstancePage) { return null }
const columnData = row[column.id] == null ? '-' : row[column.id]
const isArray = Array.isArray(columnData)
@@ -202,28 +209,26 @@ class ResultTable extends React.Component {
}
return (
<ResultTableCell
- key={column.id}
- columnId={column.id}
+ key={id}
+ columnId={id}
data={columnData}
- valueType={column.valueType}
- makeLink={column.makeLink}
- externalLink={column.externalLink}
- sortValues={column.sortValues}
- sortBy={column.sortBy}
- numberedList={column.numberedList}
- minWidth={column.minWidth}
- previewImageHeight={column.previewImageHeight}
+ valueType={valueType}
+ makeLink={makeLink}
+ externalLink={externalLink}
+ sortValues={sortValues}
+ sortBy={sortBy}
+ numberedList={numberedList}
+ minWidth={minWidth}
+ previewImageHeight={previewImageHeight}
container='cell'
expanded={expanded}
- linkAsButton={has(column, 'linkAsButton')
- ? column.linkAsButton
- : null}
- collapsedMaxWords={has(column, 'collapsedMaxWords')
- ? column.collapsedMaxWords
- : null}
- renderAsHTML={has(column, 'renderAsHTML')
- ? column.renderAsHTML
- : null}
+ linkAsButton={linkAsButton}
+ collapsedMaxWords={collapsedMaxWords}
+ showSource={false}
+ sourceExternalLink={sourceExternalLink}
+ renderAsHTML={renderAsHTML}
+ HTMLParserTask={HTMLParserTask}
+ referencedTerm={columnData.referencedTerm}
/>
)
})
diff --git a/src/client/components/facet_results/ResultTableCell.js b/src/client/components/facet_results/ResultTableCell.js
index 973df7bb..82a8692b 100644
--- a/src/client/components/facet_results/ResultTableCell.js
+++ b/src/client/components/facet_results/ResultTableCell.js
@@ -13,7 +13,9 @@ const ResultTableCell = props => {
sourceExternalLink, renderAsHTML, HTMLParserTask, referencedTerm, previewImageHeight
} = props
let cellContent = null
- const cellStyle = { minWidth }
+ const cellStyle = {
+ ...(minWidth && { minWidth })
+ }
switch (valueType) {
case 'object':
cellContent =
diff --git a/src/client/components/main_layout/InstanceHomePageTable.js b/src/client/components/main_layout/InstanceHomePageTable.js
index ca9f32da..bdbc94e1 100644
--- a/src/client/components/main_layout/InstanceHomePageTable.js
+++ b/src/client/components/main_layout/InstanceHomePageTable.js
@@ -15,7 +15,7 @@ import InfoIcon from '@material-ui/icons/InfoOutlined'
const styles = theme => ({
instanceTable: {
- maxWidth: 800,
+ maxWidth: 1200,
width: '100%',
[theme.breakpoints.down('md')]: {
tableLayout: 'fixed',
@@ -37,9 +37,11 @@ const styles = theme => ({
alignItems: 'center',
justifyContent: 'center'
},
- // labelCell: {
- // maxWidth: 250
- // },
+ labelCell: {
+ [theme.breakpoints.down('md')]: {
+ paddingRight: 0
+ }
+ },
tooltip: {
marginTop: -3
},
@@ -47,7 +49,10 @@ const styles = theme => ({
paddingRight: 0,
paddingTop: 0,
paddingBottom: 0,
- width: 32
+ width: 32,
+ [theme.breakpoints.down('md')]: {
+ paddingLeft: 0
+ }
},
expand: {
transform: 'rotate(0deg)',
@@ -121,7 +126,7 @@ class InstanceHomePageTable extends React.Component {
const label = intl.get(`perspectives.${resultClass}.properties.${row.id}.label`)
const description = intl.get(`perspectives.${resultClass}.properties.${row.id}.description`)
const {
- id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList,
+ id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask
} = row
let { previewImageHeight } = row
@@ -157,6 +162,7 @@ class InstanceHomePageTable extends React.Component {
</IconButton>}
</TableCell>
<ResultTableCell
+ key={id}
columnId={id}
data={data[id]}
valueType={valueType}
@@ -165,9 +171,10 @@ class InstanceHomePageTable extends React.Component {
sortValues={sortValues}
sortBy={sortBy}
numberedList={numberedList}
+ minWidth={minWidth}
+ previewImageHeight={previewImageHeight}
container='cell'
expanded={expanded}
- previewImageHeight={previewImageHeight}
linkAsButton={linkAsButton}
collapsedMaxWords={collapsedMaxWords}
showSource={showSource}
--
GitLab