Create rendering context enum for MessageActionBar

This commit is contained in:
Germain Souquet 2021-09-28 14:55:00 +01:00
parent 160bf8e21f
commit c1165830ed
2 changed files with 14 additions and 6 deletions

View file

@ -128,6 +128,11 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
</React.Fragment>;
};
export enum ActionBarRenderingContext {
Room,
Thread
}
interface IMessageActionBarProps {
mxEvent: MatrixEvent;
reactions?: Relations;
@ -137,7 +142,7 @@ interface IMessageActionBarProps {
permalinkCreator?: RoomPermalinkCreator;
onFocusChange?: (menuDisplayed: boolean) => void;
toggleThreadExpanded: () => void;
isInThreadTimeline?: boolean;
renderingContext?: ActionBarRenderingContext;
isQuoteExpanded?: boolean;
}
@ -146,7 +151,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
public static contextType = RoomContext;
public static defaultProps = {
isInThreadTimeline: false,
renderingContext: ActionBarRenderingContext.Room,
};
public componentDidMount(): void {
@ -293,7 +298,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
// Like the resend button, the react and reply buttons need to appear before the edit.
// The only catch is we do the reply button first so that we can make sure the react
// button is the very first button without having to do length checks for `splice()`.
if (this.context.canReply && !this.props.isInThreadTimeline) {
if (this.context.canReply && this.props.renderingContext === ActionBarRenderingContext.Room) {
toolbarOpts.splice(0, 0, <>
<RovingAccessibleTooltipButton
className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"

View file

@ -53,7 +53,7 @@ import SenderProfile from '../messages/SenderProfile';
import MessageTimestamp from '../messages/MessageTimestamp';
import TooltipButton from '../elements/TooltipButton';
import ReadReceiptMarker from "./ReadReceiptMarker";
import MessageActionBar from "../messages/MessageActionBar";
import MessageActionBar, { ActionBarRenderingContext } from "../messages/MessageActionBar";
import ReactionsRow from '../messages/ReactionsRow';
import { getEventDisplayInfo } from '../../../utils/EventUtils';
import { RightPanelPhases } from "../../../stores/RightPanelStorePhases";
@ -1056,7 +1056,9 @@ export default class EventTile extends React.Component<IProps, IState> {
}
}
const isInThreadTimeline = this.props.tileShape === TileShape.Thread;
const renderingContext = this.props.tileShape === TileShape.Thread
? ActionBarRenderingContext.Thread
: ActionBarRenderingContext.Room;
const actionBar = !isEditing ? <MessageActionBar
mxEvent={this.props.mxEvent}
reactions={this.state.reactions}
@ -1064,7 +1066,8 @@ export default class EventTile extends React.Component<IProps, IState> {
getTile={this.getTile}
getReplyThread={this.getReplyThread}
onFocusChange={this.onActionBarFocusChange}
isInThreadTimeline={isInThreadTimeline}
renderingContext={renderingContext}
isQuoteExpanded={isQuoteExpanded}
toggleThreadExpanded={() => this.setQuoteExpanded(!isQuoteExpanded)}
/> : undefined;