Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3246157
D10519.id35316.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
2 KB
Referenced Files
None
Subscribers
None
D10519.id35316.diff
View Options
diff --git a/web/modals/threads/sidebars/sidebars-modal.react.js b/web/modals/threads/sidebars/sidebars-modal.react.js
--- a/web/modals/threads/sidebars/sidebars-modal.react.js
+++ b/web/modals/threads/sidebars/sidebars-modal.react.js
@@ -7,11 +7,22 @@
import SidebarList from './sidebar-list.react.js';
import css from './sidebars-modal.css';
-import Tabs from '../../../components/tabs-legacy.react.js';
+import Tabs, { type TabData } from '../../../components/tabs.react.js';
import SearchModal from '../../search-modal.react.js';
type SidebarTab = 'All Threads' | 'My Threads';
+const tabsData: $ReadOnlyArray<TabData<SidebarTab>> = [
+ {
+ id: 'All Threads',
+ header: 'All Threads',
+ },
+ {
+ id: 'My Threads',
+ header: 'My Threads',
+ },
+];
+
type ContentProps = {
+searchText: string,
+threadID: string,
@@ -22,27 +33,39 @@
const { searchText, threadID, defaultTab } = props;
const [tab, setTab] = React.useState<SidebarTab>(defaultTab);
+ const tabs = React.useMemo(
+ () => <Tabs tabItems={tabsData} activeTab={tab} setTab={setTab} />,
+ [tab],
+ );
+
const sidebarList = useFilteredChildThreads(threadID, {
predicate: threadIsSidebar,
searchText,
});
- const sidebarsChatListVisibleInChat = sidebarList.filter(chatItem =>
- threadInChatList(chatItem.threadInfo),
- );
+ const tabContent = React.useMemo(() => {
+ if (tab === 'All Threads') {
+ return <SidebarList sidebars={sidebarList} />;
+ }
- return (
- <div className={css.sidebarListContainer}>
- <Tabs.Container activeTab={tab} setTab={setTab}>
- <Tabs.Item id="All Threads" header="All Threads">
- <SidebarList sidebars={sidebarList} />
- </Tabs.Item>
- <Tabs.Item id="My Threads" header="My Threads">
- <SidebarList sidebars={sidebarsChatListVisibleInChat} />
- </Tabs.Item>
- </Tabs.Container>
- </div>
+ const sidebarsChatListVisibleInChat = sidebarList.filter(chatItem =>
+ threadInChatList(chatItem.threadInfo),
+ );
+
+ return <SidebarList sidebars={sidebarsChatListVisibleInChat} />;
+ }, [sidebarList, tab]);
+
+ const sidebarsModalContent = React.useMemo(
+ () => (
+ <div className={css.sidebarListContainer}>
+ {tabs}
+ {tabContent}
+ </div>
+ ),
+ [tabContent, tabs],
);
+
+ return sidebarsModalContent;
}
type Props = {
File Metadata
Details
Attached
Mime Type
text/plain
Expires
Fri, Nov 15, 9:38 PM (21 h, 56 s)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495195
Default Alt Text
D10519.id35316.diff (2 KB)
Attached To
Mode
D10519: [web] update sidebars modal to use new tabs component
Attached
Detach File
Event Timeline
Log In to Comment