From 0df90c7962196865755f19a1a942347b6bdbdb71 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 15 Oct 2019 15:19:58 +0300
Subject: [PATCH] Object list: custom component for events
---
.../facet_results/ObjectListCollapsible.js | 61 +++++++++++--------
.../facet_results/ObjectListItem.js | 4 +-
.../facet_results/ObjectListItemEvent.js | 31 +++++++---
.../components/facet_results/StringList.js | 11 ----
4 files changed, 59 insertions(+), 48 deletions(-)
diff --git a/src/client/components/facet_results/ObjectListCollapsible.js b/src/client/components/facet_results/ObjectListCollapsible.js
index 9ad8acac..3ba05b88 100644
--- a/src/client/components/facet_results/ObjectListCollapsible.js
+++ b/src/client/components/facet_results/ObjectListCollapsible.js
@@ -5,6 +5,7 @@ import Collapse from '@material-ui/core/Collapse';
import { ISOStringToDate } from './Dates';
import { orderBy, has } from 'lodash';
import ObjectListItem from './ObjectListItem';
+import ObjectListItemEvent from './ObjectListItemEvent';
const styles = () => ({
valueList: {
@@ -24,6 +25,9 @@ const styles = () => ({
const ObjectList = props => {
+ const { sortValues, makeLink, externalLink, linkAsButton, columnId } = props;
+ let { data } = props;
+
const sortList = data => {
if (has(props, 'columnId') && props.columnId.endsWith('Timespan')) {
data = sortValues
@@ -43,8 +47,33 @@ const ObjectList = props => {
return data;
};
- const { sortValues, makeLink, externalLink, linkAsButton } = props;
- let { data } = props;
+ const renderItem = ({ collapsed, itemData, isFirstValue = false }) => {
+ if (columnId === 'event') {
+ return (
+ <React.Fragment>
+ <ObjectListItemEvent
+ data={itemData}
+ isFirstValue={isFirstValue}
+ />
+ {collapsed && <span> ...</span>}
+ </React.Fragment>
+
+ );
+ } else {
+ return(
+ <React.Fragment>
+ <ObjectListItem
+ data={itemData}
+ makeLink={makeLink}
+ externalLink={externalLink}
+ linkAsButton={linkAsButton}
+ />
+ {collapsed && <span> ...</span>}
+ </React.Fragment>
+ );
+ }
+ };
+
if (data == null || data === '-') {
return '-';
}
@@ -52,26 +81,12 @@ const ObjectList = props => {
data = sortList(data);
return (
<React.Fragment>
- {!props.expanded &&
- <ObjectListItem
- data={data[0]}
- makeLink={makeLink}
- externalLink={externalLink}
- linkAsButton={linkAsButton}
- collapsed={true}
- />
- }
+ {!props.expanded && renderItem({ collapsed: true, itemData: data[0], isFirstValue: true })}
<Collapse in={props.expanded} timeout="auto" unmountOnExit>
<ul className={props.classes.valueList}>
{data.map(item =>
<li key={item.id}>
- <ObjectListItem
- data={item}
- makeLink={makeLink}
- externalLink={externalLink}
- linkAsButton={linkAsButton}
- collapsed={false}
- />
+ {renderItem({ collapsed: false, itemData: item })}
</li>
)}
</ul>
@@ -79,15 +94,7 @@ const ObjectList = props => {
</React.Fragment>
);
} else {
- return (
- <ObjectListItem
- data={data}
- makeLink={makeLink}
- externalLink={externalLink}
- linkAsButton={linkAsButton}
- collapsed={false}
- />
- );
+ return renderItem({ collapsed: false, itemData: data, isFirstValue: true });
}
};
diff --git a/src/client/components/facet_results/ObjectListItem.js b/src/client/components/facet_results/ObjectListItem.js
index cff7412a..167ba96d 100644
--- a/src/client/components/facet_results/ObjectListItem.js
+++ b/src/client/components/facet_results/ObjectListItem.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import ObjectListItemLink from './ObjectListItemLink';
const ObjectListItem = props => {
- const { data, makeLink, externalLink, linkAsButton, collapsed } = props;
+ const { data, makeLink, externalLink, linkAsButton } = props;
let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel;
return (
<React.Fragment>
@@ -16,7 +16,6 @@ const ObjectListItem = props => {
linkAsButton={linkAsButton}
/>
}
- {collapsed && ' ...'}
</React.Fragment>
);
};
@@ -26,7 +25,6 @@ ObjectListItem.propTypes = {
makeLink: PropTypes.bool.isRequired,
externalLink: PropTypes.bool.isRequired,
linkAsButton: PropTypes.bool,
- collapsed: PropTypes.bool.isRequired
};
export default ObjectListItem;
diff --git a/src/client/components/facet_results/ObjectListItemEvent.js b/src/client/components/facet_results/ObjectListItemEvent.js
index 2725fbb4..298348dc 100644
--- a/src/client/components/facet_results/ObjectListItemEvent.js
+++ b/src/client/components/facet_results/ObjectListItemEvent.js
@@ -1,30 +1,47 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
import ObjectListItemLink from './ObjectListItemLink';
+
+const styles = () => ({
+ dateContainer: {
+ width: 180,
+ display: 'inline-block'
+ }
+});
+
const ObjectListItemEvent = props => {
- const { data, collapsed } = props;
+ const { data, isFirstValue } = props;
let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel;
return (
<React.Fragment>
+ <span className={isFirstValue ? null : props.classes.dateContainer}>
+ {data.date == null ? 'No date ' : `${data.date} `}
+ </span>
<ObjectListItemLink
data={data}
label={label}
+ externalLink={false}
/>
{data.observedOwner &&
<React.Fragment>
{': '}
- {data.observedOwner}
+ <ObjectListItemLink
+ data={data.observedOwner}
+ label={data.observedOwner.prefLabel}
+ externalLink={false}
+ />
</React.Fragment>
}
- {collapsed && ' ...'}
</React.Fragment>
);
};
-ObjectListItemEvent.PropTypes = {
- data: PropTypes.bool.isRequired,
- collapsed: PropTypes.bool.isRequired
+ObjectListItemEvent.propTypes = {
+ classes: PropTypes.object.isRequired,
+ data: PropTypes.object.isRequired,
+ isFirstValue: PropTypes.bool.isRequired
};
-export default ObjectListItemEvent;
+export default withStyles(styles)(ObjectListItemEvent);
diff --git a/src/client/components/facet_results/StringList.js b/src/client/components/facet_results/StringList.js
index 9e0e9808..2c256b45 100644
--- a/src/client/components/facet_results/StringList.js
+++ b/src/client/components/facet_results/StringList.js
@@ -2,10 +2,6 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Collapse from '@material-ui/core/Collapse';
-// import Button from '@material-ui/core/Button';
-// import { ISOStringToDate } from './Dates';
-// import { Link } from 'react-router-dom';
-// import { orderBy, has } from 'lodash';
const styles = () => ({
valueList: {
@@ -16,13 +12,6 @@ const styles = () => ({
valueListNoBullets: {
listStyle: 'none',
paddingLeft: 0
- },
- noDate: {
- marginRight: 20
- },
- stringContainer: {
- maxHeight: 200,
- overflow: 'auto'
}
});
--
GitLab