Dingdong_app/components/FormInput.js

/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable no-shadow */
/* eslint-disable no-underscore-dangle */
/* eslint-disable no-restricted-syntax */
import * as WebBrowser from "expo-web-browser";
import * as React from "react";
import { View, StyleSheet, TouchableWithoutFeedback } from "react-native";
import {
    Layout,
    Input,
    Button,
    Icon,
    Text,
    SelectItem,
} from "@ui-kitten/components";
import { Cascader, BottomModal } from "beeshell";
import { useModel } from "flooks";
import moment from "moment";
import OpenTime from "./OpenTime";
import Datepicker from "./Datepicker";
import UpLoadImage from "./UpLoadImage";
import Actionsheet from "./Actionsheet";


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



function* flattenSelect(array, key) {
    for (const item of array) {
        const _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,type } = props;
    const [secureTextEntry, setSecureTextEntry] = React.useState(true);
    const { cancel, confirm } = useModel("wordsModel");
    const toggleSecureEntry = () => {
        setSecureTextEntry(!secureTextEntry);
    };

    // eslint-disable-next-line no-shadow
    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 (type === "phone") {
            _props = {
                ..._props,
                dataDetectorTypes: "phoneNumber",
                maxLength: 11,
                keyboardType: "phone-pad",
            };
        } else if (type === "password") {
            _props = {
                ..._props,
                accessoryRight: ImageProps => renderIcon(ImageProps),
                secureTextEntry,
            };
        } else if (type === "code") {
            _props = {
                ..._props,
                maxLength: 6,
                keyboardType: "numeric",
            };
        } else if (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 = ({type,labelStyle,label}) => {
        return (
          <View
            style={[
                    appearance === "inner" ? styles.labelleft : styles.label,
                    type === "img" ? { alignSelf: "flex-start" } : {},
                    labelStyle || {},
                ]}
          >
            <Text
              category='c1'
              style={{
                        textAlign: appearance !== "inner" ? "right" : "left",
                    }}
            >
              {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 (type === "select" && props.value && selectList.length > 0) {
            const childrens = [...flattenSelect(selectList, "children")];
            return (
                childrens.find(item => {
                    return item.id === props.value;
                }) || { name: " " }
            );
        } 
            return { name: " " };
        
    }, [props.value, props.type, selectList]);

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

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


    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
                  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) => {
                                setSelectVal(value[0]);
                            }}
                  />
                </BottomModal>
              </>
            );
        } 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")
                        );
                    }}
                cancelEvent={() => {
                        ChangeOpen(false);
                    }}
                openModal={() => {
                        ChangeOpen(true);
                    }}
                defaultValue={props.defaultValue}
              />
            );
        } if (type === "date") {
            return (
              <Datepicker chooseDate={props.onChange} value={props.value} />
            );
        } if (type === "url") {
            return (
              <SelectItem
                appearance='form'
                style={{ flex: 1 }}
                accessoryRight={ForwardIcon}
                title={props.value || " "}
                onPress={props.changePath}
              />
            );
        } if (type === "actionSheet") {
            return (
              <>
                <Actionsheet
                  list={props.list}
                  value={props.value}
                  onChange={props.onChange}
                />
              </>
            );
        } if (type === "img") {
            return (
              <UpLoadImage
                style={styles.upload}
                value={props.value}
                changeIcon={props.onChange}
              />
            );
        } if (appearance === "inner" && type === "code") {
            return (
              <Input
                {...inputProps}
                accessoryLeft={leftprops => (
                  <Label {...props} {...leftprops} />
                    )}
                accessoryRight={() => <Btn btnText={props.btnText} />}
                size='small'
                style={styles.input}
                appearance='innerCode'
              />
            );
        } if (appearance === "inner") {
            return (
              <Input
                {...inputProps}
                accessoryLeft={leftprops => (
                  <Label {...props} {...leftprops} />
                    )}
                size='small'
                style={styles.input}
                appearance='inner'
              />
            );
        } 
            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>
    );
});


export default FormInput;