Skip to content

Commit

Permalink
ui: Remember sidebar collapsed state (#431)
Browse files Browse the repository at this point in the history
  • Loading branch information
breezewish authored Apr 27, 2020
1 parent 1037e25 commit 485f61a
Show file tree
Hide file tree
Showing 13 changed files with 214 additions and 206 deletions.
2 changes: 1 addition & 1 deletion ui/.github_release_version
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# This file contains a version number which will be used to release assets to
# GitHub. To trigger a new asset release, simply increase this version number.
20200424_2
20200427_1
2 changes: 1 addition & 1 deletion ui/.package_release_version
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# This file contains a version number which will be used to release packages.
# To trigger a new package release, simply increase this version number.
0.0.4
0.0.5
6 changes: 3 additions & 3 deletions ui/dashboardApp/layout/main/Sider/Banner.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const toggleWidth = 40
const toggleHeight = 50

export default function ToggleBanner({
width,
fullWidth,
collapsedWidth,
collapsed,
onToggle,
Expand All @@ -22,7 +22,7 @@ export default function ToggleBanner({
height: collapsed ? toggleHeight : bannerSize.height || 0,
})
const transButton = useSpring({
left: collapsed ? 0 : width - toggleWidth,
left: collapsed ? 0 : fullWidth - toggleWidth,
width: collapsed ? collapsedWidth : toggleWidth,
})

Expand All @@ -35,7 +35,7 @@ export default function ToggleBanner({
<div
ref={bannerRef}
className={styles.bannerLeft}
style={{ width: width - toggleWidth }}
style={{ width: fullWidth - toggleWidth }}
>
<Flexbox flexDirection="row">
<div className={styles.bannerLogo}>
Expand Down
13 changes: 7 additions & 6 deletions ui/dashboardApp/layout/main/Sider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ function useCurrentLogin() {

export default function Sider({
registry,
width,
fullWidth,
defaultCollapsed,
collapsed,
collapsedWidth,
onToggle,
Expand Down Expand Up @@ -120,24 +121,25 @@ export default function Sider({
]

const transSider = useSpring({
width: collapsed ? collapsedWidth : width,
width: collapsed ? collapsedWidth : fullWidth,
})

return (
<animated.div style={transSider}>
<Layout.Sider
className={styles.sider}
width={width}
width={fullWidth}
trigger={null}
collapsible
collapsed={collapsed}
collapsedWidth={width}
collapsedWidth={fullWidth}
defaultCollapsed={defaultCollapsed}
theme="light"
>
<Banner
collapsed={collapsed}
onToggle={onToggle}
width={width}
fullWidth={fullWidth}
collapsedWidth={collapsedWidth}
/>
<TrailMenu
Expand All @@ -146,7 +148,6 @@ export default function Sider({
mode="inline"
selectedKeys={[activeAppId]}
style={{ flexGrow: 1 }}
defaultOpenKeys={['debug']}
/>
<TrailMenu
items={extraMenuItems}
Expand Down
18 changes: 13 additions & 5 deletions ui/dashboardApp/layout/main/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState, useCallback, useEffect } from 'react'
import { Root } from '@lib/components'
import { useToggle } from '@umijs/hooks'
import { useLocalStorageState } from '@umijs/hooks'
import { HashRouter as Router } from 'react-router-dom'
import { useSpring, animated } from 'react-spring'

Expand Down Expand Up @@ -42,15 +42,18 @@ const useContentLeftOffset = (collapsed) => {
}

export default function App({ registry }) {
const { state: collapsed, toggle: toggleCollapsed } = useToggle()
const [collapsed, setCollapsed] = useLocalStorageState(
'layout.sider.collapsed',
false
)
const [defaultCollapsed] = useState(collapsed)
const {
contentLeftOffset,
onAnimationStart,
onAnimationFrame,
} = useContentLeftOffset(collapsed)
const transContentBack = useSpring({
x: collapsed ? collapsedContentOffset : 0,
from: { x: 0 },
onStart: onAnimationStart,
onFrame: onAnimationFrame,
})
Expand All @@ -60,14 +63,19 @@ export default function App({ registry }) {
delay: 100,
})

const handleToggle = useCallback(() => {
setCollapsed((c) => !c)
}, [setCollapsed])

return (
<Root>
<Router>
<animated.div className={styles.container} style={transContainer}>
<Sider
registry={registry}
width={siderWidth}
onToggle={() => toggleCollapsed()}
fullWidth={siderWidth}
onToggle={handleToggle}
defaultCollapsed={defaultCollapsed}
collapsed={collapsed}
collapsedWidth={siderCollapsedWidth}
animationDelay={0}
Expand Down
Loading

0 comments on commit 485f61a

Please sign in to comment.