Revize 51e53a71
Přidáno uživatelem Fantič před více než 1 rok
| src/components/notes/NoteView.tsx | ||
|---|---|---|
| 4 | 4 |
import { AVATAR_URL } from "../../api/constants";
|
| 5 | 5 |
import { useState } from "react";
|
| 6 | 6 |
import React from "react"; |
| 7 |
import { StyleProp, ViewStyle } from "react-native";
|
|
| 7 | 8 |
|
| 8 |
const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any }) => {
|
|
| 9 |
const NoteView = React.memo((props: { note: Note, handleReply: any, handleDelete: any, handleEdit: any, setConfirmDialog: any, navigation: any }) => {
|
|
| 9 | 10 |
const note = props.note; |
| 10 | 11 |
|
| 11 | 12 |
const [isEdited, setIsEdited] = useState(false); |
| ... | ... | |
| 20 | 21 |
).replace(/,/g, "").replace(/ /g, "-").replace(/-(?!.*-)/, " "); |
| 21 | 22 |
} |
| 22 | 23 |
|
| 23 |
const getUsernameInitials = (username: string ): string => {
|
|
| 24 |
const getUsernameInitials = (username: string): string => {
|
|
| 24 | 25 |
if (username) {
|
| 25 | 26 |
const words = username.split(" ");
|
| 26 | 27 |
const initials = words.map(word => word.charAt(0).toUpperCase()); |
| ... | ... | |
| 68 | 69 |
setIsEdited(false); |
| 69 | 70 |
} |
| 70 | 71 |
else {
|
| 71 |
props.handleEdit({...note, note: text});
|
|
| 72 |
props.handleEdit({ ...note, note: text });
|
|
| 72 | 73 |
setIsEdited(false); |
| 73 | 74 |
} |
| 74 | 75 |
} |
| 75 | 76 |
|
| 77 |
note.items = ["helo"] |
|
| 78 |
|
|
| 76 | 79 |
return ( |
| 77 |
<HStack marginTop="5%">
|
|
| 78 |
<Box width="10" height="10" marginTop="2.5%">
|
|
| 80 |
<HStack marginTop={5}>
|
|
| 81 |
<Box width="10" height="10" marginTop="2"> |
|
| 79 | 82 |
<Avatar bg={note.noteColor} size="sm" source={{
|
| 80 | 83 |
uri: AVATAR_URL + "/" + note.avatarUrl |
| 81 | 84 |
// TODO bude zde nebo v atributu ta připona? |
| ... | ... | |
| 84 | 87 |
{getUsernameInitials(note.username)}
|
| 85 | 88 |
</Avatar> |
| 86 | 89 |
</Box> |
| 87 |
<VStack width="97.5%"> |
|
| 88 |
<HStack> |
|
| 89 |
<Text bold width="60%"> |
|
| 90 |
<VStack flex={1} marginLeft="0.5">
|
|
| 91 |
|
|
| 92 |
{/* Top section */}
|
|
| 93 |
<HStack justifyContent={"space-between"}>
|
|
| 94 |
<Text bold> |
|
| 90 | 95 |
{note.username}
|
| 91 | 96 |
</Text> |
| 92 | 97 |
<Flex direction="row" alignItems="center" justify="flex-end" > |
| ... | ... | |
| 95 | 100 |
</Text> |
| 96 | 101 |
</Flex> |
| 97 | 102 |
</HStack> |
| 98 |
<HStack> |
|
| 103 |
|
|
| 104 |
{/* Middle section */}
|
|
| 105 |
<HStack justifyContent={"space-between"} marginTop={2}>
|
|
| 99 | 106 |
{isEdited ?
|
| 100 |
<TextArea fontSize="14" width="72.5%" autoCompleteType={undefined} value={text} onChangeText={setText} />
|
|
| 107 |
<TextArea flex={1} fontSize="14" autoCompleteType={undefined} value={text} onChangeText={setText} />
|
|
| 101 | 108 |
: |
| 102 |
<Text width="72.5%">
|
|
| 109 |
<Text flex={1} >
|
|
| 103 | 110 |
{text}
|
| 104 | 111 |
</Text> |
| 105 | 112 |
} |
| 106 | 113 |
|
| 107 | 114 |
{note.items && note.items.length > 0 &&
|
| 108 |
<Flex marginLeft="1.5%" direction="column" alignItems="flex-start" justify="flex-start" >
|
|
| 109 |
<Button width={"16"} variant="outline" size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
|
|
| 115 |
<Flex marginLeft={1} flex={0}>
|
|
| 116 |
<Button p={1} variant="outline" size="sm" onPress={() => props.navigation.navigate("Item", { itemId: note.items[0] })}>
|
|
| 110 | 117 |
{note.items[0]}
|
| 111 | 118 |
</Button> |
| 112 | 119 |
</Flex> |
| 113 | 120 |
|
| 114 | 121 |
} |
| 115 | 122 |
</HStack> |
| 116 |
<HStack> |
|
| 123 |
|
|
| 124 |
{/* Bottom section */}
|
|
| 125 |
<HStack justifyContent={"space-between"} marginTop={2}>
|
|
| 117 | 126 |
{/* () => props.handleEdit(note.uuid, text) */}
|
| 118 |
{props.handleReply != null &&
|
|
| 119 |
<Pressable onPress={() => props.handleReply(note.uuid, note.username)}>
|
|
| 120 |
<Text color="light.500">Reply</Text> |
|
| 121 |
</Pressable>} |
|
| 122 |
<Flex width="82.5%" direction="row" alignItems="center" justify="flex-end" marginTop="0.5%"> |
|
| 127 |
<Flex direction="row" alignItems="center"> |
|
| 128 |
{props.handleReply != null &&
|
|
| 129 |
<Pressable onPress={() => props.handleReply(note.uuid, note.username)}>
|
|
| 130 |
<Text color="light.500">Reply</Text> |
|
| 131 |
</Pressable>} |
|
| 132 |
</Flex> |
|
| 133 |
|
|
| 134 |
<Flex direction="row" alignItems="center" justify="flex-end"> |
|
| 123 | 135 |
{props.handleEdit != null &&
|
| 124 | 136 |
isEdited ? |
| 125 | 137 |
<> |
| 126 |
<Pressable onPress={saveEdit} marginRight="5%">
|
|
| 138 |
<Pressable onPress={saveEdit} marginRight={5}>
|
|
| 127 | 139 |
<Text color="light.500">Save</Text> |
| 128 | 140 |
</Pressable> |
| 129 |
<Pressable onPress={toggleEdited} marginRight="18.5%">
|
|
| 141 |
<Pressable onPress={toggleEdited} marginRight={6}>
|
|
| 130 | 142 |
<Text color="light.500">Cancel</Text> |
| 131 | 143 |
</Pressable> |
| 132 | 144 |
</> |
| 133 | 145 |
: |
| 134 |
<Pressable onPress={toggleEdited} marginRight={"5%"}>
|
|
| 146 |
<Pressable onPress={toggleEdited} marginRight={5}>
|
|
| 135 | 147 |
<EditIcon color="light.500" /> |
| 136 | 148 |
</Pressable>} |
| 137 | 149 |
{props.handleDelete != null &&
|
Také k dispozici: Unified diff
#re 10797 NoteView refactor -> Responsive layout