/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { Fragment } from '@wordpress/element';
import { find } from 'lodash';
import PropTypes from 'prop-types';
import { SearchListControl, SearchListItem } from '@woocommerce/components';
import { SelectControl, Spinner } from '@wordpress/components';
import { withAttributes } from '@woocommerce/block-hocs';
import ErrorMessage from '@woocommerce/block-components/error-placeholder/error-message.js';
/**
* Internal dependencies
*/
import './style.scss';
const ProductAttributeTermControl = ( {
attributes,
error,
expandedAttribute,
onChange,
onExpandAttribute,
onOperatorChange,
isLoading,
operator,
selected,
termsAreLoading,
termsList,
} ) => {
const onSelectAttribute = ( item ) => {
return () => {
onChange( [] );
onExpandAttribute( item.id );
};
};
const renderItem = ( args ) => {
const { item, search, depth = 0 } = args;
const classes = [
'woocommerce-product-attributes__item',
'woocommerce-search-list__item',
];
if ( search.length ) {
classes.push( 'is-searching' );
}
if ( depth === 0 && item.parent ) {
classes.push( 'is-skip-level' );
}
if ( ! item.breadcrumbs.length ) {
return [
,
expandedAttribute === item.id && termsAreLoading && (
),
];
}
return (
);
};
const currentTerms = termsList[ expandedAttribute ] || [];
const currentList = [ ...attributes, ...currentTerms ];
const messages = {
clear: __(
'Clear all product attributes',
'woocommerce'
),
list: __( 'Product Attributes', 'woocommerce' ),
noItems: __(
"Your store doesn't have any product attributes.",
'woocommerce'
),
search: __(
'Search for product attributes',
'woocommerce'
),
selected: ( n ) =>
sprintf(
_n(
'%d attribute selected',
'%d attributes selected',
n,
'woocommerce'
),
n
),
updated: __(
'Product attribute search results updated.',
'woocommerce'
),
};
if ( error ) {
return ;
}
return (
find( currentList, { id } ) )
.filter( Boolean ) }
onChange={ onChange }
renderItem={ renderItem }
messages={ messages }
isHierarchical
/>
{ !! onOperatorChange && (
) }
);
};
ProductAttributeTermControl.propTypes = {
/**
* Callback to update the selected product attributes.
*/
onChange: PropTypes.func.isRequired,
/**
* Callback to update the category operator. If not passed in, setting is not used.
*/
onOperatorChange: PropTypes.func,
/**
* Setting for whether products should match all or any selected categories.
*/
operator: PropTypes.oneOf( [ 'all', 'any' ] ),
/**
* The list of currently selected attribute slug/ID pairs.
*/
selected: PropTypes.array.isRequired,
// from withAttributes
attributes: PropTypes.array,
error: PropTypes.object,
expandedAttribute: PropTypes.number,
onExpandAttribute: PropTypes.func,
isLoading: PropTypes.bool,
termsAreLoading: PropTypes.bool,
termsList: PropTypes.object,
};
ProductAttributeTermControl.defaultProps = {
operator: 'any',
};
export default withAttributes( ProductAttributeTermControl );
MG pvt. ITI – Imambada Road Natwa Mirzapur.
