Numeric filter: generate a true array value for “between” rule instead of a comma-delimited string.

This commit is contained in:
Jeff Stieler 2019-01-09 14:23:49 -07:00
parent d46ce1df7a
commit c565b9cb40
1 changed files with 8 additions and 10 deletions

View File

@ -4,7 +4,7 @@
*/
import { Component, Fragment } from '@wordpress/element';
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 classnames from 'classnames';
import { sprintf, __, _x } from '@wordpress/i18n';
@ -32,7 +32,7 @@ class NumberFilter extends Component {
getScreenReaderText( filter, config ) {
const inputType = get( config, [ 'input', 'type' ], 'number' );
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)
if (
@ -114,7 +114,7 @@ class NumberFilter extends Component {
return this.getRangeInput();
}
const [ rangeStart, rangeEnd ] = ( filter.value || '' ).split( ',' );
const [ rangeStart, rangeEnd ] = isArray( filter.value ) ? filter.value : [ filter.value ];
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
@ -144,16 +144,14 @@ class NumberFilter extends Component {
getRangeInput() {
const { config, filter, onFilterChange } = this.props;
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 newValue = [ newRangeStart, rangeEnd ].join( ',' );
onFilterChange( filter.key, 'value', newValue );
onFilterChange( filter.key, 'value', [ newRangeStart, rangeEnd ] );
};
const rangeEndOnChange = ( newRangeEnd ) => {
const newValue = [ rangeStart, newRangeEnd ].join( ',' );
onFilterChange( filter.key, 'value', newValue );
onFilterChange( filter.key, 'value', [ rangeStart, newRangeEnd ] );
};
return interpolateComponents( {
@ -161,7 +159,7 @@ class NumberFilter extends Component {
components: {
rangeStart: this.getFormControl( {
type: inputType,
value: rangeStart,
value: rangeStart || '',
label: sprintf(
/* 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 */
@ -172,7 +170,7 @@ class NumberFilter extends Component {
} ),
rangeEnd: this.getFormControl( {
type: inputType,
value: rangeEnd,
value: rangeEnd || '',
label: sprintf(
/* 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 */