From 1bca9e30ddb5c58d45e4de6de92894ceb0d03a79 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Thu, 24 Jan 2019 11:15:02 +0000
Subject: [PATCH] moved grouped listing component into folder, add styles and
update the ref to the list
---
.../{GroupedListing.js => GroupedListing/index.js} | 14 +++++++-------
.../app/src/components/GroupedListing/styles.scss | 7 +++++++
.../src/app/src/components/Listing/index.js | 3 ++-
.../app/src/components/ListingDropdown/index.js | 10 +++++-----
4 files changed, 21 insertions(+), 13 deletions(-)
rename opentech/static_src/src/app/src/components/{GroupedListing.js => GroupedListing/index.js} (91%)
create mode 100644 opentech/static_src/src/app/src/components/GroupedListing/styles.scss
diff --git a/opentech/static_src/src/app/src/components/GroupedListing.js b/opentech/static_src/src/app/src/components/GroupedListing/index.js
similarity index 91%
rename from opentech/static_src/src/app/src/components/GroupedListing.js
rename to opentech/static_src/src/app/src/components/GroupedListing/index.js
index abd6aee1e..8fc959d90 100644
--- a/opentech/static_src/src/app/src/components/GroupedListing.js
+++ b/opentech/static_src/src/app/src/components/GroupedListing/index.js
@@ -6,7 +6,7 @@ import ListingGroup from '@components/ListingGroup';
import ListingItem from '@components/ListingItem';
import ListingDropdown from '@components/ListingDropdown';
-// add styles from listing header
+import './styles.scss'
export default class GroupedListing extends React.Component {
static propTypes = {
@@ -87,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} ref={this.listRef}>
+ <ListingGroup key={`listing-group-${group.name}`} item={group}>
{group.items.map(item => {
return <ListingItem
selected={!!activeItem && activeItem===item.id}
@@ -116,14 +116,14 @@ export default class GroupedListing extends React.Component {
<div className="grouped-listing__dropdown">
{!error && !isLoading &&
<ListingDropdown
- list={this.listRef.current}
- error={this.props.isLoading}
- items={this.state.orderedItems}
- isLoading={this.props.isLoading}
+ error={error}
+ isLoading={isLoading}
+ listRef={this.listRef}
+ groups={this.state.orderedItems}
/>
}
</div>
- <Listing {...passProps} />
+ <Listing {...passProps} listRef={this.listRef} />
</div>
);
}
diff --git a/opentech/static_src/src/app/src/components/GroupedListing/styles.scss b/opentech/static_src/src/app/src/components/GroupedListing/styles.scss
new file mode 100644
index 000000000..e6f035e49
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/GroupedListing/styles.scss
@@ -0,0 +1,7 @@
+.grouped-listing {
+ &__dropdown {
+ @include submission-list-item;
+ height: $listing-header-height;
+ padding: 20px;
+ }
+}
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 92759152f..e7a7cf04e 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -16,6 +16,7 @@ export default class Listing extends React.Component {
onItemSelection: PropTypes.func,
renderItem: PropTypes.func.isRequired,
handleRetry: PropTypes.func,
+ listRef: PropTypes.object,
};
renderListItems() {
@@ -43,7 +44,7 @@ export default class Listing extends React.Component {
}
return (
- <ul className="listing__list">
+ <ul className="listing__list" ref={this.props.listRef}>
{items.map(v => renderItem(v))}
</ul>
);
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 99031a571..0715fee5f 100644
--- a/opentech/static_src/src/app/src/components/ListingDropdown/index.js
+++ b/opentech/static_src/src/app/src/components/ListingDropdown/index.js
@@ -3,25 +3,25 @@ import PropTypes from 'prop-types';
export default class ListingDropdown extends React.Component {
static propTypes = {
- list: PropTypes.object,
- items: PropTypes.array,
+ listRef: PropTypes.object,
+ groups: PropTypes.array,
}
handleChange(e) {
const groupHeaderPosition = document.getElementById(e.target.value).offsetTop - 75;
- this.props.list.scrollTo({
+ this.props.listRef.current.scrollTo({
top: groupHeaderPosition
})
}
renderListDropdown() {
- const { items } = this.props;
+ const { groups } = this.props;
return (
<form className="form form__select">
<select onChange={(e) => this.handleChange(e)} aria-label="Jump to listing group">
- {items.map(group => {
+ {groups.map(group => {
return (
<option key={`listing-heading-${group.name}`} value={group.name}>{group.name}</option>
)
--
GitLab