Dingdong_app/components/Dialog.js

import React from "react";
import { StyleSheet } from "react-native";
import { Modal, Card, Text, Button, Layout } 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 ? (
                    <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,
    },
});