Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Create ProductStockCard component, add loading placeholder to stock panel.

This commit is contained in:
Jeff Stieler 2019-03-27 10:43:31 -06:00
parent 212882e272
commit a48a038f25
2 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
plugins/woocommerce-admin/client/header/activity-panel/panels/stock/card.js Normal file
View File

@ -0,0 +1,43 @@
/** @format */
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Component } from '@wordpress/element';
/**
* WooCommerce dependencies
*/
import { Link, ProductImage } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { ActivityCard } from '../../activity-card';
class ProductStockCard extends Component {
render() {
const { product } = this.props;
const title = (
<Link href={ 'post.php?action=edit&post=' + product.id } type="wp-admin">
{ product.name }
</Link>
);
return (
<ActivityCard
className="woocommerce-stock-activity-card"
title={ title }
icon={ <ProductImage product={ product } /> }
actions={ <Button isDefault>{ __( 'Update stock', 'woocommerce-admin' ) }</Button> }
>
<span className="woocommerce-stock-activity-card__stock-quantity">
{ sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) }
</span>
</ActivityCard>
);
}
}
export default ProductStockCard;

37
plugins/woocommerce-admin/client/header/activity-panel/panels/stock/index.js
View File

@ -2,24 +2,25 @@
/** /**
* External dependencies * External dependencies
*/ */
import { __, sprintf } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
/** /**
* WooCommerce dependencies * WooCommerce dependencies
*/ */
import { Link, ProductImage, Section } from '@woocommerce/components'; import { Section } from '@woocommerce/components';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { ActivityCard } from '../../activity-card'; import { ActivityCardPlaceholder } from '../../activity-card';
import ActivityHeader from '../../activity-header'; import ActivityHeader from '../../activity-header';
import ProductStockCard from './card';
class StockPanel extends Component { class StockPanel extends Component {
render() { render() {
const product = { const products = [
{
id: 913, id: 913,
name: 'Octopus Tshirt', name: 'Octopus Tshirt',
permalink: '', permalink: '',
@ -27,27 +28,23 @@ class StockPanel extends Component {
src: '/wp-content/uploads/2018/12/img-206939428-150x150.png', src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
}, },
stock_quantity: 2, stock_quantity: 2,
}; },
const title = ( ];
<Link href={ 'post.php?action=edit&post=' + product.id } type="wp-admin"> const isRequesting = false;
{ product.name }
</Link>
);
return ( return (
<Fragment> <Fragment>
<ActivityHeader title={ __( 'Stock', 'woocommerce-admin' ) } /> <ActivityHeader title={ __( 'Stock', 'woocommerce-admin' ) } />
<Section> <Section>
<ActivityCard { isRequesting ? (
<ActivityCardPlaceholder
className="woocommerce-stock-activity-card" className="woocommerce-stock-activity-card"
title={ title } hasAction
icon={ <ProductImage product={ product } /> } lines={ 1 }
actions={ <Button isDefault>{ __( 'Update stock', 'woocommerce-admin' ) }</Button> } />
> ) : (
<span className="woocommerce-stock-activity-card__stock-quantity"> products.map( product => <ProductStockCard key={ product.id } product={ product } /> )
{ sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) } ) }
</span>
</ActivityCard>
</Section> </Section>
</Fragment> </Fragment>
); );