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

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

View file

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