95 lines
2.3 KiB
TypeScript
95 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { HelperText, TextInput } from 'react-native-paper';
|
|
import { Image } from 'react-native';
|
|
import { useDimensions } from '../../contexts';
|
|
import LoadingView from '../loadingView';
|
|
import { MemeTagSelector } from '.';
|
|
import { Tag } from '../../database';
|
|
import { StringValidationResult, validateMemeTitle } from '../../utilities';
|
|
|
|
const memeEditorStyles = {
|
|
image: {
|
|
marginBottom: 15,
|
|
borderRadius: 5,
|
|
},
|
|
memeTagSelector: {
|
|
marginBottom: 10,
|
|
},
|
|
description: {
|
|
marginBottom: 10,
|
|
},
|
|
};
|
|
|
|
const MemeEditor = ({
|
|
memeUri,
|
|
memeTitle,
|
|
setMemeTitle,
|
|
memeTags,
|
|
setMemeTags,
|
|
}: {
|
|
memeUri: string;
|
|
memeTitle: StringValidationResult;
|
|
setMemeTitle: (name: StringValidationResult) => void;
|
|
memeTags: Map<string, Tag>;
|
|
setMemeTags: (tags: Map<string, Tag>) => void;
|
|
}) => {
|
|
const { dimensions } = useDimensions();
|
|
|
|
const [imageWidth, setImageWidth] = useState<number>();
|
|
const [imageHeight, setImageHeight] = useState<number>();
|
|
|
|
useEffect(() => {
|
|
// eslint-disable-next-line unicorn/no-useless-undefined
|
|
setImageWidth(undefined);
|
|
// eslint-disable-next-line unicorn/no-useless-undefined
|
|
setImageHeight(undefined);
|
|
|
|
Image.getSize(memeUri, (width, height) => {
|
|
const paddedWidth = dimensions.width * 0.92;
|
|
const paddedHeight = Math.max(
|
|
Math.min((paddedWidth / width) * height, 500),
|
|
100,
|
|
);
|
|
|
|
setImageWidth(paddedWidth);
|
|
setImageHeight(paddedHeight);
|
|
});
|
|
}, [memeUri, dimensions.width]);
|
|
|
|
if (!imageWidth || !imageHeight) return <LoadingView />;
|
|
|
|
return (
|
|
<>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Title"
|
|
value={memeTitle.raw}
|
|
onChangeText={title => setMemeTitle(validateMemeTitle(title))}
|
|
error={!memeTitle.valid}
|
|
selectTextOnFocus
|
|
/>
|
|
<HelperText type="error" visible={!memeTitle.valid}>
|
|
{memeTitle.error}
|
|
</HelperText>
|
|
<Image
|
|
source={{ uri: memeUri }}
|
|
style={[
|
|
{
|
|
width: imageWidth,
|
|
height: imageHeight,
|
|
},
|
|
memeEditorStyles.image,
|
|
]}
|
|
resizeMode="contain"
|
|
/>
|
|
<MemeTagSelector
|
|
memeTags={memeTags}
|
|
setMemeTags={setMemeTags}
|
|
style={memeEditorStyles.memeTagSelector}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MemeEditor;
|