Remove the components prop in favor of the native children prop to pr…

…event unnecessary re-renders which are breaking component animations
woocommerce · Dec 17, 2024 · f32f30e · f32f30e
1 parent 51613c3
commit f32f30e
Show file tree

Hide file tree

Showing 13 changed files with 271 additions and 371 deletions.
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/AccordionSection.js
@@ -1,8 +1,6 @@
 import { Icon } from '@wordpress/components';
 import { chevronDown, chevronUp } from '@wordpress/icons';
-
 import classNames from 'classnames';
-
 import { useAccordionState } from '../../hooks/useAccordionState';
 
 // Provide defaults for all layout components so the generic version just works.
@@ -24,6 +22,13 @@ const DefaultDescription = ( { children } ) => (
 	<div className="ppcp-r-accordion__description">{ children }</div>
 );
 
+const AccordionContent = ( { isOpen, children } ) => {
+	if ( ! isOpen || ! children ) {
+		return null;
+	}
+	return <div className="ppcp-r-accordion__content">{ children }</div>;
+};
+
 const Accordion = ( {
 	title,
 	id = '',
@@ -65,9 +70,7 @@ const Accordion = ( {
 					) }
 				</Header>
 			</button>
-			{ isOpen && children && (
-				<div className="ppcp-r-accordion__content">{ children }</div>
-			) }
+			<AccordionContent isOpen={ isOpen }>{ children }</AccordionContent>
 		</div>
 	);
 };

diff --git a/...tings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js b/...tings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
@@ -9,25 +9,19 @@ import {
 } from './SettingsBlockElements';
 
 const SettingsAccordion = ( { title, description, children, ...props } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__accordion"
-		components={ [
-			() => (
-				<Accordion
-					title={ title }
-					description={ description }
-					Header={ Header }
-					TitleWrapper={ TitleWrapper }
-					Title={ Title }
-					Action={ Action }
-					Description={ Description }
-				>
-					{ children }
-				</Accordion>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">
+		<Accordion
+			title={ title }
+			description={ description }
+			Header={ Header }
+			TitleWrapper={ TitleWrapper }
+			Title={ Title }
+			Action={ Action }
+			Description={ Description }
+		>
+			{ children }
+		</Accordion>
+	</SettingsBlock>
 );
 
 export default SettingsAccordion;
diff --git a/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -3,32 +3,24 @@ import SettingsBlock from './SettingsBlock';
 import { Header, Title, Action, Description } from './SettingsBlockElements';
 
 const ButtonSettingsBlock = ( { title, description, ...props } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__button"
-		components={ [
-			() => (
-				<>
-					<Header>
-						<Title>{ title }</Title>
-						<Description>{ description }</Description>
-					</Header>
-					<Action>
-						<Button
-							variant={ props.actionProps?.buttonType }
-							onClick={
-								props.actionProps?.callback
-									? () => props.actionProps.callback()
-									: undefined
-							}
-						>
-							{ props.actionProps.value }
-						</Button>
-					</Action>
-				</>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
+		<Header>
+			<Title>{ title }</Title>
+			<Description>{ description }</Description>
+		</Header>
+		<Action>
+			<Button
+				variant={ props.actionProps?.buttonType }
+				onClick={
+					props.actionProps?.callback
+						? () => props.actionProps.callback()
+						: undefined
+				}
+			>
+				{ props.actionProps.value }
+			</Button>
+		</Action>
+	</SettingsBlock>
 );
 
 export default ButtonSettingsBlock;
diff --git a/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/...ettings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -11,56 +11,42 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 		}
 
 		return (
-			<>
-				<span className="ppcp-r-feature-item__notes">
-					{ notes.map( ( note, index ) => (
-						<span key={ index }>{ note }</span>
-					) ) }
-				</span>
-			</>
+			<span className="ppcp-r-feature-item__notes">
+				{ notes.map( ( note, index ) => (
+					<span key={ index }>{ note }</span>
+				) ) }
+			</span>
 		);
 	};
 
 	return (
-		<SettingsBlock
-			{ ...props }
-			className="ppcp-r-settings-block__feature"
-			components={ [
-				() => (
-					<>
-						<Header>
-							<Title>
-								{ title }
-								{ props.actionProps?.featureStatus && (
-									<TitleBadge
-										{ ...props.actionProps?.badge }
-									/>
-								) }
-							</Title>
-							<Description className="ppcp-r-settings-block__feature__description">
-								{ description }
-								{ printNotes() }
-							</Description>
-						</Header>
-						<Action>
-							<div className="ppcp-r-feature-item__buttons">
-								{ props.actionProps?.buttons.map(
-									( button ) => (
-										<Button
-											href={ button.url }
-											key={ button.text }
-											variant={ button.type }
-										>
-											{ button.text }
-										</Button>
-									)
-								) }
-							</div>
-						</Action>
-					</>
-				),
-			] }
-		/>
+		<SettingsBlock { ...props } className="ppcp-r-settings-block__feature">
+			<Header>
+				<Title>
+					{ title }
+					{ props.actionProps?.featureStatus && (
+						<TitleBadge { ...props.actionProps?.badge } />
+					) }
+				</Title>
+				<Description className="ppcp-r-settings-block__feature__description">
+					{ description }
+					{ printNotes() }
+				</Description>
+			</Header>
+			<Action>
+				<div className="ppcp-r-feature-item__buttons">
+					{ props.actionProps?.buttons.map( ( button ) => (
+						<Button
+							href={ button.url }
+							key={ button.text }
+							variant={ button.type }
+						>
+							{ button.text }
+						</Button>
+					) ) }
+				</div>
+			</Action>
+		</SettingsBlock>
 	);
 };
 

diff --git a/...-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js b/...-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
@@ -42,28 +42,20 @@ const InputSettingsBlock = ( {
 	order = DEFAULT_ELEMENT_ORDER,
 	...props
 } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__input"
-		components={ [
-			() => (
-				<>
-					{ order.map( ( elementKey ) => {
-						const RenderElement = ELEMENT_RENDERERS[ elementKey ];
-						return RenderElement ? (
-							<RenderElement
-								key={ elementKey }
-								title={ title }
-								description={ description }
-								supplementaryLabel={ supplementaryLabel }
-								actionProps={ props.actionProps }
-							/>
-						) : null;
-					} ) }
-				</>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
+		{ order.map( ( elementKey ) => {
+			const RenderElement = ELEMENT_RENDERERS[ elementKey ];
+			return RenderElement ? (
+				<RenderElement
+					key={ elementKey }
+					title={ title }
+					description={ description }
+					supplementaryLabel={ supplementaryLabel }
+					actionProps={ props.actionProps }
+				/>
+			) : null;
+		} ) }
+	</SettingsBlock>
 );
 
 export default InputSettingsBlock;
diff --git a/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -16,25 +16,18 @@ const PaymentMethodsBlock = ( { paymentMethods, className = '' } ) => {
 	return (
 		<SettingsBlock
 			className={ `ppcp-r-settings-block__payment-methods ${ className }` }
-			components={ [
-				() => (
-					<>
-						{ paymentMethods.map( ( paymentMethod ) => (
-							<PaymentMethodItemBlock
-								key={ paymentMethod.id }
-								{ ...paymentMethod }
-								isSelected={
-									selectedMethod === paymentMethod.id
-								}
-								onSelect={ ( checked ) =>
-									handleSelect( paymentMethod.id, checked )
-								}
-							/>
-						) ) }
-					</>
-				),
-			] }
-		/>
+		>
+			{ paymentMethods.map( ( paymentMethod ) => (
+				<PaymentMethodItemBlock
+					key={ paymentMethod.id }
+					{ ...paymentMethod }
+					isSelected={ selectedMethod === paymentMethod.id }
+					onSelect={ ( checked ) =>
+						handleSelect( paymentMethod.id, checked )
+					}
+				/>
+			) ) }
+		</SettingsBlock>
 	);
 };
 

diff --git a/...-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js b/...-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
@@ -11,37 +11,32 @@ const RadioSettingsBlock = ( {
 	<SettingsBlock
 		{ ...props }
 		className="ppcp-r-settings-block__radio ppcp-r-settings-block--expert-rdb"
-		components={ [
-			() => (
-				<>
-					<Header>
-						<Title>{ title }</Title>
-						<Description>{ description }</Description>
-					</Header>
-					{ options.map( ( option ) => (
-						<PayPalRdbWithContent
-							key={ option.id }
-							id={ option.id }
-							name={ props.actionProps?.name }
-							value={ option.value }
-							currentValue={ props.actionProps?.currentValue }
-							handleRdbState={ ( newValue ) =>
-								props.actionProps?.callback(
-									props.actionProps?.key,
-									newValue
-								)
-							}
-							label={ option.label }
-							description={ option.description }
-							toggleAdditionalContent={ true }
-						>
-							{ option.additionalContent }
-						</PayPalRdbWithContent>
-					) ) }
-				</>
-			),
-		] }
-	/>
+	>
+		<Header>
+			<Title>{ title }</Title>
+			<Description>{ description }</Description>
+		</Header>
+		{ options.map( ( option ) => (
+			<PayPalRdbWithContent
+				key={ option.id }
+				id={ option.id }
+				name={ props.actionProps?.name }
+				value={ option.value }
+				currentValue={ props.actionProps?.currentValue }
+				handleRdbState={ ( newValue ) =>
+					props.actionProps?.callback(
+						props.actionProps?.key,
+						newValue
+					)
+				}
+				label={ option.label }
+				description={ option.description }
+				toggleAdditionalContent={ true }
+			>
+				{ option.additionalContent }
+			</PayPalRdbWithContent>
+		) ) }
+	</SettingsBlock>
 );
 
 export default RadioSettingsBlock;
diff --git a/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js b/...settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
@@ -35,27 +35,19 @@ const SelectSettingsBlock = ( {
 	order = DEFAULT_ELEMENT_ORDER,
 	...props
 } ) => (
-	<SettingsBlock
-		{ ...props }
-		className="ppcp-r-settings-block__select"
-		components={ [
-			() => (
-				<>
-					{ order.map( ( elementKey ) => {
-						const RenderElement = ELEMENT_RENDERERS[ elementKey ];
-						return RenderElement ? (
-							<RenderElement
-								key={ elementKey }
-								title={ title }
-								description={ description }
-								actionProps={ props.actionProps }
-							/>
-						) : null;
-					} ) }
-				</>
-			),
-		] }
-	/>
+	<SettingsBlock { ...props } className="ppcp-r-settings-block__select">
+		{ order.map( ( elementKey ) => {
+			const RenderElement = ELEMENT_RENDERERS[ elementKey ];
+			return RenderElement ? (
+				<RenderElement
+					key={ elementKey }
+					title={ title }
+					description={ description }
+					actionProps={ props.actionProps }
+				/>
+			) : null;
+		} ) }
+	</SettingsBlock>
 );
 
 export default SelectSettingsBlock;