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;

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

@ -2,52 +2,49 @@
/** /**
* 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, {
name: 'Octopus Tshirt', id: 913,
permalink: '', name: 'Octopus Tshirt',
image: { permalink: '',
src: '/wp-content/uploads/2018/12/img-206939428-150x150.png', image: {
src: '/wp-content/uploads/2018/12/img-206939428-150x150.png',
},
stock_quantity: 2,
}, },
stock_quantity: 2, ];
}; const isRequesting = false;
const title = (
<Link href={ 'post.php?action=edit&post=' + product.id } type="wp-admin">
{ product.name }
</Link>
);
return ( return (
<Fragment> <Fragment>
<ActivityHeader title={ __( 'Stock', 'woocommerce-admin' ) } /> <ActivityHeader title={ __( 'Stock', 'woocommerce-admin' ) } />
<Section> <Section>
<ActivityCard { isRequesting ? (
className="woocommerce-stock-activity-card" <ActivityCardPlaceholder
title={ title } className="woocommerce-stock-activity-card"
icon={ <ProductImage product={ product } /> } hasAction
actions={ <Button isDefault>{ __( 'Update stock', 'woocommerce-admin' ) }</Button> } lines={ 1 }
> />
<span className="woocommerce-stock-activity-card__stock-quantity"> ) : (
{ sprintf( __( '%d in stock', 'woocommerce-admin' ), product.stock_quantity ) } products.map( product => <ProductStockCard key={ product.id } product={ product } /> )
</span> ) }
</ActivityCard>
</Section> </Section>
</Fragment> </Fragment>
); );