Dingdong_app/components/Dialog.js

import React from "react";
import { StyleSheet } from "react-native";
import {
    Modal,
    Card,
    Text,
    Button,
    Layout,
    Input,
} from "@ui-kitten/components";
import { useModel, setModel } from "flooks";
import dialogModel from "../models/dialogModel";
import Textarea from "react-native-textarea";

setModel("dialogModel", dialogModel);

const Header = (props, title) => (
    <Text {...props} category='s1'>
        {title}
    </Text>
);

const Footer = (
    props,
    cancelLabelText,
    confirmLabelText,
    cancelable,
    confirmCallback,
    cancelCallback
) => (
    <Layout {...props} style={[props.style, styles.footerContainer]}>
        {cancelable && (
            <Button
                style={styles.footerControl}
                status='basic'
                size='small'
                appearance='outline'
                onPress={cancelCallback}
            >
                {cancelLabelText}
            </Button>
        )}
        <Button
            style={styles.footerControl}
            size='small'
            onPress={confirmCallback}
        >
            {confirmLabelText}
        </Button>
    </Layout>
);

export default function Dialog(props) {
    const { tip, confirm, cancel } = useModel("wordsModel");

    const {
        hideDialog,
        diloadShow,
        showInfo,
        title,
        cancelLabelText,
        confirmLabelText,
        cancelable,
        confirmCallback,
        cancelCallback,
        bodyText,
        status,
        isEdit,
        textAreaInfo,
    } = useModel("dialogModel");
    const showAllInfo = React.useMemo(() => {
        if (diloadShow) {
            console.log({
                title,
                cancelLabelText,
                confirmLabelText,
                cancelable,
                confirmCallback,
                cancelCallback,
                bodyText,
                isEdit,
                status,
                ...textAreaInfo,
                ...showInfo,
            });
            return {
                title,
                cancelLabelText,
                confirmLabelText,
                cancelable,
                confirmCallback,
                cancelCallback,
                bodyText,
                isEdit,
                status,
                ...textAreaInfo,
                ...showInfo,
            };
        } else {
            return {};
        }
    }, [showInfo, diloadShow]);

    const [introduction, changeIntroduction] = React.useState();
    return (
        <Modal visible={diloadShow} backdropStyle={styles.backdrop}>
            <Card
                style={styles.card}
                appearance='diaogOutline'
                header={props => {
                    return Header(props, showAllInfo.title || tip);
                }}
                footer={props => {
                    return Footer(
                        props,
                        showAllInfo.cancelLabelText || cancel,
                        showAllInfo.confirmLabelText || confirm,
                        showAllInfo.cancelable || false,
                        () => {
                            hideDialog();
                            if (showAllInfo.confirmCallback) {
                                if (showAllInfo.isEdit) {
                                    showAllInfo.confirmCallback(introduction);
                                } else {
                                    showAllInfo.confirmCallback();
                                }
                            }
                        },
                        () => {
                            hideDialog();
                            if (showAllInfo.cancelCallback) {
                                showAllInfo.cancelCallback();
                            }
                        }
                    );
                }}
            >
                {showAllInfo.isEdit ? (
                    showAllInfo.InputType ? (
                        <Input
                            dataDetectorTypes={
                                showAllInfo.InputType == "phone"
                                    ? "phoneNumber"
                                    : "default"
                            }
                            keyboardType={
                                showAllInfo.InputType == "phone"
                                    ? "phone-pad"
                                    : "default"
                            }
                            onChangeText={changeIntroduction}
                            defaultValue={showAllInfo.defaultValue}
                            maxLength={showAllInfo.maxLength}
                            placeholder={showAllInfo.pla}
                        />
                    ) : (
                        <Textarea
                            containerStyle={styles.textareaContainer}
                            style={styles.textarea}
                            onChangeText={changeIntroduction}
                            defaultValue={showAllInfo.defaultValue}
                            maxLength={showAllInfo.maxLength}
                            placeholder={showAllInfo.pla}
                            placeholderTextColor={"#B4B4B4"}
                            underlineColorAndroid={"transparent"}
                        />
                    )
                ) : (
                    <Text
                        {...props}
                        category='p1'
                        status={showAllInfo.status || ""}
                    >
                        {showAllInfo.bodyText || "确认删除吗"}
                    </Text>
                )}
            </Card>
        </Modal>
    );
}

const styles = StyleSheet.create({
    backdrop: {
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    card: {
        alignItems: "center",
        minWidth: 263,
    },
    footerContainer: {
        flexDirection: "row",
    },
    footerControl: {
        minWidth: 112,
        marginHorizontal: 10,
    },
    textareaContainer: {
        backgroundColor: "#F0F0F0",
        height: 100,
        alignSelf: "stretch",
        width: 250,
        borderRadius: 4,
    },
    textarea: {
        textAlignVertical: "top", // hack android
        fontSize: 13,
        color: "#333",
        paddingHorizontal: 14,
        paddingVertical: 10,
        height: 100,
    },
});