Differential D6294 Diff 21685 web/sidebar/community-drawer-item.react.js

Changeset View

Standalone View

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

Show All 9 Lines
import css from './community-drawer-item.css';		import css from './community-drawer-item.css';
import { ExpandButton } from './expand-buttons.react';		import { ExpandButton } from './expand-buttons.react';
import SubchannelsButton from './subchannels-button.react';		import SubchannelsButton from './subchannels-button.react';

export type DrawerItemProps = {		export type DrawerItemProps = {
+itemData: CommunityDrawerItemData<string>,		+itemData: CommunityDrawerItemData<string>,
+toggleExpanded: (threadID: string) => void,		+toggleExpanded: (threadID: string) => void,
+expanded: boolean,		+expanded: boolean,
		+paddingLeft: number,
};		};

		const indentation = 14;
		const subchannelsButtonIndentation = 24;

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,		expanded,
toggleExpanded,		toggleExpanded,
		paddingLeft,
} = props;		} = props;

const children = React.useMemo(() => {		const children = React.useMemo(() => {
if (!expanded) {		if (!expanded) {
return null;		return null;
}		}
if (hasSubchannelsButton) {		if (hasSubchannelsButton) {
		const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
return (		return (
<div className={css.subchannelsButton}>		<div
		className={css.subchannelsButton}
		style={{ paddingLeft: buttonPaddingLeft }}
		>
<SubchannelsButton threadInfo={threadInfo} />		<SubchannelsButton threadInfo={threadInfo} />
</div>		</div>
);		);
}		}
if (!itemChildren) {		if (!itemChildren) {
return null;		return null;
}		}
return itemChildren.map(item => (		return itemChildren.map(item => (
<MemoizedCommunityDrawerItemChat		<MemoizedCommunityDrawerItemChat
itemData={item}		itemData={item}
key={item.threadInfo.id}		key={item.threadInfo.id}
		paddingLeft={paddingLeft + indentation}
/>		/>
));		));
}, [expanded, hasSubchannelsButton, itemChildren, threadInfo]);		}, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]);

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

const itemExpandButton = React.useMemo(() => {		const itemExpandButton = React.useMemo(() => {
if (itemChildren?.length === 0 && !hasSubchannelsButton) {		if (itemChildren?.length === 0 && !hasSubchannelsButton) {
Show All 16 Lines	function CommunityDrawerItem(props: DrawerItemProps): React.Node {

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

const titleLabel = classnames(css.title, css[labelStyle]);		const titleLabel = classnames(css.title, css[labelStyle]);

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

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

export type CommunityDrawerItemChatProps = {		export type CommunityDrawerItemChatProps = {
+itemData: CommunityDrawerItemData<string>,		+itemData: CommunityDrawerItemData<string>,
		+paddingLeft: number,
};		};

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

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

return (		return (
<div className={css.chatItem}>
<MemoizedCommunityDrawerItem		<MemoizedCommunityDrawerItem
{...props}		{...props}
expanded={expanded}		expanded={expanded}
toggleExpanded={toggleExpanded}		toggleExpanded={toggleExpanded}
/>		/>
</div>
);		);
}		}

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

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

export default MemoizedCommunityDrawerItem;		export default MemoizedCommunityDrawerItem;