93 lines
2.5 KiB
TypeScript
93 lines
2.5 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,
|
|
validateMemeDescription,
|
|
validateMemeTitle,
|
|
} from '../../utilities';
|
|
|
|
const MemeEditor = ({
|
|
imageUri,
|
|
memeTitle,
|
|
setMemeTitle,
|
|
memeDescription,
|
|
setMemeDescription,
|
|
memeTags,
|
|
setMemeTags,
|
|
}: {
|
|
imageUri: string[];
|
|
memeTitle: StringValidationResult;
|
|
setMemeTitle: (name: StringValidationResult) => void;
|
|
memeDescription: StringValidationResult;
|
|
setMemeDescription: (description: StringValidationResult) => void;
|
|
memeTags: Map<string, Tag>;
|
|
setMemeTags: (tags: Map<string, Tag>) => void;
|
|
}) => {
|
|
const { dimensions, fixed, responsive } = useDimensions();
|
|
|
|
const [imageWidth, setImageWidth] = useState<number>();
|
|
const [imageHeight, setImageHeight] = useState<number>();
|
|
|
|
useEffect(() => {
|
|
Image.getSize(imageUri[0], (width, height) => {
|
|
const paddedWidth = dimensions.width - dimensions.width * 0.08;
|
|
setImageWidth(paddedWidth);
|
|
setImageHeight((paddedWidth / width) * height);
|
|
});
|
|
}, [dimensions.width, imageUri]);
|
|
|
|
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: imageUri[0] }}
|
|
style={{
|
|
width: imageWidth,
|
|
height: imageHeight,
|
|
marginBottom: fixed.verticalScale(10),
|
|
borderRadius: fixed.verticalScale(5),
|
|
}}
|
|
/>
|
|
<MemeTagSelector
|
|
memeTags={memeTags}
|
|
setMemeTags={setMemeTags}
|
|
style={{
|
|
marginBottom: responsive.verticalScale(10),
|
|
}}
|
|
/>
|
|
<TextInput
|
|
mode="outlined"
|
|
label="Description"
|
|
multiline
|
|
numberOfLines={6}
|
|
style={{
|
|
marginBottom: responsive.verticalScale(15),
|
|
}}
|
|
value={memeDescription.raw}
|
|
onChangeText={description =>
|
|
setMemeDescription(validateMemeDescription(description))
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MemeEditor;
|