karaolidis/terminally-online
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pasting from clipboard

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2023-07-29 22:43:58 +03:00
parent 391e232bf7
commit 5770a9b234
8 changed files with 388 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/floatingActionButton.tsx
View File

@@ -1,12 +1,18 @@
import React, { useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { Keyboard, StyleSheet } from 'react-native';
import { FAB } from 'react-native-paper';
import { FAB, Snackbar } from 'react-native-paper';
import { ParamListBase, useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { pick } from 'react-native-document-picker';
import { useDeviceOrientation } from '@react-native-community/hooks';
import Clipboard from '@react-native-clipboard/clipboard';
import { documentPickerResponseToAddMemeFile, ROUTE } from '../types';
import { allowedMimeTypes, noOp } from '../utilities';
import {
allowedMimeTypes,
getFilenameFromUri,
guessMimeType,
noOp,
} from '../utilities';
const floatingActionButtonStyles = StyleSheet.create({
fab: {
@@ -17,6 +23,9 @@ const floatingActionButtonStyles = StyleSheet.create({
paddingBottom: 40,
paddingRight: 12,
},
snackbar: {
marginBottom: 90,
},
});
const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
@@ -27,6 +36,8 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
const [state, setState] = useState(false);
const [keyboardOpen, setKeyboardOpen] = useState(false);
const [snackbarMessage, setSnackbarMessage] = useState<string>();
useEffect(() => {
const keyboardDidShowListener = Keyboard.addListener(
'keyboardDidShow',
@@ -43,35 +54,85 @@ const FloatingActionButton = ({ visible = true }: { visible?: boolean }) => {
};
}, []);
return (
<FAB.Group
open={state}
visible={visible && !keyboardOpen}
icon={state ? 'image' : 'plus'}
actions={[
const handleAddMeme = useCallback(async () => {
const response = await pick({
type: allowedMimeTypes,
allowMultiSelection: true,
}).catch(noOp);
if (!response) return;
const files = documentPickerResponseToAddMemeFile(response);
navigate(ROUTE.ADD_MEME, { files });
}, [navigate]);
const handleAddTag = useCallback(() => {
navigate(ROUTE.ADD_TAG);
}, [navigate]);
const handlePaste = useCallback(async () => {
const uri = await Clipboard.getURI();
if (!uri) {
setSnackbarMessage('Clipboard does not contain a URI.');
return;
}
const mimeType = guessMimeType(uri);
if (!mimeType) {
setSnackbarMessage('Unsupported MIME type.');
return;
}
navigate(ROUTE.ADD_MEME, {
files: [
{
icon: 'tag',
label: 'Tag',
onPress: () => navigate(ROUTE.ADD_TAG),
uri: uri,
filename: getFilenameFromUri(uri),
type: mimeType,
},
]}
onStateChange={({ open }) => setState(open)}
onPress={async () => {
if (!state) return;
const response = await pick({
type: allowedMimeTypes,
allowMultiSelection: true,
}).catch(noOp);
if (!response) return;
const files = documentPickerResponseToAddMemeFile(response);
navigate(ROUTE.ADD_MEME, { files });
}}
style={
orientation === 'portrait'
? floatingActionButtonStyles.fab
: floatingActionButtonStyles.fabLandscape
}
/>
],
});
}, [navigate]);
return (
<>
<FAB.Group
open={state}
visible={visible && !keyboardOpen}
icon={state ? 'close' : 'plus'}
actions={[
{
icon: 'content-paste',
label: 'Paste',
onPress: handlePaste,
},
{
icon: 'tag',
label: 'Tag',
onPress: handleAddTag,
},
{
icon: 'image',
label: 'Meme',
onPress: handleAddMeme,
},
]}
onStateChange={({ open }) => setState(open)}
style={
orientation === 'portrait'
? floatingActionButtonStyles.fab
: floatingActionButtonStyles.fabLandscape
}
/>
<Snackbar
visible={!!snackbarMessage}
// eslint-disable-next-line unicorn/no-useless-undefined
onDismiss={() => setSnackbarMessage(undefined)}
style={floatingActionButtonStyles.snackbar}
action={{
label: 'Dismiss',
// eslint-disable-next-line unicorn/no-useless-undefined
onPress: () => setSnackbarMessage(undefined),
}}>
{snackbarMessage}
</Snackbar>
</>
);
};

3
src/components/storageLocationChangeDialog.tsx
View File

@@ -16,12 +16,10 @@ const storageLocationChangeDialogStyles = StyleSheet.create({
const StorageLocationChangeDialog = ({
visible,
setVisible,
setSnackbarVisible,
setSnackbarMessage,
}: {
visible: boolean;
setVisible: (visible: boolean) => void;
setSnackbarVisible: (visible: boolean) => void;
setSnackbarMessage: (message: string) => void;
}) => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -45,7 +43,6 @@ const StorageLocationChangeDialog = ({
if (isPermissionForPath(storageUri, newStorageUri)) {
setSnackbarMessage('Folder already selected.');
setSnackbarVisible(true);
setVisible(false);
return;
}

28
src/screens/memeView.tsx
View File

@@ -59,8 +59,7 @@ const MemeView = ({
const { ids } = route.params;
const [index, setIndex] = useState(route.params.index);
const [snackbarVisible, setSnackbarVisible] = useState(false);
const [snackbarMessage, setSnackbarMessage] = useState('');
const [snackbarMessage, setSnackbarMessage] = useState<string>();
const flashListRef = useRef<FlashList<Meme>>(null);
@@ -101,24 +100,17 @@ const MemeView = ({
<Appbar.Action
icon="share"
onPress={() => {
shareMeme(realm, storageUri, memes[index]).catch(() => {
setSnackbarMessage('Failed to share meme!');
setSnackbarVisible(true);
});
shareMeme(realm, storageUri, memes[index]).catch(() =>
setSnackbarMessage('Failed to share meme!'),
);
}}
/>
<Appbar.Action
icon="content-copy"
onPress={async () => {
await copyMeme(realm, storageUri, memes[index])
.then(() => {
setSnackbarMessage('Meme copied!');
setSnackbarVisible(true);
})
.catch(() => {
setSnackbarMessage('Failed to copy meme!');
setSnackbarVisible(true);
});
.then(() => setSnackbarMessage('Meme copied!'))
.catch(() => setSnackbarMessage('Failed to copy meme!'));
}}
/>
<Appbar.Action
@@ -143,12 +135,14 @@ const MemeView = ({
</Appbar>
<Portal>
<Snackbar
visible={snackbarVisible}
onDismiss={() => setSnackbarVisible(false)}
visible={!!snackbarMessage}
// eslint-disable-next-line unicorn/no-useless-undefined
onDismiss={() => setSnackbarMessage(undefined)}
style={memeViewStyles.snackbar}
action={{
label: 'Dismiss',
onPress: () => setSnackbarVisible(false),
// eslint-disable-next-line unicorn/no-useless-undefined
onPress: () => setSnackbarMessage(undefined),
}}>
{snackbarMessage}
</Snackbar>

13
src/screens/settings.tsx
View File

@@ -60,8 +60,7 @@ const Settings = () => {
const dispatch = useDispatch();
const realm = useRealm();
const [snackbarVisible, setSnackbarVisible] = useState(false);
const [snackbarMessage, setSnackbarMessage] = useState('');
const [snackbarMessage, setSnackbarMessage] = useState<string>();
const [
storageLocationChangeDialogVisible,
@@ -84,7 +83,6 @@ const Settings = () => {
});
setSnackbarMessage('Meme metadata refreshed.');
setSnackbarVisible(true);
};
return (
@@ -162,17 +160,18 @@ const Settings = () => {
<StorageLocationChangeDialog
visible={storageLocationChangeDialogVisible}
setVisible={setStorageLocationChangeDialogVisible}
setSnackbarVisible={setSnackbarVisible}
setSnackbarMessage={setSnackbarMessage}
/>
</Portal>
<Snackbar
visible={snackbarVisible}
onDismiss={() => setSnackbarVisible(false)}
visible={!!snackbarMessage}
// eslint-disable-next-line unicorn/no-useless-undefined
onDismiss={() => setSnackbarMessage(undefined)}
style={settingsStyles.snackbar}
action={{
label: 'Dismiss',
onPress: () => setSnackbarVisible(false),
// eslint-disable-next-line unicorn/no-useless-undefined
onPress: () => setSnackbarMessage(undefined),
}}>
{snackbarMessage}
</Snackbar>

11
src/utilities/clipboard.ts Normal file
View File

@@ -0,0 +1,11 @@
import Clipboard from '@react-native-clipboard/clipboard';
const clipboardHasContent = () => {
return Promise.all([Clipboard.hasString(), Clipboard.hasURI()]).then(
([hasString, hasURI]) => {
return hasString || hasURI;
},
);
};
export { clipboardHasContent };

2
src/utilities/filesystem.ts
View File

@@ -2,6 +2,7 @@ import { MEME_TYPE } from '../database';
const allowedImageMimeTypes = [
'image/bmp',
'image/jpg',
'image/jpeg',
'image/png',
'image/webp',
@@ -14,6 +15,7 @@ const allowedMimeTypes = [...allowedImageMimeTypes, ...allowedGifMimeTypes];
const getMemeType = (mimeType: string): MEME_TYPE | undefined => {
switch (mimeType) {
case 'image/bmp':
case 'image/jpg':
case 'image/jpeg':
case 'image/png':
case 'image/webp': {

1
src/utilities/index.ts
View File

@@ -1,3 +1,4 @@
export { clipboardHasContent } from './clipboard';
export {
getContrastColor,
isHexColor,