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

Update AdvancedFilters to use createInterpolateElement instead of interpolateComponents (#37967)

This commit is contained in:
Matt Sherman 2023-04-26 06:58:14 -04:00 committed by GitHub
parent 856df0a3a6
commit e81f8ae88f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 426 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/update-interpolate-advanced-filters Normal file
View File

@ -0,0 +1,4 @@
Significance: major
Type: update
Updated AdvancedFilter to use createInterpolateElement instead of interpolateComponents.

9
packages/js/components/src/advanced-filters/README.md
View File

@ -4,14 +4,14 @@ Displays a configurable set of filters which can modify query parameters. Displa
## Usage
Below is a config example complete with translation strings. Advanced filters makes use of [interpolateComponents](https://github.com/Automattic/interpolate-components#readme) to organize sentence structure, resulting in a filter visually represented as a sentence fragment in any language.
Below is a config example complete with translation strings. Advanced filters makes use of [createInterpolateElement](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/#createinterpolateelement) to organize sentence structure, resulting in a filter visually represented as a sentence fragment in any language.
```js
const config = {
title: __(
// A sentence describing filters for Orders
// See screen shot for context: https://cloudup.com/cSsUY9VeCVJ
'Orders Match {{select /}} Filters',
'Orders Match <select/> Filters',
'woocommerce'
),
filters: {
@ -25,10 +25,7 @@ const config = {
),
// A sentence describing an Order Status filter
// See screen shot for context: https://cloudup.com/cSsUY9VeCVJ
title: __(
'Order Status {{rule /}} {{filter /}}',
'woocommerce'
),
title: __( 'Order Status <rule/> <filter/>', 'woocommerce' ),
filter: __( 'Select an order status', 'woocommerce' ),
},
rules: [

233
packages/js/components/src/advanced-filters/attribute-filter.js
View File

@ -3,10 +3,10 @@
*/
import PropTypes from 'prop-types';
import { SelectControl as Select, Spinner } from '@wordpress/components';
import interpolateComponents from '@automattic/interpolate-components';
import classnames from 'classnames';
import {
createElement,
createInterpolateElement,
Fragment,
useEffect,
useState,
@ -54,28 +54,22 @@ const getScreenReaderText = ( {
return '';
}
const filterStr = interpolateComponents( {
const filterStr = createInterpolateElement(
/* eslint-disable-next-line max-len */
/* translators: Sentence fragment describing a product attribute match. Example: "Color Is Not Blue" - attribute = Color, equals = Is Not, value = Blue */
mixedString: __(
'{{attribute /}} {{equals /}} {{value /}}',
'woocommerce'
),
components: {
__( '<attribute/> <equals/> <value/>', 'woocommerce' ),
{
attribute: <Fragment>{ attributeName }</Fragment>,
equals: <Fragment>{ rule.label }</Fragment>,
value: <Fragment>{ attributeTerm }</Fragment>,
},
} );
}
);
return textContent(
interpolateComponents( {
mixedString: config.labels.title,
components: {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment />,
title: <Fragment />,
},
createInterpolateElement( config.labels.title, {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment />,
title: <Fragment />,
} )
);
};
@ -154,114 +148,109 @@ const AttributeFilter = ( props ) => {
}
) }
>
{ interpolateComponents( {
mixedString: labels.title,
components: {
title: <span className={ className } />,
rule: (
<Select
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( selectedValue ) =>
onFilterChange( {
property: 'rule',
value: selectedValue,
} )
}
aria-label={ labels.rule }
/>
),
filter: (
<div
className={ classnames(
className,
'woocommerce-filters-advanced__attribute-fieldset'
) }
>
{ ! Array.isArray( value ) ||
! value.length ||
selectedAttribute.length ? (
<Search
className="woocommerce-filters-advanced__input woocommerce-search"
onChange={ ( [ attr ] ) => {
setSelectedAttribute(
attr ? [ attr ] : []
);
setSelectedAttributeTerm( '' );
onFilterChange( {
property: 'value',
value: [
attr && attr.key,
].filter( Boolean ),
} );
} }
type="attributes"
placeholder={ __(
'Attribute name',
'woocommerce'
) }
multiple={ false }
selected={ selectedAttribute }
inlineTags
aria-label={ __(
'Attribute name',
'woocommerce'
) }
/>
{ createInterpolateElement( labels.title, {
title: <span className={ className } />,
rule: (
<Select
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( selectedValue ) =>
onFilterChange( {
property: 'rule',
value: selectedValue,
} )
}
aria-label={ labels.rule }
/>
),
filter: (
<div
className={ classnames(
className,
'woocommerce-filters-advanced__attribute-fieldset'
) }
>
{ ! Array.isArray( value ) ||
! value.length ||
selectedAttribute.length ? (
<Search
className="woocommerce-filters-advanced__input woocommerce-search"
onChange={ ( [ attr ] ) => {
setSelectedAttribute(
attr ? [ attr ] : []
);
setSelectedAttributeTerm( '' );
onFilterChange( {
property: 'value',
value: [ attr && attr.key ].filter(
Boolean
),
} );
} }
type="attributes"
placeholder={ __(
'Attribute name',
'woocommerce'
) }
multiple={ false }
selected={ selectedAttribute }
inlineTags
aria-label={ __(
'Attribute name',
'woocommerce'
) }
/>
) : (
<Spinner />
) }
{ selectedAttribute.length > 0 &&
( attributeTerms.length ? (
<Fragment>
<span className="woocommerce-filters-advanced__attribute-field-separator">
=
</span>
<SelectControl
className="woocommerce-filters-advanced__input woocommerce-search"
placeholder={ __(
'Attribute value',
'woocommerce'
) }
inlineTags
isSearchable
multiple={ false }
showAllOnFocus
options={ attributeTerms }
selected={ selectedAttributeTerm }
onChange={ ( term ) => {
// Clearing the input using delete/backspace causes an empty array to be passed here.
if (
typeof term !== 'string'
) {
term = '';
}
setSelectedAttributeTerm(
term
);
onFilterChange( {
property: 'value',
value: [
selectedAttribute[ 0 ]
.key,
term,
].filter( Boolean ),
} );
} }
/>
</Fragment>
) : (
<Spinner />
) }
{ selectedAttribute.length > 0 &&
( attributeTerms.length ? (
<Fragment>
<span className="woocommerce-filters-advanced__attribute-field-separator">
=
</span>
<SelectControl
className="woocommerce-filters-advanced__input woocommerce-search"
placeholder={ __(
'Attribute value',
'woocommerce'
) }
inlineTags
isSearchable
multiple={ false }
showAllOnFocus
options={ attributeTerms }
selected={
selectedAttributeTerm
}
onChange={ ( term ) => {
// Clearing the input using delete/backspace causes an empty array to be passed here.
if (
typeof term !== 'string'
) {
term = '';
}
setSelectedAttributeTerm(
term
);
onFilterChange( {
property: 'value',
value: [
selectedAttribute[ 0 ]
.key,
term,
].filter( Boolean ),
} );
} }
/>
</Fragment>
) : (
<Spinner />
) ) }
</div>
),
},
) ) }
</div>
),
} ) }
</div>
{ screenReaderText && (

132
packages/js/components/src/advanced-filters/date-filter.js
View File

@ -1,8 +1,12 @@
/**
* External dependencies
*/
import { createElement, Component, Fragment } from '@wordpress/element';
import interpolateComponents from '@automattic/interpolate-components';
import {
createElement,
createInterpolateElement,
Component,
Fragment,
} from '@wordpress/element';
import { SelectControl } from '@wordpress/components';
import { find, partial } from 'lodash';
import classnames from 'classnames';
@ -46,7 +50,7 @@ class DateFilter extends Component {
getBetweenString() {
return _x(
'{{after /}}{{span}} and {{/span}}{{before /}}',
'<after/><span> and </span><before/>',
'Date range inputs arranged on a single line',
'woocommerce'
);
@ -65,32 +69,22 @@ class DateFilter extends Component {
let filterStr = before.format( dateStringFormat );
if ( rule.value === 'between' ) {
filterStr = interpolateComponents( {
mixedString: this.getBetweenString(),
components: {
after: (
<Fragment>
{ after.format( dateStringFormat ) }
</Fragment>
),
before: (
<Fragment>
{ before.format( dateStringFormat ) }
</Fragment>
),
span: <Fragment />,
},
filterStr = createInterpolateElement( this.getBetweenString(), {
after: (
<Fragment>{ after.format( dateStringFormat ) }</Fragment>
),
before: (
<Fragment>{ before.format( dateStringFormat ) }</Fragment>
),
span: <Fragment />,
} );
}
return textContent(
interpolateComponents( {
mixedString: config.labels.title,
components: {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
},
createInterpolateElement( config.labels.title, {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
} )
);
}
@ -198,23 +192,20 @@ class DateFilter extends Component {
afterText,
afterError,
} = this.state;
return interpolateComponents( {
mixedString: this.getBetweenString(),
components: {
after: this.getFormControl( {
date: after,
error: afterError,
onUpdate: partial( this.onRangeDateChange, 'after' ),
text: afterText,
} ),
before: this.getFormControl( {
date: before,
error: beforeError,
onUpdate: partial( this.onRangeDateChange, 'before' ),
text: beforeText,
} ),
span: <span className="separator" />,
},
return createInterpolateElement( this.getBetweenString(), {
after: this.getFormControl( {
date: after,
error: afterError,
onUpdate: partial( this.onRangeDateChange, 'after' ),
text: afterText,
} ),
before: this.getFormControl( {
date: before,
error: beforeError,
onUpdate: partial( this.onRangeDateChange, 'before' ),
text: beforeText,
} ),
span: <span className="separator" />,
} );
}
@ -238,36 +229,33 @@ class DateFilter extends Component {
const { rule } = this.state;
const { labels, rules } = config;
const screenReaderText = this.getScreenReaderText( rule, config );
const children = interpolateComponents( {
mixedString: labels.title,
components: {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ this.onRuleChange }
aria-label={ labels.rule }
/>
),
filter: (
<div
className={ classnames(
className,
'woocommerce-filters-advanced__input-range',
{
'is-between': rule === 'between',
}
) }
>
{ this.getFilterInputs() }
</div>
),
},
const children = createInterpolateElement( labels.title, {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ this.onRuleChange }
aria-label={ labels.rule }
/>
),
filter: (
<div
className={ classnames(
className,
'woocommerce-filters-advanced__input-range',
{
'is-between': rule === 'between',
}
) }
>
{ this.getFilterInputs() }
</div>
),
} );
/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
return (

37
packages/js/components/src/advanced-filters/index.js
View File

@ -11,11 +11,15 @@ import {
Dropdown,
SelectControl,
} from '@wordpress/components';
import { createElement, Component, createRef } from '@wordpress/element';
import {
createElement,
createInterpolateElement,
Component,
createRef,
} from '@wordpress/element';
import { partial, difference, isEqual } from 'lodash';
import PropTypes from 'prop-types';
import AddOutlineIcon from 'gridicons/dist/add-outline';
import interpolateComponents from '@automattic/interpolate-components';
import {
getActiveFiltersFromQuery,
getDefaultOptionValue,
@ -143,22 +147,19 @@ class AdvancedFilters extends Component {
getTitle() {
const { match } = this.state;
const { config } = this.props;
return interpolateComponents( {
mixedString: config.title,
components: {
select: (
<SelectControl
className="woocommerce-filters-advanced__title-select"
options={ matches }
value={ match }
onChange={ this.onMatchChange }
aria-label={ __(
'Choose to apply any or all filters',
'woocommerce'
) }
/>
),
},
return createInterpolateElement( config.title, {
select: (
<SelectControl
className="woocommerce-filters-advanced__title-select"
options={ matches }
value={ match }
onChange={ this.onMatchChange }
aria-label={ __(
'Choose to apply any or all filters',
'woocommerce'
) }
/>
),
} );
}

150
packages/js/components/src/advanced-filters/number-filter.js
View File

@ -1,10 +1,14 @@
/**
* External dependencies
*/
import { createElement, Component, Fragment } from '@wordpress/element';
import {
createElement,
createInterpolateElement,
Component,
Fragment,
} from '@wordpress/element';
import { SelectControl, TextControl } from '@wordpress/components';
import { get, find, isArray } from 'lodash';
import interpolateComponents from '@automattic/interpolate-components';
import classnames from 'classnames';
import { sprintf, __, _x } from '@wordpress/i18n';
import { CurrencyFactory } from '@woocommerce/currency';
@ -18,7 +22,7 @@ import { textContent } from './utils';
class NumberFilter extends Component {
getBetweenString() {
return _x(
'{{rangeStart /}}{{span}} and {{/span}}{{rangeEnd /}}',
'<rangeStart/><span> and </span><rangeEnd/>',
'Numerical range inputs arranged on a single line',
'woocommerce'
);
@ -46,24 +50,18 @@ class NumberFilter extends Component {
let filterStr = rangeStart;
if ( rule.value === 'between' ) {
filterStr = interpolateComponents( {
mixedString: this.getBetweenString(),
components: {
rangeStart: <Fragment>{ rangeStart }</Fragment>,
rangeEnd: <Fragment>{ rangeEnd }</Fragment>,
span: <Fragment />,
},
filterStr = createInterpolateElement( this.getBetweenString(), {
rangeStart: <Fragment>{ rangeStart }</Fragment>,
rangeEnd: <Fragment>{ rangeEnd }</Fragment>,
span: <Fragment />,
} );
}
return textContent(
interpolateComponents( {
mixedString: config.labels.title,
components: {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
},
createInterpolateElement( config.labels.title, {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
} )
);
}
@ -197,37 +195,34 @@ class NumberFilter extends Component {
} );
};
return interpolateComponents( {
mixedString: this.getBetweenString(),
components: {
rangeStart: this.getFormControl( {
type: inputType,
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 */
__( '%(field)s range start', 'woocommerce' ),
{ field: get( config, [ 'labels', 'add' ] ) }
),
onChange: rangeStartOnChange,
currencySymbol,
symbolPosition,
} ),
rangeEnd: this.getFormControl( {
type: inputType,
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 */
__( '%(field)s range end', 'woocommerce' ),
{ field: get( config, [ 'labels', 'add' ] ) }
),
onChange: rangeEndOnChange,
currencySymbol,
symbolPosition,
} ),
span: <span className="separator" />,
},
return createInterpolateElement( this.getBetweenString(), {
rangeStart: this.getFormControl( {
type: inputType,
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 */
__( '%(field)s range start', 'woocommerce' ),
{ field: get( config, [ 'labels', 'add' ] ) }
),
onChange: rangeStartOnChange,
currencySymbol,
symbolPosition,
} ),
rangeEnd: this.getFormControl( {
type: inputType,
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 */
__( '%(field)s range end', 'woocommerce' ),
{ field: get( config, [ 'labels', 'add' ] ) }
),
onChange: rangeEndOnChange,
currencySymbol,
symbolPosition,
} ),
span: <span className="separator" />,
} );
}
@ -237,38 +232,35 @@ class NumberFilter extends Component {
const { rule } = filter;
const { labels, rules } = config;
const children = interpolateComponents( {
mixedString: labels.title,
components: {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( value ) =>
onFilterChange( { property: 'rule', value } )
const children = createInterpolateElement( labels.title, {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( value ) =>
onFilterChange( { property: 'rule', value } )
}
aria-label={ labels.rule }
/>
),
filter: (
<div
className={ classnames(
className,
'woocommerce-filters-advanced__input-range',
{
'is-between': rule === 'between',
}
aria-label={ labels.rule }
/>
),
filter: (
<div
className={ classnames(
className,
'woocommerce-filters-advanced__input-range',
{
'is-between': rule === 'between',
}
) }
>
{ this.getFilterInputs() }
</div>
),
},
) }
>
{ this.getFilterInputs() }
</div>
),
} );
const screenReaderText = this.getScreenReaderText( filter, config );

84
packages/js/components/src/advanced-filters/search-filter.js
View File

@ -1,12 +1,16 @@
/**
* External dependencies
*/
import { createElement, Component, Fragment } from '@wordpress/element';
import {
createElement,
createInterpolateElement,
Component,
Fragment,
} from '@wordpress/element';
import { SelectControl } from '@wordpress/components';
import { getIdsFromQuery } from '@woocommerce/navigation';
import { find, isEqual } from 'lodash';
import PropTypes from 'prop-types';
import interpolateComponents from '@automattic/interpolate-components';
import classnames from 'classnames';
/**
@ -86,13 +90,10 @@ class SearchFilter extends Component {
const filterStr = selected.map( ( item ) => item.label ).join( ', ' );
return textContent(
interpolateComponents( {
mixedString: config.labels.title,
components: {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
},
createInterpolateElement( config.labels.title, {
filter: <Fragment>{ filterStr }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
} )
);
}
@ -103,40 +104,37 @@ class SearchFilter extends Component {
const { selected } = this.state;
const { rule } = filter;
const { input, labels, rules } = config;
const children = interpolateComponents( {
mixedString: labels.title,
components: {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( value ) =>
onFilterChange( { property: 'rule', value } )
}
aria-label={ labels.rule }
/>
),
filter: (
<Search
className={ classnames(
className,
'woocommerce-filters-advanced__input'
) }
onChange={ this.onSearchChange }
type={ input.type }
autocompleter={ input.autocompleter }
placeholder={ labels.placeholder }
selected={ selected }
inlineTags
aria-label={ labels.filter }
/>
),
},
const children = createInterpolateElement( labels.title, {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( value ) =>
onFilterChange( { property: 'rule', value } )
}
aria-label={ labels.rule }
/>
),
filter: (
<Search
className={ classnames(
className,
'woocommerce-filters-advanced__input'
) }
onChange={ this.onSearchChange }
type={ input.type }
autocompleter={ input.autocompleter }
placeholder={ labels.placeholder }
selected={ selected }
inlineTags
aria-label={ labels.filter }
/>
),
} );
const screenReaderText = this.getScreenReaderText( filter, config );

98
packages/js/components/src/advanced-filters/select-filter.js
View File

@ -1,11 +1,15 @@
/**
* External dependencies
*/
import { createElement, Component, Fragment } from '@wordpress/element';
import {
createElement,
createInterpolateElement,
Component,
Fragment,
} from '@wordpress/element';
import { SelectControl, Spinner } from '@wordpress/components';
import { find } from 'lodash';
import PropTypes from 'prop-types';
import interpolateComponents from '@automattic/interpolate-components';
import classnames from 'classnames';
import { getDefaultOptionValue } from '@woocommerce/navigation';
@ -54,13 +58,10 @@ class SelectFilter extends Component {
find( config.input.options, { value: filter.value } ) || {};
return textContent(
interpolateComponents( {
mixedString: config.labels.title,
components: {
filter: <Fragment>{ value.label }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
},
createInterpolateElement( config.labels.title, {
filter: <Fragment>{ value.label }</Fragment>,
rule: <Fragment>{ rule.label }</Fragment>,
title: <Fragment />,
} )
);
}
@ -71,47 +72,44 @@ class SelectFilter extends Component {
const { options } = this.state;
const { rule, value } = filter;
const { labels, rules } = config;
const children = interpolateComponents( {
mixedString: labels.title,
components: {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( selectedValue ) =>
onFilterChange( {
property: 'rule',
value: selectedValue,
} )
}
aria-label={ labels.rule }
/>
),
filter: options ? (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__input'
) }
options={ options }
value={ value }
onChange={ ( selectedValue ) =>
onFilterChange( {
property: 'value',
value: selectedValue,
} )
}
aria-label={ labels.filter }
/>
) : (
<Spinner />
),
},
const children = createInterpolateElement( labels.title, {
title: <span className={ className } />,
rule: (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__rule'
) }
options={ rules }
value={ rule }
onChange={ ( selectedValue ) =>
onFilterChange( {
property: 'rule',
value: selectedValue,
} )
}
aria-label={ labels.rule }
/>
),
filter: options ? (
<SelectControl
className={ classnames(
className,
'woocommerce-filters-advanced__input'
) }
options={ options }
value={ value }
onChange={ ( selectedValue ) =>
onFilterChange( {
property: 'value',
value: selectedValue,
} )
}
aria-label={ labels.filter }
/>
) : (
<Spinner />
),
} );
const screenReaderText = this.getScreenReaderText( filter, config );

14
packages/js/components/src/advanced-filters/stories/index.js
View File

@ -29,14 +29,14 @@ const query = {
};
const advancedFilters = {
title: 'Orders Match {{select /}} Filters',
title: 'Orders Match <select/> Filters',
filters: {
status: {
labels: {
add: 'Order Status',
remove: 'Remove order status filter',
rule: 'Select an order status filter match',
title: '{{title}}Order Status{{/title}} {{rule /}} {{filter /}}',
title: '<title>Order Status</title> <rule/> <filter/>',
filter: 'Select an order status',
},
rules: [
@ -63,7 +63,7 @@ const advancedFilters = {
placeholder: 'Search products',
remove: 'Remove products filter',
rule: 'Select a product filter match',
title: '{{title}}Product{{/title}} {{rule /}} {{filter /}}',
title: '<title>Product</title> <rule/> <filter/>',
filter: 'Select products',
},
rules: [
@ -87,7 +87,7 @@ const advancedFilters = {
add: 'Customer type',
remove: 'Remove customer filter',
rule: 'Select a customer filter match',
title: '{{title}}Customer is{{/title}} {{filter /}}',
title: '<title>Customer is</title> <filter/>',
filter: 'Select a customer type',
},
input: {
@ -104,7 +104,7 @@ const advancedFilters = {
add: 'Item Quantity',
remove: 'Remove item quantity filter',
rule: 'Select an item quantity filter match',
title: '{{title}}Item Quantity is{{/title}} {{rule /}} {{filter /}}',
title: '<title>Item Quantity is</title> <rule/> <filter/>',
},
rules: [
{
@ -129,7 +129,7 @@ const advancedFilters = {
add: 'Subtotal',
remove: 'Remove subtotal filter',
rule: 'Select a subtotal filter match',
title: '{{title}}Subtotal is{{/title}} {{rule /}} {{filter /}}',
title: '<title>Subtotal is</title> <rule/> <filter/>',
},
rules: [
{
@ -155,7 +155,7 @@ const advancedFilters = {
add: 'Date',
remove: 'Remove date filter',
rule: 'Select a date filter match',
title: '{{title}}Date{{/title}} {{rule /}} {{filter /}}',
title: '<title>Date</title> <rule/> <filter/>',
filter: 'Select a transaction date',
},
rules: [

14
packages/js/components/src/advanced-filters/test/advanced-filters.test.js
View File

@ -34,14 +34,14 @@ const CURRENCY = {
};
const advancedFiltersConfig = {
title: 'Orders Match {{select /}} Filters',
title: 'Orders Match <select/> Filters',
filters: {
status: {
labels: {
add: 'Order Status',
remove: 'Remove order status filter',
rule: 'Select an order status filter match',
title: '{{title}}Order Status{{/title}} {{rule /}} {{filter /}}',
title: '<title>Order Status</title> <rule/> <filter/>',
filter: 'Select an order status',
},
rules: [
@ -68,7 +68,7 @@ const advancedFiltersConfig = {
placeholder: 'Search products',
remove: 'Remove products filter',
rule: 'Select a product filter match',
title: '{{title}}Product{{/title}} {{rule /}} {{filter /}}',
title: '<title>Product</title> <rule/> <filter/>',
filter: 'Select products',
},
rules: [
@ -92,7 +92,7 @@ const advancedFiltersConfig = {
add: 'Customer Type',
remove: 'Remove customer filter',
rule: 'Select a customer filter match',
title: '{{title}}Customer is{{/title}} {{filter /}}',
title: '<title>Customer is</title> <filter/>',
filter: 'Select a customer type',
},
input: {
@ -109,7 +109,7 @@ const advancedFiltersConfig = {
add: 'Item Quantity',
remove: 'Remove item quantity filter',
rule: 'Select an item quantity filter match',
title: '{{title}}Item Quantity is{{/title}} {{rule /}} {{filter /}}',
title: '<title>Item Quantity is</title> <rule/> <filter/>',
},
rules: [
{
@ -134,7 +134,7 @@ const advancedFiltersConfig = {
add: 'Subtotal',
remove: 'Remove subtotal filter',
rule: 'Select a subtotal filter match',
title: '{{title}}Subtotal is{{/title}} {{rule /}} {{filter /}}',
title: '<title>Subtotal is</title> <rule/> <filter/>',
},
rules: [
{
@ -160,7 +160,7 @@ const advancedFiltersConfig = {
add: 'Date',
remove: 'Remove date filter',
rule: 'Select a date filter match',
title: '{{title}}Date{{/title}} {{rule /}} {{filter /}}',
title: '<title>Date</title> <rule/> <filter/>',
filter: 'Select a transaction date',
},
rules: [

23
packages/js/components/src/filters/stories/index.js
View File

@ -25,6 +25,16 @@ const ORDER_STATUSES = {
refunded: 'Refunded',
};
const CURRENCY = {
code: 'USD',
decimalSeparator: '.',
precision: 2,
priceFormat: '%1$s%2$s',
symbol: '$',
symbolPosition: 'left',
thousandSeparator: ',',
};
// Fetch store default date range and compose with date utility functions.
const defaultDateRange = 'period=month&compare=previous_year';
const storeGetDateParamsFromQuery = partialRight(
@ -58,14 +68,14 @@ const filters = [
];
const advancedFilters = {
title: 'Orders Match {{select /}} Filters',
title: 'Orders Match <select/> Filters',
filters: {
status: {
labels: {
add: 'Order Status',
remove: 'Remove order status filter',
rule: 'Select an order status filter match',
title: 'Order Status {{rule /}} {{filter /}}',
title: 'Order Status <rule/> <filter/>',
filter: 'Select an order status',
},
rules: [
@ -92,7 +102,7 @@ const advancedFilters = {
placeholder: 'Search products',
remove: 'Remove products filter',
rule: 'Select a product filter match',
title: 'Product {{rule /}} {{filter /}}',
title: 'Product <rule/> <filter/>',
filter: 'Select products',
},
rules: [
@ -116,7 +126,7 @@ const advancedFilters = {
add: 'Customer type',
remove: 'Remove customer filter',
rule: 'Select a customer filter match',
title: 'Customer is {{filter /}}',
title: 'Customer is <filter/>',
filter: 'Select a customer type',
},
input: {
@ -133,7 +143,7 @@ const advancedFilters = {
add: 'Item Quantity',
remove: 'Remove item quantity filter',
rule: 'Select an item quantity filter match',
title: 'Item Quantity is {{rule /}} {{filter /}}',
title: 'Item Quantity is <rule/> <filter/>',
},
rules: [
{
@ -158,7 +168,7 @@ const advancedFilters = {
add: 'Subtotal',
remove: 'Remove subtotal filter',
rule: 'Select a subtotal filter match',
title: 'Subtotal is {{rule /}} {{filter /}}',
title: 'Subtotal is <rule/> <filter/>',
},
rules: [
{
@ -225,6 +235,7 @@ export const Examples = () => (
query={ query }
filterTitle="Orders"
config={ advancedFilters }
currency={ CURRENCY }
/>
</Section>

2
plugins/woocommerce-admin/client/analytics/report/categories/config.js
View File

@ -67,7 +67,7 @@ export const advancedFilters = applyFilters(
{
filters: {},
title: _x(
'Categories match {{select /}} filters',
'Categories match <select/> filters',
'A sentence describing filters for Categories. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),

2
plugins/woocommerce-admin/client/analytics/report/coupons/config.js
View File

@ -58,7 +58,7 @@ export const advancedFilters = applyFilters(
{
filters: {},
title: _x(
'Coupons match {{select /}} filters',
'Coupons match <select/> filters',
'A sentence describing filters for Coupons. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),

20
plugins/woocommerce-admin/client/analytics/report/customers/config.js
View File

@ -84,7 +84,7 @@ export const advancedFilters = applyFilters(
CUSTOMERS_REPORT_ADVANCED_FILTERS_FILTER,
{
title: _x(
'Customers match {{select /}} filters',
'Customers match <select/> filters',
'A sentence describing filters for Customers. See screen shot for context: https://cloudup.com/cCsm3GeXJbE',
'woocommerce'
),
@ -100,7 +100,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __(
'{{title}}Name{{/title}} {{rule /}} {{filter /}}',
'<title>Name</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select customer name', 'woocommerce' ),
@ -151,7 +151,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __(
'{{title}}Country / Region{{/title}} {{rule /}} {{filter /}}',
'<title>Country / Region</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select country / region', 'woocommerce' ),
@ -205,7 +205,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __(
'{{title}}Username{{/title}} {{rule /}} {{filter /}}',
'<title>Username</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select customer username', 'woocommerce' ),
@ -247,7 +247,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a customer email filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __(
'{{title}}Email{{/title}} {{rule /}} {{filter /}}',
'<title>Email</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select customer email', 'woocommerce' ),
@ -293,7 +293,7 @@ export const advancedFilters = applyFilters(
'woocommerce'
),
title: __(
'{{title}}No. of Orders{{/title}} {{rule /}} {{filter /}}',
'<title>No. of Orders</title> <rule/> <filter/>',
'woocommerce'
),
},
@ -339,7 +339,7 @@ export const advancedFilters = applyFilters(
'woocommerce'
),
title: __(
'{{title}}Total Spend{{/title}} {{rule /}} {{filter /}}',
'<title>Total Spend</title> <rule/> <filter/>',
'woocommerce'
),
},
@ -388,7 +388,7 @@ export const advancedFilters = applyFilters(
'woocommerce'
),
title: __(
'{{title}}AOV{{/title}} {{rule /}} {{filter /}}',
'<title>AOV</title> <rule/> <filter/>',
'woocommerce'
),
},
@ -436,7 +436,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __(
'{{title}}Registered{{/title}} {{rule /}} {{filter /}}',
'<title>Registered</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select registered date', 'woocommerce' ),
@ -472,7 +472,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cCsm3GeXJbE */
title: __(
'{{title}}Last active{{/title}} {{rule /}} {{filter /}}',
'<title>Last active</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select registered date', 'woocommerce' ),

10
plugins/woocommerce-admin/client/analytics/report/downloads/config.js
View File

@ -77,7 +77,7 @@ export const advancedFilters = applyFilters(
DOWLOADS_REPORT_ADVANCED_FILTERS_FILTER,
{
title: _x(
'Downloads match {{select /}} filters',
'Downloads match <select/> filters',
'A sentence describing filters for Downloads. See screen shot for context: https://cloudup.com/ccxhyH2mEDg',
'woocommerce'
),
@ -90,7 +90,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a product filter match', 'woocommerce' ),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
title: __(
'{{title}}Product{{/title}} {{rule /}} {{filter /}}',
'<title>Product</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select product', 'woocommerce' ),
@ -130,7 +130,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a customer username filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
title: __(
'{{title}}Username{{/title}} {{rule /}} {{filter /}}',
'<title>Username</title> <rule/> <filter />',
'woocommerce'
),
filter: __( 'Select customer username', 'woocommerce' ),
@ -172,7 +172,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a order number filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
title: __(
'{{title}}Order #{{/title}} {{rule /}} {{filter /}}',
'<title>Order #</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select order number', 'woocommerce' ),
@ -212,7 +212,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a order number filter. See screen shot for context: https://cloudup.com/ccxhyH2mEDg */
title: __(
'{{title}}IP Address{{/title}} {{rule /}} {{filter /}}',
'<title>IP Address</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select IP address', 'woocommerce' ),

18
plugins/woocommerce-admin/client/analytics/report/orders/config.js
View File

@ -97,7 +97,7 @@ export const advancedFilters = applyFilters(
ORDERS_REPORT_ADVANCED_FILTERS_FILTER,
{
title: _x(
'Orders match {{select /}} filters',
'Orders match <select/> filters',
'A sentence describing filters for Orders. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),
@ -112,7 +112,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing an Order Status filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Order Status{{/title}} {{rule /}} {{filter /}}',
'<title>Order Status</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select an order status', 'woocommerce' ),
@ -145,7 +145,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a product filter match', 'woocommerce' ),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Product{{/title}} {{rule /}} {{filter /}}',
'<title>Product</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select products', 'woocommerce' ),
@ -179,7 +179,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Variation filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Variation{{/title}} {{rule /}} {{filter /}}',
'<title>Variation</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select variation', 'woocommerce' ),
@ -210,7 +210,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a coupon filter match', 'woocommerce' ),
/* translators: A sentence describing a Coupon filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Coupon code{{/title}} {{rule /}} {{filter /}}',
'<title>Coupon code</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select coupon codes', 'woocommerce' ),
@ -240,7 +240,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a customer filter match', 'woocommerce' ),
/* translators: A sentence describing a Customer filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Customer is{{/title}} {{filter /}}',
'<title>Customer is</title> <filter/>',
'woocommerce'
),
filter: __( 'Select a customer type', 'woocommerce' ),
@ -266,7 +266,7 @@ export const advancedFilters = applyFilters(
remove: __( 'Remove refunds filter', 'woocommerce' ),
rule: __( 'Select a refund filter match', 'woocommerce' ),
title: __(
'{{title}}Refunds{{/title}} {{filter /}}',
'<title>Refunds</title> <filter/>',
'woocommerce'
),
filter: __( 'Select a refund type', 'woocommerce' ),
@ -302,7 +302,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a tax rate filter match', 'woocommerce' ),
/* translators: A sentence describing a tax rate filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Tax Rate{{/title}} {{rule /}} {{filter /}}',
'<title>Tax Rate</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select tax rates', 'woocommerce' ),
@ -337,7 +337,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Attribute{{/title}} {{rule /}} {{filter /}}',
'<title>Attribute</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select attributes', 'woocommerce' ),

2
plugins/woocommerce-admin/client/analytics/report/products/config.js
View File

@ -189,7 +189,7 @@ export const advancedFilters = applyFilters(
{
filters: {},
title: _x(
'Products Match {{select /}} Filters',
'Products Match <select/> Filters',
'A sentence describing filters for Products. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),

2
plugins/woocommerce-admin/client/analytics/report/revenue/config.js
View File

@ -98,7 +98,7 @@ export const advancedFilters = applyFilters(
{
filters: {},
title: _x(
'Revenue Matches {{select /}} Filters',
'Revenue Matches <select/> Filters',
'A sentence describing filters for Revenue. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),

2
plugins/woocommerce-admin/client/analytics/report/stock/config.js
View File

@ -23,7 +23,7 @@ export const advancedFilters = applyFilters(
{
filters: {},
title: _x(
'Products Match {{select /}} Filters',
'Products Match <select/> Filters',
'A sentence describing filters for Products. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),

2
plugins/woocommerce-admin/client/analytics/report/taxes/config.js
View File

@ -74,7 +74,7 @@ export const advancedFilters = applyFilters(
{
filters: {},
title: _x(
'Taxes match {{select /}} filters',
'Taxes match <select/> filters',
'A sentence describing filters for Taxes. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),

8
plugins/woocommerce-admin/client/analytics/report/variations/config.js
View File

@ -146,7 +146,7 @@ export const advancedFilters = applyFilters(
VARIATIONS_REPORT_ADVANCED_FILTERS_FILTER,
{
title: _x(
'Variations match {{select /}} filters',
'Variations match <select/> filters',
'A sentence describing filters for Variations. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ',
'woocommerce'
),
@ -163,7 +163,7 @@ export const advancedFilters = applyFilters(
),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Attribute{{/title}} {{rule /}} {{filter /}}',
'<title>Attribute</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select attributes', 'woocommerce' ),
@ -196,7 +196,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a category filter match', 'woocommerce' ),
/* translators: A sentence describing a Category filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Category{{/title}} {{rule /}} {{filter /}}',
'<title>Category</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select categories', 'woocommerce' ),
@ -227,7 +227,7 @@ export const advancedFilters = applyFilters(
rule: __( 'Select a product filter match', 'woocommerce' ),
/* translators: A sentence describing a Product filter. See screen shot for context: https://cloudup.com/cSsUY9VeCVJ */
title: __(
'{{title}}Product{{/title}} {{rule /}} {{filter /}}',
'<title>Product</title> <rule/> <filter/>',
'woocommerce'
),
filter: __( 'Select products', 'woocommerce' ),

4
plugins/woocommerce/changelog/update-interpolate-advanced-filters Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: tweak
Update usage of AdvancedFilter to use createInterpolateElement formats.