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

2
src/components/views/dialogs/InviteDialog.tsx
View file

@ -1538,7 +1538,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
<React.Fragment>
<TabbedView
tabs={tabs}
initialTabId={this.state.currentTabId}
activeTabId={this.state.currentTabId}
tabLocation={TabLocation.TOP}
onChange={this.onTabChange}
/>

12
src/components/views/dialogs/RoomSettingsDialog.tsx
View file

@ -56,11 +56,12 @@ export const enum RoomSettingsTab {
interface IProps {
roomId: string;
onFinished: (success?: boolean) => void;
initialTabId?: string;
initialTabId?: RoomSettingsTab;
}
interface IState {
room: Room;
activeTabId: RoomSettingsTab;
}
class RoomSettingsDialog extends React.Component<IProps, IState> {
@ -70,7 +71,7 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
super(props);
const room = this.getRoom();
this.state = { room };
this.state = { room, activeTabId: props.initialTabId || RoomSettingsTab.General };
}
public componentDidMount(): void {
@ -128,6 +129,10 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
if (event.getType() === EventType.RoomJoinRules) this.forceUpdate();
};
private onTabChange = (tabId: RoomSettingsTab): void => {
this.setState({ activeTabId: tabId });
};
private getTabs(): NonEmptyArray<Tab<RoomSettingsTab>> {
const tabs: Tab<RoomSettingsTab>[] = [];
@ -246,8 +251,9 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
<div className="mx_SettingsDialog_content">
<TabbedView
tabs={this.getTabs()}
initialTabId={this.props.initialTabId}
activeTabId={this.state.activeTabId}
screenName="RoomSettings"
onChange={this.onTabChange}
/>
</div>
</BaseDialog>

5
src/components/views/dialogs/SpacePreferencesDialog.tsx
View file

@ -33,7 +33,6 @@ import SettingsSubsection, { SettingsSubsectionText } from "../settings/shared/S
interface IProps {
space: Room;
initialTabId?: SpacePreferenceTab;
onFinished(): void;
}
@ -68,7 +67,7 @@ const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space
);
};
const SpacePreferencesDialog: React.FC<IProps> = ({ space, initialTabId, onFinished }) => {
const SpacePreferencesDialog: React.FC<IProps> = ({ space, onFinished }) => {
const tabs: NonEmptyArray<Tab<SpacePreferenceTab>> = [
new Tab(
SpacePreferenceTab.Appearance,
@ -90,7 +89,7 @@ const SpacePreferencesDialog: React.FC<IProps> = ({ space, initialTabId, onFinis
<RoomName room={space} />
</h4>
<div className="mx_SettingsDialog_content">
<TabbedView tabs={tabs} initialTabId={initialTabId} />
<TabbedView tabs={tabs} activeTabId={SpacePreferenceTab.Appearance} onChange={() => {}} />
</div>
</BaseDialog>
);

4
src/components/views/dialogs/SpaceSettingsDialog.tsx
View file

@ -82,6 +82,8 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
].filter(Boolean) as NonEmptyArray<Tab<SpaceSettingsTab>>;
}, [cli, space, onFinished]);
const [activeTabId, setActiveTabId] = React.useState(SpaceSettingsTab.General);
return (
<BaseDialog
title={_t("space_settings|title", { spaceName: space.name || _t("common|unnamed_space") })}
@ -91,7 +93,7 @@ const SpaceSettingsDialog: React.FC<IProps> = ({ matrixClient: cli, space, onFin
fixedWidth={false}
>
<div className="mx_SpaceSettingsDialog_content" id="mx_SpaceSettingsDialog">
<TabbedView tabs={tabs} />
<TabbedView tabs={tabs} activeTabId={activeTabId} onChange={setActiveTabId} />
</div>
</BaseDialog>
);

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>

21
src/components/views/elements/DesktopCapturerSourcePicker.tsx
View file

@ -85,8 +85,6 @@ export interface PickerIProps {
onFinished(source?: DesktopCapturerSource): void;
}
type TabId = "screen" | "window";
export default class DesktopCapturerSourcePicker extends React.Component<PickerIProps, PickerIState> {
public interval?: number;
@ -127,15 +125,15 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
this.props.onFinished(this.state.selectedSource);
};
private onTabChange = (): void => {
this.setState({ selectedSource: undefined });
private onTabChange = (tab: Tabs): void => {
this.setState({ selectedSource: undefined, selectedTab: tab });
};
private onCloseClick = (): void => {
this.props.onFinished();
};
private getTab(type: TabId, label: TranslationKey): Tab<TabId> {
private getTab(type: Tabs, label: TranslationKey): Tab<Tabs> {
const sources = this.state.sources
.filter((source) => source.id.startsWith(type))
.map((source) => {
@ -153,9 +151,9 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
}
public render(): React.ReactNode {
const tabs: NonEmptyArray<Tab<TabId>> = [
this.getTab("screen", _td("voip|screenshare_monitor")),
this.getTab("window", _td("voip|screenshare_window")),
const tabs: NonEmptyArray<Tab<Tabs>> = [
this.getTab(Tabs.Screens, _td("voip|screenshare_monitor")),
this.getTab(Tabs.Windows, _td("voip|screenshare_window")),
];
return (
@ -164,7 +162,12 @@ export default class DesktopCapturerSourcePicker extends React.Component<PickerI
onFinished={this.onCloseClick}
title={_t("voip|screenshare_title")}
>
<TabbedView tabs={tabs} tabLocation={TabLocation.TOP} onChange={this.onTabChange} />
<TabbedView
tabs={tabs}
tabLocation={TabLocation.TOP}
activeTabId={this.state.selectedTab}
onChange={this.onTabChange}
/>
<DialogButtons
primaryButton={_t("action|share")}
hasCancel={true}