From 7eeaf40c71e6c577d836b9e9568475e5768e8c5c Mon Sep 17 00:00:00 2001
From: Joro Stoyanov <stoyanov.gs@gmail.com>
Date: Fri, 29 Mar 2019 14:40:36 +0200
Subject: [PATCH 1/3] Add pagination for source list in association field

---
 packages/core/fields/association/index.js | 46 ++++++++++++++++++++---
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/core/fields/association/index.js b/packages/core/fields/association/index.js
index 5dc9de200..3f1d50a30 100644
--- a/packages/core/fields/association/index.js
+++ b/packages/core/fields/association/index.js
@@ -43,6 +43,13 @@ class AssociationField extends Component {
 	 */
 	selectedList = createRef();
 
+	/**
+	 * Keeps reference to the DOM bnode that contains the options.
+	 *
+	 * @type {Object}
+	 */
+	sourceList = createRef();
+
 	/**
 	 * Lifecycle hook.
 	 *
@@ -50,10 +57,12 @@ class AssociationField extends Component {
 	 */
 	componentDidMount() {
 		const {
+			fetchOptions,
 			fetchSelectedOptions,
 			field,
 			value,
-			setState
+			setState,
+			queryTerm
 		} = this.props;
 
 		setState( {
@@ -64,6 +73,21 @@ class AssociationField extends Component {
 		if ( value ) {
 			fetchSelectedOptions();
 		}
+
+		this.sourceList.current.onscroll = () => {
+			if ( this.sourceList.current.offsetHeight + this.sourceList.current.scrollTop === this.sourceList.current.scrollHeight ) {
+				setState( {
+					page: this.props.page + 1
+				} );
+
+				fetchOptions( {
+					type: 'append',
+					options: this.props.options,
+					queryTerm,
+					page: this.props.page
+				} );
+			}
+		};
 	}
 
 	/**
@@ -78,8 +102,16 @@ class AssociationField extends Component {
 			setState
 		} = this.props;
 
-		setState( { queryTerm } );
-		fetchOptions( { queryTerm } );
+		setState( {
+			page: 1,
+			queryTerm
+		} );
+
+		fetchOptions( {
+			type: 'replace',
+			page: 1,
+			queryTerm
+		} );
 	}
 
 	/**
@@ -208,7 +240,7 @@ class AssociationField extends Component {
 				</div>
 
 				<div className="cf-association__cols">
-					<div className="cf-association__col">
+					<div className="cf-association__col" ref={ this.sourceList }>
 						{
 							options.map( ( option, index ) => {
 								return (
@@ -371,6 +403,7 @@ function handler( props ) {
 				const request = window.jQuery.get( window.ajaxurl, {
 					action: 'carbon_fields_fetch_association_options',
 					term: payload.queryTerm,
+					page: payload.page || 1,
 					container_id: props.containerId,
 					field_name: hierarchyResolver()
 				}, null, 'json' );
@@ -381,7 +414,7 @@ function handler( props ) {
 				request.done( ( response ) => {
 					if ( response && response.success ) {
 						setState( {
-							options: response.data.options,
+							options: payload.type === 'replace' ? response.data.options : [ ...payload.options, ...response.data.options ],
 							totalOptionsCount: response.data.total_options
 						} );
 					} else {
@@ -417,7 +450,8 @@ const applyWithState = withState( {
 	options: [],
 	selectedOptions: [],
 	totalOptionsCount: 0,
-	queryTerm: ''
+	queryTerm: '',
+	page: 1
 } );
 
 const applyWithEffects = withEffects( aperture, { handler } );

From 73667682a962fda16dca8ca2ed79fc376269a21e Mon Sep 17 00:00:00 2001
From: Joro Stoyanov <stoyanov.gs@gmail.com>
Date: Fri, 29 Mar 2019 14:55:40 +0200
Subject: [PATCH 2/3] Polish association field

---
 packages/core/fields/association/index.js | 56 ++++++++++++++++-------
 1 file changed, 40 insertions(+), 16 deletions(-)

diff --git a/packages/core/fields/association/index.js b/packages/core/fields/association/index.js
index 3f1d50a30..1d52663d2 100644
--- a/packages/core/fields/association/index.js
+++ b/packages/core/fields/association/index.js
@@ -57,12 +57,10 @@ class AssociationField extends Component {
 	 */
 	componentDidMount() {
 		const {
-			fetchOptions,
 			fetchSelectedOptions,
 			field,
 			value,
-			setState,
-			queryTerm
+			setState
 		} = this.props;
 
 		setState( {
@@ -74,20 +72,46 @@ class AssociationField extends Component {
 			fetchSelectedOptions();
 		}
 
-		this.sourceList.current.onscroll = () => {
-			if ( this.sourceList.current.offsetHeight + this.sourceList.current.scrollTop === this.sourceList.current.scrollHeight ) {
-				setState( {
-					page: this.props.page + 1
-				} );
+		this.sourceList.current.addEventListener( 'scroll', this.handleSourceListScroll );
+	}
 
-				fetchOptions( {
-					type: 'append',
-					options: this.props.options,
-					queryTerm,
-					page: this.props.page
-				} );
-			}
-		};
+	/**
+	 * Lifecycle hook.
+	 *
+	 * @return {void}
+	 */
+	componentWillUnmount() {
+		this.sourceList.current.removeEventListener( 'scroll', this.handleSourceListScroll );
+	}
+
+	/**
+	 * Handles the scroll event of the source list.
+	 *
+	 * @return {void}
+	 */
+	handleSourceListScroll = () => {
+		const {
+			fetchOptions,
+			setState,
+			options,
+			page,
+			queryTerm
+		} = this.props;
+
+		const sourceList = this.sourceList.current;
+
+		if ( sourceList.offsetHeight + sourceList.scrollTop === sourceList.scrollHeight ) {
+			setState( {
+				page: page + 1
+			} );
+
+			fetchOptions( {
+				type: 'append',
+				options: options,
+				queryTerm,
+				page: page
+			} );
+		}
 	}
 
 	/**

From c1d3a46a2e152024efcffcb94bafeb4ade36b5ac Mon Sep 17 00:00:00 2001
From: Joro Stoyanov <stoyanov.gs@gmail.com>
Date: Fri, 29 Mar 2019 15:10:50 +0200
Subject: [PATCH 3/3] Fix first scroll page on association field

---
 packages/core/fields/association/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/fields/association/index.js b/packages/core/fields/association/index.js
index 1d52663d2..d465f4fca 100644
--- a/packages/core/fields/association/index.js
+++ b/packages/core/fields/association/index.js
@@ -109,7 +109,7 @@ class AssociationField extends Component {
 				type: 'append',
 				options: options,
 				queryTerm,
-				page: page
+				page: page + 1
 			} );
 		}
 	}