Page MenuHomePhorge
Files F32210197

D6973.1765129903.diff
No OneTemporary
Actions

Size
10 KB
Referenced Files
None
Subscribers
None

D6973.1765129903.diff
View Options

diff --git a/lib/utils/drawer-utils.react.js b/lib/utils/drawer-utils.react.js
--- a/lib/utils/drawer-utils.react.js
+++ b/lib/utils/drawer-utils.react.js
@@ -11,7 +11,7 @@
export type CommunityDrawerItemData<T> = {
+threadInfo: ThreadInfo,
- +itemChildren?: $ReadOnlyArray<CommunityDrawerItemData<T>>,
+ +itemChildren: $ReadOnlyArray<CommunityDrawerItemData<T>>,
+hasSubchannelsButton: boolean,
+labelStyle: T,
};
diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
--- a/web/sidebar/community-drawer-item-community.react.js
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -3,18 +3,97 @@
import classnames from 'classnames';
import * as React from 'react';
+import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+
import css from './community-drawer-item.css';
import type { DrawerItemProps } from './community-drawer-item.react.js';
-import CommunityDrawerItem from './community-drawer-item.react.js';
+import {
+ getChildren,
+ getExpandButton,
+} from './community-drawer-utils.react.js';
+import ThreadAvatar from '../components/thread-avatar.react.js';
function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
+ const {
+ itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
+ expanded,
+ toggleExpanded,
+ paddingLeft,
+ expandable = true,
+ handler: Handler,
+ } = props;
+
+ const children = React.useMemo(
+ () =>
+ getChildren({
+ expanded,
+ hasSubchannelsButton,
+ itemChildren,
+ paddingLeft,
+ threadInfo,
+ expandable,
+ handler: Handler,
+ }),
+ [
+ expanded,
+ hasSubchannelsButton,
+ itemChildren,
+ paddingLeft,
+ threadInfo,
+ expandable,
+ Handler,
+ ],
+ );
+
+ const itemExpandButton = React.useMemo(
+ () =>
+ getExpandButton({
+ expandable,
+ childrenLength: itemChildren?.length,
+ hasSubchannelsButton,
+ expanded,
+ }),
+ [expandable, itemChildren?.length, hasSubchannelsButton, 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({
[css.communityBase]: true,
[css.communityExpanded]: props.expanded,
});
+
+ const { uiName } = useResolvedThreadInfo(threadInfo);
+ const titleLabel = classnames({
+ [css[labelStyle]]: true,
+ [css.activeTitle]: handler.isActive,
+ });
+
+ const style = React.useMemo(() => ({ paddingLeft }), [paddingLeft]);
+
return (
<div className={classes}>
- <CommunityDrawerItem {...props} />
+ <Handler setHandler={setHandler} threadInfo={threadInfo} />
+ <a onClick={onClick} className={css.threadEntry} style={style}>
+ {itemExpandButton}
+ <div className={css.titleWrapper}>
+ <ThreadAvatar size="micro" threadInfo={threadInfo} />
+ <div className={titleLabel}>{uiName}</div>
+ </div>
+ </a>
+ <div className={css.threadListContainer}>{children}</div>
</div>
);
}
diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css
--- a/web/sidebar/community-drawer-item.css
+++ b/web/sidebar/community-drawer-item.css
@@ -46,7 +46,7 @@
}
.communityBase {
- padding-top: 2px;
+ padding-top: 4px;
padding-bottom: 2px;
padding-right: 4px;
overflow: hidden;
@@ -56,7 +56,6 @@
background-color: var(--drawer-open-community-bg);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
- padding-top: 4px;
padding-bottom: 4px;
}
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
--- a/web/sidebar/community-drawer-item.react.js
+++ b/web/sidebar/community-drawer-item.react.js
@@ -8,8 +8,10 @@
import type { HandlerProps } from './community-drawer-item-handlers.react.js';
import css from './community-drawer-item.css';
-import { ExpandButton } from './expand-buttons.react.js';
-import SubchannelsButton from './subchannels-button.react.js';
+import {
+ getChildren,
+ getExpandButton,
+} from './community-drawer-utils.react.js';
import ThreadAvatar from '../components/thread-avatar.react.js';
import { shouldRenderAvatars } from '../utils/avatar-utils.js';
@@ -22,9 +24,6 @@
+handler: React.ComponentType<HandlerProps>,
};
-const indentation = 14;
-const subchannelsButtonIndentation = 24;
-
function CommunityDrawerItem(props: DrawerItemProps): React.Node {
const {
itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
@@ -35,71 +34,50 @@
handler: Handler,
} = props;
- const children = React.useMemo(() => {
- if (!expanded) {
- return null;
- }
- if (hasSubchannelsButton) {
- const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
- return (
- <div
- className={css.subchannelsButton}
- style={{ paddingLeft: buttonPaddingLeft }}
- >
- <SubchannelsButton threadInfo={threadInfo} />
- </div>
- );
- }
- if (!itemChildren) {
- return null;
- }
- return itemChildren.map(item => (
- <MemoizedCommunityDrawerItemChat
- itemData={item}
- key={item.threadInfo.id}
- paddingLeft={paddingLeft + indentation}
- expandable={expandable}
- handler={Handler}
- />
- ));
- }, [
- expanded,
- hasSubchannelsButton,
- itemChildren,
- paddingLeft,
- threadInfo,
- expandable,
- Handler,
- ]);
+ const children = React.useMemo(
+ () =>
+ getChildren({
+ expanded,
+ hasSubchannelsButton,
+ itemChildren,
+ paddingLeft,
+ threadInfo,
+ expandable,
+ handler: Handler,
+ }),
+ [
+ expanded,
+ hasSubchannelsButton,
+ itemChildren,
+ paddingLeft,
+ threadInfo,
+ expandable,
+ Handler,
+ ],
+ );
const onExpandToggled = React.useCallback(
() => (toggleExpanded ? toggleExpanded(threadInfo.id) : null),
[toggleExpanded, threadInfo.id],
);
- const itemExpandButton = React.useMemo(() => {
- if (!expandable) {
- return null;
- }
- if (itemChildren?.length === 0 && !hasSubchannelsButton) {
- return (
- <div className={css.buttonContainer}>
- <ExpandButton disabled={true} />
- </div>
- );
- }
- return (
- <div className={css.buttonContainer}>
- <ExpandButton onClick={onExpandToggled} expanded={expanded} />
- </div>
- );
- }, [
- expandable,
- itemChildren?.length,
- hasSubchannelsButton,
- onExpandToggled,
- expanded,
- ]);
+ const itemExpandButton = React.useMemo(
+ () =>
+ getExpandButton({
+ expandable,
+ childrenLength: itemChildren.length,
+ hasSubchannelsButton,
+ onExpandToggled,
+ expanded,
+ }),
+ [
+ expandable,
+ itemChildren.length,
+ hasSubchannelsButton,
+ onExpandToggled,
+ expanded,
+ ],
+ );
const [handler, setHandler] = React.useState({
// eslint-disable-next-line no-unused-vars
@@ -174,4 +152,4 @@
const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =
React.memo(CommunityDrawerItem);
-export default MemoizedCommunityDrawerItem;
+export default MemoizedCommunityDrawerItemChat;
diff --git a/web/sidebar/community-drawer-utils.react.js b/web/sidebar/community-drawer-utils.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer-utils.react.js
@@ -0,0 +1,89 @@
+// @flow
+
+import * as React from 'react';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';
+
+import type { HandlerProps } from './community-drawer-item-handlers.react';
+import css from './community-drawer-item.css';
+import CommunityDrawerItemChat from './community-drawer-item.react.js';
+import { ExpandButton } from './expand-buttons.react.js';
+import SubchannelsButton from './subchannels-button.react.js';
+
+const indentation = 14;
+const subchannelsButtonIndentation = 24;
+
+function getChildren({
+ expanded,
+ hasSubchannelsButton,
+ itemChildren,
+ paddingLeft,
+ threadInfo,
+ expandable,
+ handler,
+}: {
+ expanded: boolean,
+ hasSubchannelsButton: boolean,
+ itemChildren: $ReadOnlyArray<CommunityDrawerItemData<string>>,
+ paddingLeft: number,
+ threadInfo: ThreadInfo,
+ expandable: boolean,
+ handler: React.ComponentType<HandlerProps>,
+}): React.Node {
+ if (!expanded) {
+ return null;
+ }
+ if (hasSubchannelsButton) {
+ const buttonPaddingLeft = paddingLeft + subchannelsButtonIndentation;
+ return (
+ <div
+ className={css.subchannelsButton}
+ style={{ paddingLeft: buttonPaddingLeft }}
+ >
+ <SubchannelsButton threadInfo={threadInfo} />
+ </div>
+ );
+ }
+ return itemChildren.map(item => (
+ <CommunityDrawerItemChat
+ itemData={item}
+ key={item.threadInfo.id}
+ paddingLeft={paddingLeft + indentation}
+ expandable={expandable}
+ handler={handler}
+ />
+ ));
+}
+
+function getExpandButton({
+ expandable,
+ childrenLength,
+ hasSubchannelsButton,
+ onExpandToggled,
+ expanded,
+}: {
+ +expandable: boolean,
+ +childrenLength: ?number,
+ +hasSubchannelsButton: boolean,
+ +onExpandToggled?: ?() => ?void,
+ +expanded: boolean,
+}): React.Node {
+ if (!expandable) {
+ return null;
+ }
+ if (childrenLength === 0 && !hasSubchannelsButton) {
+ return (
+ <div className={css.buttonContainer}>
+ <ExpandButton disabled={true} />
+ </div>
+ );
+ }
+ return (
+ <div className={css.buttonContainer}>
+ <ExpandButton onClick={onExpandToggled} expanded={expanded} />
+ </div>
+ );
+}
+
+export { getChildren, getExpandButton };
diff --git a/web/sidebar/expand-buttons.react.js b/web/sidebar/expand-buttons.react.js
--- a/web/sidebar/expand-buttons.react.js
+++ b/web/sidebar/expand-buttons.react.js
@@ -9,7 +9,7 @@
import Button from '../components/button.react.js';
type Props = {
- +onClick?: () => mixed,
+ +onClick?: ?() => mixed,
+expanded?: boolean,
+disabled?: boolean,
};

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 7, 5:51 PM (14 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5845316
Default Alt Text
D6973.1765129903.diff (10 KB)

Event Timeline