woocommerce/plugins/woocommerce-blocks/assets/js/views/attribute-select.jsx

318 lines
7.9 KiB
React
Raw Normal View History

2018-02-15 18:16:14 +00:00
const { __ } = wp.i18n;
const { Toolbar, withAPIData, Dropdown } = wp.components;
2018-02-20 19:47:50 +00:00
/**
* Attribute data cache.
2018-02-21 19:59:40 +00:00
* Needed because it takes a lot of API calls to generate attribute info.
2018-02-20 19:47:50 +00:00
*/
const PRODUCT_ATTRIBUTE_DATA = {};
2018-02-15 18:16:14 +00:00
/**
* When the display mode is 'Attribute' search for and select product attributes to pull products from.
*/
export class ProductsAttributeSelect extends React.Component {
2018-02-20 19:47:50 +00:00
/**
* Constructor.
*/
constructor( props ) {
super( props );
/**
2018-02-21 19:59:40 +00:00
* The first item in props.selected_display_setting is the attribute slug.
* The rest are the term ids for any selected terms.
*/
2018-02-20 19:47:50 +00:00
this.state = {
selectedAttribute: props.selected_display_setting.length ? props.selected_display_setting[0] : '',
selectedTerms: props.selected_display_setting.length > 1 ? props.selected_display_setting.slice( 1 ) : [],
2018-02-20 19:47:50 +00:00
filterQuery: '',
}
this.setSelectedAttribute = this.setSelectedAttribute.bind( this );
this.addTerm = this.addTerm.bind( this );
this.removeTerm = this.removeTerm.bind( this );
}
/**
* Set the selected attribute.
*
* @param slug string Attribute slug.
*/
setSelectedAttribute( slug ) {
this.setState( {
selectedAttribute: slug,
selectedTerms: [],
} );
this.props.update_display_setting_callback( [ slug ] );
2018-02-20 19:47:50 +00:00
}
/**
* Add a term to the selected attribute's terms.
*
2018-02-21 19:53:36 +00:00
* @param id int Term id.
2018-02-20 19:47:50 +00:00
*/
2018-02-21 19:53:36 +00:00
addTerm( id ) {
2018-02-20 19:47:50 +00:00
let terms = this.state.selectedTerms;
2018-02-21 19:53:36 +00:00
terms.push( id );
2018-02-20 19:47:50 +00:00
this.setState( {
selectedTerms: terms,
} );
let displaySetting = [ this.state.selectedAttribute ];
displaySetting = displaySetting.concat( terms );
this.props.update_display_setting_callback( displaySetting );
2018-02-20 19:47:50 +00:00
}
/**
* Remove a term from the selected attribute's terms.
*
2018-02-21 19:53:36 +00:00
* @param id int Term id.
2018-02-20 19:47:50 +00:00
*/
2018-02-21 19:53:36 +00:00
removeTerm( id ) {
2018-02-20 19:47:50 +00:00
let newTerms = [];
2018-02-21 19:53:36 +00:00
for ( let termId of this.state.selectedTerms ) {
if ( termId !== id ) {
newTerms.push( termId );
2018-02-20 19:47:50 +00:00
}
}
this.setState( {
selectedTerms: newTerms,
} );
let displaySetting = [ this.state.selectedAttribute ];
displaySetting = displaySetting.concat( newTerms );
this.props.update_display_setting_callback( displaySetting );
2018-02-20 19:47:50 +00:00
}
2018-02-21 19:53:36 +00:00
/**
* Update the search results when typing in the attributes box.
*
* @param evt Event object
*/
2018-02-21 19:30:47 +00:00
updateFilter( evt ) {
this.setState( {
filterQuery: evt.target.value,
} );
}
2018-02-20 19:47:50 +00:00
/**
* Render the whole section.
*/
2018-02-15 18:16:14 +00:00
render() {
return (
<div className="wc-products-list-card wc-products-list-card--taxonomy wc-products-list-card--taxonomy-atributes">
2018-02-21 19:30:47 +00:00
<ProductAttributeFilter updateFilter={ this.updateFilter.bind( this ) } />
2018-02-20 19:47:50 +00:00
<ProductAttributeList
selectedAttribute={ this.state.selectedAttribute }
selectedTerms={ this.state.selectedTerms }
2018-02-21 19:30:47 +00:00
filterQuery={ this.state.filterQuery }
2018-02-20 19:47:50 +00:00
setSelectedAttribute={ this.setSelectedAttribute.bind( this ) }
addTerm={ this.addTerm.bind( this ) }
removeTerm={ this.removeTerm.bind( this ) }
/>
2018-02-15 18:16:14 +00:00
</div>
);
}
}
2018-02-20 19:47:50 +00:00
/**
* Search area for filtering through the attributes list.
*/
2018-02-21 19:30:47 +00:00
const ProductAttributeFilter = ( props ) => {
2018-02-20 19:47:50 +00:00
return (
<div>
<input className="wc-products-list-card__search" type="search" placeholder={ __( 'Search for attributes' ) } onChange={ props.updateFilter } />
2018-02-20 19:47:50 +00:00
</div>
);
}
/**
* List of attributes.
*/
const ProductAttributeList = withAPIData( ( props ) => {
return {
attributes: '/wc/v2/products/attributes'
};
2018-02-21 19:30:47 +00:00
} )( ( { attributes, selectedAttribute, filterQuery, selectedTerms, setSelectedAttribute, addTerm, removeTerm } ) => {
2018-02-20 19:47:50 +00:00
if ( ! attributes.data ) {
return __( 'Loading' );
}
if ( 0 === attributes.data.length ) {
return __( 'No attributes found' );
}
2018-02-21 19:30:47 +00:00
const filter = filterQuery.toLowerCase();
2018-02-20 19:47:50 +00:00
let attributeElements = [];
for ( let attribute of attributes.data ) {
2018-02-21 19:30:47 +00:00
// Filter out attributes that don't match the search query.
if ( filter.length && -1 === attribute.name.toLowerCase().indexOf( filter ) ) {
continue;
}
2018-02-20 19:47:50 +00:00
if ( PRODUCT_ATTRIBUTE_DATA.hasOwnProperty( attribute.slug ) ) {
attributeElements.push( <ProductAttributeElement
2018-02-20 19:47:50 +00:00
selectedAttribute={ selectedAttribute }
selectedTerms={ selectedTerms }
attribute={attribute}
setSelectedAttribute={ setSelectedAttribute }
addTerm={ addTerm }
removeTerm={ removeTerm }
2018-02-20 19:47:50 +00:00
/> );
} else {
attributeElements.push( <UncachedProductAttributeElement
2018-02-20 19:47:50 +00:00
selectedAttribute={ selectedAttribute }
selectedTerms={ selectedTerms }
attribute={ attribute }
setSelectedAttribute={ setSelectedAttribute }
addTerm={ addTerm }
removeTerm={ removeTerm }
2018-02-20 19:47:50 +00:00
/> );
}
}
return (
<div className="wc-products-list-card__results">
2018-02-20 19:47:50 +00:00
{ attributeElements }
</div>
);
}
);
/**
* Caches then renders a product attribute term element.
*/
const UncachedProductAttributeElement = withAPIData( ( props ) => {
return {
terms: '/wc/v2/products/attributes/' + props.attribute.id + '/terms'
};
} )( ( { terms, selectedAttribute, selectedTerms, attribute, setSelectedAttribute, addTerm, removeTerm } ) => {
if ( ! terms.data ) {
return __( 'Loading' );
}
if ( 0 === terms.data.length ) {
return __( 'No attribute options found' );
}
// Populate cache.
PRODUCT_ATTRIBUTE_DATA[ attribute.slug ] = { terms: [] };
let totalCount = 0;
for ( let term of terms.data ) {
totalCount += term.count;
PRODUCT_ATTRIBUTE_DATA[ attribute.slug ].terms.push( term );
}
PRODUCT_ATTRIBUTE_DATA[ attribute.slug ].count = totalCount;
return <ProductAttributeElement
2018-02-20 19:47:50 +00:00
selectedAttribute={ selectedAttribute }
selectedTerms={ selectedTerms }
attribute={ attribute }
setSelectedAttribute={ setSelectedAttribute }
addTerm={ addTerm }
removeTerm={ removeTerm }
2018-02-20 19:47:50 +00:00
/>
}
);
/**
* A product attribute term element.
*/
class ProductAttributeElement extends React.Component {
/**
* Constructor.
*/
constructor( props ) {
super( props );
this.handleAttributeChange = this.handleAttributeChange.bind( this );
this.handleTermChange = this.handleTermChange.bind( this );
}
/**
* Propagate and reset values when the selected attribute is changed.
*
* @param evt Event object
*/
handleAttributeChange( evt ) {
if ( ! evt.target.checked ) {
2018-02-20 19:47:50 +00:00
return;
}
const slug = evt.target.value;
2018-02-20 19:47:50 +00:00
this.props.setSelectedAttribute( slug );
}
/**
* Add or remove selected terms.
*
* @param evt Event object
*/
handleTermChange( evt ) {
if ( evt.target.checked ) {
this.props.addTerm( evt.target.value );
} else {
this.props.removeTerm( evt.target.value );
}
}
/**
* Render the details for one attribute.
*/
render() {
const attribute = PRODUCT_ATTRIBUTE_DATA[ this.props.attribute.slug ];
const isSelected = this.props.selectedAttribute === this.props.attribute.slug;
let attributeTerms = null;
if ( isSelected ) {
attributeTerms = (
<ul>
2018-02-20 19:47:50 +00:00
{ attribute.terms.map( ( term ) => (
<li className="wc-products-list-card__item">
<label className="wc-products-list-card__content">
<input type="checkbox"
2018-02-21 19:53:36 +00:00
value={ term.id }
2018-02-20 19:47:50 +00:00
onChange={ this.handleTermChange }
2018-02-21 19:53:36 +00:00
checked={ this.props.selectedTerms.includes( String( term.id ) ) }
2018-02-20 19:47:50 +00:00
/>
{ term.name }
<span className="wc-products-list-card__taxonomy-count">{ term.count }</span>
2018-02-20 19:47:50 +00:00
</label>
</li>
) ) }
</ul>
);
}
let cssClasses = [ 'wc-products-list-card--taxonomy-atributes__atribute' ];
if ( isSelected ) {
cssClasses.push( 'wc-products-list-card__accordion-open' );
}
2018-02-20 19:47:50 +00:00
return (
<div className={ cssClasses.join( ' ' ) }>
<div>
<label className="wc-products-list-card__content">
<input type="radio"
value={ this.props.attribute.slug }
onChange={ this.handleAttributeChange }
2018-02-20 19:47:50 +00:00
checked={ isSelected }
/>
{ this.props.attribute.name }
<span className="wc-products-list-card__taxonomy-count">{ attribute.count }</span>
2018-02-20 19:47:50 +00:00
</label>
</div>
{ attributeTerms }
</div>
);
}
}