Refactor renderButtons() into MessageComposerButtons component (#7664)

src/components/views/rooms/MessageComposerButtons.tsx

@@ -0,0 +1,315 @@
+/*
+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;