Add toggle to toggle between new and old navigation
This commit is contained in:
parent
3858ed5bcf
commit
55a9467241
|
@ -15,14 +15,17 @@ import {
|
|||
import { unlock } from '../lock-unlock';
|
||||
import useLayoutAreas from './router';
|
||||
import { Layout } from './layout';
|
||||
import { getShowNewNavigation } from './utilites/new-navigation';
|
||||
import {
|
||||
NewNavigationProvider,
|
||||
useNewNavigation,
|
||||
} from './utilites/new-navigation';
|
||||
|
||||
const { RouterProvider } = unlock( routerPrivateApis );
|
||||
const { GlobalStylesProvider } = unlock( editorPrivateApis );
|
||||
|
||||
function ProductsLayout() {
|
||||
// This ensures the edited entity id and type are initialized properly.
|
||||
const showNewNavigation = getShowNewNavigation();
|
||||
const [ showNewNavigation ] = useNewNavigation();
|
||||
if ( showNewNavigation ) {
|
||||
document.body.classList.add( 'is-fullscreen-mode' );
|
||||
} else {
|
||||
|
@ -34,11 +37,13 @@ function ProductsLayout() {
|
|||
|
||||
export function ProductsApp() {
|
||||
return (
|
||||
<GlobalStylesProvider>
|
||||
<UnsavedChangesWarning />
|
||||
<RouterProvider>
|
||||
<ProductsLayout />
|
||||
</RouterProvider>
|
||||
</GlobalStylesProvider>
|
||||
<NewNavigationProvider>
|
||||
<GlobalStylesProvider>
|
||||
<UnsavedChangesWarning />
|
||||
<RouterProvider>
|
||||
<ProductsLayout />
|
||||
</RouterProvider>
|
||||
</GlobalStylesProvider>
|
||||
</NewNavigationProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -11,7 +11,7 @@ import {
|
|||
Fragment,
|
||||
} from '@wordpress/element';
|
||||
import { Product, ProductQuery } from '@woocommerce/data';
|
||||
import { drawerRight } from '@wordpress/icons';
|
||||
import { drawerRight, seen, unseen } from '@wordpress/icons';
|
||||
import { privateApis as routerPrivateApis } from '@wordpress/router';
|
||||
import { store as coreStore } from '@wordpress/core-data';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
|
@ -44,6 +44,7 @@ import {
|
|||
import { LAYOUT_LIST } from '../constants';
|
||||
import { productFields } from './fields';
|
||||
import { useEditProductAction } from '../dataviews-actions';
|
||||
import { useNewNavigation } from '../utilites/new-navigation';
|
||||
|
||||
const { NavigableRegion, usePostActions } = unlock( editorPrivateApis );
|
||||
const { useHistory, useLocation } = unlock( routerPrivateApis );
|
||||
|
@ -149,6 +150,7 @@ export default function ProductList( {
|
|||
className,
|
||||
hideTitleFromUI = false,
|
||||
}: ProductListProps ) {
|
||||
const [ showNewNavigation, setNewNavigation ] = useNewNavigation();
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const {
|
||||
|
@ -307,22 +309,36 @@ export default function ProductList( {
|
|||
selection={ selection }
|
||||
defaultLayouts={ defaultLayouts }
|
||||
header={
|
||||
<Button
|
||||
// @ts-expect-error outdated type.
|
||||
size="compact"
|
||||
isPressed={ quickEdit }
|
||||
icon={ drawerRight }
|
||||
label={ __(
|
||||
'Toggle details panel',
|
||||
'woocommerce'
|
||||
) }
|
||||
onClick={ () => {
|
||||
history.push( {
|
||||
...location.params,
|
||||
quickEdit: quickEdit ? undefined : true,
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
<>
|
||||
<Button
|
||||
// @ts-expect-error outdated type.
|
||||
size="compact"
|
||||
icon={ showNewNavigation ? seen : unseen }
|
||||
label={ __(
|
||||
'Toggle navigation',
|
||||
'woocommerce'
|
||||
) }
|
||||
onClick={ () => {
|
||||
setNewNavigation( ! showNewNavigation );
|
||||
} }
|
||||
/>
|
||||
<Button
|
||||
// @ts-expect-error outdated type.
|
||||
size="compact"
|
||||
isPressed={ quickEdit }
|
||||
icon={ drawerRight }
|
||||
label={ __(
|
||||
'Toggle details panel',
|
||||
'woocommerce'
|
||||
) }
|
||||
onClick={ () => {
|
||||
history.push( {
|
||||
...location.params,
|
||||
quickEdit: quickEdit ? undefined : true,
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
export function setShowNewNavigation( newNavigation: boolean ) {
|
||||
window.__productNewNavigation = newNavigation;
|
||||
}
|
||||
|
||||
export function getShowNewNavigation(): boolean {
|
||||
return window.__productNewNavigation ?? false;
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import {
|
||||
createElement,
|
||||
createContext,
|
||||
useState,
|
||||
useContext,
|
||||
} from '@wordpress/element';
|
||||
|
||||
type NewNavigationContextType = {
|
||||
showNewNavigation: boolean;
|
||||
setShowNewNavigation: ( nav: boolean ) => void;
|
||||
};
|
||||
const NewNavigationContext = createContext< NewNavigationContextType | null >(
|
||||
null
|
||||
);
|
||||
|
||||
export function NewNavigationProvider( {
|
||||
children,
|
||||
}: {
|
||||
children?: React.ReactNode;
|
||||
} ) {
|
||||
const [ showNewNavigation, setShowNewNavigation ] = useState( false );
|
||||
return (
|
||||
<NewNavigationContext.Provider
|
||||
value={ { showNewNavigation, setShowNewNavigation } }
|
||||
>
|
||||
{ children }
|
||||
</NewNavigationContext.Provider>
|
||||
);
|
||||
}
|
||||
export function useNewNavigation(): [ boolean, ( nav: boolean ) => void ] {
|
||||
const context = useContext( NewNavigationContext );
|
||||
if ( context ) {
|
||||
const { showNewNavigation, setShowNewNavigation } = context;
|
||||
return [ showNewNavigation, setShowNewNavigation ];
|
||||
}
|
||||
return [ false, () => {} ];
|
||||
}
|
|
@ -8,6 +8,12 @@ body.product_page_woocommerce-products-dashboard #woocommerce-products-dashboard
|
|||
@include reset;
|
||||
display: flex !important;
|
||||
min-height: 100vh;
|
||||
|
||||
.edit-site-layout {
|
||||
flex: 1 1 0;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
body.js:not(.is-fullscreen-mode) {
|
||||
|
@ -30,11 +36,7 @@ body.js:not(.is-fullscreen-mode) {
|
|||
min-height: calc(100vh - #{$admin-bar-height});
|
||||
|
||||
.edit-site-layout {
|
||||
flex: 1 1 0;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
background: #1d2327;
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue