diff --git a/ui/component/buttonNavigation/index.js b/ui/component/buttonNavigation/index.js new file mode 100644 index 000000000..9633b952d --- /dev/null +++ b/ui/component/buttonNavigation/index.js @@ -0,0 +1,3 @@ +import ButtonNavigation from './view'; + +export default ButtonNavigation; diff --git a/ui/component/buttonNavigation/view.jsx b/ui/component/buttonNavigation/view.jsx new file mode 100644 index 000000000..21411887a --- /dev/null +++ b/ui/component/buttonNavigation/view.jsx @@ -0,0 +1,67 @@ +// @flow +import React, { useState, useCallback } from 'react'; +import * as ICONS from 'constants/icons'; +import Button from 'component/button'; + +type Props = { + isBackward: boolean, + history: { + entries: { key: string, title: string }[], + go: number => void, + goBack: () => void, + goForward: () => void, + index: number, + length: number, + location: { pathname: string }, + push: string => void, + }, +}; + +const ButtonNavigation = (props: Props) => { + const { isBackward, history } = props; + const [showHistory, setShowHistory] = useState(false); + + const makeItem = useCallback( + (entry, index) => { + const goArg = index - history.index; + console.log(`index: ${index}, currentIndex: ${history.index}, goArg: ${goArg}, title: ${entry.title}`); + return ( +
  • { + setShowHistory(!showHistory); + history.go(goArg); + }} + > + {entry.title} +
  • + ); + }, + [history, showHistory] + ); + + return ( +
    +
    + ); +}; +export default ButtonNavigation; diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index 343167754..826ef0aac 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -11,6 +11,7 @@ import WunderBar from 'component/wunderbar'; import Icon from 'component/common/icon'; import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'; import Tooltip from 'component/common/tooltip'; +import ButtonNavigation from 'component/buttonNavigation'; // @if TARGET='app' import { IS_MAC } from 'component/app/view'; // @endif @@ -18,7 +19,15 @@ import { IS_MAC } from 'component/app/view'; type Props = { balance: string, roundedBalance: number, - history: { push: string => void, goBack: () => void, goForward: () => void, location: { pathname: string } }, + history: { + entities: {}[], + goBack: () => void, + goForward: () => void, + index: number, + length: number, + location: { pathname: string }, + push: string => void, + }, currentTheme: string, automaticDarkModeEnabled: boolean, setClientSetting: (string, boolean | string) => void, @@ -105,13 +114,7 @@ const Header = (props: Props) => { {/* @if TARGET='app' */} {!authHeader && (
    -