From 34b8109df3e058054d6f52cc1bf47eb47696878c Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Wed, 23 Jan 2019 16:45:23 +0000
Subject: [PATCH] adds listing dropdown component that scrolls to selected
listing group
---
.../src/app/src/components/Listing/index.js | 12 ++++-
.../src/components/ListingDropdown/index.js | 47 +++++++++++++++++++
2 files changed, 57 insertions(+), 2 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/ListingDropdown/index.js
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 6da541874..02e7453ef 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
+import ListingDropdown from '@components/ListingDropdown';
import LoadingPanel from '@components/LoadingPanel';
import './style.scss';
@@ -43,7 +44,7 @@ export default class Listing extends React.Component {
}
return (
- <ul className="listing__list">
+ <ul className="listing__list" ref={this.myRef}>
{items.map(v => renderItem(v))}
</ul>
);
@@ -64,7 +65,14 @@ export default class Listing extends React.Component {
render() {
return (
<div className="listing">
- <div className="listing__header"></div>
+ <div className="listing__header">
+ <ListingDropdown
+ list={this.myRef.current}
+ error={this.props.isLoading}
+ items={this.state.orderedItems}
+ 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
new file mode 100644
index 000000000..464c65f57
--- /dev/null
+++ b/opentech/static_src/src/app/src/components/ListingDropdown/index.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class ListingDropdown extends React.Component {
+ static propTypes = {
+ list: PropTypes.object,
+ items: PropTypes.array,
+ error: PropTypes.string,
+ isLoading: PropTypes.bool,
+ }
+
+ handleChange(e) {
+ const groupHeaderPosition = document.getElementById(e.target.value).offsetTop - 75;
+
+ this.props.list.scrollTo({
+ top: groupHeaderPosition
+ })
+ }
+
+ renderListDropdown() {
+ const { isLoading, error, items } = this.props;
+
+ if (isLoading || error) {
+ return;
+ }
+
+ return (
+ <form className="form form__select">
+ <select onChange={(e) => this.handleChange(e)}>
+ {items.map(group => {
+ return (
+ <option key={`listing-heading-${group.name}`} value={group.name}>{group.name}</option>
+ )
+ })}
+ </select>
+ </form>
+ )
+ }
+
+ render() {
+ return (
+ <>
+ {this.renderListDropdown()}
+ </>
+ )
+ }
+}
--
GitLab