Differential D6864 Diff 23268 web/chat/thread-menu.react.js

Changeset View

Standalone View

web/chat/thread-menu.react.js

Show All 25 Lines
} from 'lib/utils/action-utils.js';		} from 'lib/utils/action-utils.js';

import css from './thread-menu.css';		import css from './thread-menu.css';
import MenuItem from '../components/menu-item.react.js';		import MenuItem from '../components/menu-item.react.js';
import Menu from '../components/menu.react.js';		import Menu from '../components/menu.react.js';
import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react.js';		import SidebarPromoteModal from '../modals/chat/sidebar-promote-modal.react.js';
import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react.js';		import ConfirmLeaveThreadModal from '../modals/threads/confirm-leave-thread-modal.react.js';
import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react.js';		import ComposeSubchannelModal from '../modals/threads/create/compose-subchannel-modal.react.js';
		import ThreadSettingsMediaGalleryModal from '../modals/threads/gallery/thread-settings-media-gallery.react.js';
import ThreadMembersModal from '../modals/threads/members/members-modal.react.js';		import ThreadMembersModal from '../modals/threads/members/members-modal.react.js';
import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react.js';		import ThreadNotificationsModal from '../modals/threads/notifications/notifications-modal.react.js';
import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';		import ThreadSettingsModal from '../modals/threads/settings/thread-settings-modal.react.js';
import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react.js';		import SidebarsModal from '../modals/threads/sidebars/sidebars-modal.react.js';
import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react.js';		import SubchannelsModal from '../modals/threads/subchannels/subchannels-modal.react.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';

type ThreadMenuProps = {		type ThreadMenuProps = {
Show All 37 Lines	return (
key="members"		key="members"
text="Members"		text="Members"
icon="users"		icon="users"
onClick={onClickMembers}		onClick={onClickMembers}
/>		/>
);		);
}, [onClickMembers, threadInfo.type]);		}, [onClickMembers, threadInfo.type]);

		const onClickThreadMediaGallery = React.useCallback(
		() =>
		pushModal(
		<ThreadSettingsMediaGalleryModal
		onClose={popModal}
		parentThreadInfo={threadInfo}
		limit={36}
		activeTab="All"
		/>,
		),
		[popModal, pushModal, threadInfo],
		);

		const threadMediaGalleryItem = React.useMemo(
		() => (
		<MenuItem
		key="threadMediaGallery"
		text="Media"
		icon="image-1"
		onClick={onClickThreadMediaGallery}
		/>
		),
		[onClickThreadMediaGallery],
		);

const childThreads = useSelector(		const childThreads = useSelector(
state => childThreadInfos(state)[threadInfo.id],		state => childThreadInfos(state)[threadInfo.id],
);		);

const hasSidebars = React.useMemo(() => {		const hasSidebars = React.useMemo(() => {
return childThreads?.some(		return childThreads?.some(
childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,		childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
);		);
▲ Show 20 Lines • Show All 162 Lines • ▼ Show 20 Lines	function ThreadMenu(props: ThreadMenuProps): React.Node {

const menuItems = React.useMemo(() => {		const menuItems = React.useMemo(() => {
const separator = <hr key="separator" className={css.separator} />;		const separator = <hr key="separator" className={css.separator} />;

const items = [		const items = [
settingsItem,		settingsItem,
notificationsItem,		notificationsItem,
membersItem,		membersItem,
		threadMediaGalleryItem,
sidebarItem,		sidebarItem,
viewSubchannelsItem,		viewSubchannelsItem,
createSubchannelsItem,		createSubchannelsItem,
leaveThreadItem && separator,		leaveThreadItem && separator,
canPromoteSidebar && promoteSidebar,		canPromoteSidebar && promoteSidebar,
leaveThreadItem,		leaveThreadItem,
];		];
return items.filter(Boolean);		return items.filter(Boolean);
}, [		}, [
settingsItem,		settingsItem,
notificationsItem,		notificationsItem,
membersItem,		membersItem,
		threadMediaGalleryItem,
sidebarItem,		sidebarItem,
viewSubchannelsItem,		viewSubchannelsItem,
promoteSidebar,		promoteSidebar,
createSubchannelsItem,		createSubchannelsItem,
leaveThreadItem,		leaveThreadItem,
canPromoteSidebar,		canPromoteSidebar,
]);		]);
const icon = React.useMemo(		const icon = React.useMemo(
() => <SWMansionIcon icon="menu-vertical" size={20} />,		() => <SWMansionIcon icon="menu-vertical" size={20} />,
[],		[],
);		);
return <Menu icon={icon}>{menuItems}</Menu>;		return <Menu icon={icon}>{menuItems}</Menu>;
}		}

export default ThreadMenu;		export default ThreadMenu;