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

Add placeholder when no categories exist to list (https://github.com/woocommerce/woocommerce-blocks/pull/678) 

* Add placeholder when no cats exist

* remove pointless backgrounc color rule

* remove lodash isempty call
This commit is contained in:
Mike Jolley 2019-07-04 16:05:59 +01:00 committed by GitHub
parent fb96c0abba
commit dc8d1f4c0a
2 changed files with 42 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
plugins/woocommerce-blocks/assets/js/blocks/product-categories/block.js
View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import { Component, createRef, Fragment } from '@wordpress/element';
import { IconButton } from '@wordpress/components';
import { IconButton, Placeholder } from '@wordpress/components';
import { repeat } from 'lodash';
import PropTypes from 'prop-types';
import { withInstanceId } from '@wordpress/compose';
@ -13,6 +13,7 @@ import { withInstanceId } from '@wordpress/compose';
* Internal dependencies
*/
import { buildTermsTree } from './hierarchy';
import { IconFolder } from '../../components/icons';
function getCategories( { hasEmpty, isHierarchical } ) {
const categories = wc_product_block_data.productCategories.filter(
@ -98,30 +99,42 @@ class ProductCategoriesBlock extends Component {
const selectId = `prod-categories-${ instanceId }`;
return (
<div className={ classes }>
{ isDropdown ? (
<Fragment>
<div className="wc-block-product-categories__dropdown">
<label className="screen-reader-text" htmlFor={ selectId }>
{ __( 'Select a category', 'woo-gutenberg-products-block' ) }
</label>
<select id={ selectId } ref={ this.select }>
<option value="false" hidden>
{ __( 'Select a category', 'woo-gutenberg-products-block' ) }
</option>
{ this.renderOptions( categories ) }
</select>
</div>
<IconButton
icon="arrow-right-alt2"
label={ __( 'Go to category', 'woo-gutenberg-products-block' ) }
onClick={ this.onNavigate }
/>
</Fragment>
<Fragment>
{ categories.length > 0 ? (
<div className={ classes }>
{ isDropdown ? (
<Fragment>
<div className="wc-block-product-categories__dropdown">
<label className="screen-reader-text" htmlFor={ selectId }>
{ __( 'Select a category', 'woo-gutenberg-products-block' ) }
</label>
<select id={ selectId } ref={ this.select }>
<option value="false" hidden>
{ __( 'Select a category', 'woo-gutenberg-products-block' ) }
</option>
{ this.renderOptions( categories ) }
</select>
</div>
<IconButton
icon="arrow-right-alt2"
label={ __( 'Go to category', 'woo-gutenberg-products-block' ) }
onClick={ this.onNavigate }
/>
</Fragment>
) : (
this.renderList( categories )
) }
</div>
) : (
this.renderList( categories )
<Placeholder
className="wc-block-product-categories"
icon={ <IconFolder /> }
label={ __( 'Product Categories List', 'woo-gutenberg-products-block' ) }
>
{ __( "This block shows product categories for your store. In order to preview this you'll first need to create a product and assign it to a category.", 'woo-gutenberg-products-block' ) }
</Placeholder>
) }
</div>
</Fragment>
);
}
}

6
plugins/woocommerce-blocks/assets/js/blocks/product-categories/editor.scss
View File

@ -1,3 +1,9 @@
.wc-block-product-categories.wc-block-product-categories ul {
margin-left: 20px;
}
.wc-block-product-categories {
svg {
margin-right: 1ch;
fill: currentColor;
}
}