Add loading state to shipping rates selector (https://github.com/woocommerce/woocommerce-blocks/pull/1764)
* Add loading state to shipping rates selector * Add screenReaderLabel specific for ShippingRatesControl * Rename LoadingComponent to LoadingMask
This commit is contained in:
parent
8b7fa87b81
commit
7b53486be3
|
@ -0,0 +1,43 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import { Spinner } from 'wordpress-components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
const LoadingMask = ( {
|
||||
children,
|
||||
className,
|
||||
screenReaderLabel,
|
||||
showSpinner = false,
|
||||
} ) => {
|
||||
return (
|
||||
<div className={ classNames( className, 'wc-block-loading-mask' ) }>
|
||||
{ showSpinner && <Spinner /> }
|
||||
<div
|
||||
className="wc-blocks-loading-mask__children"
|
||||
aria-hidden={ true }
|
||||
>
|
||||
{ children }
|
||||
</div>
|
||||
<span className="screen-reader-text">
|
||||
{ screenReaderLabel ||
|
||||
__( 'Loading…', 'woo-gutenberg-products-block' ) }
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
LoadingMask.propTypes = {
|
||||
className: PropTypes.string,
|
||||
screenReaderLabel: PropTypes.string,
|
||||
showSpinner: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default LoadingMask;
|
|
@ -0,0 +1,16 @@
|
|||
.wc-block-loading-mask {
|
||||
position: relative;
|
||||
min-height: 18px + $gap;
|
||||
|
||||
.components-spinner {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.wc-blocks-loading-mask__children {
|
||||
opacity: 0.5;
|
||||
}
|
|
@ -1,8 +1,9 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useShippingRates } from '@woocommerce/base-hooks';
|
||||
import { usePrevious, useShippingRates } from '@woocommerce/base-hooks';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
|
@ -10,6 +11,7 @@ import { useEffect } from '@wordpress/element';
|
|||
*/
|
||||
import Package from './package';
|
||||
import './style.scss';
|
||||
import LoadingMask from '../loading-mask';
|
||||
|
||||
const ShippingRatesControl = ( {
|
||||
address,
|
||||
|
@ -20,6 +22,28 @@ const ShippingRatesControl = ( {
|
|||
selected = [],
|
||||
} ) => {
|
||||
const { shippingRates, shippingRatesLoading } = useShippingRates( address );
|
||||
const previousShippingRates = usePrevious(
|
||||
shippingRates,
|
||||
( newRates ) => newRates.length > 0
|
||||
);
|
||||
|
||||
const renderPackages = ( rates ) =>
|
||||
rates.map( ( shippingRate, i ) => (
|
||||
<Package
|
||||
key={ shippingRate.items.join() }
|
||||
className={ className }
|
||||
noResultsMessage={ noResultsMessage }
|
||||
onChange={ ( newShippingRate ) => {
|
||||
const newSelected = [ ...selected ];
|
||||
newSelected[ i ] = newShippingRate;
|
||||
onChange( newSelected );
|
||||
} }
|
||||
renderOption={ renderOption }
|
||||
selected={ selected[ i ] }
|
||||
shippingRate={ shippingRate }
|
||||
showItems={ rates.length > 1 }
|
||||
/>
|
||||
) );
|
||||
|
||||
// Select first item when shipping rates are loaded.
|
||||
useEffect(
|
||||
|
@ -58,27 +82,20 @@ const ShippingRatesControl = ( {
|
|||
);
|
||||
|
||||
if ( shippingRatesLoading ) {
|
||||
// @todo Add some indication that shipping rates are loading.
|
||||
// see: https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/1555
|
||||
return null;
|
||||
return (
|
||||
<LoadingMask
|
||||
screenReaderLabel={ __(
|
||||
'Loading shipping rates…',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
showSpinner={ true }
|
||||
>
|
||||
{ renderPackages( previousShippingRates || [] ) }
|
||||
</LoadingMask>
|
||||
);
|
||||
}
|
||||
|
||||
return shippingRates.map( ( shippingRate, i ) => (
|
||||
<Package
|
||||
key={ shippingRate.items.join() }
|
||||
className={ className }
|
||||
noResultsMessage={ noResultsMessage }
|
||||
onChange={ ( newShippingRate ) => {
|
||||
const newSelected = [ ...selected ];
|
||||
newSelected[ i ] = newShippingRate;
|
||||
onChange( newSelected );
|
||||
} }
|
||||
renderOption={ renderOption }
|
||||
selected={ selected[ i ] }
|
||||
shippingRate={ shippingRate }
|
||||
showItems={ shippingRates.length > 1 }
|
||||
/>
|
||||
) );
|
||||
return renderPackages( shippingRates );
|
||||
};
|
||||
|
||||
ShippingRatesControl.propTypes = {
|
||||
|
|
|
@ -132,6 +132,8 @@ const stableMainEntry = {
|
|||
'panel-style': './node_modules/@wordpress/components/src/panel/style.scss',
|
||||
'custom-select-control-style':
|
||||
'./node_modules/@wordpress/components/src/custom-select-control/style.scss',
|
||||
'spinner-style':
|
||||
'./node_modules/@wordpress/components/src/spinner/style.scss',
|
||||
};
|
||||
|
||||
const experimentalMainEntry = {
|
||||
|
|
Loading…
Reference in New Issue