woocommerce/plugins/woocommerce-admin/client/components/empty-content/index.js

162 lines
3.9 KiB
JavaScript

/** @format */
/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import { Component } from '@wordpress/element';
import classnames from 'classnames';
import PropTypes from 'prop-types';
/**
* Internal dependencies
*/
import './style.scss';
import { H } from 'layout/section';
import ImageAsset from 'components/image-asset';
/**
* A component to be used when there is no data to show.
* It can be used as an opportunity to provide explanation or guidance to help a user progress.
*/
class EmptyContent extends Component {
renderIllustration() {
const { illustrationWidth, illustrationHeight, illustration } = this.props;
return (
<ImageAsset
alt=""
src={ illustration }
width={ illustrationWidth }
height={ illustrationHeight }
className="woocommerce-empty-content__illustration"
/>
);
}
renderActionButtons( type ) {
const actionLabel =
'secondary' === type ? this.props.secondaryActionLabel : this.props.actionLabel;
const actionURL = 'secondary' === type ? this.props.secondaryActionURL : this.props.actionURL;
const actionCallback =
'secondary' === type ? this.props.secondaryActionCallback : this.props.actionCallback;
const isPrimary = 'secondary' === type ? false : true;
if ( actionURL && actionCallback ) {
return (
<Button
className="woocommerce-empty-content__action"
isPrimary={ isPrimary }
onClick={ actionCallback }
href={ actionURL }
>
{ actionLabel }
</Button>
);
} else if ( actionURL ) {
return (
<Button
className="woocommerce-empty-content__action"
isPrimary={ isPrimary }
href={ actionURL }
>
{ actionLabel }
</Button>
);
} else if ( actionCallback ) {
return (
<Button
className="woocommerce-empty-content__action"
isPrimary={ isPrimary }
onClick={ actionCallback }
>
{ actionLabel }
</Button>
);
}
return null;
}
renderActions() {
const { actionLabel, secondaryActionLabel } = this.props;
return (
<div className="woocommerce-empty-content__actions">
{ actionLabel && this.renderActionButtons( 'primary' ) }
{ secondaryActionLabel && this.renderActionButtons( 'secondary' ) }
</div>
);
}
render() {
const { title, message, illustration } = this.props;
return (
<div className={ classnames( 'woocommerce-empty-content', this.props.className ) }>
{ illustration && this.renderIllustration() }
{ title ? <H className="woocommerce-empty-content__title">{ title }</H> : null }
{ message ? <p className="woocommerce-empty-content__message">{ message }</p> : null }
{ this.renderActions() }
</div>
);
}
}
EmptyContent.propTypes = {
/**
* The title to be displayed.
*/
title: PropTypes.string.isRequired,
/**
* An additional message to be displayed.
*/
message: PropTypes.string,
/**
* The url string of an image path. Prefix with `/` to load an image relative to the plugin directory.
*/
illustration: PropTypes.string,
/**
* Height to use for the illustration.
*/
illustrationHeight: PropTypes.number,
/**
* Width to use for the illustration.
*/
illustrationWidth: PropTypes.number,
/**
* Label to be used for the primary action button.
*/
actionLabel: PropTypes.string.isRequired,
/**
* URL to be used for the primary action button.
*/
actionURL: PropTypes.string,
/**
* Callback to be used for the primary action button.
*/
actionCallback: PropTypes.func,
/**
* Label to be used for the secondary action button.
*/
secondaryActionLabel: PropTypes.string,
/**
* URL to be used for the secondary action button.
*/
secondaryActionURL: PropTypes.string,
/**
* Callback to be used for the secondary action button.
*/
secondaryActionCallback: PropTypes.func,
/**
* Additional CSS classes.
*/
className: PropTypes.string,
};
EmptyContent.defaultProps = {
illustration: '/empty-content.svg',
illustrationHeight: 400,
illustrationWidth: 400,
};
export default EmptyContent;