From f8933b6b61f7991bc9ab684db6c86ca92988892f Mon Sep 17 00:00:00 2001 From: im3dabasia <eshaan.dabasiya@rtcamp.com> Date: Wed, 25 Dec 2024 16:39:34 +0530 Subject: [PATCH] fix: Add radio for value and defaultValue --- .../resolution-tool/stories/index.story.js | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/resolution-tool/stories/index.story.js b/packages/block-editor/src/components/resolution-tool/stories/index.story.js index 469172a65fa7e6..a8fef414e3be91 100644 --- a/packages/block-editor/src/components/resolution-tool/stories/index.story.js +++ b/packages/block-editor/src/components/resolution-tool/stories/index.story.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { Panel, __experimentalToolsPanel as ToolsPanel, @@ -26,7 +26,8 @@ const meta = { }, argTypes: { value: { - control: { type: null }, + control: 'radio', + options: [ 'thumbnail', 'medium', 'large', 'full' ], description: 'Currently selected resolution value.', table: { type: { summary: 'string' }, @@ -87,22 +88,32 @@ const meta = { export default meta; export const Default = { - render: function Template( { onChange, ...args } ) { - const [ resolution, setResolution ] = useState(); + render: function Template( { onChange, defaultValue, value, ...args } ) { + const [ resolution, setResolution ] = useState( value ?? defaultValue ); + + useEffect( () => { + if ( value !== resolution ) { + setResolution( value ); + } + }, [ value, resolution ] ); + + const handleChange = ( newValue ) => { + setResolution( newValue ); + onChange?.( newValue ); + }; + return ( <Panel> <ToolsPanel resetAll={ () => { - setResolution( undefined ); - onChange?.( undefined ); + setResolution( defaultValue ); + onChange?.( defaultValue ); } } > <ResolutionTool { ...args } - onChange={ ( newValue ) => { - onChange?.( newValue ); - setResolution( newValue ); - } } + defaultValue={ defaultValue } + onChange={ handleChange } value={ resolution } /> </ToolsPanel>