Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request woocommerce/woocommerce-admin#1267 from woocommerce/update/numeric-filter-array-value 

Numeric filter: generate a true array value for “between” rule
This commit is contained in:
Jeff Stieler 2019-01-10 19:31:15 -07:00 committed by GitHub
parent adf8bbeb23 c565b9cb40
commit 3efebb37e1
1 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js
View File

@ -4,7 +4,7 @@
*/ */
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
import { SelectControl, TextControl } from '@wordpress/components'; import { SelectControl, TextControl } from '@wordpress/components';
import { get, find, partial } from 'lodash'; import { get, find, partial, isArray } from 'lodash';
import interpolateComponents from 'interpolate-components'; import interpolateComponents from 'interpolate-components';
import classnames from 'classnames'; import classnames from 'classnames';
import { sprintf, __, _x } from '@wordpress/i18n'; import { sprintf, __, _x } from '@wordpress/i18n';
@ -32,7 +32,7 @@ class NumberFilter extends Component {
getScreenReaderText( filter, config ) { getScreenReaderText( filter, config ) {
const inputType = get( config, [ 'input', 'type' ], 'number' ); const inputType = get( config, [ 'input', 'type' ], 'number' );
const rule = find( config.rules, { value: filter.rule } ) || {}; const rule = find( config.rules, { value: filter.rule } ) || {};
let [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' ); let [ rangeStart, rangeEnd ] = isArray( filter.value ) ? filter.value : [ filter.value ];
// Return nothing if we're missing input(s) // Return nothing if we're missing input(s)
if ( if (
@ -114,7 +114,7 @@ class NumberFilter extends Component {
return this.getRangeInput(); return this.getRangeInput();
} }
const [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' ); const [ rangeStart, rangeEnd ] = isArray( filter.value ) ? filter.value : [ filter.value ];
if ( Boolean( rangeEnd ) ) { if ( Boolean( rangeEnd ) ) {
// If there's a value for rangeEnd, we've just changed from "between" // 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 // to "less than" or "more than" and need to transition the value
@ -144,16 +144,14 @@ class NumberFilter extends Component {
getRangeInput() { getRangeInput() {
const { config, filter, onFilterChange } = this.props; const { config, filter, onFilterChange } = this.props;
const inputType = get( config, [ 'input', 'type' ], 'number' ); const inputType = get( config, [ 'input', 'type' ], 'number' );
const [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' ); const [ rangeStart, rangeEnd ] = isArray( filter.value ) ? filter.value : [ filter.value ];
const rangeStartOnChange = ( newRangeStart ) => { const rangeStartOnChange = ( newRangeStart ) => {
const newValue = [ newRangeStart, rangeEnd ].join( ',' ); onFilterChange( filter.key, 'value', [ newRangeStart, rangeEnd ] );
onFilterChange( filter.key, 'value', newValue );
}; };
const rangeEndOnChange = ( newRangeEnd ) => { const rangeEndOnChange = ( newRangeEnd ) => {
const newValue = [ rangeStart, newRangeEnd ].join( ',' ); onFilterChange( filter.key, 'value', [ rangeStart, newRangeEnd ] );
onFilterChange( filter.key, 'value', newValue );
}; };
return interpolateComponents( { return interpolateComponents( {
@ -161,7 +159,7 @@ class NumberFilter extends Component {
components: { components: {
rangeStart: this.getFormControl( { rangeStart: this.getFormControl( {
type: inputType, type: inputType,
value: rangeStart, value: rangeStart || '',
label: sprintf( label: sprintf(
/* eslint-disable-next-line max-len */ /* eslint-disable-next-line max-len */
/* translators: Sentence fragment, "range start" refers to the first of two numeric values the field must be between. Screenshot for context: https://cloudup.com/cmv5CLyMPNQ */ /* translators: Sentence fragment, "range start" refers to the first of two numeric values the field must be between. Screenshot for context: https://cloudup.com/cmv5CLyMPNQ */
@ -172,7 +170,7 @@ class NumberFilter extends Component {
} ), } ),
rangeEnd: this.getFormControl( { rangeEnd: this.getFormControl( {
type: inputType, type: inputType,
value: rangeEnd, value: rangeEnd || '',
label: sprintf( label: sprintf(
/* eslint-disable-next-line max-len */ /* eslint-disable-next-line max-len */
/* translators: Sentence fragment, "range end" refers to the second of two numeric values the field must be between. Screenshot for context: https://cloudup.com/cmv5CLyMPNQ */ /* translators: Sentence fragment, "range end" refers to the second of two numeric values the field must be between. Screenshot for context: https://cloudup.com/cmv5CLyMPNQ */