Differential D6292 Diff 21684 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';		import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';

import { useSelector } from '../redux/redux-utils';		import { useSelector } from '../redux/redux-utils';
import {		import { getCommunityDrawerItemHandler } from './community-drawer-item-handlers.react';
useOnClickThread,
useThreadIsActive,
} from '../selectors/thread-selectors';
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,
▲ Show 20 Lines • Show All 43 Lines • ▼ Show 20 Lines	const itemExpandButton = React.useMemo(() => {
}		}
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]);		}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);

const active = useThreadIsActive(threadInfo.id);		const Handler = useSelector(state =>
const isCreateMode = useSelector(		getCommunityDrawerItemHandler(state.navInfo.tab),
state => state.navInfo.chatMode === 'create',
);
const onClick = useOnClickThread(threadInfo);
const selectItemIfNotActiveCreation = React.useCallback(
(event: SyntheticEvent<HTMLAnchorElement>) => {
if (!isCreateMode \|\| !active) {
onClick(event);
}
},
[isCreateMode, active, onClick],
);		);

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

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

return (		return (
<>		<>
		<Handler setHandler={setHandler} threadInfo={threadInfo} />
<div className={css.threadEntry}>		<div className={css.threadEntry}>
{itemExpandButton}		{itemExpandButton}
<a onClick={selectItemIfNotActiveCreation} 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>
</>		</>
);		);
}		}

Show All 33 Lines