Page MenuHomePhabricator
Differential D6976 Diff 24791 web/sidebar/community-drawer-item-community.react.js

Changeset View

Standalone View

View Options

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';
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({
// eslint-disable-next-line no-unused-vars
onClick: event => {},
ashoatUnsubmitted
Not Done
Inline Actions
const [handler, setHandler] = React.useState({
// eslint-disable-next-line no-unused-vars
- onClick: event => {},
+ onClick: () => {},
isActive: false,

I assume this doesn't work for some reason?

ashoat: I assume this doesn't work for some reason?
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}>
<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;