woocommerce/plugins/woocommerce-blocks/assets/js/base/components/shipping-rates-control/index.js

69 lines
1.5 KiB
JavaScript

/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';
import { usePrevious } from '@woocommerce/base-hooks';
/**
* Internal dependencies
*/
import Packages from './packages';
import LoadingMask from '../loading-mask';
import './style.scss';
const ShippingRatesControl = ( {
shippingRates,
shippingRatesLoading,
className,
collapsibleWhenMultiple = false,
noResultsMessage,
renderOption,
} ) => {
const previousShippingRates = usePrevious(
shippingRates,
( newRates ) => newRates.length > 0
);
const shippingRatesToDisplay = previousShippingRates || shippingRates;
return (
<LoadingMask
isLoading={ shippingRatesLoading }
screenReaderLabel={ __(
'Loading shipping rates…',
'woo-gutenberg-products-block'
) }
showSpinner={ true }
>
<Packages
className={ className }
collapsible={
shippingRatesToDisplay.length > 1 && collapsibleWhenMultiple
}
noResultsMessage={ noResultsMessage }
renderOption={ renderOption }
shippingRates={ shippingRatesToDisplay }
/>
</LoadingMask>
);
};
ShippingRatesControl.propTypes = {
address: PropTypes.shape( {
address_1: PropTypes.string,
address_2: PropTypes.string,
city: PropTypes.string,
state: PropTypes.string,
postcode: PropTypes.string,
country: PropTypes.string,
} ),
noResultsMessage: PropTypes.string.isRequired,
renderOption: PropTypes.func.isRequired,
className: PropTypes.string,
collapsibleWhenMultiple: PropTypes.bool,
};
export default ShippingRatesControl;
export { Packages };