owncast/web/components/common/UserDropdown/UserDropdown.tsx
Matthew Heller 6e54ec7695
Antd updates (#2194)
* Fix antd Modal.visible warning by using updated attribute name 'open'.

* Update more attributes (onVisibleChange => onOpenChange, defaultVisible => defaultOpen) to fix browser console warnings.

* Update ModalProps property from 'visible' to 'open' to match the change in antd.

* Update variable names to match the antd change from 'visible' to 'open'.

* Inline this for the linter.

* One more visible => open reference.
2022-10-10 17:11:29 -07:00

105 lines
3 KiB
TypeScript

import { Menu, Dropdown, Button, Space } from 'antd';
import {
CaretDownOutlined,
EditOutlined,
LockOutlined,
MessageOutlined,
UserOutlined,
} from '@ant-design/icons';
import { useRecoilState, useRecoilValue } from 'recoil';
import { FC, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import dynamic from 'next/dynamic';
import {
chatVisibleToggleAtom,
currentUserAtom,
appStateAtom,
} from '../../stores/ClientConfigStore';
import styles from './UserDropdown.module.scss';
import { AppStateOptions } from '../../stores/application-state';
// Lazy loaded components
const Modal = dynamic(() => import('../../ui/Modal/Modal').then(mod => mod.Modal));
const NameChangeModal = dynamic(() =>
import('../../modals/NameChangeModal/NameChangeModal').then(mod => mod.NameChangeModal),
);
const AuthModal = dynamic(() =>
import('../../modals/AuthModal/AuthModal').then(mod => mod.AuthModal),
);
export type UserDropdownProps = {
username?: string;
};
export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername = undefined }) => {
const [showNameChangeModal, setShowNameChangeModal] = useState<boolean>(false);
const [showAuthModal, setShowAuthModal] = useState<boolean>(false);
const [chatToggleVisible, setChatToggleVisible] = useRecoilState(chatVisibleToggleAtom);
const appState = useRecoilValue<AppStateOptions>(appStateAtom);
const toggleChatVisibility = () => {
setChatToggleVisible(!chatToggleVisible);
};
const handleChangeName = () => {
setShowNameChangeModal(true);
};
// Register keyboard shortcut for the space bar to toggle playback
useHotkeys(
'c',
toggleChatVisibility,
{
enableOnContentEditable: false,
},
[chatToggleVisible],
);
const currentUser = useRecoilValue(currentUserAtom);
if (!currentUser) {
return null;
}
const { displayName } = currentUser;
const username = defaultUsername || displayName;
const menu = (
<Menu>
<Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>
Change name
</Menu.Item>
<Menu.Item key="1" icon={<LockOutlined />} onClick={() => setShowAuthModal(true)}>
Authenticate
</Menu.Item>
{appState.chatAvailable && (
<Menu.Item key="3" icon={<MessageOutlined />} onClick={() => toggleChatVisibility()}>
Toggle chat
</Menu.Item>
)}
</Menu>
);
return (
<div className={`${styles.root}`}>
<Dropdown overlay={menu} trigger={['click']}>
<Button type="primary" icon={<UserOutlined style={{ marginRight: '.5rem' }} />}>
<Space>
{username}
<CaretDownOutlined />
</Space>
</Button>
</Dropdown>
<Modal
title="Change Chat Display Name"
open={showNameChangeModal}
handleCancel={() => setShowNameChangeModal(false)}
>
<NameChangeModal />
</Modal>
<Modal title="Authenticate" open={showAuthModal} handleCancel={() => setShowAuthModal(false)}>
<AuthModal />
</Modal>
</div>
);
};