54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import { createContext, useCallback, useState } from '@wordpress/element';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Internal dependencies
|
||
|
|
*/
|
||
|
|
import './style.scss';
|
||
|
|
|
||
|
|
export enum SidebarNavigationAnimationDirection {
|
||
|
|
Forward = 'forward',
|
||
|
|
Back = 'back',
|
||
|
|
}
|
||
|
|
|
||
|
|
type SidebarNavigationContextType = {
|
||
|
|
navigate: ( direction: SidebarNavigationAnimationDirection ) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const SidebarNavigationContext =
|
||
|
|
createContext< SidebarNavigationContextType >( {
|
||
|
|
navigate: () => void 0,
|
||
|
|
} );
|
||
|
|
|
||
|
|
export function SidebarContent( { children }: { children: JSX.Element } ) {
|
||
|
|
const [ navState, setNavState ] = useState< {
|
||
|
|
direction: SidebarNavigationAnimationDirection | null;
|
||
|
|
} >( {
|
||
|
|
direction: null,
|
||
|
|
} );
|
||
|
|
|
||
|
|
const navigate = useCallback(
|
||
|
|
( direction: SidebarNavigationAnimationDirection ) => {
|
||
|
|
setNavState( { direction } );
|
||
|
|
},
|
||
|
|
[]
|
||
|
|
);
|
||
|
|
|
||
|
|
const wrapperCls = clsx(
|
||
|
|
'woocommerce-customize-store-edit-site-sidebar__screen-wrapper',
|
||
|
|
{
|
||
|
|
'slide-from-left': navState.direction === 'back',
|
||
|
|
'slide-from-right': navState.direction === 'forward',
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<SidebarNavigationContext.Provider value={ { navigate } }>
|
||
|
|
<div className={ wrapperCls }>{ children }</div>
|
||
|
|
</SidebarNavigationContext.Provider>
|
||
|
|
);
|
||
|
|
}
|