Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
primogenial
/
wp-content-20241001222009
/
plugins
/
woocommerce
/
packages
/
woocommerce-blocks
/
assets
/
js
/
base
/
components
/
price-slider
/
stories
:
index.tsx
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
/** * External dependencies */ import { Story, Meta } from '@storybook/react'; import { useState } from '@wordpress/element'; import { currencies, currencyControl } from '@woocommerce/storybook-controls'; /** * Internal dependencies */ import PriceSlider, { PriceSliderProps } from '..'; export default { title: 'WooCommerce Blocks/@base-components/PriceSlider', component: PriceSlider, args: { currency: currencies.USD, maxPrice: 5000, maxConstraint: 5000, minConstraint: 1000, minPrice: 1000, step: 250, }, argTypes: { currency: currencyControl, maxPrice: { control: { disable: true } }, minPrice: { control: { disable: true } }, }, } as Meta< PriceSliderProps >; const Template: Story< PriceSliderProps > = ( args ) => { const { maxPrice, minPrice, ...props } = args; // PriceSlider expects client to update min & max price, i.e. is a controlled component const [ min, setMin ] = useState( minPrice ); const [ max, setMax ] = useState( maxPrice ); return ( <PriceSlider { ...props } maxPrice={ max } minPrice={ min } onChange={ ( [ newMin, newMax ] ) => { setMin( newMin ); setMax( newMax ); } } /> ); }; export const Default = Template.bind( {} ); export const WithoutInputs = Template.bind( {} ); WithoutInputs.args = { showInputFields: false, }; export const WithButton = Template.bind( {} ); WithButton.args = { showFilterButton: true, };