Differential D6976 Diff 26831 web/sidebar/community-drawer-item.react.js

Changeset View

Standalone View

web/sidebar/community-drawer-item.react.js

	// @flow			// @flow

	import classnames from 'classnames';			import classnames from 'classnames';
	import * as React from 'react';			import * as React from 'react';

	import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';			import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
	import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';			import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';

	import type { HandlerProps } from './community-drawer-item-handlers.react.js';			import type { HandlerProps } from './community-drawer-item-handlers.react.js';
				import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react.js';
	import css from './community-drawer-item.css';			import css from './community-drawer-item.css';
	import {			import {
	getChildren,			getChildren,
	getExpandButton,			getExpandButton,
	} from './community-drawer-utils.react.js';			} from './community-drawer-utils.react.js';
	import ThreadAvatar from '../components/thread-avatar.react.js';			import ThreadAvatar from '../components/thread-avatar.react.js';
				import type { NavigationTab } from '../types/nav-types.js';
	import { shouldRenderAvatars } from '../utils/avatar-utils.js';			import { shouldRenderAvatars } from '../utils/avatar-utils.js';

	export type DrawerItemProps = {			export type DrawerItemProps = {
	+itemData: CommunityDrawerItemData<string>,			+itemData: CommunityDrawerItemData<string>,
	+toggleExpanded?: (threadID: string) => void,
	+expanded: boolean,
	+paddingLeft: number,			+paddingLeft: number,
	+expandable?: boolean,			+expandable?: boolean,
	+handler: React.ComponentType<HandlerProps>,			+handlerType: NavigationTab,
	};			};

	function CommunityDrawerItem(props: DrawerItemProps): React.Node {			function CommunityDrawerItem(props: DrawerItemProps): React.Node {
	const {			const {
	itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },			itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
	expanded,
	toggleExpanded,
	paddingLeft,			paddingLeft,
	expandable = true,			expandable = true,
	handler: Handler,			handlerType,
	} = props;			} = props;

				const [handler, setHandler] = React.useState({
				onClick: () => {},
				expanded: false,
				toggleExpanded: () => {},
				});

				const Handler = getCommunityDrawerItemHandler(handlerType);

	const children = React.useMemo(			const children = React.useMemo(
	() =>			() =>
	getChildren({			getChildren({
	expanded,			expanded: handler.expanded,
	hasSubchannelsButton,			hasSubchannelsButton,
	itemChildren,			itemChildren,
	paddingLeft,			paddingLeft,
	threadInfo,			threadInfo,
	expandable,			expandable,
	handler: Handler,			handlerType,
	}),			}),
	[			[
	expanded,			handler.expanded,
	hasSubchannelsButton,			hasSubchannelsButton,
	itemChildren,			itemChildren,
	paddingLeft,			paddingLeft,
	threadInfo,			threadInfo,
	expandable,			expandable,
	Handler,			handlerType,
	],			],
	);			);

	const onExpandToggled = React.useCallback(
	() => (toggleExpanded ? toggleExpanded(threadInfo.id) : null),
	[toggleExpanded, threadInfo.id],
	);

	const itemExpandButton = React.useMemo(			const itemExpandButton = React.useMemo(
	() =>			() =>
	getExpandButton({			getExpandButton({
	expandable,			expandable,
	childrenLength: itemChildren.length,			childrenLength: itemChildren.length,
	hasSubchannelsButton,			hasSubchannelsButton,
	onExpandToggled,			onExpandToggled: handler.toggleExpanded,
	expanded,			expanded: handler.expanded,
	}),			}),
	[			[
	expandable,			expandable,
	itemChildren.length,			itemChildren.length,
	hasSubchannelsButton,			hasSubchannelsButton,
	onExpandToggled,			handler.toggleExpanded,
	expanded,			handler.expanded,
	],			],
	);			);

	const [handler, setHandler] = React.useState({
	// eslint-disable-next-line no-unused-vars
	onClick: event => {},
	});

	const { uiName } = useResolvedThreadInfo(threadInfo);			const { uiName } = useResolvedThreadInfo(threadInfo);

	const titleLabel = classnames({			const titleLabel = classnames({
	[css[labelStyle]]: true,			[css[labelStyle]]: true,
	[css.activeTitle]: handler.isActive,			[css.activeTitle]: handler.isActive,
	});			});

	const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);			const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
	Show All 28 Lines

	export type CommunityDrawerItemChatProps = {			export type CommunityDrawerItemChatProps = {
	+itemData: CommunityDrawerItemData<string>,			+itemData: CommunityDrawerItemData<string>,
	+paddingLeft: number,			+paddingLeft: number,
	+expandable?: boolean,			+expandable?: boolean,
	+handler: React.ComponentType<HandlerProps>,			+handler: React.ComponentType<HandlerProps>,
	};			};

	function CommunityDrawerItemChat(
	props: CommunityDrawerItemChatProps,
	): React.Node {
	const [expanded, setExpanded] = React.useState(false);

	const toggleExpanded = React.useCallback(() => {
	setExpanded(isExpanded => !isExpanded);
	}, []);

	return (
	<MemoizedCommunityDrawerItem
	{...props}
	expanded={expanded}
	toggleExpanded={toggleExpanded}
	/>
	);
	}

	const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> =
	React.memo(CommunityDrawerItemChat);

	const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =			const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =
	React.memo(CommunityDrawerItem);			React.memo(CommunityDrawerItem);

	export default MemoizedCommunityDrawerItemChat;			export default MemoizedCommunityDrawerItem;