|
@@ -5,7 +5,6 @@ import { saveAs } from 'utils'
|
|
|
import style from './style.module.scss'
|
|
|
import {
|
|
|
useSelector,
|
|
|
- boardStatus,
|
|
|
useDispatch,
|
|
|
insertBoard,
|
|
|
updateBoard,
|
|
@@ -14,7 +13,7 @@ import {
|
|
|
BoardType
|
|
|
} from "store"
|
|
|
|
|
|
-import type { RefObject } from "react"
|
|
|
+import { RefObject, useEffect, useState } from "react"
|
|
|
import type { Board } from "./board"
|
|
|
|
|
|
type HeaderProps = {
|
|
@@ -22,8 +21,9 @@ type HeaderProps = {
|
|
|
type: BoardType
|
|
|
}
|
|
|
const Header = ({ board, type }: HeaderProps) => {
|
|
|
+ const [backDisabled, setBackDisabled] = useState(true)
|
|
|
+ const [forwardDisabled, setForwradDisabled] = useState(true)
|
|
|
const path = usePathData()
|
|
|
- const status = useSelector(boardStatus)
|
|
|
const current = useSelector(currentBoard)
|
|
|
const dispatch = useDispatch()
|
|
|
const navigate = useNavigate()
|
|
@@ -45,6 +45,19 @@ const Header = ({ board, type }: HeaderProps) => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ useEffect(() => {
|
|
|
+ const boardRef = board.current
|
|
|
+ if (boardRef) {
|
|
|
+ boardRef.bus.on('backDisabled', setBackDisabled)
|
|
|
+ boardRef.bus.on('forwardDisabled', setForwradDisabled)
|
|
|
+
|
|
|
+ return () => {
|
|
|
+ boardRef.bus.off('backDisabled', setBackDisabled)
|
|
|
+ boardRef.bus.off('forwardDisabled', setForwradDisabled)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, [board])
|
|
|
+
|
|
|
return (
|
|
|
<>
|
|
|
<div className={style['df-header-left']}>
|
|
@@ -59,12 +72,12 @@ const Header = ({ board, type }: HeaderProps) => {
|
|
|
<div className={style['df-header-right']}>
|
|
|
<div className={style['df-header-action']}>
|
|
|
<ArrowLeftOutlined
|
|
|
- className={!status.canBack ? 'disabled': 'icon'}
|
|
|
- onClick={() => dispatch({ type: 'board/backoff' })}
|
|
|
+ className={backDisabled ? 'disabled': 'icon'}
|
|
|
+ onClick={() => board.current?.back()}
|
|
|
/>
|
|
|
<ArrowRightOutlined
|
|
|
- className={!status.canForward ? 'disabled': 'icon'}
|
|
|
- onClick={() => dispatch({ type: 'board/forward' })}
|
|
|
+ className={forwardDisabled ? 'disabled': 'icon'}
|
|
|
+ onClick={() => board.current?.forward()}
|
|
|
/>
|
|
|
</div>
|
|
|
<Button type="primary" size="middle" onClick={save}>保存</Button>
|