From 6eadf9c8758d57a0cede583d8899d5958bb76995 Mon Sep 17 00:00:00 2001
From: Jeff Stieler <jeff.m.stieler@gmail.com>
Date: Fri, 14 Dec 2018 16:53:13 -0700
Subject: [PATCH] =?UTF-8?q?NumberFilter:=20rename=20=E2=80=9Cmore=20than?=
 =?UTF-8?q?=E2=80=9D=20and=20=E2=80=9Cless=20than=E2=80=9D=20to=20represen?=
 =?UTF-8?q?t=20a=20non-positional=20input=20range=20for=20=E2=80=9Cbetween?=
 =?UTF-8?q?=E2=80=9D=20rules,=20simplify=20rule=20change=20logic.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/filters/advanced/number-filter.js     | 55 +++++++++----------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
index 986a1d27f12..15ba42ed8a5 100644
--- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
+++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
@@ -18,7 +18,7 @@ import { formatCurrency } from '@woocommerce/currency';
 class NumberFilter extends Component {
 	getBetweenString() {
 		return _x(
-			'{{moreThan /}}{{span}}and{{/span}}{{lessThan /}}',
+			'{{rangeStart /}}{{span}}and{{/span}}{{rangeEnd /}}',
 			'Numerical range inputs arranged on a single line',
 			'wc-admin'
 		);
@@ -27,26 +27,24 @@ class NumberFilter extends Component {
 	getLegend( filter, config ) {
 		const inputType = get( config, [ 'input', 'type' ], 'number' );
 		const rule = find( config.rules, { value: filter.rule } ) || {};
-		let filterStr = filter.value || '';
+		let [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' );
+
+		if ( 'currency' === inputType ) {
+			rangeStart = formatCurrency( rangeStart );
+			rangeEnd = formatCurrency( rangeEnd );
+		}
+
+		let filterStr = rangeStart;
 
 		if ( 'between' === rule.value ) {
-			let [ moreThan, lessThan ] = filterStr.split( ',' );
-
-			if ( 'currency' === inputType ) {
-				moreThan = formatCurrency( moreThan );
-				lessThan = formatCurrency( lessThan );
-			}
-
 			filterStr = interpolateComponents( {
 				mixedString: this.getBetweenString(),
 				components: {
-					moreThan: <Fragment>{ moreThan }</Fragment>,
-					lessThan: <Fragment>{ lessThan }</Fragment>,
+					rangeStart: <Fragment>{ rangeStart }</Fragment>,
+					rangeEnd: <Fragment>{ rangeEnd }</Fragment>,
 					span: <Fragment />,
 				},
 			} );
-		} else if ( 'currency' === inputType ) { // need to format a single input value as currency
-			filterStr = formatCurrency( filterStr );
 		}
 
 		return interpolateComponents( {
@@ -94,24 +92,22 @@ class NumberFilter extends Component {
 
 	getFilterInputs() {
 		const { config, filter, onFilterChange } = this.props;
-		const { rule, value } = filter;
 		const inputType = get( config, [ 'input', 'type' ], 'number' );
 
-		if ( 'between' === rule ) {
+		if ( 'between' === filter.rule ) {
 			return this.getRangeInput();
 		}
 
-		let inputValue = value;
-
-		if ( value && value.indexOf( ',' ) > -1 ) {
-			const [ moreThan, lessThan ] = value.split( ',' );
-			inputValue = 'lessthan' === rule ? lessThan : moreThan;
-			onFilterChange( filter.key, 'value', inputValue );
+		const [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' );
+		if ( Boolean( rangeEnd ) ) {
+			// If there's a value for rangeEnd, we've just changed from "between"
+			// to "less than" or "more than" and need to transition the value
+			onFilterChange( filter.key, 'value', rangeStart || rangeEnd );
 		}
 
 		return this.getFormControl(
 			inputType,
-			inputValue,
+			rangeStart || rangeEnd,
 			partial( onFilterChange, filter.key, 'value' )
 		);
 	}
@@ -119,24 +115,23 @@ class NumberFilter extends Component {
 	getRangeInput() {
 		const { config, filter, onFilterChange } = this.props;
 		const inputType = get( config, [ 'input', 'type' ], 'number' );
-		const { value } = filter;
-		const [ moreThan, lessThan ] = ( value || '' ).split( ',' );
+		const [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' );
 
-		const moreThanOnChange = ( newMoreThan ) => {
-			const newValue = [ newMoreThan, lessThan ].join( ',' );
+		const rangeStartOnChange = ( newRangeStart ) => {
+			const newValue = [ newRangeStart, rangeEnd ].join( ',' );
 			onFilterChange( filter.key, 'value', newValue );
 		};
 
-		const lessThanOnChange = ( newLessThan ) => {
-			const newValue = [ moreThan, newLessThan ].join( ',' );
+		const rangeEndOnChange = ( newRangeEnd ) => {
+			const newValue = [ rangeStart, newRangeEnd ].join( ',' );
 			onFilterChange( filter.key, 'value', newValue );
 		};
 
 		return interpolateComponents( {
 			mixedString: this.getBetweenString(),
 			components: {
-				lessThan: this.getFormControl( inputType, lessThan, lessThanOnChange ),
-				moreThan: this.getFormControl( inputType, moreThan, moreThanOnChange ),
+				rangeStart: this.getFormControl( inputType, rangeStart, rangeStartOnChange ),
+				rangeEnd: this.getFormControl( inputType, rangeEnd, rangeEndOnChange ),
 				span: <span className="separator" />,
 			},
 		} );