Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rm/1890 ho c part2a #48

Merged
merged 6 commits into from
Jun 9, 2024
Merged

Rm/1890 ho c part2a #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6fe9ce5
Implemented and tested for task 1937
Jun 5, 2024
042bf96
custom wrapper for RoomView and AppDrawer + tests
Jun 5, 2024
8d5b917
added customwrapper for ReactionsRow. wrote tests. formatted and lint…
Jun 6, 2024
2d0ef5f
added custom component support for MessageContextMenu + tests.
Jun 6, 2024
48ff556
Merge branch 'verji-develop' of https://github.com/verji/matrix-react…
Jun 6, 2024
f037e23
removed 'only' from test
Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 61 additions & 56 deletions src/components/structures/RoomView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
import {
CustomComponentLifecycle,
CustomComponentOpts,
} from "@matrix-org/react-sdk-module-api/lib/lifecycles/CustomComponentLifecycle";

Check failure on line 50 in src/components/structures/RoomView.tsx

View workflow job for this annotation

GitHub Actions / Typescript Syntax Check 

Cannot find module '@matrix-org/react-sdk-module-api/lib/lifecycles/CustomComponentLifecycle' or its corresponding type declarations.

import shouldHideEvent from "../../shouldHideEvent";
import { _t } from "../../languageHandler";
Expand Down Expand Up @@ -2632,66 +2632,71 @@
!this.context.client.isGuest() &&
(([KnownMembership.Leave, KnownMembership.Ban] as Array<string>).includes(myMembership) ||
myMember?.isKicked());

const CustomRoomView = { CustomComponent: React.Fragment };
ModuleRunner.instance.invoke(CustomComponentLifecycle.RoomView, CustomRoomView as CustomComponentOpts);
const customRoomHeaderOpts = { CustomComponent: React.Fragment };
ModuleRunner.instance.invoke(CustomComponentLifecycle.RoomHeader, customRoomHeaderOpts as CustomComponentOpts);
return (
<RoomContext.Provider value={this.state}>
<div
className={mainClasses}
ref={this.roomView}
onKeyDown={this.onReactKeyDown}
data-room-header={roomHeaderType}
>
{showChatEffects && this.roomView.current && (
<EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
)}
<ErrorBoundary>
<MainSplit
panel={rightPanel}
resizeNotifier={this.props.resizeNotifier}
// Override defaults when a thread is being shown to allow persisting a separate
// right panel width for thread panels as they tend to want to be wider.
sizeKey={this.state.threadRightPanel ? "thread" : undefined}
defaultSize={this.state.threadRightPanel ? 500 : undefined}
>
<div
className={mainSplitContentClasses}
ref={this.roomViewBody}
data-layout={this.state.layout}
<CustomRoomView.CustomComponent>
<RoomContext.Provider value={this.state}>
<div
className={mainClasses}
ref={this.roomView}
onKeyDown={this.onReactKeyDown}
data-room-header={roomHeaderType}
>
{showChatEffects && this.roomView.current && (
<EffectsOverlay roomWidth={this.roomView.current.offsetWidth} />
)}
<ErrorBoundary>
<MainSplit
panel={rightPanel}
resizeNotifier={this.props.resizeNotifier}
// Override defaults when a thread is being shown to allow persisting a separate
// right panel width for thread panels as they tend to want to be wider.
sizeKey={this.state.threadRightPanel ? "thread" : undefined}
defaultSize={this.state.threadRightPanel ? 500 : undefined}
>
<customRoomHeaderOpts.CustomComponent>
{SettingsStore.getValue("feature_new_room_decoration_ui") ? (
<RoomHeader
room={this.state.room}
additionalButtons={this.state.viewRoomOpts.buttons}
/>
) : (
<LegacyRoomHeader
room={this.state.room}
searchInfo={this.state.search}
oobData={this.props.oobData}
inRoom={myMembership === KnownMembership.Join}
onSearchClick={onSearchClick}
onInviteClick={onInviteClick}
onForgetClick={showForgetButton ? onForgetClick : null}
e2eStatus={this.state.e2eStatus}
onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null}
appsShown={this.state.showApps}
excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
showButtons={!this.viewsLocalRoom}
enableRoomOptionsMenu={!this.viewsLocalRoom}
viewingCall={viewingCall}
activeCall={this.state.activeCall}
additionalButtons={this.state.viewRoomOpts.buttons}
/>
)}
</customRoomHeaderOpts.CustomComponent>
{mainSplitBody}
</div>
</MainSplit>
</ErrorBoundary>
</div>
</RoomContext.Provider>
<div
className={mainSplitContentClasses}
ref={this.roomViewBody}
data-layout={this.state.layout}
>
<customRoomHeaderOpts.CustomComponent>
{SettingsStore.getValue("feature_new_room_decoration_ui") ? (
<RoomHeader
room={this.state.room}
additionalButtons={this.state.viewRoomOpts.buttons}
/>
) : (
<LegacyRoomHeader
room={this.state.room}
searchInfo={this.state.search}
oobData={this.props.oobData}
inRoom={myMembership === KnownMembership.Join}
onSearchClick={onSearchClick}
onInviteClick={onInviteClick}
onForgetClick={showForgetButton ? onForgetClick : null}
e2eStatus={this.state.e2eStatus}
onAppsClick={this.state.hasPinnedWidgets ? onAppsClick : null}
appsShown={this.state.showApps}
excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
showButtons={!this.viewsLocalRoom}
enableRoomOptionsMenu={!this.viewsLocalRoom}
viewingCall={viewingCall}
activeCall={this.state.activeCall}
additionalButtons={this.state.viewRoomOpts.buttons}
/>
)}
</customRoomHeaderOpts.CustomComponent>
{mainSplitBody}
</div>
</MainSplit>
</ErrorBoundary>
</div>
</RoomContext.Provider>
</CustomRoomView.CustomComponent>
);
}
}
Expand Down
41 changes: 27 additions & 14 deletions src/components/views/context_menus/MessageContextMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ import {
Thread,
M_POLL_START,
} from "matrix-js-sdk/src/matrix";
import {
CustomComponentLifecycle,
CustomComponentOpts,
} from "@matrix-org/react-sdk-module-api/lib/lifecycles/CustomComponentLifecycle";

import { MatrixClientPeg } from "../../../MatrixClientPeg";
import dis from "../../../dispatcher/dispatcher";
Expand Down Expand Up @@ -60,6 +64,7 @@ import { getForwardableEvent } from "../../../events/forward/getForwardableEvent
import { getShareableLocationEvent } from "../../../events/location/getShareableLocationEvent";
import { ShowThreadPayload } from "../../../dispatcher/payloads/ShowThreadPayload";
import { CardContext } from "../right_panel/context";
import { ModuleRunner } from "../../../modules/ModuleRunner";

interface IReplyInThreadButton {
mxEvent: MatrixEvent;
Expand Down Expand Up @@ -715,21 +720,29 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
);
}

const CustomMessageContextMenu = { CustomComponent: React.Fragment };
ModuleRunner.instance.invoke(
CustomComponentLifecycle.MessageContextMenu,
CustomMessageContextMenu as CustomComponentOpts,
);

return (
<React.Fragment>
<IconizedContextMenu
{...other}
className="mx_MessageContextMenu"
compact={true}
data-testid="mx_MessageContextMenu"
>
{nativeItemsList}
{quickItemsList}
{commonItemsList}
{redactItemList}
</IconizedContextMenu>
{reactionPicker}
</React.Fragment>
<CustomMessageContextMenu.CustomComponent>
<React.Fragment>
<IconizedContextMenu
{...other}
className="mx_MessageContextMenu"
compact={true}
data-testid="mx_MessageContextMenu"
>
{nativeItemsList}
{quickItemsList}
{commonItemsList}
{redactItemList}
</IconizedContextMenu>
{reactionPicker}
</React.Fragment>
</CustomMessageContextMenu.CustomComponent>
);
}
}
27 changes: 20 additions & 7 deletions src/components/views/elements/ErrorBoundary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ limitations under the License.

import React, { ErrorInfo, ReactNode } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import {
CustomComponentLifecycle,
CustomComponentOpts,
} from "@matrix-org/react-sdk-module-api/lib/lifecycles/CustomComponentLifecycle";

import { _t } from "../../../languageHandler";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
Expand All @@ -24,6 +28,7 @@ import Modal from "../../../Modal";
import SdkConfig from "../../../SdkConfig";
import BugReportDialog from "../dialogs/BugReportDialog";
import AccessibleButton from "./AccessibleButton";
import { ModuleRunner } from "../../../modules/ModuleRunner";

interface Props {
children: ReactNode;
Expand Down Expand Up @@ -76,6 +81,12 @@ export default class ErrorBoundary extends React.PureComponent<Props, IState> {
};

public render(): ReactNode {
const CustomErrorBoundary = { CustomComponent: React.Fragment };
ModuleRunner.instance.invoke(
CustomComponentLifecycle.ErrorBoundary,
CustomErrorBoundary as CustomComponentOpts,
);

if (this.state.error) {
const newIssueUrl = SdkConfig.get().feedback.new_issue_url;

Expand Down Expand Up @@ -121,16 +132,18 @@ export default class ErrorBoundary extends React.PureComponent<Props, IState> {
}

return (
<div className="mx_ErrorBoundary">
<div className="mx_ErrorBoundary_body">
<h1>{_t("error|something_went_wrong")}</h1>
{bugReportSection}
{clearCacheButton}
<CustomErrorBoundary.CustomComponent>
<div className="mx_ErrorBoundary">
<div className="mx_ErrorBoundary_body">
<h1>{_t("error|something_went_wrong")}</h1>
{bugReportSection}
{clearCacheButton}
</div>
</div>
</div>
</CustomErrorBoundary.CustomComponent>
);
}

return this.props.children;
return <CustomErrorBoundary.CustomComponent>{this.props.children}</CustomErrorBoundary.CustomComponent>;
}
}
25 changes: 19 additions & 6 deletions src/components/views/messages/ReactionsRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ import classNames from "classnames";
import { MatrixEvent, MatrixEventEvent, Relations, RelationsEvent } from "matrix-js-sdk/src/matrix";
import { uniqBy } from "lodash";
import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
import {
CustomComponentLifecycle,
CustomComponentOpts,
} from "@matrix-org/react-sdk-module-api/lib/lifecycles/CustomComponentLifecycle";

import { _t } from "../../../languageHandler";
import { isContentActionable } from "../../../utils/EventUtils";
Expand All @@ -29,6 +33,7 @@ import ReactionsRowButton from "./ReactionsRowButton";
import RoomContext from "../../../contexts/RoomContext";
import AccessibleButton from "../elements/AccessibleButton";
import SettingsStore from "../../../settings/SettingsStore";
import { ModuleRunner } from "../../../modules/ModuleRunner";

// The maximum number of reactions to initially show on a message.
const MAX_ITEMS_WHEN_LIMITED = 8;
Expand Down Expand Up @@ -173,6 +178,7 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
if (!reactions || !isContentActionable(mxEvent)) {
return null;
}

const customReactionImagesEnabled = SettingsStore.getValue("feature_render_reaction_images");

let items = reactions
Expand Down Expand Up @@ -210,7 +216,9 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
})
.filter((item) => !!item);

if (!items?.length) return null;
if (!items?.length) {
return null;
}

// Show the first MAX_ITEMS if there are MAX_ITEMS + 1 or more items.
// The "+ 1" ensure that the "show all" reveals something that takes up
Expand All @@ -230,12 +238,17 @@ export default class ReactionsRow extends React.PureComponent<IProps, IState> {
addReactionButton = <ReactButton mxEvent={mxEvent} reactions={reactions} />;
}

const CustomReactionsRow = { CustomComponent: React.Fragment };
ModuleRunner.instance.invoke(CustomComponentLifecycle.ReactionsRow, CustomReactionsRow as CustomComponentOpts);

return (
<div className="mx_ReactionsRow" role="toolbar" aria-label={_t("common|reactions")}>
{items}
{showAllButton}
{addReactionButton}
</div>
<CustomReactionsRow.CustomComponent>
<div className="mx_ReactionsRow" role="toolbar" aria-label={_t("common|reactions")}>
{items}
{showAllButton}
{addReactionButton}
</div>
</CustomReactionsRow.CustomComponent>
);
}
}
18 changes: 14 additions & 4 deletions src/components/views/rooms/AppsDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@ import classNames from "classnames";
import { Resizable, Size } from "re-resizable";
import { Room } from "matrix-js-sdk/src/matrix";
import { IWidget } from "matrix-widget-api";
import {
CustomComponentLifecycle,
CustomComponentOpts,
} from "@matrix-org/react-sdk-module-api/lib/lifecycles/CustomComponentLifecycle";

import AppTile from "../elements/AppTile";
import dis from "../../../dispatcher/dispatcher";
Expand All @@ -35,6 +39,7 @@ import { clamp, percentageOf, percentageWithin } from "../../../utils/numbers";
import UIStore from "../../../stores/UIStore";
import { ActionPayload } from "../../../dispatcher/payloads";
import Spinner from "../elements/Spinner";
import { ModuleRunner } from "../../../modules/ModuleRunner";

interface IProps {
userId: string;
Expand Down Expand Up @@ -294,11 +299,16 @@ export default class AppsDrawer extends React.Component<IProps, IState> {
);
}

const CustomAppDrawer = { CustomComponent: React.Fragment };
ModuleRunner.instance.invoke(CustomComponentLifecycle.AppsDrawer, CustomAppDrawer as CustomComponentOpts);

return (
<div role={this.props.role} className={classes}>
{drawer}
{spinner}
</div>
<CustomAppDrawer.CustomComponent>
<div role={this.props.role} className={classes}>
{drawer}
{spinner}
</div>
</CustomAppDrawer.CustomComponent>
);
}
}
Expand Down
Loading
Loading