Differential D6363 Diff 22118 web/sidebar/community-drawer-item.react.js

Changeset View

Standalone View

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

Show All 11 Lines
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,		+paddingLeft: number,
		+expandable?: boolean,
};		};

const indentation = 14;		const indentation = 14;
const subchannelsButtonIndentation = 24;		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,		paddingLeft,
		expandable = true,
} = 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;		const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
Show All 9 Lines	const children = React.useMemo(() => {
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}		paddingLeft={paddingLeft + indentation}
		expandable={expandable}
/>		/>
));		));
}, [expanded, hasSubchannelsButton, itemChildren, paddingLeft, threadInfo]);		}, [
		expanded,
		hasSubchannelsButton,
		itemChildren,
		paddingLeft,
		expandable,
		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 (!expandable) {
		return null;
		}
if (itemChildren?.length === 0 && !hasSubchannelsButton) {		if (itemChildren?.length === 0 && !hasSubchannelsButton) {
return (		return (
<div className={css.buttonContainer}>		<div className={css.buttonContainer}>
<ExpandButton disabled={true} />		<ExpandButton disabled={true} />
</div>		</div>
);		);
}		}
return (		return (
<div className={css.buttonContainer}>		<div className={css.buttonContainer}>
<ExpandButton onClick={onExpandToggled} expanded={expanded} />		<ExpandButton onClick={onExpandToggled} expanded={expanded} />
</div>		</div>
);		);
}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);		}, [
		expandable,
		itemChildren?.length,
		hasSubchannelsButton,
		onExpandToggled,
		expanded,
		]);

const Handler = useSelector(state =>		const Handler = useSelector(state =>
getCommunityDrawerItemHandler(state.navInfo.tab),		getCommunityDrawerItemHandler(state.navInfo.tab),
);		);

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 => {},
Show All 16 Lines	<>
<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,		+paddingLeft: number,
		+expandable?: boolean,
};		};

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(() => {
Show All 21 Lines