123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- import { FC } from 'react';
- import { Button, Dropdown, Menu } from 'antd';
- import classNames from 'classnames';
- import dynamic from 'next/dynamic';
- import styles from './ActionButtonMenu.module.scss';
- import { ExternalAction } from '../../../interfaces/external-action';
- // Lazy loaded components
- const EllipsisOutlined = dynamic(() => import('@ant-design/icons/EllipsisOutlined'), {
- ssr: false,
- });
- const HeartOutlined = dynamic(() => import('@ant-design/icons/HeartOutlined'), {
- ssr: false,
- });
- const BellOutlined = dynamic(() => import('@ant-design/icons/BellOutlined'), {
- ssr: false,
- });
- const NOTIFY_KEY = 'notify';
- const FOLLOW_KEY = 'follow';
- export type ActionButtonMenuProps = {
- actions: ExternalAction[];
- showFollowItem?: boolean;
- showNotifyItem?: boolean;
- externalActionSelected: (action: ExternalAction) => void;
- notifyItemSelected: () => void;
- followItemSelected: () => void;
- className?: string;
- };
- export const ActionButtonMenu: FC<ActionButtonMenuProps> = ({
- actions,
- externalActionSelected,
- notifyItemSelected,
- followItemSelected,
- showFollowItem,
- showNotifyItem,
- className,
- }) => {
- const onMenuClick = a => {
- if (a.key === NOTIFY_KEY) {
- notifyItemSelected();
- return;
- }
- if (a.key === FOLLOW_KEY) {
- followItemSelected();
- return;
- }
- const action = actions.find(x => x.url === a.key);
- externalActionSelected(action);
- };
- const items = actions.map(action => ({
- key: action.url,
- label: (
- <span className={styles.item}>
- {action.icon && <img className={styles.icon} src={action.icon} alt={action.title} />}{' '}
- {action.title}
- </span>
- ),
- }));
- if (showFollowItem) {
- items.unshift({
- key: FOLLOW_KEY,
- label: (
- <span className={styles.item}>
- <HeartOutlined className={styles.icon} /> Follow this stream
- </span>
- ),
- });
- }
- if (showNotifyItem) {
- items.unshift({
- key: NOTIFY_KEY,
- label: (
- <span className={styles.item}>
- <BellOutlined className={styles.icon} />
- Notify when live
- </span>
- ),
- });
- }
- const menu = <Menu items={items} onClick={onMenuClick} />;
- const dropdownClasses = classNames([styles.menu, className]);
- return (
- <Dropdown
- overlay={menu}
- placement="bottomRight"
- trigger={['click']}
- className={dropdownClasses}
- >
- <div className={styles.buttonWrap}>
- <Button
- type="default"
- onClick={e => e.preventDefault()}
- size="large"
- icon={<EllipsisOutlined size={6} style={{ rotate: '90deg' }} />}
- />
- </div>
- </Dropdown>
- );
- };
|