import { useContext, useEffect, useState } from "react";
import { AppContext, AppStyles, IsPlatformIos } from "../../utils";
import {
KeyboardAvoidingView,
Modal,
ScrollView,
Text,
TextInput,
TouchableOpacity,
View,
} from "react-native";
import { Divider } from "../Divider";
import MyIcon from "../Icon";
import { useTranslation } from "react-i18next";
/*
transparent: set this to prevent modal reopening on iOS
https://github.com/facebook/react-native/issues/34018
*/
const modalContentStyle = { margin: 10, paddingTop: 10 };
export default function MyModal({
children,
isOpen,
closeModal,
header,
content,
disableAnimationForIos,
scrollView,
}) {
const appContext = useContext(AppContext);
const getContent = () => {
if (scrollView) {
return (
{content}
);
}
return {content};
};
return (
closeModal()}
transparent
>
{children}
{header}
{getContent()}
);
}
export function MyDefaultModalHeader({ title, closeModal }) {
const appContext = useContext(AppContext);
return (
closeModal()}>
{title}
);
}
export function MyPickerModalListItem({ onPress, itemName, itemSelected }) {
const appContext = useContext(AppContext);
return (
<>
{itemName}
{itemSelected && (
)}
);
}
export function MyPickerModal({ isOpen, setIsOpen, items, searchFilter }) {
const appContext = useContext(AppContext);
const { t } = useTranslation();
const [providedItems, setProvidedItems] = useState([]);
const [searchFilterInput, setSearchFilterInput] = useState("");
useEffect(() => setProvidedItems(items), [items]);
const closeModal = () => {
setIsOpen(false);
setProvidedItems(items);
setSearchFilterInput("");
};
return (
closeModal()}
>
closeModal()}>
{searchFilter && (
{
setSearchFilterInput(text);
setProvidedItems(() =>
items.filter((provItem) => {
return provItem.label
.toLowerCase()
.startsWith(text.toLowerCase());
})
);
}}
/>
{searchFilterInput !== "" && (
{
setSearchFilterInput("");
setProvidedItems(items);
}}
>
)}
)}
{providedItems.length === 0 && (
{t("common.pickerSearchFilterNoResults")}
)}
{providedItems.map((item, i) => {
return item.selected ? (
closeModal()}>
{item.label}
) : (
{
closeModal();
item.onPress();
}}
>
{item.label}
);
})}
);
}
export function MyTextInputModal({
isOpen,
setIsOpen,
onTextInputSave,
modalTitle,
inputTitle,
inputDescription,
}) {
const appContext = useContext(AppContext);
const closeModal = () => setIsOpen(false);
return (
closeModal()}
>
closeModal()}>
{modalTitle}
{
closeModal();
onTextInputSave();
}}
>
{inputTitle}
{inputDescription}
);
}