woocommerce/plugins/woocommerce-admin/client/layout/hooks/use-page-classes.ts

57 lines
1.1 KiB
TypeScript
Raw Normal View History

/**
* External dependencies
*/
import { useEffect } from '@wordpress/element';
import { RouteMatch } from 'react-router-dom';
type Page = {
container: JSX.Element;
path: string;
breadcrumbs:
| string[]
| ( ( { match }: { match: RouteMatch } ) => string[] );
wpOpenMenu: string;
navArgs: {
id: string;
};
capability: string;
};
export function usePageClasses( page: Page ) {
function convertCamelCaseToKebabCase( str: string ) {
return str.replace(
/[A-Z]/g,
( letter ) => `-${ letter.toLowerCase() }`
);
}
function getPathClassName( path: string ) {
const suffix =
path === '/'
? '_home'
: path
.replace( /:[a-zA-Z?]+/g, function ( match ) {
return convertCamelCaseToKebabCase( match ).replace(
':',
''
);
} )
.replace( /\//g, '_' );
return `woocommerce-admin-page_${ suffix }`;
}
useEffect( () => {
if ( ! page.path ) {
return;
}
const classes = getPathClassName( page.path );
document.body.classList.add( classes );
return () => {
document.body.classList.remove( classes );
};
}, [ page.path ] );
}