2024-04-15 19:09:53 +03:00
|
|
|
import { useHotkeys } from 'react-hotkeys-hook';
|
2024-05-24 07:30:20 +03:00
|
|
|
import { useSnapshot } from 'valtio';
|
2024-04-15 19:09:53 +03:00
|
|
|
|
2023-09-05 13:49:16 +03:00
|
|
|
import openCompose from '../utils/open-compose';
|
2024-03-27 16:22:47 +03:00
|
|
|
import openOSK from '../utils/open-osk';
|
2023-09-05 13:49:16 +03:00
|
|
|
import states from '../utils/states';
|
|
|
|
|
|
|
|
import Icon from './icon';
|
|
|
|
|
|
|
|
export default function ComposeButton() {
|
2024-05-24 07:30:20 +03:00
|
|
|
const snapStates = useSnapshot(states);
|
|
|
|
|
2023-09-05 16:44:38 +03:00
|
|
|
function handleButton(e) {
|
2024-05-24 07:30:20 +03:00
|
|
|
if (snapStates.composerState.minimized) {
|
|
|
|
states.composerState.minimized = false;
|
|
|
|
openOSK();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2023-09-05 16:44:38 +03:00
|
|
|
if (e.shiftKey) {
|
|
|
|
const newWin = openCompose();
|
|
|
|
|
|
|
|
if (!newWin) {
|
|
|
|
states.showCompose = true;
|
|
|
|
}
|
|
|
|
} else {
|
2024-03-27 16:22:47 +03:00
|
|
|
openOSK();
|
2023-09-05 16:44:38 +03:00
|
|
|
states.showCompose = true;
|
|
|
|
}
|
|
|
|
}
|
2023-09-05 13:49:16 +03:00
|
|
|
|
2023-09-05 16:44:38 +03:00
|
|
|
useHotkeys('c, shift+c', handleButton, {
|
|
|
|
ignoreEventWhen: (e) => {
|
|
|
|
const hasModal = !!document.querySelector('#modal-container > *');
|
|
|
|
return hasModal;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
return (
|
2024-05-24 07:30:20 +03:00
|
|
|
<button
|
|
|
|
type="button"
|
|
|
|
id="compose-button"
|
|
|
|
onClick={handleButton}
|
|
|
|
class={`${snapStates.composerState.minimized ? 'min' : ''} ${
|
|
|
|
snapStates.composerState.publishing ? 'loading' : ''
|
|
|
|
} ${snapStates.composerState.publishingError ? 'error' : ''}`}
|
|
|
|
>
|
2023-09-05 13:49:16 +03:00
|
|
|
<Icon icon="quill" size="xl" alt="Compose" />
|
|
|
|
</button>
|
|
|
|
);
|
|
|
|
}
|