From b62887b74de7bab9031ecb9bbb31bb736a6c8eae Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Tue, 10 Dec 2024 12:49:34 +0100 Subject: [PATCH] CreateTemplatePartModal: avoid identity warning in useSelect (#67786) Co-authored-by: jsnajdr Co-authored-by: tyxla Co-authored-by: Mamaduka --- .../create-template-part-modal/index.tsx | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/fields/src/components/create-template-part-modal/index.tsx b/packages/fields/src/components/create-template-part-modal/index.tsx index c7dc54df84a2a..4043a7824fac4 100644 --- a/packages/fields/src/components/create-template-part-modal/index.tsx +++ b/packages/fields/src/components/create-template-part-modal/index.tsx @@ -50,6 +50,13 @@ type CreateTemplatePartModalContentsProps = { defaultTitle?: string; }; +type TemplatePartArea = { + area: string; + label: string; + icon: string; + description: string; +}; + /** * A React component that renders a modal for creating a template part. The modal displays a title and the contents for creating the template part. * This component should not live in this package, it should be moved to a dedicated package responsible for managing template. @@ -124,22 +131,14 @@ export function CreateTemplatePartModalContents( { const [ isSubmitting, setIsSubmitting ] = useState( false ); const instanceId = useInstanceId( CreateTemplatePartModal ); - const defaultTemplatePartAreas = useSelect( ( select ) => { - const areas = + const defaultTemplatePartAreas = useSelect( + ( select ) => // @ts-expect-error getEntityRecord is not typed with unstableBase as argument. select( coreStore ).getEntityRecord< { - default_template_part_areas: Array< { - area: string; - label: string; - icon: string; - description: string; - } >; - } >( 'root', '__unstableBase' )?.default_template_part_areas || []; - - return areas.map( ( item ) => { - return { ...item, icon: getTemplatePartIcon( item.icon ) }; - } ); - }, [] ); + default_template_part_areas: Array< TemplatePartArea >; + } >( 'root', '__unstableBase' )?.default_template_part_areas, + [] + ); async function createTemplatePart() { if ( ! title || isSubmitting ) { @@ -219,12 +218,13 @@ export function CreateTemplatePartModalContents( { } checked={ area } > - { defaultTemplatePartAreas.map( - ( { icon, label, area: value, description } ) => ( + { ( defaultTemplatePartAreas ?? [] ).map( ( item ) => { + const icon = getTemplatePartIcon( item.icon ); + return ( @@ -232,19 +232,19 @@ export function CreateTemplatePartModalContents( { - { label } -
{ description }
+ { item.label } +
{ item.description }
- { area === value && ( + { area === item.area && ( ) }
- ) - ) } + ); + } ) }