Dingdong_app/components/Dialog.js

/* eslint-disable no-shadow */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/jsx-props-no-spreading */
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 Textarea from "react-native-textarea";
import dialogModel from "../models/dialogModel";

setModel("dialogModel", dialogModel);


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,
    },
});



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) {
            return {
                title,
                cancelLabelText,
                confirmLabelText,
                cancelable,
                confirmCallback,
                cancelCallback,
                bodyText,
                isEdit,
                status,
                ...textAreaInfo,
                ...showInfo,
            };
        } 
            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>
    );
}