Page MenuHomePhabricator
Files F3358260

D6160.id20571.diff
No OneTemporary
Actions

D6160.id20571.diff
View Options

diff --git a/web/sidebar/community-drawer-item-community.react.js b/web/sidebar/community-drawer-item-community.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer-item-community.react.js
@@ -0,0 +1,25 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+import css from './community-drawer-item.css';
+import CommunityDrawerItem from './community-drawer-item.react';
+import type { DrawerItemProps } from './community-drawer-item.react';
+
+function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
+ const classes = classnames({
+ [css.communityBase]: true,
+ [css.communityExpanded]: props.expanded,
+ });
+ return (
+ <div className={classes}>
+ <CommunityDrawerItem {...props} />
+ </div>
+ );
+}
+
+const MemoizedCommunityDrawerItemCommunity: React.ComponentType<DrawerItemProps> = React.memo(
+ CommunityDrawerItemCommunity,
+);
+export default MemoizedCommunityDrawerItemCommunity;
diff --git a/web/sidebar/community-drawer-item.css b/web/sidebar/community-drawer-item.css
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer-item.css
@@ -0,0 +1,71 @@
+div.threadEntry {
+ display: flex;
+ flex-direction: row;
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
+div.threadListContainer {
+ display: flex;
+ flex-direction: column;
+}
+
+.titleWrapper {
+ overflow: hidden;
+}
+
+div.title {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ color: var(--drawer-item-color);
+ line-height: 24px;
+}
+
+div.titleLevel0 {
+ font-size: var(--l-font-18);
+ font-weight: var(--semi-bold);
+}
+
+div.titleLevel1 {
+ font-size: var(--m-font-16);
+ font-weight: var(--semi-bold);
+}
+
+div.titleLevel2 {
+ font-size: var(--m-font-16);
+ font-weight: var(--semi-bold);
+}
+
+div.buttonContainer {
+ width: 20px;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+}
+
+div.chatItem {
+ margin-left: 16px;
+}
+
+.communityBase {
+ padding-top: 2px;
+ padding-bottom: 2px;
+ padding-right: 24px;
+ padding-left: 8px;
+ overflow: hidden;
+}
+
+.communityExpanded {
+ background-color: var(--drawer-open-community-bg);
+ border-top-right-radius: 8px;
+ border-bottom-right-radius: 8px;
+}
+
+div.subchannelsButton {
+ margin-left: 24px;
+ margin-bottom: 6px;
+ margin-top: 4px;
+ display: flex;
+ align-items: center;
+}
diff --git a/web/sidebar/community-drawer-item.react.js b/web/sidebar/community-drawer-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/sidebar/community-drawer-item.react.js
@@ -0,0 +1,137 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+
+import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react';
+
+import {
+ useOnClickThread,
+ useThreadIsActive,
+} from '../selectors/thread-selectors';
+import css from './community-drawer-item.css';
+import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react';
+import SubchannelsButton from './subchannels-button.react';
+
+export type DrawerItemProps = {
+ +itemData: CommunityDrawerItemData<string>,
+ +toggleExpanded: (threadID: string) => void,
+ +expanded: boolean,
+};
+
+function CommunityDrawerItem(props: DrawerItemProps): React.Node {
+ const {
+ itemData: { threadInfo, itemChildren, hasSubchannelsButton, labelStyle },
+ expanded,
+ toggleExpanded,
+ } = props;
+
+ const children = React.useMemo(() => {
+ if (!expanded) {
+ return null;
+ }
+ if (hasSubchannelsButton) {
+ return (
+ <div className={css.subchannelsButton}>
+ <SubchannelsButton threadInfo={threadInfo} />
+ </div>
+ );
+ }
+ if (!itemChildren) {
+ return null;
+ }
+ return itemChildren.map(item => {
+ return (
+ <MemoizedCommunityDrawerItemChat
+ itemData={item}
+ key={item.threadInfo.id}
+ />
+ );
+ });
+ }, [expanded, hasSubchannelsButton, itemChildren, threadInfo]);
+
+ const onExpandToggled = React.useCallback(() => {
+ toggleExpanded(threadInfo.id);
+ }, [toggleExpanded, threadInfo.id]);
+
+ const itemExpandButton = React.useMemo(() => {
+ if (!itemChildren?.length && !hasSubchannelsButton) {
+ return (
+ <div className={css.buttonContainer}>
+ <ExpandButtonDisabled />
+ </div>
+ );
+ }
+ return (
+ <div className={css.buttonContainer}>
+ <ExpandButton onClick={onExpandToggled} expanded={expanded} />
+ </div>
+ );
+ }, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);
+
+ const active = useThreadIsActive(threadInfo.id);
+ const isCreateMode = useSelector(
+ 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 titleLabel = classnames({
+ [css.title]: true,
+ [css[labelStyle]]: labelStyle,
+ });
+
+ return (
+ <>
+ <div className={css.threadEntry}>
+ {itemExpandButton}
+ <a onClick={selectItemIfNotActiveCreation} className={css.titleWrapper}>
+ <div className={titleLabel}>{threadInfo.uiName}</div>
+ </a>
+ </div>
+ <div className={css.threadListContainer}>{children}</div>
+ </>
+ );
+}
+
+export type CommunityDrawerItemChatProps = {
+ +itemData: CommunityDrawerItemData<string>,
+};
+
+function CommunityDrawerItemChat(
+ props: CommunityDrawerItemChatProps,
+): React.Node {
+ const [expanded, setExpanded] = React.useState(false);
+
+ const toggleExpanded = React.useCallback(() => {
+ setExpanded(isExpanded => !isExpanded);
+ }, []);
+
+ return (
+ <div className={css.chatItem}>
+ <CommunityDrawerItem
+ {...props}
+ expanded={expanded}
+ toggleExpanded={toggleExpanded}
+ />
+ </div>
+ );
+}
+
+const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> = React.memo(
+ CommunityDrawerItemChat,
+);
+
+const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> = React.memo(
+ CommunityDrawerItem,
+);
+
+export default MemoizedCommunityDrawerItem;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -196,4 +196,6 @@
--purple-link: var(--violet-light-100);
--drawer-expand-button: var(--shades-black-60);
--drawer-expand-button-disabled: var(--shades-black-80);
+ --drawer-item-color: var(--shades-white-60);
+ --drawer-open-community-bg: #191919;
}

File Metadata

Mime Type
text/plain
Expires
Mon, Nov 25, 3:48 AM (20 h, 45 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2578257
Default Alt Text
D6160.id20571.diff (6 KB)

Event Timeline