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 { unlock } from '../lock-unlock';
|
||||||
import useLayoutAreas from './router';
|
import useLayoutAreas from './router';
|
||||||
import { Layout } from './layout';
|
import { Layout } from './layout';
|
||||||
import { getShowNewNavigation } from './utilites/new-navigation';
|
import {
|
||||||
|
NewNavigationProvider,
|
||||||
|
useNewNavigation,
|
||||||
|
} from './utilites/new-navigation';
|
||||||
|
|
||||||
const { RouterProvider } = unlock( routerPrivateApis );
|
const { RouterProvider } = unlock( routerPrivateApis );
|
||||||
const { GlobalStylesProvider } = unlock( editorPrivateApis );
|
const { GlobalStylesProvider } = unlock( editorPrivateApis );
|
||||||
|
|
||||||
function ProductsLayout() {
|
function ProductsLayout() {
|
||||||
// This ensures the edited entity id and type are initialized properly.
|
// This ensures the edited entity id and type are initialized properly.
|
||||||
const showNewNavigation = getShowNewNavigation();
|
const [ showNewNavigation ] = useNewNavigation();
|
||||||
if ( showNewNavigation ) {
|
if ( showNewNavigation ) {
|
||||||
document.body.classList.add( 'is-fullscreen-mode' );
|
document.body.classList.add( 'is-fullscreen-mode' );
|
||||||
} else {
|
} else {
|
||||||
|
@ -34,11 +37,13 @@ function ProductsLayout() {
|
||||||
|
|
||||||
export function ProductsApp() {
|
export function ProductsApp() {
|
||||||
return (
|
return (
|
||||||
<GlobalStylesProvider>
|
<NewNavigationProvider>
|
||||||
<UnsavedChangesWarning />
|
<GlobalStylesProvider>
|
||||||
<RouterProvider>
|
<UnsavedChangesWarning />
|
||||||
<ProductsLayout />
|
<RouterProvider>
|
||||||
</RouterProvider>
|
<ProductsLayout />
|
||||||
</GlobalStylesProvider>
|
</RouterProvider>
|
||||||
|
</GlobalStylesProvider>
|
||||||
|
</NewNavigationProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ import {
|
||||||
Fragment,
|
Fragment,
|
||||||
} from '@wordpress/element';
|
} from '@wordpress/element';
|
||||||
import { Product, ProductQuery } from '@woocommerce/data';
|
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 { privateApis as routerPrivateApis } from '@wordpress/router';
|
||||||
import { store as coreStore } from '@wordpress/core-data';
|
import { store as coreStore } from '@wordpress/core-data';
|
||||||
import { __ } from '@wordpress/i18n';
|
import { __ } from '@wordpress/i18n';
|
||||||
|
@ -44,6 +44,7 @@ import {
|
||||||
import { LAYOUT_LIST } from '../constants';
|
import { LAYOUT_LIST } from '../constants';
|
||||||
import { productFields } from './fields';
|
import { productFields } from './fields';
|
||||||
import { useEditProductAction } from '../dataviews-actions';
|
import { useEditProductAction } from '../dataviews-actions';
|
||||||
|
import { useNewNavigation } from '../utilites/new-navigation';
|
||||||
|
|
||||||
const { NavigableRegion, usePostActions } = unlock( editorPrivateApis );
|
const { NavigableRegion, usePostActions } = unlock( editorPrivateApis );
|
||||||
const { useHistory, useLocation } = unlock( routerPrivateApis );
|
const { useHistory, useLocation } = unlock( routerPrivateApis );
|
||||||
|
@ -149,6 +150,7 @@ export default function ProductList( {
|
||||||
className,
|
className,
|
||||||
hideTitleFromUI = false,
|
hideTitleFromUI = false,
|
||||||
}: ProductListProps ) {
|
}: ProductListProps ) {
|
||||||
|
const [ showNewNavigation, setNewNavigation ] = useNewNavigation();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const {
|
const {
|
||||||
|
@ -307,22 +309,36 @@ export default function ProductList( {
|
||||||
selection={ selection }
|
selection={ selection }
|
||||||
defaultLayouts={ defaultLayouts }
|
defaultLayouts={ defaultLayouts }
|
||||||
header={
|
header={
|
||||||
<Button
|
<>
|
||||||
// @ts-expect-error outdated type.
|
<Button
|
||||||
size="compact"
|
// @ts-expect-error outdated type.
|
||||||
isPressed={ quickEdit }
|
size="compact"
|
||||||
icon={ drawerRight }
|
icon={ showNewNavigation ? seen : unseen }
|
||||||
label={ __(
|
label={ __(
|
||||||
'Toggle details panel',
|
'Toggle navigation',
|
||||||
'woocommerce'
|
'woocommerce'
|
||||||
) }
|
) }
|
||||||
onClick={ () => {
|
onClick={ () => {
|
||||||
history.push( {
|
setNewNavigation( ! showNewNavigation );
|
||||||
...location.params,
|
} }
|
||||||
quickEdit: quickEdit ? undefined : true,
|
/>
|
||||||
} );
|
<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>
|
</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;
|
@include reset;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
|
.edit-site-layout {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-height: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body.js:not(.is-fullscreen-mode) {
|
body.js:not(.is-fullscreen-mode) {
|
||||||
|
@ -30,11 +36,7 @@ body.js:not(.is-fullscreen-mode) {
|
||||||
min-height: calc(100vh - #{$admin-bar-height});
|
min-height: calc(100vh - #{$admin-bar-height});
|
||||||
|
|
||||||
.edit-site-layout {
|
.edit-site-layout {
|
||||||
flex: 1 1 0;
|
|
||||||
min-height: 100%;
|
|
||||||
height: auto;
|
|
||||||
background: #1d2327;
|
background: #1d2327;
|
||||||
;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue