Page MenuHomePhabricator
Files F3246167

D10520.id35304.diff
No OneTemporary
Actions

D10520.id35304.diff
View Options

diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.react.js b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
--- a/web/modals/threads/gallery/thread-settings-media-gallery.react.js
+++ b/web/modals/threads/gallery/thread-settings-media-gallery.react.js
@@ -14,12 +14,27 @@
import GalleryItem from './thread-settings-media-gallery-item.react.js';
import css from './thread-settings-media-gallery.css';
-import Tabs from '../../../components/tabs-legacy.react.js';
+import Tabs, { type TabData } from '../../../components/tabs.react.js';
import MultimediaModal from '../../../media/multimedia-modal.react.js';
import Modal from '../../modal.react.js';
type MediaGalleryTab = 'All' | 'Images' | 'Videos';
+const tabsData: $ReadOnlyArray<TabData<MediaGalleryTab>> = [
+ {
+ id: 'All',
+ header: 'All',
+ },
+ {
+ id: 'Images',
+ header: 'Images',
+ },
+ {
+ id: 'Videos',
+ header: 'Videos',
+ },
+];
+
type ThreadSettingsMediaGalleryModalProps = {
+onClose: () => void,
+parentThreadInfo: ThreadInfo,
@@ -39,6 +54,11 @@
const [mediaInfos, setMediaInfos] = React.useState<$ReadOnlyArray<Media>>([]);
const [tab, setTab] = React.useState<MediaGalleryTab>(activeTab);
+ const tabs = React.useMemo(
+ () => <Tabs tabItems={tabsData} activeTab={tab} setTab={setTab} />,
+ [tab],
+ );
+
React.useEffect(() => {
const fetchData = async () => {
const result = await callFetchThreadMedia({
@@ -166,27 +186,26 @@
[callFetchThreadMedia, threadID, limit, mediaInfos],
);
- return (
- <Modal name={modalName} onClose={onClose} size="large">
- <Tabs.Container activeTab={tab} setTab={setTab}>
- <Tabs.Item id="All" header="All">
- <div className={css.container} onScroll={handleScroll}>
- {mediaGalleryItems}
- </div>
- </Tabs.Item>
- <Tabs.Item id="Images" header="Images">
- <div className={css.container} onScroll={handleScroll}>
- {mediaGalleryItems}
- </div>
- </Tabs.Item>
- <Tabs.Item id="Videos" header="Videos">
- <div className={css.container} onScroll={handleScroll}>
- {mediaGalleryItems}
- </div>
- </Tabs.Item>
- </Tabs.Container>
- </Modal>
+ const tabContent = React.useMemo(
+ () => (
+ <div className={css.container} onScroll={handleScroll}>
+ {mediaGalleryItems}
+ </div>
+ ),
+ [handleScroll, mediaGalleryItems],
);
+
+ const threadSettingsMediaGalleryModal = React.useMemo(
+ () => (
+ <Modal name={modalName} onClose={onClose} size="large">
+ {tabs}
+ {tabContent}
+ </Modal>
+ ),
+ [onClose, tabContent, tabs],
+ );
+
+ return threadSettingsMediaGalleryModal;
}
export default ThreadSettingsMediaGalleryModal;

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 15, 9:46 PM (20 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2495611
Default Alt Text
D10520.id35304.diff (2 KB)

Event Timeline