imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make TabbedView a controlled component (#12480)

Browse source 
* Convert tabbedview to functional component

The 'Tab' is still a class, so now it's a functional component that
has a supporting class, which is maybe a bit... jarring, but I think
is actually perfectly logical.

* put comment back

* Fix bad tab ID behaviour

* Make TabbedView a controlled component

This does mean the logic of keeping what tab is active is now in each
container component, but for a functional component, this is a single
line. It makes TabbedView simpler and the container components always
know exactly what tab is being displayed rather than having to effectively
keep the state separately themselves if they wanted it.

Based on https://github.com/matrix-org/matrix-react-sdk/pull/12478

* Fix some types & unused prop

* Remove weird behaviour of using first tab is active isn't valid

* Don't pass initialTabID here now it no longer has the prop

* Fix test

* bleh... id, not icon

* Change to sub-components

and use contitional call syntax

* Comments

* Fix element IDs

* Fix merge

* Test DesktopCapturerSourcePicker

to make sonarcloud the right colour

* Use custom hook for the fllback tab behaviour
This commit is contained in:
David Baker 2024-05-03 16:01:01 +01:00 • committed by GitHub
parent 2f3c84f1f4
commit 9684dd5145
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 170 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/views/dialogs/UserSettingsDialog.tsx
View file

@ -17,7 +17,7 @@ limitations under the License.
import React from "react";
import TabbedView, { Tab } from "../../structures/TabbedView";
import TabbedView, { Tab, useActiveTabWithDefault } from "../../structures/TabbedView";
import { _t, _td } from "../../../languageHandler";
import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
import SettingsStore from "../../../settings/SettingsStore";
@ -173,6 +173,8 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
return tabs as NonEmptyArray<Tab<UserTab>>;
};
const [activeTabId, setActiveTabId] = useActiveTabWithDefault(getTabs(), UserTab.General, props.initialTabId);
return (
// XXX: SDKContext is provided within the LoggedInView subtree.
// Modals function outside the MatrixChat React tree, so sdkContext is reprovided here to simulate that.
@ -185,7 +187,12 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
title={_t("common|settings")}
>
<div className="mx_SettingsDialog_content">
<TabbedView tabs={getTabs()} initialTabId={props.initialTabId} screenName="UserSettings" />
<TabbedView
tabs={getTabs()}
activeTabId={activeTabId}
screenName="UserSettings"
onChange={setActiveTabId}
/>
</div>
</BaseDialog>
</SDKContext.Provider>