53 lines
1.1 KiB
TypeScript
53 lines
1.1 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import clsx from 'clsx';
|
|
import { Spinner } from '@woocommerce/blocks-components';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
interface LoadingMaskProps {
|
|
children?: React.ReactNode | React.ReactNode[];
|
|
className?: string;
|
|
screenReaderLabel?: string;
|
|
showSpinner?: boolean;
|
|
isLoading?: boolean;
|
|
}
|
|
// @todo Find a way to block buttons/form components when LoadingMask isLoading
|
|
const LoadingMask = ( {
|
|
children,
|
|
className,
|
|
screenReaderLabel,
|
|
showSpinner = false,
|
|
isLoading = true,
|
|
}: LoadingMaskProps ): JSX.Element => {
|
|
return (
|
|
<div
|
|
className={ clsx( className, {
|
|
'wc-block-components-loading-mask': isLoading,
|
|
} ) }
|
|
>
|
|
{ isLoading && showSpinner && <Spinner /> }
|
|
<div
|
|
className={ clsx( {
|
|
'wc-block-components-loading-mask__children': isLoading,
|
|
} ) }
|
|
aria-hidden={ isLoading }
|
|
>
|
|
{ children }
|
|
</div>
|
|
{ isLoading && (
|
|
<span className="screen-reader-text">
|
|
{ screenReaderLabel || __( 'Loading…', 'woocommerce' ) }
|
|
</span>
|
|
) }
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LoadingMask;
|