315 lines
11 KiB
TypeScript
315 lines
11 KiB
TypeScript
/*
|
|
Copyright 2022 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 classNames from 'classnames';
|
|
import { IEventRelation } from "matrix-js-sdk/src/models/event";
|
|
import { M_POLL_START } from "matrix-events-sdk";
|
|
import React, { useContext } from 'react';
|
|
import { Room } from 'matrix-js-sdk/src/models/room';
|
|
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
|
|
|
import { _t } from '../../../languageHandler';
|
|
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
|
import { CollapsibleButton, ICollapsibleButtonProps } from './CollapsibleButton';
|
|
import ContextMenu, { aboveLeftOf, AboveLeftOf, MenuItem, useContextMenu } from '../../structures/ContextMenu';
|
|
import dis from '../../../dispatcher/dispatcher';
|
|
import EmojiPicker from '../emojipicker/EmojiPicker';
|
|
import ErrorDialog from "../dialogs/ErrorDialog";
|
|
import LocationButton from '../location/LocationButton';
|
|
import Modal from "../../../Modal";
|
|
import PollCreateDialog from "../elements/PollCreateDialog";
|
|
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
|
import { ActionPayload } from '../../../dispatcher/payloads';
|
|
import ContentMessages from '../../../ContentMessages';
|
|
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
|
import RoomContext from '../../../contexts/RoomContext';
|
|
|
|
interface IProps {
|
|
addEmoji: (emoji: string) => boolean;
|
|
haveRecording: boolean;
|
|
isMenuOpen: boolean;
|
|
isStickerPickerOpen: boolean;
|
|
menuPosition: AboveLeftOf;
|
|
narrowMode?: boolean;
|
|
onRecordStartEndClick: () => void;
|
|
relation?: IEventRelation;
|
|
setStickerPickerOpen: (isStickerPickerOpen: boolean) => void;
|
|
showLocationButton: boolean;
|
|
showStickersButton: boolean;
|
|
toggleButtonMenu: () => void;
|
|
}
|
|
|
|
const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
|
|
const matrixClient: MatrixClient = useContext(MatrixClientContext);
|
|
const { room, roomId } = useContext(RoomContext);
|
|
|
|
if (props.haveRecording) {
|
|
return null;
|
|
}
|
|
|
|
let uploadButtonIndex = 0;
|
|
const buttons: JSX.Element[] = [];
|
|
buttons.push(
|
|
<PollButton
|
|
key="polls"
|
|
room={room}
|
|
narrowMode={props.narrowMode}
|
|
/>,
|
|
);
|
|
uploadButtonIndex = buttons.length;
|
|
buttons.push(
|
|
<UploadButton key="controls_upload" roomId={roomId} relation={props.relation} />,
|
|
);
|
|
if (props.showLocationButton) {
|
|
const sender = room.getMember(matrixClient.getUserId());
|
|
buttons.push(
|
|
<LocationButton
|
|
key="location"
|
|
roomId={roomId}
|
|
sender={sender}
|
|
menuPosition={props.menuPosition}
|
|
narrowMode={props.narrowMode}
|
|
/>,
|
|
);
|
|
}
|
|
buttons.push(
|
|
<EmojiButton key="emoji_button" addEmoji={props.addEmoji} menuPosition={props.menuPosition} narrowMode={props.narrowMode} />,
|
|
);
|
|
if (props.showStickersButton) {
|
|
let title: string;
|
|
if (!props.narrowMode) {
|
|
title = props.isStickerPickerOpen ? _t("Hide Stickers") : _t("Show Stickers");
|
|
}
|
|
|
|
buttons.push(
|
|
<AccessibleTooltipButton
|
|
id='stickersButton'
|
|
key="controls_stickers"
|
|
className="mx_MessageComposer_button mx_MessageComposer_stickers"
|
|
onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
|
|
title={title}
|
|
label={props.narrowMode ? _t("Send a sticker") : null}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
// XXX: the recording UI does not work well in narrow mode, so we hide this button for now
|
|
if (!props.narrowMode) {
|
|
buttons.push(
|
|
<CollapsibleButton
|
|
key="voice_message_send"
|
|
className="mx_MessageComposer_button mx_MessageComposer_voiceMessage"
|
|
onClick={props.onRecordStartEndClick}
|
|
title={_t("Send voice message")}
|
|
narrowMode={props.narrowMode}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
if (!props.narrowMode) {
|
|
return <>{ buttons }</>;
|
|
}
|
|
|
|
const classnames = classNames({
|
|
mx_MessageComposer_button: true,
|
|
mx_MessageComposer_buttonMenu: true,
|
|
mx_MessageComposer_closeButtonMenu: props.isMenuOpen,
|
|
});
|
|
|
|
// we render the uploadButton at top level as it is a very common interaction, splice it out of the rest
|
|
const [uploadButton] = buttons.splice(uploadButtonIndex, 1);
|
|
return <>
|
|
{ uploadButton }
|
|
<AccessibleTooltipButton
|
|
className={classnames}
|
|
onClick={props.toggleButtonMenu}
|
|
title={_t("More options")}
|
|
tooltip={false}
|
|
/>
|
|
{ props.isMenuOpen && (
|
|
<ContextMenu
|
|
onFinished={props.toggleButtonMenu}
|
|
{...props.menuPosition}
|
|
wrapperClassName="mx_MessageComposer_Menu"
|
|
>
|
|
{ buttons.map((button, index) => (
|
|
<MenuItem className="mx_CallContextMenu_item" key={index} onClick={props.toggleButtonMenu}>
|
|
{ button }
|
|
</MenuItem>
|
|
)) }
|
|
</ContextMenu>
|
|
) }
|
|
</>;
|
|
};
|
|
|
|
interface IEmojiButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
|
|
addEmoji: (unicode: string) => boolean;
|
|
menuPosition: AboveLeftOf;
|
|
}
|
|
|
|
const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition, narrowMode }) => {
|
|
const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
|
|
|
|
let contextMenu: React.ReactElement | null = null;
|
|
if (menuDisplayed) {
|
|
const position = menuPosition ?? aboveLeftOf(button.current.getBoundingClientRect());
|
|
contextMenu = <ContextMenu {...position} onFinished={closeMenu} managed={false}>
|
|
<EmojiPicker onChoose={addEmoji} showQuickReactions={true} />
|
|
</ContextMenu>;
|
|
}
|
|
|
|
const className = classNames(
|
|
"mx_MessageComposer_button",
|
|
"mx_MessageComposer_emoji",
|
|
{
|
|
"mx_MessageComposer_button_highlight": menuDisplayed,
|
|
},
|
|
);
|
|
|
|
// TODO: replace ContextMenuTooltipButton with a unified representation of
|
|
// the header buttons and the right panel buttons
|
|
return <React.Fragment>
|
|
<CollapsibleButton
|
|
className={className}
|
|
onClick={openMenu}
|
|
narrowMode={narrowMode}
|
|
title={_t("Add emoji")}
|
|
/>
|
|
|
|
{ contextMenu }
|
|
</React.Fragment>;
|
|
};
|
|
|
|
interface IUploadButtonProps {
|
|
roomId: string;
|
|
relation?: IEventRelation | null;
|
|
}
|
|
|
|
class UploadButton extends React.Component<IUploadButtonProps> {
|
|
private uploadInput = React.createRef<HTMLInputElement>();
|
|
private dispatcherRef: string;
|
|
|
|
constructor(props: IUploadButtonProps) {
|
|
super(props);
|
|
|
|
this.dispatcherRef = dis.register(this.onAction);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
dis.unregister(this.dispatcherRef);
|
|
}
|
|
|
|
private onAction = (payload: ActionPayload) => {
|
|
if (payload.action === "upload_file") {
|
|
this.onUploadClick();
|
|
}
|
|
};
|
|
|
|
private onUploadClick = () => {
|
|
if (MatrixClientPeg.get().isGuest()) {
|
|
dis.dispatch({ action: 'require_registration' });
|
|
return;
|
|
}
|
|
this.uploadInput.current.click();
|
|
};
|
|
|
|
private onUploadFileInputChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (ev.target.files.length === 0) return;
|
|
|
|
// take a copy so we can safely reset the value of the form control
|
|
// (Note it is a FileList: we can't use slice or sensible iteration).
|
|
const tfiles = [];
|
|
for (let i = 0; i < ev.target.files.length; ++i) {
|
|
tfiles.push(ev.target.files[i]);
|
|
}
|
|
|
|
ContentMessages.sharedInstance().sendContentListToRoom(
|
|
tfiles,
|
|
this.props.roomId,
|
|
this.props.relation,
|
|
MatrixClientPeg.get(),
|
|
this.context.timelineRenderingType,
|
|
);
|
|
|
|
// This is the onChange handler for a file form control, but we're
|
|
// not keeping any state, so reset the value of the form control
|
|
// to empty.
|
|
// NB. we need to set 'value': the 'files' property is immutable.
|
|
ev.target.value = '';
|
|
};
|
|
|
|
render() {
|
|
const uploadInputStyle = { display: 'none' };
|
|
return (
|
|
<AccessibleTooltipButton
|
|
className="mx_MessageComposer_button mx_MessageComposer_upload"
|
|
onClick={this.onUploadClick}
|
|
title={_t('Upload file')}
|
|
>
|
|
<input
|
|
ref={this.uploadInput}
|
|
type="file"
|
|
style={uploadInputStyle}
|
|
multiple
|
|
onChange={this.onUploadFileInputChange}
|
|
/>
|
|
</AccessibleTooltipButton>
|
|
);
|
|
}
|
|
}
|
|
interface IPollButtonProps extends Pick<ICollapsibleButtonProps, "narrowMode"> {
|
|
room: Room;
|
|
}
|
|
|
|
class PollButton extends React.PureComponent<IPollButtonProps> {
|
|
private onCreateClick = () => {
|
|
const canSend = this.props.room.currentState.maySendEvent(
|
|
M_POLL_START.name,
|
|
MatrixClientPeg.get().getUserId(),
|
|
);
|
|
if (!canSend) {
|
|
Modal.createTrackedDialog('Polls', 'permissions error: cannot start', ErrorDialog, {
|
|
title: _t("Permission Required"),
|
|
description: _t("You do not have permission to start polls in this room."),
|
|
});
|
|
} else {
|
|
Modal.createTrackedDialog(
|
|
'Polls',
|
|
'create',
|
|
PollCreateDialog,
|
|
{
|
|
room: this.props.room,
|
|
},
|
|
'mx_CompoundDialog',
|
|
false, // isPriorityModal
|
|
true, // isStaticModal
|
|
);
|
|
}
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<CollapsibleButton
|
|
className="mx_MessageComposer_button mx_MessageComposer_poll"
|
|
onClick={this.onCreateClick}
|
|
narrowMode={this.props.narrowMode}
|
|
title={_t("Create poll")}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default MessageComposerButtons;
|