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

Changeset View

Standalone View

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

	// @flow			// @flow

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

	import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';			import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';

				import { getCommunityDrawerItemCommunityHandler } from './community-drawer-item-community-handlers.react.js';
	import css from './community-drawer-item.css';			import css from './community-drawer-item.css';
	import type { DrawerItemProps } from './community-drawer-item.react.js';			import type { DrawerItemProps } from './community-drawer-item.react.js';
	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';

	function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {			function CommunityDrawerItemCommunity(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 = getCommunityDrawerItemCommunityHandler(handlerType);

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

	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 itemExpandButton = React.useMemo(			const itemExpandButton = React.useMemo(
	() =>			() =>
	getExpandButton({			getExpandButton({
	expandable,			expandable,
	childrenLength: itemChildren?.length,			childrenLength: itemChildren?.length,
	hasSubchannelsButton,			hasSubchannelsButton,
	expanded,			onExpandToggled: null,
				expanded: handler.expanded,
	}),			}),
	[expandable, itemChildren?.length, hasSubchannelsButton, expanded],			[expandable, itemChildren?.length, hasSubchannelsButton, handler.expanded],
	);

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

	const onClick = React.useCallback(
	(event: SyntheticEvent<HTMLElement>) => {
	toggleExpanded?.(threadInfo.id);
	handler.onClick(event);
	},
	[threadInfo.id, toggleExpanded, handler],
	);			);

	const classes = classnames({			const classes = classnames({
	[css.communityBase]: true,			[css.communityBase]: true,
	[css.communityExpanded]: props.expanded,			[css.communityExpanded]: handler.expanded,
	});			});

	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]);

	return (			return (
	<div className={classes}>			<div className={classes}>
	<Handler setHandler={setHandler} threadInfo={threadInfo} />			<Handler setHandler={setHandler} threadInfo={threadInfo} />
	<a onClick={onClick} className={css.threadEntry} style={style}>			<a onClick={handler.onClick} className={css.threadEntry} style={style}>
	{itemExpandButton}			{itemExpandButton}
	<div className={css.titleWrapper}>			<div className={css.titleWrapper}>
	<ThreadAvatar size="micro" threadInfo={threadInfo} />			<ThreadAvatar size="micro" threadInfo={threadInfo} />
	<div className={titleLabel}>{uiName}</div>			<div className={titleLabel}>{uiName}</div>
	</div>			</div>
	</a>			</a>
	<div className={css.threadListContainer}>{children}</div>			<div className={css.threadListContainer}>{children}</div>
	</div>			</div>
	);			);
	}			}

	const MemoizedCommunityDrawerItemCommunity: React.ComponentType<DrawerItemProps> =			const MemoizedCommunityDrawerItemCommunity: React.ComponentType<DrawerItemProps> =
	React.memo(CommunityDrawerItemCommunity);			React.memo(CommunityDrawerItemCommunity);
	export default MemoizedCommunityDrawerItemCommunity;			export default MemoizedCommunityDrawerItemCommunity;