Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -14,32 +14,32 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import classNames from 'classnames';
|
||||
import classNames from "classnames";
|
||||
import { IEventRelation } from "matrix-js-sdk/src/models/event";
|
||||
import { M_POLL_START } from "matrix-events-sdk";
|
||||
import React, { createContext, MouseEventHandler, ReactElement, useContext, useRef } from 'react';
|
||||
import { Room } from 'matrix-js-sdk/src/models/room';
|
||||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import { THREAD_RELATION_TYPE } from 'matrix-js-sdk/src/models/thread';
|
||||
import React, { createContext, MouseEventHandler, ReactElement, useContext, useRef } from "react";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/client";
|
||||
import { THREAD_RELATION_TYPE } from "matrix-js-sdk/src/models/thread";
|
||||
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import { CollapsibleButton } from './CollapsibleButton';
|
||||
import { AboveLeftOf } from '../../structures/ContextMenu';
|
||||
import dis from '../../../dispatcher/dispatcher';
|
||||
import { CollapsibleButton } from "./CollapsibleButton";
|
||||
import { AboveLeftOf } from "../../structures/ContextMenu";
|
||||
import dis from "../../../dispatcher/dispatcher";
|
||||
import ErrorDialog from "../dialogs/ErrorDialog";
|
||||
import LocationButton from '../location/LocationButton';
|
||||
import LocationButton from "../location/LocationButton";
|
||||
import Modal from "../../../Modal";
|
||||
import PollCreateDialog from "../elements/PollCreateDialog";
|
||||
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
||||
import ContentMessages from '../../../ContentMessages';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import RoomContext from '../../../contexts/RoomContext';
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import ContentMessages from "../../../ContentMessages";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import RoomContext from "../../../contexts/RoomContext";
|
||||
import { useDispatcher } from "../../../hooks/useDispatcher";
|
||||
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
||||
import IconizedContextMenu, { IconizedContextMenuOptionList } from '../context_menus/IconizedContextMenu';
|
||||
import { EmojiButton } from './EmojiButton';
|
||||
import { useSettingValue } from '../../../hooks/useSettings';
|
||||
import IconizedContextMenu, { IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
|
||||
import { EmojiButton } from "./EmojiButton";
|
||||
import { useSettingValue } from "../../../hooks/useSettings";
|
||||
|
||||
interface IProps {
|
||||
addEmoji: (emoji: string) => boolean;
|
||||
|
|
@ -67,7 +67,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
|
|||
const matrixClient: MatrixClient = useContext(MatrixClientContext);
|
||||
const { room, roomId, narrow } = useContext(RoomContext);
|
||||
|
||||
const isWysiwygLabEnabled = useSettingValue<boolean>('feature_wysiwyg_composer');
|
||||
const isWysiwygLabEnabled = useSettingValue<boolean>("feature_wysiwyg_composer");
|
||||
|
||||
if (props.haveRecording) {
|
||||
return null;
|
||||
|
|
@ -77,9 +77,15 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
|
|||
let moreButtons: ReactElement[];
|
||||
if (narrow) {
|
||||
mainButtons = [
|
||||
isWysiwygLabEnabled ?
|
||||
<ComposerModeButton key="composerModeButton" isRichTextEnabled={props.isRichTextEnabled} onClick={props.onComposerModeClick} /> :
|
||||
emojiButton(props),
|
||||
isWysiwygLabEnabled ? (
|
||||
<ComposerModeButton
|
||||
key="composerModeButton"
|
||||
isRichTextEnabled={props.isRichTextEnabled}
|
||||
onClick={props.onComposerModeClick}
|
||||
/>
|
||||
) : (
|
||||
emojiButton(props)
|
||||
),
|
||||
];
|
||||
moreButtons = [
|
||||
uploadButton(), // props passed via UploadButtonContext
|
||||
|
|
@ -91,9 +97,15 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
|
|||
];
|
||||
} else {
|
||||
mainButtons = [
|
||||
isWysiwygLabEnabled ?
|
||||
<ComposerModeButton key="composerModeButton" isRichTextEnabled={props.isRichTextEnabled} onClick={props.onComposerModeClick} /> :
|
||||
emojiButton(props),
|
||||
isWysiwygLabEnabled ? (
|
||||
<ComposerModeButton
|
||||
key="composerModeButton"
|
||||
isRichTextEnabled={props.isRichTextEnabled}
|
||||
onClick={props.onComposerModeClick}
|
||||
/>
|
||||
) : (
|
||||
emojiButton(props)
|
||||
),
|
||||
uploadButton(), // props passed via UploadButtonContext
|
||||
];
|
||||
moreButtons = [
|
||||
|
|
@ -114,37 +126,41 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
|
|||
mx_MessageComposer_closeButtonMenu: props.isMenuOpen,
|
||||
});
|
||||
|
||||
return <UploadButtonContextProvider roomId={roomId} relation={props.relation}>
|
||||
{ mainButtons }
|
||||
{ moreButtons.length > 0 && <AccessibleTooltipButton
|
||||
className={moreOptionsClasses}
|
||||
onClick={props.toggleButtonMenu}
|
||||
title={_t("More options")}
|
||||
/> }
|
||||
{ props.isMenuOpen && (
|
||||
<IconizedContextMenu
|
||||
onFinished={props.toggleButtonMenu}
|
||||
{...props.menuPosition}
|
||||
wrapperClassName="mx_MessageComposer_Menu"
|
||||
compact={true}
|
||||
>
|
||||
<OverflowMenuContext.Provider value={props.toggleButtonMenu}>
|
||||
<IconizedContextMenuOptionList>
|
||||
{ moreButtons }
|
||||
</IconizedContextMenuOptionList>
|
||||
</OverflowMenuContext.Provider>
|
||||
</IconizedContextMenu>
|
||||
) }
|
||||
</UploadButtonContextProvider>;
|
||||
return (
|
||||
<UploadButtonContextProvider roomId={roomId} relation={props.relation}>
|
||||
{mainButtons}
|
||||
{moreButtons.length > 0 && (
|
||||
<AccessibleTooltipButton
|
||||
className={moreOptionsClasses}
|
||||
onClick={props.toggleButtonMenu}
|
||||
title={_t("More options")}
|
||||
/>
|
||||
)}
|
||||
{props.isMenuOpen && (
|
||||
<IconizedContextMenu
|
||||
onFinished={props.toggleButtonMenu}
|
||||
{...props.menuPosition}
|
||||
wrapperClassName="mx_MessageComposer_Menu"
|
||||
compact={true}
|
||||
>
|
||||
<OverflowMenuContext.Provider value={props.toggleButtonMenu}>
|
||||
<IconizedContextMenuOptionList>{moreButtons}</IconizedContextMenuOptionList>
|
||||
</OverflowMenuContext.Provider>
|
||||
</IconizedContextMenu>
|
||||
)}
|
||||
</UploadButtonContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
function emojiButton(props: IProps): ReactElement {
|
||||
return <EmojiButton
|
||||
key="emoji_button"
|
||||
addEmoji={props.addEmoji}
|
||||
menuPosition={props.menuPosition}
|
||||
className="mx_MessageComposer_button"
|
||||
/>;
|
||||
return (
|
||||
<EmojiButton
|
||||
key="emoji_button"
|
||||
addEmoji={props.addEmoji}
|
||||
menuPosition={props.menuPosition}
|
||||
className="mx_MessageComposer_button"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function uploadButton(): ReactElement {
|
||||
|
|
@ -167,13 +183,13 @@ const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, rel
|
|||
|
||||
const onUploadClick = () => {
|
||||
if (cli.isGuest()) {
|
||||
dis.dispatch({ action: 'require_registration' });
|
||||
dis.dispatch({ action: "require_registration" });
|
||||
return;
|
||||
}
|
||||
uploadInput.current?.click();
|
||||
};
|
||||
|
||||
useDispatcher(dis, payload => {
|
||||
useDispatcher(dis, (payload) => {
|
||||
if (roomContext.timelineRenderingType === payload.context && payload.action === "upload_file") {
|
||||
onUploadClick();
|
||||
}
|
||||
|
|
@ -195,22 +211,24 @@ const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, rel
|
|||
// 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 = '';
|
||||
ev.target.value = "";
|
||||
};
|
||||
|
||||
const uploadInputStyle = { display: 'none' };
|
||||
return <UploadButtonContext.Provider value={onUploadClick}>
|
||||
{ children }
|
||||
const uploadInputStyle = { display: "none" };
|
||||
return (
|
||||
<UploadButtonContext.Provider value={onUploadClick}>
|
||||
{children}
|
||||
|
||||
<input
|
||||
ref={uploadInput}
|
||||
type="file"
|
||||
style={uploadInputStyle}
|
||||
multiple
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={onUploadFileInputChange}
|
||||
/>
|
||||
</UploadButtonContext.Provider>;
|
||||
<input
|
||||
ref={uploadInput}
|
||||
type="file"
|
||||
style={uploadInputStyle}
|
||||
multiple
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={onUploadFileInputChange}
|
||||
/>
|
||||
</UploadButtonContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Must be rendered within an UploadButtonContextProvider
|
||||
|
|
@ -223,55 +241,51 @@ const UploadButton = () => {
|
|||
overflowMenuCloser?.(); // close overflow menu
|
||||
};
|
||||
|
||||
return <CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_upload"
|
||||
onClick={onClick}
|
||||
title={_t('Attachment')}
|
||||
/>;
|
||||
return (
|
||||
<CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_upload"
|
||||
onClick={onClick}
|
||||
title={_t("Attachment")}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
function showStickersButton(props: IProps): ReactElement | null {
|
||||
return (
|
||||
props.showStickersButton
|
||||
? <CollapsibleButton
|
||||
id='stickersButton'
|
||||
key="controls_stickers"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_stickers"
|
||||
onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
|
||||
title={props.isStickerPickerOpen ? _t("Hide stickers") : _t("Sticker")}
|
||||
/>
|
||||
: null
|
||||
);
|
||||
return props.showStickersButton ? (
|
||||
<CollapsibleButton
|
||||
id="stickersButton"
|
||||
key="controls_stickers"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_stickers"
|
||||
onClick={() => props.setStickerPickerOpen(!props.isStickerPickerOpen)}
|
||||
title={props.isStickerPickerOpen ? _t("Hide stickers") : _t("Sticker")}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
||||
const startVoiceBroadcastButton: React.FC<IProps> = (props: IProps): ReactElement | null => {
|
||||
return (
|
||||
props.showVoiceBroadcastButton
|
||||
? <CollapsibleButton
|
||||
key="start_voice_broadcast"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_voiceBroadcast"
|
||||
onClick={props.onStartVoiceBroadcastClick}
|
||||
title={_t("Voice broadcast")}
|
||||
/>
|
||||
: null
|
||||
);
|
||||
return props.showVoiceBroadcastButton ? (
|
||||
<CollapsibleButton
|
||||
key="start_voice_broadcast"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_voiceBroadcast"
|
||||
onClick={props.onStartVoiceBroadcastClick}
|
||||
title={_t("Voice broadcast")}
|
||||
/>
|
||||
) : null;
|
||||
};
|
||||
|
||||
function voiceRecordingButton(props: IProps, narrow: boolean): ReactElement | null {
|
||||
// XXX: recording UI does not work well in narrow mode, so hide for now
|
||||
return (
|
||||
narrow
|
||||
? null
|
||||
: <CollapsibleButton
|
||||
key="voice_message_send"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_voiceMessage"
|
||||
onClick={props.onRecordStartEndClick}
|
||||
title={_t("Voice Message")}
|
||||
/>
|
||||
return narrow ? null : (
|
||||
<CollapsibleButton
|
||||
key="voice_message_send"
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName="mx_MessageComposer_voiceMessage"
|
||||
onClick={props.onRecordStartEndClick}
|
||||
title={_t("Voice Message")}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -295,19 +309,13 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
|
|||
MatrixClientPeg.get().getUserId()!,
|
||||
);
|
||||
if (!canSend) {
|
||||
Modal.createDialog(
|
||||
ErrorDialog,
|
||||
{
|
||||
title: _t("Permission Required"),
|
||||
description: _t(
|
||||
"You do not have permission to start polls in this room.",
|
||||
),
|
||||
},
|
||||
);
|
||||
Modal.createDialog(ErrorDialog, {
|
||||
title: _t("Permission Required"),
|
||||
description: _t("You do not have permission to start polls in this room."),
|
||||
});
|
||||
} else {
|
||||
const threadId = this.props.relation?.rel_type === THREAD_RELATION_TYPE.name
|
||||
? this.props.relation.event_id
|
||||
: null;
|
||||
const threadId =
|
||||
this.props.relation?.rel_type === THREAD_RELATION_TYPE.name ? this.props.relation.event_id : null;
|
||||
|
||||
Modal.createDialog(
|
||||
PollCreateDialog,
|
||||
|
|
@ -315,9 +323,9 @@ class PollButton extends React.PureComponent<IPollButtonProps> {
|
|||
room: this.props.room,
|
||||
threadId,
|
||||
},
|
||||
'mx_CompoundDialog',
|
||||
"mx_CompoundDialog",
|
||||
false, // isPriorityModal
|
||||
true, // isStaticModal
|
||||
true, // isStaticModal
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
@ -345,17 +353,15 @@ function showLocationButton(
|
|||
): ReactElement | null {
|
||||
const sender = room.getMember(matrixClient.getUserId()!);
|
||||
|
||||
return (
|
||||
props.showLocationButton && sender
|
||||
? <LocationButton
|
||||
key="location"
|
||||
roomId={roomId}
|
||||
relation={props.relation}
|
||||
sender={sender}
|
||||
menuPosition={props.menuPosition}
|
||||
/>
|
||||
: null
|
||||
);
|
||||
return props.showLocationButton && sender ? (
|
||||
<LocationButton
|
||||
key="location"
|
||||
roomId={roomId}
|
||||
relation={props.relation}
|
||||
sender={sender}
|
||||
menuPosition={props.menuPosition}
|
||||
/>
|
||||
) : null;
|
||||
}
|
||||
|
||||
interface WysiwygToggleButtonProps {
|
||||
|
|
@ -366,15 +372,17 @@ interface WysiwygToggleButtonProps {
|
|||
function ComposerModeButton({ isRichTextEnabled, onClick }: WysiwygToggleButtonProps) {
|
||||
const title = isRichTextEnabled ? _t("Hide formatting") : _t("Show formatting");
|
||||
|
||||
return <CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName={classNames({
|
||||
"mx_MessageComposer_plain_text": isRichTextEnabled,
|
||||
"mx_MessageComposer_rich_text": !isRichTextEnabled,
|
||||
})}
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
/>;
|
||||
return (
|
||||
<CollapsibleButton
|
||||
className="mx_MessageComposer_button"
|
||||
iconClassName={classNames({
|
||||
mx_MessageComposer_plain_text: isRichTextEnabled,
|
||||
mx_MessageComposer_rich_text: !isRichTextEnabled,
|
||||
})}
|
||||
onClick={onClick}
|
||||
title={title}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default MessageComposerButtons;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue