Refactored menu buttons.

This commit is contained in:
Mike Cao 2020-09-20 21:31:53 -07:00
parent 92d1fddf8b
commit 6319a8c6e0
13 changed files with 114 additions and 119 deletions

View File

@ -15,6 +15,7 @@ export default function DropDown({
}) { }) {
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const ref = useRef(); const ref = useRef();
const selectedOption = options.find(e => e.value === value);
function handleShowMenu() { function handleShowMenu() {
setShowMenu(state => !state); setShowMenu(state => !state);
@ -40,7 +41,13 @@ export default function DropDown({
<Icon icon={<Chevron />} className={styles.icon} size="small" /> <Icon icon={<Chevron />} className={styles.icon} size="small" />
</div> </div>
{showMenu && ( {showMenu && (
<Menu className={menuClassName} options={options} onSelect={handleSelect} float="bottom" /> <Menu
className={menuClassName}
options={options}
selectedOption={selectedOption}
onSelect={handleSelect}
float="bottom"
/>
)} )}
</div> </div>
); );

View File

@ -33,7 +33,8 @@ export default function Menu({
<div <div
key={value} key={value}
className={classNames(styles.option, optionClassName, customClassName, { className={classNames(styles.option, optionClassName, customClassName, {
[selectedClassName]: selectedOption === value, [selectedClassName]: selectedOption === option,
[styles.selected]: selectedOption === option,
[styles.divider]: divider, [styles.divider]: divider,
})} })}
onClick={e => onSelect(value, e)} onClick={e => onSelect(value, e)}

View File

@ -44,3 +44,7 @@
.divider { .divider {
border-top: 1px solid var(--gray300); border-top: 1px solid var(--gray300);
} }
.selected {
font-weight: 600;
}

View File

@ -0,0 +1,58 @@
import React, { useState, useRef } from 'react';
import classNames from 'classnames';
import Menu from 'components/common/Menu';
import Button from 'components/common/Button';
import useDocumentClick from 'hooks/useDocumentClick';
import styles from './MenuButton.module.css';
export default function MenuButton({
icon,
value,
options,
menuPosition = 'bottom',
menuAlign = 'right',
onSelect,
renderValue,
}) {
const [showMenu, setShowMenu] = useState(false);
const ref = useRef();
const selectedOption = options.find(e => e.value === value);
function handleSelect(value) {
onSelect(value);
setShowMenu(false);
}
function toggleMenu() {
setShowMenu(state => !state);
}
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return (
<div className={styles.container} ref={ref}>
<Button
icon={icon}
className={classNames({ [styles.open]: showMenu })}
onClick={toggleMenu}
variant="light"
>
<div className={styles.text}>{renderValue ? renderValue(selectedOption) : value}</div>
</Button>
{showMenu && (
<Menu
className={styles.menu}
options={options}
selectedOption={selectedOption}
onSelect={handleSelect}
float={menuPosition}
align={menuAlign}
/>
)}
</div>
);
}

View File

@ -1,25 +0,0 @@
.container {
display: flex;
position: relative;
cursor: pointer;
}
.username {
border-bottom: 1px solid var(--gray500);
}
.username:hover {
background: var(--gray50);
}
.menu {
z-index: 100;
}
.open {
background: var(--gray200);
}
.open:hover {
background: var(--gray200);
}

View File

@ -3,10 +3,10 @@ import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import classNames from 'classnames'; import classNames from 'classnames';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import UserButton from 'components/common/UserButton';
import Icon from 'components/common/Icon'; import Icon from 'components/common/Icon';
import LanguageButton from 'components/settings/LanguageButton'; import LanguageButton from 'components/settings/LanguageButton';
import ThemeButton from 'components/settings/ThemeButton'; import ThemeButton from 'components/settings/ThemeButton';
import UserButton from 'components/settings/UserButton';
import Logo from 'assets/logo.svg'; import Logo from 'assets/logo.svg';
import styles from './Header.module.css'; import styles from './Header.module.css';

View File

@ -1,35 +1,17 @@
import React, { useState, useRef } from 'react'; import React from 'react';
import classNames from 'classnames';
import Head from 'next/head'; import Head from 'next/head';
import Menu from 'components/common/Menu';
import Button from 'components/common/Button';
import { menuOptions } from 'lib/lang'; import { menuOptions } from 'lib/lang';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useDocumentClick from 'hooks/useDocumentClick'; import MenuButton from 'components/common/MenuButton';
import Globe from 'assets/globe.svg'; import Globe from 'assets/globe.svg';
import styles from './LanguageButton.module.css';
export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) { export default function LanguageButton() {
const [showMenu, setShowMenu] = useState(false);
const [locale, setLocale] = useLocale(); const [locale, setLocale] = useLocale();
const ref = useRef();
const selectedLocale = menuOptions.find(e => e.value === locale)?.display;
function handleSelect(value) { function handleSelect(value) {
setLocale(value); setLocale(value);
setShowMenu(false);
} }
function toggleMenu() {
setShowMenu(state => !state);
}
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return ( return (
<> <>
<Head> <Head>
@ -46,25 +28,13 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l
/> />
)} )}
</Head> </Head>
<div ref={ref} className={styles.container}> <MenuButton
<Button
icon={<Globe />} icon={<Globe />}
className={classNames({ [styles.open]: showMenu })}
onClick={toggleMenu}
variant="light"
>
<div className={styles.text}>{selectedLocale}</div>
</Button>
{showMenu && (
<Menu
className={styles.menu}
options={menuOptions} options={menuOptions}
value={locale}
renderValue={option => option?.display}
onSelect={handleSelect} onSelect={handleSelect}
float={menuPosition}
align={menuAlign}
/> />
)}
</div>
</> </>
); );
} }

View File

@ -13,12 +13,12 @@ export default function ThemeButton() {
const transitions = useTransition(theme, theme => theme, { const transitions = useTransition(theme, theme => theme, {
from: { from: {
opacity: 0, opacity: 0,
transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`, transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`,
}, },
enter: { opacity: 1, transform: 'translateY(0px) scale(1)' }, enter: { opacity: 1, transform: 'translateY(0px) scale(1)' },
leave: { leave: {
opacity: 0, opacity: 0,
transform: `translateY(${theme === 'light' ? '20px' : '-20px'}) scale(0.5)`, transform: `translateY(${theme === 'light' ? '-20px' : '20px'}) scale(0.5)`,
}, },
}); });

View File

@ -1,20 +1,15 @@
import React, { useState, useRef } from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Menu from './Menu'; import MenuButton from 'components/common/MenuButton';
import Icon from './Icon'; import Icon from 'components/common/Icon';
import Button from './Button';
import useDocumentClick from 'hooks/useDocumentClick';
import User from 'assets/user.svg'; import User from 'assets/user.svg';
import Chevron from 'assets/chevron-down.svg'; import Chevron from 'assets/chevron-down.svg';
import styles from './UserButton.module.css'; import styles from './UserButton.module.css';
import classNames from 'classnames';
export default function UserButton() { export default function UserButton() {
const [showMenu, setShowMenu] = useState(false);
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
const ref = useRef();
const router = useRouter(); const router = useRouter();
const menuOptions = [ const menuOptions = [
@ -34,8 +29,6 @@ export default function UserButton() {
]; ];
function handleSelect(value) { function handleSelect(value) {
setShowMenu(false);
if (value === 'logout') { if (value === 'logout') {
router.push('/logout'); router.push('/logout');
} else if (value === 'profile') { } else if (value === 'profile') {
@ -43,32 +36,12 @@ export default function UserButton() {
} }
} }
useDocumentClick(e => {
if (!ref.current.contains(e.target)) {
setShowMenu(false);
}
});
return ( return (
<div ref={ref} className={styles.container}> <MenuButton
<Button icon={<Icon icon={<User />} size="large" />}
icon={<User />} value={<Icon icon={<Chevron />} size="small" />}
className={classNames({ [styles.open]: showMenu })}
onClick={() => setShowMenu(state => !state)}
size="large"
variant="light"
>
<Icon icon={<Chevron />} size="small" />
</Button>
{showMenu && (
<Menu
className={styles.menu}
options={menuOptions} options={menuOptions}
onSelect={handleSelect} onSelect={handleSelect}
float="bottom"
align="right"
/> />
)}
</div>
); );
} }

View File

@ -0,0 +1,7 @@
.username {
border-bottom: 1px solid var(--gray500);
}
.username:hover {
background: var(--gray50);
}

View File

@ -44,18 +44,18 @@ export const dateLocales = {
}; };
export const menuOptions = [ export const menuOptions = [
{ label: 'English', value: 'en-US', display: 'EN' }, { label: 'English', value: 'en-US', display: 'en' },
{ label: '中文', value: 'zh-CN', display: 'CN' }, { label: '中文', value: 'zh-CN', display: 'cn' },
{ label: 'Dansk', value: 'da-DK', display: 'DA' }, { label: 'Dansk', value: 'da-DK', display: 'da' },
{ label: 'Deutsch', value: 'de-DE', display: 'DE' }, { label: 'Deutsch', value: 'de-DE', display: 'de' },
{ label: 'Español', value: 'es-MX', display: 'ES' }, { label: 'Español', value: 'es-MX', display: 'es' },
{ label: 'Français', value: 'fr-FR', display: 'FR' }, { label: 'Français', value: 'fr-FR', display: 'fr' },
{ label: '日本語', value: 'ja-JP', display: 'JA' }, { label: '日本語', value: 'ja-JP', display: 'ja' },
{ label: 'Монгол', value: 'mn-MN', display: 'MN' }, { label: 'Монгол', value: 'mn-MN', display: 'mn' },
{ label: 'Nederlands', value: 'nl-NL', display: 'NL' }, { label: 'Nederlands', value: 'nl-NL', display: 'nl' },
{ label: 'Русский', value: 'ru-RU', display: 'RU' }, { label: 'Русский', value: 'ru-RU', display: 'ru' },
{ label: 'Svenska', value: 'sv-SE', display: 'SV' }, { label: 'Svenska', value: 'sv-SE', display: 'sv' },
{ label: 'Turkish', value: 'tr-TR', display: 'TR' }, { label: 'Turkish', value: 'tr-TR', display: 'tr' },
]; ];
export function dateFormat(date, str, locale) { export function dateFormat(date, str, locale) {

View File

@ -1,6 +1,6 @@
{ {
"name": "umami", "name": "umami",
"version": "0.45.0", "version": "0.46.0",
"description": "A simple, fast, website analytics alternative to Google Analytics. ", "description": "A simple, fast, website analytics alternative to Google Analytics. ",
"author": "Mike Cao <mike@mikecao.com>", "author": "Mike Cao <mike@mikecao.com>",
"license": "MIT", "license": "MIT",