File "index.tsx"
Full Path: /home/warrior1/public_html/plugins/woocommerce/packages/woocommerce-blocks/assets/js/editor-components/product-stock-control/index.tsx
File size: 2.93 KB
MIME-type: text/x-java
Charset: utf-8
/**
* External dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { getSetting } from '@woocommerce/settings';
import { useCallback, useState, useEffect } from '@wordpress/element';
import { ToggleControl } from '@wordpress/components';
export interface ProductStockControlProps {
value: Array< string >;
setAttributes: ( attributes: Record< string, unknown > ) => void;
}
// Look up whether or not out of stock items should be hidden globally.
const hideOutOfStockItems = getSetting( 'hideOutOfStockItems', false );
// Get the stock status options.
const allStockStatusOptions = getSetting( 'stockStatusOptions', {} );
/**
* A pre-configured SelectControl for product stock settings.
*/
const ProductStockControl = ( {
value,
setAttributes,
}: ProductStockControlProps ): JSX.Element => {
// Determine whether or not to use the out of stock status.
const { outofstock, ...otherStockStatusOptions } = allStockStatusOptions;
const stockStatusOptions = hideOutOfStockItems
? otherStockStatusOptions
: allStockStatusOptions;
/**
* Valid options must be in an array of [ 'value' : 'mystatus', 'label' : 'My label' ] format.
* stockStatusOptions are returned as [ 'mystatus' : 'My label' ].
* Formatting is corrected here.
*/
const displayOptions = Object.entries( stockStatusOptions )
.map( ( [ slug, name ] ) => ( { value: slug, label: name } ) )
.filter( ( status ) => !! status.label );
// Set the initial state to the default or saved value.
const [ checkedOptions, setChecked ] = useState( value );
/**
* Set attributes when checked items change.
* Note: The blank stock status prevents all results returning when all options are unchecked.
*/
useEffect( () => {
setAttributes( {
stockStatus: [ '', ...checkedOptions ],
} );
}, [ checkedOptions, setAttributes ] );
/**
* When a checkbox in the list changes, update state.
*/
const onChange = useCallback(
( checkedValue: string ) => {
const previouslyChecked = checkedOptions.includes( checkedValue );
const newChecked = checkedOptions.filter(
( filteredValue ) => filteredValue !== checkedValue
);
if ( ! previouslyChecked ) {
newChecked.push( checkedValue );
newChecked.sort();
}
setChecked( newChecked );
},
[ checkedOptions ]
);
return (
<>
{ displayOptions.map( ( option ) => {
const helpText = checkedOptions.includes( option.value )
? /* translators: %s stock status. */ __(
'Stock status "%s" visible.',
'woo-gutenberg-products-block'
)
: /* translators: %s stock status. */ __(
'Stock status "%s" hidden.',
'woo-gutenberg-products-block'
);
return (
<ToggleControl
label={ option.label }
key={ option.value }
help={ sprintf( helpText, option.label ) }
checked={ checkedOptions.includes( option.value ) }
onChange={ () => onChange( option.value ) }
/>
);
} ) }
</>
);
};
export default ProductStockControl;