woocommerce/plugins/woocommerce-admin/client/layout/store-alerts/placeholder.js

48 lines
1.1 KiB
JavaScript
Raw Normal View History

2019-03-06 21:36:54 +00:00
/**
* External dependencies
*/
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import { Card, CardBody, CardFooter, CardHeader } from '@wordpress/components';
2019-03-06 21:36:54 +00:00
class StoreAlertsPlaceholder extends Component {
render() {
const { hasMultipleAlerts } = this.props;
return (
<Card
className="woocommerce-store-alerts is-loading"
aria-hidden
size={ null }
>
<CardHeader isBorderless>
<span className="is-placeholder" />
{ hasMultipleAlerts && <span className="is-placeholder" /> }
</CardHeader>
<CardBody>
2019-03-06 21:36:54 +00:00
<div className="woocommerce-store-alerts__message">
<span className="is-placeholder" />
<span className="is-placeholder" />
</div>
</CardBody>
<CardFooter isBorderless>
<span className="is-placeholder" />
</CardFooter>
</Card>
2019-03-06 21:36:54 +00:00
);
}
}
export default StoreAlertsPlaceholder;
StoreAlertsPlaceholder.propTypes = {
/**
* Whether multiple alerts exists.
*/
hasMultipleAlerts: PropTypes.bool,
};
StoreAlertsPlaceholder.defaultProps = {
hasMultipleAlerts: false,
};