Skip to content
Permalink
Browse files

feat(wallet): add channels menu dropdown

Address #1944
  • Loading branch information...
mrfelton committed Apr 4, 2019
1 parent 1c546e0 commit de7cc06d2b20db5e81c992d59bdcd585c2789373
Showing with 57 additions and 12 deletions.
  1. +57 −12 renderer/components/Wallet/WalletMenu.js
@@ -1,8 +1,12 @@
import React from 'react'
import React, { useState, useRef } from 'react'
import { useOnClickOutside, useOnKeydown } from 'hooks'
import PropTypes from 'prop-types'
import { Flex } from 'rebass'
import { Box, Flex } from 'rebass'
import styled from 'styled-components'
import Settings from 'containers/Settings'
import ChannelsMenu from 'containers/Channels/ChannelsMenu'
import AngleUp from 'components/Icon/AngleUp'
import AngleDown from 'components/Icon/AngleDown'
import { Text } from 'components/UI'
import { FormattedMessage } from 'react-intl'
import messages from './messages'
@@ -24,18 +28,59 @@ MenuItem.propTypes = {
children: PropTypes.node.isRequired,
}

const WalletMenu = ({ openModal }) => (
<Flex as="section">
<MenuItem onClick={() => openModal('CHANNELS')}>
<FormattedMessage {...messages.menu_item_channels} />
</MenuItem>
<MenuItem onClick={() => openModal('AUTOPAY')}>
<FormattedMessage {...messages.menu_item_autopay} />
</MenuItem>
<Settings ml={4} />
</Flex>
const ChannelsMenuItem = () => {
// Create a ref that we add to the element for which we want to detect outside clicks.
const ref = useRef(null)

// State for our modal.
const [isChannelsOpen, setIsChannelsOpen] = useState(false)

// Create a toggle method that we will use for the menu button.
const toggleChannelsMenu = () => setIsChannelsOpen(!isChannelsOpen)

// Close the menu if the user clicks outside the ref element.
useOnClickOutside(ref, () => setIsChannelsOpen(false))

// Close the menu if the escape key is pressed.
useOnKeydown('Escape', () => setIsChannelsOpen(false))

return (
<Box ref={ref} css={{ position: 'relative' }}>
<MenuItem onClick={toggleChannelsMenu}>
<Flex alignItems="center">
<Box mr={1}>
<FormattedMessage {...messages.menu_item_channels} />
</Box>
{isChannelsOpen ? <AngleUp width="0.6em" /> : <AngleDown width="0.6em" />}
</Flex>
</MenuItem>
{isChannelsOpen && (
<ChannelsMenu css={{ position: 'absolute', right: 0, 'z-index': '40' }} width={265} />
)}
</Box>
)
}

const AutopayMenuItem = ({ openModal }) => (
<MenuItem onClick={() => openModal('AUTOPAY')}>
<FormattedMessage {...messages.menu_item_autopay} />
</MenuItem>
)

AutopayMenuItem.propTypes = {
openModal: PropTypes.func.isRequired,
}

const WalletMenu = ({ openModal }) => {
return (
<Flex as="section">
<ChannelsMenuItem />
<AutopayMenuItem openModal={openModal} />
<Settings ml={4} />
</Flex>
)
}

WalletMenu.propTypes = {
openModal: PropTypes.func.isRequired,
}

0 comments on commit de7cc06

Please sign in to comment.
You can’t perform that action at this time.