Skip to content
Permalink
Browse files

feat(ui): implement new settings menu design

  • Loading branch information...
mrfelton committed May 23, 2019
1 parent ab23709 commit b4500315f9ea5741b099bf722a0010323bd98894

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

@@ -1,114 +1,119 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Box, Flex } from 'rebass'
import styled from 'styled-components'
import { StatusIndicator, Text } from 'components/UI'
import { withRouter } from 'react-router-dom'
import { FormattedMessage } from 'react-intl'
import { getLanguageName } from '@zap/i18n'
import { Flex } from 'rebass'
import { Dropmenu, StatusIndicator } from 'components/UI'
import { WalletName } from 'components/Util'
import AngleUp from 'components/Icon/AngleUp'
import AngleDown from 'components/Icon/AngleDown'
import Menu from './Menu'
import Fiat from './Fiat'
import Locale from './Locale'
import Theme from './Theme'
import Logout from 'components/Icon/Logout'
import Settings from 'components/Icon/Settings'
import messages from './messages'

const StyledText = styled(Text)`
cursor: pointer;
transition: all 0.25s;
&:hover {
opacity: 0.6;
}
`

class SettingsMenu extends React.Component {
menuRef = React.createRef()
buttonRef = React.createRef()

componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside)
}

componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside)
}

setButtonRef = node => {
this.buttonRef = node
}

setWrapperRef = node => {
this.menuRef = node
}

handleButtonClick = event => {
const { isSettingsMenuOpen, closeSettingsMenu, openSettingsMenu } = this.props
if (this.buttonRef && this.buttonRef.contains(event.target)) {
isSettingsMenuOpen ? closeSettingsMenu() : openSettingsMenu()
const buildLocaleMenu = localeProps => {
const { locales, setLocale, currentLocale } = localeProps
return Object.keys(locales).map(lang => {
return {
id: `locale-${lang}`,
title: getLanguageName(lang),
onClick: () => setLocale(lang),
isSelected: currentLocale === lang,
hasIndent: true,
}
}
})
}

handleClickOutside = event => {
const { isSettingsMenuOpen, closeSettingsMenu } = this.props
if (
isSettingsMenuOpen &&
this.menuRef &&
!this.menuRef.contains(event.target) &&
(this.buttonRef && !this.buttonRef.contains(event.target))
) {
closeSettingsMenu()
const buildThemeMenu = themeProps => {
const { themes, setTheme, currentTheme } = themeProps
return Object.keys(themes).map(theme => {
return {
id: `currency-${theme}`,
title: <FormattedMessage {...messages[`theme_option_${theme}`]} />,
onClick: () => setTheme(theme),
isSelected: currentTheme === theme,
hasIndent: true,
}
}
})
}

renderSettingsMenu = () => {
const {
activeSubMenu,
fiatProps,
localeProps,
themeProps,
setActiveSubMenu,
openModal,
} = this.props
switch (activeSubMenu) {
case 'fiat':
return <Fiat {...fiatProps} />
case 'locale':
return <Locale {...localeProps} />
case 'theme':
return <Theme {...themeProps} />
default:
return <Menu openModal={openModal} setActiveSubMenu={setActiveSubMenu} />
const buildCurrencyMenu = fiatProps => {
const { fiatTickers, setFiatTicker, fiatTicker } = fiatProps
return fiatTickers.map(currency => {
return {
id: `currency-${currency}`,
title: currency,
onClick: () => setFiatTicker(currency),
isSelected: fiatTicker === currency,
hasIndent: true,
}
}
})
}

const SettingsMenu = ({
localeProps,
themeProps,
fiatProps,
activeWalletSettings,
openModal,
history,
...rest
}) => {
const logout = () => history.push('/logout')
const openSettings = () => openModal('SETTINGS_FORM')

render() {
const { activeWalletSettings, isSettingsMenuOpen, ...rest } = this.props
const items = [
{
id: 'logout',
title: (
<FormattedMessage
{...messages[activeWalletSettings.type === 'local' ? 'logout_title' : 'disconnect_title']}
/>
),
icon: <Logout />,
onClick: logout,
},
{
id: 'settings',
title: <FormattedMessage {...messages.settings_title} />,
icon: <Settings />,
onClick: openSettings,
},
{ id: 'bar1', type: 'bar' },
{
id: 'locale',
title: <FormattedMessage {...messages.locale_title} />,
submenu: buildLocaleMenu(localeProps),
},
{
id: 'theme',
title: <FormattedMessage {...messages.theme_title} />,
submenu: buildThemeMenu(themeProps),
},
{
id: 'currency',
title: <FormattedMessage {...messages.currency_title} />,
submenu: buildCurrencyMenu(fiatProps),
},
]

return (
<Box {...rest}>
<Flex
ref={this.setButtonRef}
alignItems="center"
css={{ cursor: 'pointer' }}
onClick={this.handleButtonClick}
>
<StatusIndicator mr={2} variant="online" />
<Flex alignItems="center">
<StyledText mr={1} textAlign="left">
<WalletName wallet={activeWalletSettings} />
</StyledText>
{isSettingsMenuOpen ? <AngleUp width="0.6em" /> : <AngleDown width="0.6em" />}
</Flex>
</Flex>
{isSettingsMenuOpen && <Box ref={this.setWrapperRef}>{this.renderSettingsMenu()}</Box>}
</Box>
)
}
return (
<Dropmenu items={items} justify="right" {...rest}>
<Flex alignItems="center">
<StatusIndicator mr={2} variant="online" />
<WalletName wallet={activeWalletSettings} />
</Flex>
</Dropmenu>
)
}

SettingsMenu.propTypes = {
activeSubMenu: PropTypes.string,
activeWalletSettings: PropTypes.object,
closeSettingsMenu: PropTypes.func.isRequired,
fiatProps: PropTypes.object.isRequired,
history: PropTypes.shape({
push: PropTypes.func.isRequired,
}),
isSettingsMenuOpen: PropTypes.bool,
localeProps: PropTypes.object.isRequired,
openModal: PropTypes.func.isRequired,
@@ -117,4 +122,4 @@ SettingsMenu.propTypes = {
themeProps: PropTypes.object.isRequired,
}

export default SettingsMenu
export default withRouter(SettingsMenu)

0 comments on commit b450031

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