mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-23 01:35:49 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix upload button & shortcut not working for narrow composer mode (#7894)

Browse source
This commit is contained in:
Michael Telatynski 2022-02-24 17:37:02 +00:00 committed by GitHub
parent 4629d1e4f6
commit 5167b30ee6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/views/rooms/MessageComposerButtons.tsx
View file

@ -70,7 +70,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
emojiButton(props),
];
moreButtons = [
uploadButton(props, roomId),
uploadButton(), // props passed via UploadButtonContext
showStickersButton(props),
voiceRecordingButton(props, narrow),
pollButton(room, props.relation),
@ -79,7 +79,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
} else {
mainButtons = [
emojiButton(props),
uploadButton(props, roomId),
uploadButton(), // props passed via UploadButtonContext
];
moreButtons = [
showStickersButton(props),
@ -98,7 +98,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
mx_MessageComposer_closeButtonMenu: props.isMenuOpen,
});
return <>
return <UploadButtonContextProvider roomId={roomId} relation={props.relation}>
{ mainButtons }
<AccessibleTooltipButton
className={moreOptionsClasses}
@ -116,7 +116,7 @@ const MessageComposerButtons: React.FC<IProps> = (props: IProps) => {
</OverflowMenuContext.Provider>
</ContextMenu>
) }
</>;
</UploadButtonContextProvider>;
};
function emojiButton(props: IProps): ReactElement {
@ -175,23 +175,22 @@ const EmojiButton: React.FC<IEmojiButtonProps> = ({ addEmoji, menuPosition }) =>
</React.Fragment>;
};
function uploadButton(props: IProps, roomId: string): ReactElement {
return <UploadButton
key="controls_upload"
roomId={roomId}
relation={props.relation}
/>;
function uploadButton(): ReactElement {
return <UploadButton key="controls_upload" />;
}
type UploadButtonFn = () => void;
export const UploadButtonContext = createContext<UploadButtonFn | null>(null);
interface IUploadButtonProps {
roomId: string;
relation?: IEventRelation | null;
}
const UploadButton = ({ roomId, relation }: IUploadButtonProps) => {
// We put the file input outside the UploadButton component so that it doesn't get killed when the context menu closes.
const UploadButtonContextProvider: React.FC<IUploadButtonProps> = ({ roomId, relation, children }) => {
const cli = useContext(MatrixClientContext);
const roomContext = useContext(RoomContext);
const overflowMenuCloser = useContext(OverflowMenuContext);
const uploadInput = useRef<HTMLInputElement>();
const onUploadClick = () => {
@ -200,7 +199,6 @@ const UploadButton = ({ roomId, relation }: IUploadButtonProps) => {
return;
}
uploadInput.current?.click();
overflowMenuCloser?.(); // close overflow menu
};
useDispatcher(dis, payload => {
@ -229,12 +227,9 @@ const UploadButton = ({ roomId, relation }: IUploadButtonProps) => {
};
const uploadInputStyle = { display: 'none' };
return <>
<CollapsibleButton
className="mx_MessageComposer_button mx_MessageComposer_upload"
onClick={onUploadClick}
title={_t('Attachment')}
/>
return <UploadButtonContext.Provider value={onUploadClick}>
{ children }
<input
ref={uploadInput}
type="file"
@ -242,7 +237,24 @@ const UploadButton = ({ roomId, relation }: IUploadButtonProps) => {
multiple
onChange={onUploadFileInputChange}
/>
</>;
</UploadButtonContext.Provider>;
};
// Must be rendered within an UploadButtonContextProvider
const UploadButton = () => {
const overflowMenuCloser = useContext(OverflowMenuContext);
const uploadButtonFn = useContext(UploadButtonContext);
const onClick = () => {
uploadButtonFn?.();
overflowMenuCloser?.(); // close overflow menu
};
return <CollapsibleButton
className="mx_MessageComposer_button mx_MessageComposer_upload"
onClick={onClick}
title={_t('Attachment')}
/>;
};
function showStickersButton(props: IProps): ReactElement {