67 lines
2.0 KiB
JavaScript
67 lines
2.0 KiB
JavaScript
/** @format */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import classnames from 'classnames';
|
|
import { cloneElement, Component } from '@wordpress/element';
|
|
import Gridicon from 'gridicons';
|
|
import moment from 'moment';
|
|
import PropTypes from 'prop-types';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
import { H, Section } from '@woocommerce/components';
|
|
|
|
class ActivityCard extends Component {
|
|
render() {
|
|
const { actions, className, children, date, icon, subtitle, title, unread } = this.props;
|
|
const cardClassName = classnames( 'woocommerce-activity-card', className );
|
|
const actionsList = Array.isArray( actions ) ? actions : [ actions ];
|
|
|
|
return (
|
|
<section className={ cardClassName }>
|
|
{ unread && <span className="woocommerce-activity-card__unread" /> }
|
|
<span className="woocommerce-activity-card__icon" aria-hidden>
|
|
{ icon }
|
|
</span>
|
|
<header className="woocommerce-activity-card__header">
|
|
<H className="woocommerce-activity-card__title">{ title }</H>
|
|
{ subtitle && <div className="woocommerce-activity-card__subtitle">{ subtitle }</div> }
|
|
{ date && (
|
|
<span className="woocommerce-activity-card__date">
|
|
{ moment.utc( date ).fromNow() }
|
|
</span>
|
|
) }
|
|
</header>
|
|
<Section className="woocommerce-activity-card__body">{ children }</Section>
|
|
{ actions && (
|
|
<footer className="woocommerce-activity-card__actions">
|
|
{ actionsList.map( ( item, i ) => cloneElement( item, { key: i } ) ) }
|
|
</footer>
|
|
) }
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
ActivityCard.propTypes = {
|
|
actions: PropTypes.oneOfType( [ PropTypes.arrayOf( PropTypes.element ), PropTypes.element ] ),
|
|
className: PropTypes.string,
|
|
children: PropTypes.node.isRequired,
|
|
date: PropTypes.string,
|
|
icon: PropTypes.node,
|
|
subtitle: PropTypes.node,
|
|
title: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ).isRequired,
|
|
unread: PropTypes.bool,
|
|
};
|
|
|
|
ActivityCard.defaultProps = {
|
|
icon: <Gridicon icon="notice-outline" size={ 48 } />,
|
|
unread: false,
|
|
};
|
|
|
|
export { ActivityCard };
|
|
export { default as ActivityCardPlaceholder } from './placeholder';
|