Fix deprecated antd dropdown warnings (#3171)
* Fix deprecated antd dropdown warnings
This commit is contained in:
janWilejan
GitHub
parent
5389554028
commit
e15e2dc47c
@ -1,5 +1,5 @@
|
||||
import { FC } from 'react';
|
||||
import { Button, Dropdown, Menu } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import dynamic from 'next/dynamic';
|
||||
import styles from './ActionButtonMenu.module.scss';
|
||||
@ -41,7 +41,7 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
|
||||
showNotifyItem,
|
||||
className,
|
||||
}) => {
|
||||
const onMenuClick = a => {
|
||||
const onClick = a => {
|
||||
if (a.key === NOTIFY_KEY) {
|
||||
notifyItemSelected();
|
||||
return;
|
||||
@ -87,13 +87,11 @@ export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
|
||||
});
|
||||
}
|
||||
|
||||
const menu = <Menu items={items} onClick={onMenuClick} />;
|
||||
|
||||
const dropdownClasses = classNames([styles.menu, className]);
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
overlay={menu}
|
||||
menu={{ items, onClick }}
|
||||
placement="bottomRight"
|
||||
trigger={['click']}
|
||||
className={dropdownClasses}
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.icon {
|
||||
padding-right: 10px;
|
||||
}
|
||||
@ -1,9 +1,8 @@
|
||||
import { Dropdown, Menu, MenuProps, Space, message, Modal as AntModal } from 'antd';
|
||||
import { Dropdown, MenuProps, Space, message, Modal as AntModal } from 'antd';
|
||||
import { FC, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Modal } from '../../ui/Modal/Modal';
|
||||
import { ChatModerationDetailsModal } from '../ChatModerationDetailsModal/ChatModerationDetailsModal';
|
||||
import styles from './ChatModerationActionMenu.module.scss';
|
||||
import ChatModeration from '../../../services/moderation-service';
|
||||
|
||||
const { confirm } = AntModal;
|
||||
@ -82,53 +81,29 @@ export const ChatModerationActionMenu: FC<ChatModerationActionMenuProps> = ({
|
||||
});
|
||||
};
|
||||
|
||||
const onMenuClick: MenuProps['onClick'] = ({ key }) => {
|
||||
if (key === 'hide-message') {
|
||||
confirmHideMessage();
|
||||
} else if (key === 'ban-user') {
|
||||
confirmBanUser();
|
||||
} else if (key === 'more-info') {
|
||||
setShowUserDetailsModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu
|
||||
onClick={onMenuClick}
|
||||
items={[
|
||||
{
|
||||
label: (
|
||||
<div>
|
||||
<span className={styles.icon}>
|
||||
<EyeInvisibleOutlined />
|
||||
</span>
|
||||
Hide Message
|
||||
</div>
|
||||
),
|
||||
key: 'hide-message',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<div>
|
||||
<span className={styles.icon}>
|
||||
<CloseCircleOutlined />
|
||||
</span>
|
||||
Ban User
|
||||
</div>
|
||||
),
|
||||
key: 'ban-user',
|
||||
},
|
||||
{
|
||||
label: <div>More Info...</div>,
|
||||
key: 'more-info',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
icon: <EyeInvisibleOutlined />,
|
||||
label: 'Hide Message',
|
||||
key: 'hide-message',
|
||||
onClick: confirmHideMessage,
|
||||
},
|
||||
{
|
||||
icon: <CloseCircleOutlined />,
|
||||
label: 'Ban User',
|
||||
key: 'ban-user',
|
||||
onClick: confirmBanUser,
|
||||
},
|
||||
{
|
||||
label: 'More Info...',
|
||||
key: 'more-info',
|
||||
onClick: () => setShowUserDetailsModal(true),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<button type="button" onClick={e => e.preventDefault()}>
|
||||
<Space>
|
||||
<SmallDashOutlined />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Menu, Dropdown, Button } from 'antd';
|
||||
import { MenuProps, Dropdown, Button } from 'antd';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { useRecoilState, useRecoilValue } from 'recoil';
|
||||
@ -145,37 +145,37 @@ export const UserDropdown: FC<UserDropdownProps> = ({
|
||||
|
||||
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>
|
||||
{canShowHideChat && (
|
||||
<Menu.Item
|
||||
key="3"
|
||||
icon={<MessageOutlined />}
|
||||
onClick={() => toggleChatVisibility()}
|
||||
aria-expanded={chatState === ChatState.VISIBLE}
|
||||
className={styles.chatToggle}
|
||||
>
|
||||
{chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat'}
|
||||
</Menu.Item>
|
||||
)}
|
||||
{canShowChatPopup &&
|
||||
(popupWindow ? (
|
||||
<Menu.Item key="4" icon={<ShrinkOutlined />} onClick={closeChatPopup}>
|
||||
Put chat back
|
||||
</Menu.Item>
|
||||
) : (
|
||||
<Menu.Item key="4" icon={<ExpandAltOutlined />} onClick={openChatPopup}>
|
||||
Pop out chat
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const items: MenuProps['items'] = [
|
||||
{
|
||||
key: 0,
|
||||
icon: <EditOutlined />,
|
||||
label: 'Change name',
|
||||
onClick: handleChangeName,
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
icon: <LockOutlined />,
|
||||
label: 'Authenticate',
|
||||
onClick: () => setShowAuthModal(true),
|
||||
},
|
||||
];
|
||||
if (canShowHideChat)
|
||||
items.push({
|
||||
key: 3,
|
||||
'aria-expanded': chatState === ChatState.VISIBLE,
|
||||
className: styles.chatToggle, // TODO why do we hide this button on tablets?
|
||||
icon: <MessageOutlined />,
|
||||
label: chatState === ChatState.VISIBLE ? 'Hide Chat' : 'Show Chat',
|
||||
onClick: toggleChatVisibility,
|
||||
} as MenuProps['items'][0]);
|
||||
if (canShowChatPopup)
|
||||
items.push({
|
||||
key: 4,
|
||||
icon: popupWindow ? <ShrinkOutlined /> : <ExpandAltOutlined />,
|
||||
label: popupWindow ? 'Put chat back' : 'Pop out chat',
|
||||
onClick: popupWindow ? closeChatPopup : openChatPopup,
|
||||
});
|
||||
|
||||
return (
|
||||
<ErrorBoundary
|
||||
@ -189,7 +189,7 @@ export const UserDropdown: FC<UserDropdownProps> = ({
|
||||
)}
|
||||
>
|
||||
<div className={styles.root}>
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<Button id={id} type="primary" icon={<UserOutlined className={styles.userIcon} />}>
|
||||
<span
|
||||
className={classnames([
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useContext, ReactElement } from 'react';
|
||||
import { Row, Col, Typography, Menu, Dropdown, Spin, Alert } from 'antd';
|
||||
import { Row, Col, Typography, MenuProps, Dropdown, Spin, Alert } from 'antd';
|
||||
import { getUnixTime, sub } from 'date-fns';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Chart } from '../../components/admin/Chart';
|
||||
@ -85,22 +85,12 @@ export default function ViewersOverTime() {
|
||||
setTimeWindowStart(times[key]);
|
||||
};
|
||||
|
||||
const menu = (
|
||||
<Menu>
|
||||
{online && streamStart && (
|
||||
<Menu.Item key="0" onClick={onTimeWindowSelect}>
|
||||
{times[0].title}
|
||||
</Menu.Item>
|
||||
)}
|
||||
{times.slice(1).map((time, index) => (
|
||||
// The array is hard coded, so it's safe to use the index as a key.
|
||||
// eslint-disable-next-line react/no-array-index-key
|
||||
<Menu.Item key={index + 1} onClick={onTimeWindowSelect}>
|
||||
{time.title}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu>
|
||||
);
|
||||
const offset: number = online && streamStart ? 0 : 1;
|
||||
const items: MenuProps['items'] = times.slice(offset).map((time, index) => ({
|
||||
key: index + offset,
|
||||
label: time.title,
|
||||
onClick: onTimeWindowSelect,
|
||||
}));
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -142,7 +132,7 @@ export default function ViewersOverTime() {
|
||||
)}
|
||||
|
||||
<Spin spinning={!viewerInfo.length || loadingChart}>
|
||||
<Dropdown overlay={menu} trigger={['click']}>
|
||||
<Dropdown menu={{ items }} trigger={['click']}>
|
||||
<button
|
||||
type="button"
|
||||
style={{ float: 'right', background: 'transparent', border: 'unset' }}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user