This repository has been archived on 2025-07-31. You can view files and clone it, but cannot push or open issues or pull requests.
Files
terminally-online/src/screens/addTag.tsx
2023-07-22 17:13:16 +03:00

77 lines
2.1 KiB
TypeScript

import React, { useState } from 'react';
import { ScrollView, View } from 'react-native';
import { Appbar, Button, useTheme } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { useRealm } from '@realm/react';
import styles from '../styles';
import {
generateRandomColor,
validateColor,
validateTagName,
} from '../utilities';
import { ORIENTATION, useDimensions } from '../contexts';
import { Tag } from '../database';
import { TagEditor } from '../components';
const AddTag = () => {
const { goBack } = useNavigation();
const { colors } = useTheme();
const { orientation } = useDimensions();
const realm = useRealm();
const [tagName, setTagName] = useState(validateTagName('newTag'));
const [tagColor, setTagColor] = useState(
validateColor(generateRandomColor()),
);
const handleSave = () => {
realm.write(() => {
realm.create(Tag.schema.name, {
name: tagName.parsed,
color: tagColor.parsed,
});
});
goBack();
};
return (
<>
<Appbar.Header>
<Appbar.BackAction onPress={() => goBack()} />
<Appbar.Content title={'Add Tag'} />
</Appbar.Header>
<ScrollView
contentContainerStyle={[
orientation === ORIENTATION.PORTRAIT
? styles.paddingVertical
: styles.smallPaddingVertical,
styles.paddingHorizontal,
styles.flexGrow,
styles.flexColumnSpaceBetween,
{ backgroundColor: colors.background },
]}>
<View style={[styles.flex, styles.justifyStart]}>
<TagEditor
tagName={tagName}
setTagName={setTagName}
tagColor={tagColor}
setTagColor={setTagColor}
/>
</View>
<View style={[styles.flex, styles.justifyEnd]}>
<Button
mode="contained"
icon="floppy"
onPress={handleSave}
disabled={!tagName.valid || !tagColor.valid}>
Save
</Button>
</View>
</ScrollView>
</>
);
};
export default AddTag;