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 { useCreation } from "@umijs/hooks";
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;
    }
  }
}

function getInputProps(
  type,
  value,
  placeholder,
  onChange,
  secureTextEntry,
  renderIcon
) {
  let _props = {
    defaultValue: value || "",
    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" || type === "money") {
    _props = {
      ..._props,
      keyboardType: "numeric",
    };
  }
  if (onChange) {
    _props = {
      ..._props,
      onChangeText: nextValue => onChange(nextValue),
    };
  }

  return _props;
}

const ForwardIcon = props => <Icon {...props} name="arrow-ios-forward" />;

const Label = ({ type, labelStyle, label, appearance }) => {
  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 Btn = ({ btnText }) => (
  <Button
    appearance="ghost"
    size="tiny"
    style={{ paddingVertical: 8, marginLeft: 5 }}
  >
    {btnText}
  </Button>
);
const FormInput = React.memo(props => {
  const {
    placeholder,
    appearance,
    type,
    selectList,
    value,
    style,
    sub,
    onChange,
    labelStyle,
    label,
  } = 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>
  );
  const inputProps = useCreation(() => {
    return getInputProps(
      type,
      value,
      placeholder,
      onChange,
      secureTextEntry,
      renderIcon
    );
  }, [type, value, placeholder, onChange, secureTextEntry, renderIcon]);

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

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

  function getMain(type, props, inputProps) {
    if (type === "select") {
      return (
        <>
          <SelectItem
            appearance="form"
            style={{ flex: 1 }}
            accessoryRight={ForwardIcon}
            title={selectInfo.name}
            onPress={() => {
              bottomRef.current.open();
            }}
          />
          <BottomModal
            ref={bottomRef}
            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
          submit={(week, startTime, endTime) => {
            props.onChange(week, startTime, endTime);
          }}
          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}
          aspect={[1, 1]}
        />
      );
    }
    if (appearance === "inner" && type === "code") {
      return (
        <Input
          {...inputProps}
          accessoryLeft={() => (
            <Label
              type={type}
              labelStyle={labelStyle}
              label={label}
              appearance={appearance}
            />
          )}
          accessoryRight={() => <Btn btnText={props.btnText} />}
          size="small"
          style={styles.input}
          appearance="innerCode"
        />
      );
    }
    if (appearance === "inner") {
      return (
        <Input
          {...inputProps}
          accessoryLeft={() => (
            <Label
              type={type}
              labelStyle={labelStyle}
              label={label}
              appearance={appearance}
            />
          )}
          size="small"
          style={styles.input}
          appearance="inner"
        />
      );
    }
    if (type === "label") {
      return null;
    }
    return <Input {...inputProps} size="small" style={styles.input} />;
  }

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

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

      {getMain(type, props, inputProps)}

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

export default FormInput;