From e4b4e98d6759018575d1e0a0d583a67678d40904 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 29 Jan 2019 14:30:56 +0000
Subject: [PATCH] move last item list logic to grouped listing component
---
.../src/app/src/components/GroupedListing/index.js | 5 +++++
.../src/app/src/components/Listing/index.js | 14 --------------
2 files changed, 5 insertions(+), 14 deletions(-)
diff --git a/opentech/static_src/src/app/src/components/GroupedListing/index.js b/opentech/static_src/src/app/src/components/GroupedListing/index.js
index e8eb8a79a..daacd5542 100644
--- a/opentech/static_src/src/app/src/components/GroupedListing/index.js
+++ b/opentech/static_src/src/app/src/components/GroupedListing/index.js
@@ -114,6 +114,11 @@ export default class GroupedListing extends React.Component {
error
};
+ // set css custom prop to allow scrolling from dropdown to last item in the list
+ if (this.listRef.current) {
+ document.documentElement.style.setProperty('--last-listing-item-height', this.listRef.current.lastElementChild.offsetHeight + 'px');
+ }
+
return (
<div className="grouped-listing">
<div className="grouped-listing__dropdown" ref={(ref) => this.dropdownContainer = ref}>
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 4144bc3dc..d92464958 100644
--- a/opentech/static_src/src/app/src/components/Listing/index.js
+++ b/opentech/static_src/src/app/src/components/Listing/index.js
@@ -20,10 +20,6 @@ export default class Listing extends React.Component {
column: PropTypes.string,
};
- componentDidUpdate() {
- this.setLastItemHeight();
- }
-
renderListItems() {
const {
isError,
@@ -50,8 +46,6 @@ export default class Listing extends React.Component {
);
}
- this.setLastItemHeight();
-
return (
<ul className={`listing__list listing__list--${column}`} ref={listRef}>
{items.map(v => renderItem(v))}
@@ -71,14 +65,6 @@ export default class Listing extends React.Component {
);
}
- // set css custom prop to allow scrolling from dropdown to last item in the list
- setLastItemHeight() {
- // const { listRef } = this.props;
- // if (listRef.current) {
- // document.documentElement.style.setProperty('--last-listing-item-height', listRef.current.lastElementChild.offsetHeight + 'px');
- // }
- }
-
render() {
return (
<div className="listing">
--
GitLab