From 7f5fca2e41a24debefa6c1435f49469d0b881b2a Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 23 Jan 2019 17:46:32 +0000
Subject: [PATCH] move listing dropdown in to grouped listing
---
.../src/app/src/components/GroupedListing.js | 36 ++++++++++++++++---
.../src/app/src/components/Listing/index.js | 16 +--------
.../src/components/ListingDropdown/index.js | 8 +----
3 files changed, 33 insertions(+), 27 deletions(-)
diff --git a/opentech/static_src/src/app/src/components/GroupedListing.js b/opentech/static_src/src/app/src/components/GroupedListing.js
index ddac492a9..abd6aee1e 100644
--- a/opentech/static_src/src/app/src/components/GroupedListing.js
+++ b/opentech/static_src/src/app/src/components/GroupedListing.js
@@ -4,6 +4,9 @@ import PropTypes from 'prop-types';
import Listing from '@components/Listing';
import ListingGroup from '@components/ListingGroup';
import ListingItem from '@components/ListingItem';
+import ListingDropdown from '@components/ListingDropdown';
+
+// add styles from listing header
export default class GroupedListing extends React.Component {
static propTypes = {
@@ -26,6 +29,11 @@ export default class GroupedListing extends React.Component {
orderedItems: [],
};
+ constructor(props) {
+ super(props);
+ this.listRef = React.createRef();
+ }
+
componentDidMount() {
this.orderItems();
}
@@ -79,7 +87,7 @@ export default class GroupedListing extends React.Component {
renderItem = group => {
const { activeItem, onItemSelection } = this.props;
return (
- <ListingGroup key={`listing-group-${group.name}`} item={group}>
+ <ListingGroup key={`listing-group-${group.name}`} item={group} ref={this.listRef}>
{group.items.map(item => {
return <ListingItem
selected={!!activeItem && activeItem===item.id}
@@ -92,13 +100,31 @@ export default class GroupedListing extends React.Component {
}
render() {
+ const { isLoading, error } = this.props;
+ const isError = Boolean(error);
+
const passProps = {
items: this.state.orderedItems,
renderItem: this.renderItem,
- isLoading: this.props.isLoading,
- isError: Boolean(this.error),
- error: this.error,
+ isLoading,
+ isError,
+ error
};
- return <Listing {...passProps} />;
+
+ return (
+ <div className="grouped-listing">
+ <div className="grouped-listing__dropdown">
+ {!error && !isLoading &&
+ <ListingDropdown
+ list={this.listRef.current}
+ error={this.props.isLoading}
+ items={this.state.orderedItems}
+ isLoading={this.props.isLoading}
+ />
+ }
+ </div>
+ <Listing {...passProps} />
+ </div>
+ );
}
}
diff --git a/opentech/static_src/src/app/src/components/Listing/index.js b/opentech/static_src/src/app/src/components/Listing/index.js
index 9d254f897..92759152f 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -1,7 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
-import ListingDropdown from '@components/ListingDropdown';
import LoadingPanel from '@components/LoadingPanel';
import './style.scss';
@@ -19,11 +18,6 @@ export default class Listing extends React.Component {
handleRetry: PropTypes.func,
};
- constructor(props) {
- super(props);
- this.listRef = React.createRef();
- }
-
renderListItems() {
const {
isError,
@@ -49,7 +43,7 @@ export default class Listing extends React.Component {
}
return (
- <ul className="listing__list" ref={this.listRef}>
+ <ul className="listing__list">
{items.map(v => renderItem(v))}
</ul>
);
@@ -70,14 +64,6 @@ export default class Listing extends React.Component {
render() {
return (
<div className="listing">
- <div className="listing__header">
- <ListingDropdown
- list={this.listRef.current}
- error={this.props.isLoading}
- items={this.props.items}
- isLoading={this.props.isLoading}
- />
- </div>
{this.renderListItems()}
</div>
);
diff --git a/opentech/static_src/src/app/src/components/ListingDropdown/index.js b/opentech/static_src/src/app/src/components/ListingDropdown/index.js
index 4ebe3e6d6..99031a571 100644
--- a/opentech/static_src/src/app/src/components/ListingDropdown/index.js
+++ b/opentech/static_src/src/app/src/components/ListingDropdown/index.js
@@ -5,8 +5,6 @@ export default class ListingDropdown extends React.Component {
static propTypes = {
list: PropTypes.object,
items: PropTypes.array,
- error: PropTypes.string,
- isLoading: PropTypes.bool,
}
handleChange(e) {
@@ -18,11 +16,7 @@ export default class ListingDropdown extends React.Component {
}
renderListDropdown() {
- const { isLoading, error, items } = this.props;
-
- if (isLoading || error) {
- return;
- }
+ const { items } = this.props;
return (
<form className="form form__select">
--
GitLab