Convert Product On Sale block file from JS to TS (https://github.com/woocommerce/woocommerce-blocks/pull/9834)
This commit is contained in:
Alexandre Lara
GitHub
parent
ba47d5dc40
commit
e5dd772c94
|
|
@ -1,158 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component } from '@wordpress/element';
|
||||
import { Disabled, PanelBody, Placeholder } from '@wordpress/components';
|
||||
import { InspectorControls } from '@wordpress/block-editor';
|
||||
import ServerSideRender from '@wordpress/server-side-render';
|
||||
import PropTypes from 'prop-types';
|
||||
import GridContentControl from '@woocommerce/editor-components/grid-content-control';
|
||||
import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
|
||||
import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
|
||||
import ProductOrderbyControl from '@woocommerce/editor-components/product-orderby-control';
|
||||
import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
|
||||
import { gridBlockPreview } from '@woocommerce/resource-previews';
|
||||
import { Icon, percent } from '@wordpress/icons';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
|
||||
const EmptyPlaceholder = () => (
|
||||
<Placeholder
|
||||
icon={ <Icon icon={ percent } /> }
|
||||
label={ __( 'On Sale Products', 'woo-gutenberg-products-block' ) }
|
||||
className="wc-block-product-on-sale"
|
||||
>
|
||||
{ __(
|
||||
'This block shows on-sale products. There are currently no discounted products in your store.',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
</Placeholder>
|
||||
);
|
||||
|
||||
/**
|
||||
* Component to handle edit mode of "On Sale Products".
|
||||
*/
|
||||
class ProductOnSaleBlock extends Component {
|
||||
getInspectorControls() {
|
||||
const { attributes, setAttributes } = this.props;
|
||||
const {
|
||||
categories,
|
||||
catOperator,
|
||||
columns,
|
||||
contentVisibility,
|
||||
rows,
|
||||
orderby,
|
||||
alignButtons,
|
||||
stockStatus,
|
||||
} = attributes;
|
||||
|
||||
return (
|
||||
<InspectorControls key="inspector">
|
||||
<PanelBody
|
||||
title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
|
||||
initialOpen
|
||||
>
|
||||
<GridLayoutControl
|
||||
columns={ columns }
|
||||
rows={ rows }
|
||||
alignButtons={ alignButtons }
|
||||
setAttributes={ setAttributes }
|
||||
minColumns={ getSetting( 'min_columns', 1 ) }
|
||||
maxColumns={ getSetting( 'max_columns', 6 ) }
|
||||
minRows={ getSetting( 'min_rows', 1 ) }
|
||||
maxRows={ getSetting( 'max_rows', 6 ) }
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
|
||||
initialOpen
|
||||
>
|
||||
<GridContentControl
|
||||
settings={ contentVisibility }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { contentVisibility: value } )
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __( 'Order By', 'woo-gutenberg-products-block' ) }
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ProductOrderbyControl
|
||||
setAttributes={ setAttributes }
|
||||
value={ orderby }
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __(
|
||||
'Filter by Product Category',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ProductCategoryControl
|
||||
selected={ categories }
|
||||
onChange={ ( value = [] ) => {
|
||||
const ids = value.map( ( { id } ) => id );
|
||||
setAttributes( { categories: ids } );
|
||||
} }
|
||||
operator={ catOperator }
|
||||
onOperatorChange={ ( value = 'any' ) =>
|
||||
setAttributes( { catOperator: value } )
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __(
|
||||
'Filter by stock status',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ProductStockControl
|
||||
setAttributes={ setAttributes }
|
||||
value={ stockStatus }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { attributes, name } = this.props;
|
||||
|
||||
if ( attributes.isPreview ) {
|
||||
return gridBlockPreview;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{ this.getInspectorControls() }
|
||||
<Disabled>
|
||||
<ServerSideRender
|
||||
block={ name }
|
||||
attributes={ attributes }
|
||||
EmptyResponsePlaceholder={ EmptyPlaceholder }
|
||||
/>
|
||||
</Disabled>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ProductOnSaleBlock.propTypes = {
|
||||
/**
|
||||
* The attributes for this block
|
||||
*/
|
||||
attributes: PropTypes.object.isRequired,
|
||||
/**
|
||||
* The register block name.
|
||||
*/
|
||||
name: PropTypes.string.isRequired,
|
||||
/**
|
||||
* A callback to update attributes
|
||||
*/
|
||||
setAttributes: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default ProductOnSaleBlock;
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Disabled, Placeholder } from '@wordpress/components';
|
||||
import ServerSideRender from '@wordpress/server-side-render';
|
||||
import { gridBlockPreview } from '@woocommerce/resource-previews';
|
||||
import { Icon, percent } from '@wordpress/icons';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Attributes } from './types';
|
||||
import { ProductOnSaleInspectorControls } from './inspector-controls';
|
||||
|
||||
interface Props {
|
||||
attributes: Attributes;
|
||||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const EmptyPlaceholder = () => (
|
||||
<Placeholder
|
||||
icon={ <Icon icon={ percent } /> }
|
||||
label={ __( 'On Sale Products', 'woo-gutenberg-products-block' ) }
|
||||
className="wc-block-product-on-sale"
|
||||
>
|
||||
{ __(
|
||||
'This block shows on-sale products. There are currently no discounted products in your store.',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
</Placeholder>
|
||||
);
|
||||
|
||||
/**
|
||||
* Component to handle edit mode of "On Sale Products".
|
||||
*/
|
||||
const ProductOnSaleBlock: React.FunctionComponent< Props > = (
|
||||
props: Props
|
||||
) => {
|
||||
const { attributes, setAttributes, name } = props;
|
||||
|
||||
if ( attributes.isPreview ) {
|
||||
return gridBlockPreview;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProductOnSaleInspectorControls
|
||||
attributes={ attributes }
|
||||
setAttributes={ setAttributes }
|
||||
/>
|
||||
<Disabled>
|
||||
<ServerSideRender
|
||||
block={ name }
|
||||
attributes={ attributes }
|
||||
EmptyResponsePlaceholder={ EmptyPlaceholder }
|
||||
/>
|
||||
</Disabled>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductOnSaleBlock;
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { PanelBody } from '@wordpress/components';
|
||||
import { InspectorControls } from '@wordpress/block-editor';
|
||||
import GridContentControl from '@woocommerce/editor-components/grid-content-control';
|
||||
import GridLayoutControl from '@woocommerce/editor-components/grid-layout-control';
|
||||
import ProductCategoryControl from '@woocommerce/editor-components/product-category-control';
|
||||
import ProductOrderbyControl from '@woocommerce/editor-components/product-orderby-control';
|
||||
import ProductStockControl from '@woocommerce/editor-components/product-stock-control';
|
||||
import { getSetting } from '@woocommerce/settings';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Attributes } from './types';
|
||||
|
||||
interface ProductOnSaleInspectorControlsProps {
|
||||
attributes: Attributes;
|
||||
setAttributes: ( attributes: Record< string, unknown > ) => void;
|
||||
}
|
||||
|
||||
export const ProductOnSaleInspectorControls = (
|
||||
props: ProductOnSaleInspectorControlsProps
|
||||
) => {
|
||||
const { attributes, setAttributes } = props;
|
||||
const {
|
||||
categories,
|
||||
catOperator,
|
||||
columns,
|
||||
contentVisibility,
|
||||
rows,
|
||||
orderby,
|
||||
alignButtons,
|
||||
stockStatus,
|
||||
} = attributes;
|
||||
|
||||
return (
|
||||
<InspectorControls key="inspector">
|
||||
<PanelBody
|
||||
title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
|
||||
initialOpen
|
||||
>
|
||||
<GridLayoutControl
|
||||
columns={ columns }
|
||||
rows={ rows }
|
||||
alignButtons={ alignButtons }
|
||||
setAttributes={ setAttributes }
|
||||
minColumns={ getSetting< number >( 'min_columns', 1 ) }
|
||||
maxColumns={ getSetting< number >( 'max_columns', 6 ) }
|
||||
minRows={ getSetting< number >( 'min_rows', 1 ) }
|
||||
maxRows={ getSetting< number >( 'max_rows', 6 ) }
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __( 'Content', 'woo-gutenberg-products-block' ) }
|
||||
initialOpen
|
||||
>
|
||||
<GridContentControl
|
||||
settings={ contentVisibility }
|
||||
onChange={ ( value ) =>
|
||||
setAttributes( { contentVisibility: value } )
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __( 'Order By', 'woo-gutenberg-products-block' ) }
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ProductOrderbyControl
|
||||
setAttributes={ setAttributes }
|
||||
value={ orderby }
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __(
|
||||
'Filter by Product Category',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ProductCategoryControl
|
||||
selected={ categories }
|
||||
onChange={ ( value = [] ) => {
|
||||
const ids = value.map( ( { id } ) => id );
|
||||
setAttributes( { categories: ids } );
|
||||
} }
|
||||
operator={ catOperator }
|
||||
onOperatorChange={ ( value = 'any' ) =>
|
||||
setAttributes( { catOperator: value } )
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
<PanelBody
|
||||
title={ __(
|
||||
'Filter by stock status',
|
||||
'woo-gutenberg-products-block'
|
||||
) }
|
||||
initialOpen={ false }
|
||||
>
|
||||
<ProductStockControl
|
||||
setAttributes={ setAttributes }
|
||||
value={ stockStatus }
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
export interface Attributes {
|
||||
columns: number;
|
||||
rows: number;
|
||||
alignButtons: boolean;
|
||||
contentVisibility: {
|
||||
image: boolean;
|
||||
title: boolean;
|
||||
price: boolean;
|
||||
rating: boolean;
|
||||
button: boolean;
|
||||
};
|
||||
categories: Array< number >;
|
||||
catOperator: string;
|
||||
isPreview: boolean;
|
||||
stockStatus: Array< string >;
|
||||
editMode: boolean;
|
||||
orderby:
|
||||
| 'date'
|
||||
| 'popularity'
|
||||
| 'price_asc'
|
||||
| 'price_desc'
|
||||
| 'rating'
|
||||
| 'title'
|
||||
| 'menu_order';
|
||||
}
|
||||
Loading…
Reference in New Issue