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, selectList } = 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 [bottomModalX, changeBottomModalx] = React.useState("");
  const [selectVal, setSelectVal] = React.useState("");

  const selectInfo = React.useMemo(() => {
    if (type === "select" && props.value && selectList) {
      const childrens = [...flattenSelect(selectList, "children")];
      return (
        childrens.find(item => {
          return item.id === props.value;
        }) || { name: " " }
      );
    }
    return { name: " " };
  }, [props.value, 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);
          }}
          week={props.week}
          startTime={props.startTime}
          endTime={props.endTime}
        />
      );
    }
    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;