Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update variation switcher logic to not loop (#40901)

This commit is contained in:
louwie17 2023-10-20 12:17:30 -03:00 committed by GitHub
parent 3fa5573706
commit fbac42aafc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 97 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/update-40896_variation_switcher Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update Variation Switcher to not loop, but hide next/previous buttons if at the end or beginning.

7
packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.scss
View File

@ -32,6 +32,13 @@
}
}
&__button-next {
margin-left: auto;
}
&__button-previous {
margin-right: auto;
}
&__product-image {
max-height: 32px;
max-width: 32px;

70
packages/js/product-editor/src/components/variation-switcher-footer/variation-switcher-footer.tsx
View File

@ -46,16 +46,20 @@ export function VariationSwitcherFooter( {
const { getEntityRecord } = select( 'core' );
if ( numberOfVariations && numberOfVariations > 0 ) {
return {
previousVariation: getEntityRecord< ProductVariation >(
'postType',
'product_variation',
previousVariationId
),
nextVariation: getEntityRecord< ProductVariation >(
'postType',
'product_variation',
nextVariationId
),
previousVariation:
previousVariationId !== null &&
getEntityRecord< ProductVariation >(
'postType',
'product_variation',
previousVariationId
),
nextVariation:
nextVariationId !== null &&
getEntityRecord< ProductVariation >(
'postType',
'product_variation',
nextVariationId
),
};
}
return {};
@ -63,23 +67,27 @@ export function VariationSwitcherFooter( {
[ nextVariationId, previousVariationId, numberOfVariations ]
);
function onPrevious() {
recordEvent( 'product_variation_switch_previous', {
variation_length: numberOfVariations,
variation_id: previousVariation?.id,
variation_index: activeVariationIndex,
previous_variation_index: previousVariationIndex,
} );
goToPreviousVariation();
if ( previousVariation ) {
recordEvent( 'product_variation_switch_previous', {
variation_length: numberOfVariations,
variation_id: previousVariation?.id,
variation_index: activeVariationIndex,
previous_variation_index: previousVariationIndex,
} );
goToPreviousVariation();
}
}
function onNext() {
recordEvent( 'product_variation_switch_next', {
variation_length: numberOfVariations,
variation_id: nextVariation?.id,
variation_index: activeVariationIndex,
next_variation_index: nextVariationIndex,
} );
goToNextVariation();
if ( nextVariation ) {
recordEvent( 'product_variation_switch_next', {
variation_length: numberOfVariations,
variation_id: nextVariation?.id,
variation_index: activeVariationIndex,
next_variation_index: nextVariationIndex,
} );
goToNextVariation();
}
}
if ( ! numberOfVariations || numberOfVariations < 2 ) {
@ -88,9 +96,9 @@ export function VariationSwitcherFooter( {
return (
<div className="woocommerce-product-variation-switcher-footer">
{ previousVariation ? (
{ previousVariation && (
<Button
className="woocommerce-product-variation-switcher-footer__button"
className="woocommerce-product-variation-switcher-footer__button woocommerce-product-variation-switcher-footer__button-previous"
label={ __( 'Previous', 'woocommerce' ) }
onClick={ onPrevious }
>
@ -106,12 +114,13 @@ export function VariationSwitcherFooter( {
) }
{ previousVariation.name }
</Button>
) : (
) }
{ ! previousVariation && previousVariationId !== null && (
<SwitcherLoadingPlaceholder position="left" />
) }
{ nextVariation ? (
{ nextVariation && (
<Button
className="woocommerce-product-variation-switcher-footer__button"
className="woocommerce-product-variation-switcher-footer__button woocommerce-product-variation-switcher-footer__button-next"
label={ __( 'Next', 'woocommerce' ) }
onClick={ onNext }
>
@ -127,7 +136,8 @@ export function VariationSwitcherFooter( {
) }
<Icon icon={ arrowRight } size={ 16 } />
</Button>
) : (
) }
{ ! nextVariation && nextVariationId !== null && (
<SwitcherLoadingPlaceholder position="right" />
) }
</div>

51
packages/js/product-editor/src/hooks/use-variation-switcher.ts
View File

@ -36,13 +36,11 @@ export function useVariationSwitcher( {
const activeVariationIndex =
parentProduct.variations.indexOf( variationId );
const previousVariationIndex =
activeVariationIndex > 0
? activeVariationIndex - 1
: parentProduct.variations.length - 1;
activeVariationIndex > 0 ? activeVariationIndex - 1 : null;
const nextVariationIndex =
activeVariationIndex !== parentProduct.variations.length - 1
? activeVariationIndex + 1
: 0;
: null;
return {
activeVariationIndex,
@ -50,9 +48,13 @@ export function useVariationSwitcher( {
previousVariationIndex,
numberOfVariations: parentProduct.variations.length,
previousVariationId:
parentProduct.variations[ previousVariationIndex ],
previousVariationIndex !== null
? parentProduct.variations[ previousVariationIndex ]
: null,
nextVariationId:
parentProduct.variations[ nextVariationIndex ],
nextVariationIndex !== null
? parentProduct.variations[ nextVariationIndex ]
: null,
};
}
return {};
@ -68,33 +70,38 @@ export function useVariationSwitcher( {
] );
}
function goToNextVariation() {
if ( variationValues.nextVariationId === undefined ) {
return false;
}
function goToVariation( id: number ) {
navigateTo( {
url: getNewPath(
{},
`/product/${ parentId }/variation/${ variationValues.nextVariationId }`
),
url: getNewPath( {}, `/product/${ parentId }/variation/${ id }` ),
} );
}
function goToPreviousVariation() {
if ( variationValues.previousVariationId === undefined ) {
function goToNextVariation() {
if (
variationValues.nextVariationId === undefined ||
variationValues.nextVariationId === null
) {
return false;
}
navigateTo( {
url: getNewPath(
{},
`/product/${ parentId }/variation/${ variationValues.previousVariationId }`
),
} );
goToVariation( variationValues.nextVariationId );
return true;
}
function goToPreviousVariation() {
if (
variationValues.previousVariationId === undefined ||
variationValues.previousVariationId === null
) {
return false;
}
goToVariation( variationValues.previousVariationId );
return true;
}
return {
...variationValues,
invalidateVariationList,
goToVariation,
goToNextVariation,
goToPreviousVariation,
};

19
plugins/woocommerce-admin/client/products/fills/more-menu-items/delete-variation-menu-item.tsx
View File

@ -32,11 +32,15 @@ export const DeleteVariationMenuItem = ( {
const variationId = useEntityId( 'postType', 'product_variation' );
const { invalidateVariationList, goToNextVariation, numberOfVariations } =
useVariationSwitcher( {
parentId: productId ? parseInt( productId, 10 ) : undefined,
variationId,
} );
const {
invalidateVariationList,
goToNextVariation,
goToPreviousVariation,
numberOfVariations,
} = useVariationSwitcher( {
parentId: productId ? parseInt( productId, 10 ) : undefined,
variationId,
} );
const [ name ] = useEntityProp< string >(
'postType',
@ -93,7 +97,10 @@ export const DeleteVariationMenuItem = ( {
invalidateVariationList();
if ( numberOfVariations && numberOfVariations > 1 ) {
goToNextVariation();
if ( ! goToNextVariation() ) {
// This would only happen when deleting the last variation.
goToPreviousVariation();
}
} else {
navigateTo( {
url: getNewPath( {}, `/product/${ productId }` ),

4
plugins/woocommerce/changelog/update-40896_variation_switcher Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: update
Update logic of deleting variation to go to previous variation if the last one is deleted.