Dingdong_app/components/FormInput.js

import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { View, StyleSheet, TouchableWithoutFeedback } from "react-native";
import {
    Layout,
    Input,
    Button,
    useTheme,
    Icon,
    Text,
    SelectItem,
} from "@ui-kitten/components";
import { Cascader, BottomModal } from "beeshell";
import variables from "../constants/customTheme";
import { useModel } from "flooks";
import OpenTime from "./OpenTime";
import Datepicker from "./Datepicker";
import UpLoadImage from "./UpLoadImage";
import moment from "moment";
import Actionsheet from "./Actionsheet";

const AlertIcon = props => <Icon {...props} name='alert-circle-outline' />;

function* flattenSelect(array, key) {
    for (const item of array) {
        let _array = key ? item[key] : item;
        if (Array.isArray(_array) && _array.length > 0) {
            yield* flattenSelect(_array, key);
        } else {
            yield item;
        }
    }
}

const FormInput = React.memo(props => {
    const { appearance } = props;
    const [secureTextEntry, setSecureTextEntry] = React.useState(true);
    const { cancel, confirm } = useModel("wordsModel");
    const toggleSecureEntry = () => {
        setSecureTextEntry(!secureTextEntry);
    };

    const renderIcon = props => (
        <TouchableWithoutFeedback onPress={toggleSecureEntry}>
            <Icon {...props} name={secureTextEntry ? "eye-off" : "eye"} />
        </TouchableWithoutFeedback>
    );
    function getInputProps(props) {
        let _props = {
            value: props.value || "",
            placeholder: props.placeholder,
        };
        if (props.type === "phone") {
            _props = {
                ..._props,
                dataDetectorTypes: "phoneNumber",
                maxLength: 11,
                keyboardType: "phone-pad",
            };
        } else if (props.type === "password") {
            _props = {
                ..._props,
                accessoryRight: ImageProps => renderIcon(ImageProps),
                secureTextEntry: secureTextEntry,
            };
        } else if (props.type == "code") {
            _props = {
                ..._props,
                maxLength: 6,
                keyboardType: "numeric",
            };
        } else if (props.type == "amount" || props.type == "money") {
            _props = {
                ..._props,
                keyboardType: "numeric",
            };
        }
        if (props.onChange) {
            _props = {
                ..._props,
                onChangeText: nextValue => props.onChange(nextValue),
            };
        }

        return _props;
    }

    const inputProps = getInputProps(props);

    // const myInput = () => {
    //     if (inputProps != null) {
    //         return;
    //     }
    // };

    const Label = props => {
        return (
            <View
                style={[
                    appearance === "inner" ? styles.labelleft : styles.label,
                    props.type === "img" ? { alignSelf: "flex-start" } : {},
                    props.labelStyle || {},
                ]}
            >
                <Text
                    category='c1'
                    style={{
                        textAlign: appearance != "inner" ? "right" : "left",
                    }}
                >
                    {props.label}
                </Text>
            </View>
        );
    };
    const ForwardIcon = props => <Icon {...props} name='arrow-ios-forward' />;

    const selectList = props.selectList ? props.selectList : [];

    const [bottomModalX, changeBottomModalx] = React.useState("");
    const [selectVal, setSelectVal] = React.useState("");

    const selectInfo = React.useMemo(() => {
        if (props.type === "select" && props.value && selectList.length > 0) {
            const childrens = [...flattenSelect(selectList, "children")];
            return (
                childrens.find(item => {
                    return item.id == props.value;
                }) || { name: " " }
            );
        } else {
            return { name: " " };
        }
    }, [props.value, props.type, selectList]);

    const [open, ChangeOpen] = React.useState(false);

    function submitEvent(val) {
        console.log(val);
    }

    const Btn = ({ btnText }) => (
        <Button
            appearance='ghost'
            size='tiny'
            style={{ paddingVertical: 8, marginLeft: 5 }}
        >
            {btnText}
        </Button>
    );

    const theme = useTheme();

    function getMain(type, props) {
        if (type == "select") {
            return (
                <>
                    <SelectItem
                        appearance='form'
                        style={{ flex: 1 }}
                        accessoryRight={ForwardIcon}
                        title={selectInfo.name}
                        onPress={() => {
                            bottomModalX.open();
                        }}
                    />
                    <BottomModal
                        ref={c => {
                            changeBottomModalx(c);
                        }}
                        title={props.selectTitle}
                        titleStyle={styles.titleStyle}
                        cancelable={true}
                        leftLabelText={cancel}
                        leftLabelTextStyle={styles.leftLabelTextStyle}
                        rightLabelText={confirm}
                        rightLabelTextStyle={styles.rightLabelTextStyle}
                        rightCallback={() => {
                            props.onChange(selectVal);
                        }}
                    >
                        <Cascader
                            style={{
                                width: "100%",
                                height: 200,
                                marginBottom: 50,
                                minHeight: 200,
                            }}
                            data={selectList}
                            fieldKeys={{
                                labelKey: "name",
                                idKey: "id",
                                activeKey: "choose",
                            }}
                            onChange={(value, info) => {
                                setSelectVal(value[0]);
                            }}
                        />
                    </BottomModal>
                </>
            );
        } else if (type == "openTime") {
            return (
                <OpenTime
                    open={open}
                    submit={(start, end, week) => {
                        ChangeOpen(false);
                        props.onChange(
                            week.join(","),
                            moment(start, "HH:mm").format("HH:mm:ss"),
                            moment(end, "HH:mm").format("HH:mm:ss")
                        );
                        console.log(
                            moment(start, "HH:mm").format("HH:mm:ss"),
                            moment(end, "HH:mm").format("HH:mm:ss"),
                            week
                        );
                    }}
                    cancelEvent={() => {
                        ChangeOpen(false);
                    }}
                    openModal={() => {
                        ChangeOpen(true);
                    }}
                    defaultValue={props.defaultValue}
                />
            );
        } else if (type == "date") {
            return (
                <Datepicker chooseDate={props.onChange} value={props.value} />
            );
        } else if (type == "url") {
            return (
                <SelectItem
                    appearance='form'
                    style={{ flex: 1 }}
                    accessoryRight={ForwardIcon}
                    title={props.value || " "}
                    onPress={props.changePath}
                />
            );
        } else if (type == "actionSheet") {
            return (
                <>
                    <Actionsheet
                        list={props.list}
                        value={props.value}
                        onChange={props.onChange}
                    />
                </>
            );
        } else if (type == "img") {
            return (
                <UpLoadImage
                    style={styles.upload}
                    value={props.value}
                    changeIcon={props.onChange}
                />
            );
        } else if (appearance == "inner" && props.type == "code") {
            return (
                <Input
                    {...inputProps}
                    accessoryLeft={leftprops => (
                        <Label {...props} {...leftprops} />
                    )}
                    accessoryRight={() => <Btn btnText={props.btnText} />}
                    size='small'
                    style={styles.input}
                    appearance='innerCode'
                />
            );
        } else if (appearance == "inner") {
            return (
                <Input
                    {...inputProps}
                    accessoryLeft={leftprops => (
                        <Label {...props} {...leftprops} />
                    )}
                    size='small'
                    style={styles.input}
                    appearance='inner'
                />
            );
        } else {
            return <Input {...inputProps} size='small' style={styles.input} />;
        }
    }

    return (
        <Layout
            level='1'
            style={[
                styles.inputContainer,
                { ...props.style },
                props.type === "img" ? { flexDirection: "column" } : {},
                { paddingVertical: appearance == "inner" ? 0 : 10 },
            ]}
        >
            {appearance !== "inner" && <Label {...props} />}

            {(!props.value || props.value == " ") && (
                <Text category='c1' style={styles.sub}>
                    {props.sub}
                </Text>
            )}

            {getMain(props.type, props)}

            {appearance !== "inner" && props.type == "code" && Btn(props)}
        </Layout>
    );
});

function ChnageTime(sendNum, isSend, changeSend_Num) {
    let num = sendNum - 1;
    console.log(num);
    changeSend_Num(true, num);
    setTimeout(() => {
        ChnageTime(num, isSend, changeSend_Num);
    }, 1000);
}

const styles = StyleSheet.create({
    inputContainer: {
        flexDirection: "row",
        alignItems: "center",
        paddingVertical: 10,
        paddingHorizontal: 4,
    },
    input: {
        flex: 1,
    },
    label: {
        width: 80,
        marginRight: 19,
        flexShrink: 0,
    },
    labelleft: {
        width: 73,
        flexShrink: 0,
    },
    right: {
        flexDirection: "row",
    },
    code: {
        paddingHorizontal: 5,
        marginLeft: 5,
    },
    selectContent: {
        backgroundColor: "#F0F0F0",
    },
    titleStyle: {
        fontSize: 15,
    },
    leftLabelTextStyle: {
        fontSize: 13,
    },
    rightLabelTextStyle: {
        fontSize: 13,
    },
    sub: {
        color: "#787878",
        position: "absolute",
        left: 90,
        zIndex: 2,
    },
    upload: {
        marginTop: 20,
        width: 67,
        height: 67,
    },
});

export default FormInput;