Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into export-conversations

2021-07-30 12:17:31 +05:30 · 2021-07-30 12:17:31 +05:30 · 17e9cf4d2a
commit 17e9cf4d2a
parent 04edf4103f a7c15b2ac0
135 changed files with 4260 additions and 1433 deletions
--- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx
+++ b/src/components/views/elements/DesktopCapturerSourcePicker.tsx
@ -17,9 +17,12 @@ limitations under the License.
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import BaseDialog from "..//dialogs/BaseDialog";
+import DialogButtons from "./DialogButtons";
+import classNames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { getDesktopCapturerSources } from "matrix-js-sdk/src/webrtc/call";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import TabbedView, { Tab, TabLocation } from '../../structures/TabbedView';

 export interface DesktopCapturerSource {
    id: string;
@ -28,62 +31,70 @@ export interface DesktopCapturerSource {
 }

 export enum Tabs {
-    Screens = "screens",
-    Windows = "windows",
+    Screens = "screen",
+    Windows = "window",
 }

-export interface DesktopCapturerSourceIProps {
+export interface ExistingSourceIProps {
    source: DesktopCapturerSource;
    onSelect(source: DesktopCapturerSource): void;
+    selected: boolean;
 }

-export class ExistingSource extends React.Component<DesktopCapturerSourceIProps> {
-    constructor(props) {
+export class ExistingSource extends React.Component<ExistingSourceIProps> {
+    constructor(props: ExistingSourceIProps) {
        super(props);
    }

-    onClick = (ev) => {
+    private onClick = (): void => {
        this.props.onSelect(this.props.source);
    };

    render() {
+        const thumbnailClasses = classNames({
+            mx_desktopCapturerSourcePicker_source_thumbnail: true,
+            mx_desktopCapturerSourcePicker_source_thumbnail_selected: this.props.selected,
+        });
+
        return (
            <AccessibleButton
-                className="mx_desktopCapturerSourcePicker_stream_button"
+                className="mx_desktopCapturerSourcePicker_source"
                title={this.props.source.name}
                onClick={this.onClick}
            >
                <img
-                    className="mx_desktopCapturerSourcePicker_stream_thumbnail"
+                    className={thumbnailClasses}
                    src={this.props.source.thumbnailURL}
                />
-                <span className="mx_desktopCapturerSourcePicker_stream_name">{ this.props.source.name }</span>
+                <span className="mx_desktopCapturerSourcePicker_source_name">{ this.props.source.name }</span>
            </AccessibleButton>
        );
    }
 }

-export interface DesktopCapturerSourcePickerIState {
+export interface PickerIState {
    selectedTab: Tabs;
    sources: Array<DesktopCapturerSource>;
+    selectedSource: DesktopCapturerSource | null;
 }
-export interface DesktopCapturerSourcePickerIProps {
+export interface PickerIProps {
    onFinished(source: DesktopCapturerSource): void;
 }

@replaceableComponent("views.elements.DesktopCapturerSourcePicker")
 export default class DesktopCapturerSourcePicker extends React.Component<
-    DesktopCapturerSourcePickerIProps,
-    DesktopCapturerSourcePickerIState
-    > {
-    interval;
+    PickerIProps,
+    PickerIState
+> {
+    interval: number;

-    constructor(props) {
+    constructor(props: PickerIProps) {
        super(props);

        this.state = {
            selectedTab: Tabs.Screens,
            sources: [],
+            selectedSource: null,
        };
    }

@ -107,69 +118,61 @@ export default class DesktopCapturerSourcePicker extends React.Component<
        clearInterval(this.interval);
    }

-    onSelect = (source) => {
-        this.props.onFinished(source);
+    private onSelect = (source: DesktopCapturerSource): void => {
+        this.setState({ selectedSource: source });
    };

-    onScreensClick = (ev) => {
-        this.setState({ selectedTab: Tabs.Screens });
+    private onShare = (): void => {
+        this.props.onFinished(this.state.selectedSource);
    };

-    onWindowsClick = (ev) => {
-        this.setState({ selectedTab: Tabs.Windows });
+    private onTabChange = (): void => {
+        this.setState({ selectedSource: null });
    };

-    onCloseClick = (ev) => {
+    private onCloseClick = (): void => {
        this.props.onFinished(null);
    };

-    render() {
-        let sources;
-        if (this.state.selectedTab === Tabs.Screens) {
-            sources = this.state.sources
-                .filter((source) => {
-                    return source.id.startsWith("screen");
-                })
-                .map((source) => {
-                    return <ExistingSource source={source} onSelect={this.onSelect} key={source.id} />;
-                });
-        } else {
-            sources = this.state.sources
-                .filter((source) => {
-                    return source.id.startsWith("window");
-                })
-                .map((source) => {
-                    return <ExistingSource source={source} onSelect={this.onSelect} key={source.id} />;
-                });
-        }
+    private getTab(type: "screen" | "window", label: string): Tab {
+        const sources = this.state.sources.filter((source) => source.id.startsWith(type)).map((source) => {
+            return (
+                <ExistingSource
+                    selected={this.state.selectedSource?.id === source.id}
+                    source={source}
+                    onSelect={this.onSelect}
+                    key={source.id}
+                />
+            );
+        });

-        const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel";
-        const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : "");
-        const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : "");
+        return new Tab(type, label, null, (
+            <div className="mx_desktopCapturerSourcePicker_tab">
+                { sources }
+            </div>
+        ));
+    }
+
+    render() {
+        const tabs = [
+            this.getTab("screen", _t("Share entire screen")),
+            this.getTab("window", _t("Application window")),
+        ];

        return (
            <BaseDialog
                className="mx_desktopCapturerSourcePicker"
                onFinished={this.onCloseClick}
-                title={_t("Share your screen")}
+                title={_t("Share content")}
            >
-                <div className="mx_desktopCapturerSourcePicker_tabLabels">
-                    <AccessibleButton
-                        className={screensButtonStyle}
-                        onClick={this.onScreensClick}
-                    >
-                        { _t("Screens") }
-                    </AccessibleButton>
-                    <AccessibleButton
-                        className={windowsButtonStyle}
-                        onClick={this.onWindowsClick}
-                    >
-                        { _t("Windows") }
-                    </AccessibleButton>
-                </div>
-                <div className="mx_desktopCapturerSourcePicker_panel">
-                    { sources }
-                </div>
+                <TabbedView tabs={tabs} tabLocation={TabLocation.TOP} onChange={this.onTabChange} />
+                <DialogButtons
+                    primaryButton={_t("Share")}
+                    hasCancel={true}
+                    onCancel={this.onCloseClick}
+                    onPrimaryButtonClick={this.onShare}
+                    primaryDisabled={!this.state.selectedSource}
+                />
            </BaseDialog>
        );
    }
--- a/src/components/views/elements/EventListSummary.tsx
+++ b/src/components/views/elements/EventListSummary.tsx
@ -22,6 +22,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import AccessibleButton from "./AccessibleButton";
+import { Layout } from '../../../settings/Layout';

 interface IProps {
    // An array of member events to summarise
@ -38,6 +39,8 @@ interface IProps {
    children: ReactNode[];
    // Called when the event list expansion is toggled
    onToggle?(): void;
+    // The layout currently used
+    layout?: Layout;
 }

 const EventListSummary: React.FC<IProps> = ({
@ -48,6 +51,7 @@ const EventListSummary: React.FC<IProps> = ({
    startExpanded,
    summaryMembers = [],
    summaryText,
+    layout,
 }) => {
    const [expanded, toggleExpanded] = useStateToggle(startExpanded);

@ -63,7 +67,7 @@ const EventListSummary: React.FC<IProps> = ({
    // If we are only given few events then just pass them through
    if (events.length < threshold) {
        return (
-            <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={true}>
+            <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={true} data-layout={layout}>
                { children }
            </li>
        );
@ -93,7 +97,7 @@ const EventListSummary: React.FC<IProps> = ({
    }

    return (
-        <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""}>
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds} data-expanded={expanded + ""} data-layout={layout}>
            <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
                { expanded ? _t('collapse') : _t('expand') }
            </AccessibleButton>
@ -104,6 +108,7 @@ const EventListSummary: React.FC<IProps> = ({

 EventListSummary.defaultProps = {
    startExpanded: false,
+    layout: Layout.Group,
 };

 export default EventListSummary;
--- a/src/components/views/elements/JoinRuleDropdown.tsx
+++ b/src/components/views/elements/JoinRuleDropdown.tsx
@ -0,0 +1,68 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { JoinRule } from 'matrix-js-sdk/src/@types/partials';
+
+import Dropdown from "./Dropdown";
+
+interface IProps {
+    value: JoinRule;
+    label: string;
+    width?: number;
+    labelInvite: string;
+    labelPublic: string;
+    labelRestricted?: string; // if omitted then this option will be hidden, e.g if unsupported
+    onChange(value: JoinRule): void;
+}
+
+const JoinRuleDropdown = ({
+    label,
+    labelInvite,
+    labelPublic,
+    labelRestricted,
+    value,
+    width = 448,
+    onChange,
+}: IProps) => {
+    const options = [
+        <div key={JoinRule.Invite} className="mx_JoinRuleDropdown_invite">
+            { labelInvite }
+        </div>,
+        <div key={JoinRule.Public} className="mx_JoinRuleDropdown_public">
+            { labelPublic }
+        </div>,
+    ];
+
+    if (labelRestricted) {
+        options.unshift(<div key={JoinRule.Restricted} className="mx_JoinRuleDropdown_restricted">
+            { labelRestricted }
+        </div>);
+    }
+
+    return <Dropdown
+        id="mx_JoinRuleDropdown"
+        className="mx_JoinRuleDropdown"
+        onOptionChange={onChange}
+        menuWidth={width}
+        value={value}
+        label={label}
+    >
+        { options }
+    </Dropdown>;
+};
+
+export default JoinRuleDropdown;
--- a/src/components/views/elements/MemberEventListSummary.tsx
+++ b/src/components/views/elements/MemberEventListSummary.tsx
@ -25,12 +25,15 @@ import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import { isValid3pidInvite } from "../../../RoomInvite";
 import EventListSummary from "./EventListSummary";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { Layout } from '../../../settings/Layout';

 interface IProps extends Omit<ComponentProps<typeof EventListSummary>, "summaryText" | "summaryMembers"> {
    // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
    summaryLength?: number;
    // The maximum number of avatars to display in the summary
    avatarsMaxLength?: number;
+    // The currently selected layout
+    layout: Layout;
 }

 interface IUserEvents {
@ -67,6 +70,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
        summaryLength: 1,
        threshold: 3,
        avatarsMaxLength: 5,
+        layout: Layout.Group,
    };

    shouldComponentUpdate(nextProps) {
@ -453,6 +457,7 @@ export default class MemberEventListSummary extends React.Component<IProps> {
            startExpanded={this.props.startExpanded}
            children={this.props.children}
            summaryMembers={[...latestUserAvatarMember.values()]}
+            layout={this.props.layout}
            summaryText={this.generateSummary(aggregate.names, orderedTransitionSequences)} />;
    }
 }
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@ -192,7 +192,8 @@ class Pill extends React.Component {
        });
    }

-    onUserPillClicked = () => {
+    onUserPillClicked = (e) => {
+        e.preventDefault();
        dis.dispatch({
            action: Action.ViewUser,
            member: this.state.member,