93 lines
1.8 KiB
JavaScript
93 lines
1.8 KiB
JavaScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import { createContext, useContext } from '@wordpress/element';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Default product shape matching API response.
|
||
|
|
*/
|
||
|
|
const defaultProductData = {
|
||
|
|
id: 0,
|
||
|
|
name: '',
|
||
|
|
parent: 0,
|
||
|
|
type: 'simple',
|
||
|
|
variation: '',
|
||
|
|
permalink: '',
|
||
|
|
sku: '',
|
||
|
|
short_description: '',
|
||
|
|
description: '',
|
||
|
|
on_sale: false,
|
||
|
|
prices: {
|
||
|
|
currency_code: 'USD',
|
||
|
|
currency_symbol: '$',
|
||
|
|
currency_minor_unit: 2,
|
||
|
|
currency_decimal_separator: '.',
|
||
|
|
currency_thousand_separator: ',',
|
||
|
|
currency_prefix: '$',
|
||
|
|
currency_suffix: '',
|
||
|
|
price: '0',
|
||
|
|
regular_price: '0',
|
||
|
|
sale_price: '0',
|
||
|
|
price_range: null,
|
||
|
|
},
|
||
|
|
price_html: '',
|
||
|
|
average_rating: '0',
|
||
|
|
review_count: 0,
|
||
|
|
images: [],
|
||
|
|
categories: [],
|
||
|
|
tags: [],
|
||
|
|
attributes: [],
|
||
|
|
variations: [],
|
||
|
|
has_options: false,
|
||
|
|
is_purchasable: false,
|
||
|
|
is_in_stock: false,
|
||
|
|
is_on_backorder: false,
|
||
|
|
low_stock_remaining: null,
|
||
|
|
sold_individually: false,
|
||
|
|
quantity_limit: 99,
|
||
|
|
add_to_cart: {
|
||
|
|
text: 'Add to cart',
|
||
|
|
description: 'Add to cart',
|
||
|
|
url: '',
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This context is used to pass product data down to all children blocks in a given tree.
|
||
|
|
*
|
||
|
|
* @member {Object} ProductDataContext A react context object
|
||
|
|
*/
|
||
|
|
const ProductDataContext = createContext( {
|
||
|
|
product: defaultProductData,
|
||
|
|
hasContext: false,
|
||
|
|
} );
|
||
|
|
|
||
|
|
export const useProductDataContext = () => useContext( ProductDataContext );
|
||
|
|
|
||
|
|
export const ProductDataContextProvider = ( {
|
||
|
|
product = null,
|
||
|
|
children,
|
||
|
|
isLoading = false,
|
||
|
|
} ) => {
|
||
|
|
const contextValue = {
|
||
|
|
product: product || defaultProductData,
|
||
|
|
hasContext: true,
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ProductDataContext.Provider value={ contextValue }>
|
||
|
|
{ isLoading ? (
|
||
|
|
<div className="is-loading">{ children }</div>
|
||
|
|
) : (
|
||
|
|
children
|
||
|
|
) }
|
||
|
|
</ProductDataContext.Provider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ProductDataContextProvider.propTypes = {
|
||
|
|
children: PropTypes.node,
|
||
|
|
product: PropTypes.object,
|
||
|
|
};
|