71 lines
1.6 KiB
JavaScript
71 lines
1.6 KiB
JavaScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import PropTypes from 'prop-types';
|
|
import { Fragment } from '@wordpress/element';
|
|
|
|
const PriceInput = ( { disabled, onBlur, onChange, minPrice, maxPrice } ) => {
|
|
return (
|
|
<Fragment>
|
|
<input
|
|
type="text"
|
|
size="5"
|
|
className="wc-block-price-filter__amount wc-block-price-filter__amount--min wc-block-form-text-input"
|
|
aria-label={ __(
|
|
'Filter products by minimum price',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
onChange={ onChange }
|
|
onBlur={ onBlur }
|
|
disabled={ disabled }
|
|
value={ minPrice }
|
|
/>
|
|
<input
|
|
type="text"
|
|
size="5"
|
|
className="wc-block-price-filter__amount wc-block-price-filter__amount--max wc-block-form-text-input"
|
|
aria-label={ __(
|
|
'Filter products by maximum price',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
onChange={ onChange }
|
|
onBlur={ onBlur }
|
|
disabled={ disabled }
|
|
value={ maxPrice }
|
|
/>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
PriceInput.propTypes = {
|
|
/**
|
|
* Is the text input disabled?
|
|
*/
|
|
disabled: PropTypes.bool,
|
|
/**
|
|
* Callback fired on input.
|
|
*/
|
|
onBlur: PropTypes.func,
|
|
/**
|
|
* Callback fired on input.
|
|
*/
|
|
onChange: PropTypes.func,
|
|
/**
|
|
* Min price to display. This is a string because it contains currency e.g. $10.00.
|
|
*/
|
|
minPrice: PropTypes.string.isRequired,
|
|
/**
|
|
* Max price to display. This is a string because it contains currency e.g. $10.00.
|
|
*/
|
|
maxPrice: PropTypes.string.isRequired,
|
|
};
|
|
|
|
PriceInput.defaultProps = {
|
|
disabled: false,
|
|
onBlur: () => {},
|
|
onChange: () => {},
|
|
};
|
|
|
|
export default PriceInput;
|