Dingdong_app/screens/HomeScreenPage3.js

/* eslint-disable no-underscore-dangle */
import * as React from "react";
import {
  Icon,
  Text,
  Layout,
  Button,
  Menu,
  MenuItem,
} from "@ui-kitten/components";
import { StyleSheet } from "react-native";
import { useModel } from "flooks";
import Textarea from "react-native-textarea";
import OpenTimeUtil from "../Utils/OpenTimeUtil";
import ListUtil from "../Utils/ListUtil";
import UpLoadImage from "../components/UpLoadImage";
import * as RootNavigation from "../navigation/RootNavigation";

const ForwardIcon = props => (
  <Icon
    {...props}
    name="arrow-ios-forward"
    fill="#B4B4B4"
    style={{ width: 15, height: 15, fontWeight: 500 }}
  />
);

const styles = StyleSheet.create({
  tabContainer: {
    backgroundColor: "#fff",
    flex: 1,
  },
  top: {
    paddingVertical: 20,
    paddingHorizontal: 13,
  },
  imgList: {
    flexDirection: "row",
  },
  upload: {
    marginRight: 10,
    width: 67,
    flexShrink: 0,
  },
  textareaContainer: {
    backgroundColor: "#F0F0F0",
    height: 100,
    alignSelf: "stretch",
    borderRadius: 4,
  },
  textarea: {
    textAlignVertical: "top", // hack android
    fontSize: 13,
    color: "#333",
    paddingHorizontal: 14,
    paddingVertical: 10,
    height: 100,
  },
  text: {
    paddingVertical: 10,
  },
  button: {
    alignSelf: "flex-end",
    marginTop: 10,
    marginRight: 14,
  },
  menu: {
    borderColor: "#EEEEEE",
    borderTopWidth: 6,
    backgroundColor: "#fff",
    paddingHorizontal: 15,
  },
  menuItem: {},
  lable: {
    flexDirection: "row",
    flex: 1,
  },
  lableName: {
    flexShrink: 0,
    flexBasis: "50%",
    marginHorizontal: 8,
    fontSize: 13,
  },
  lableText: {},
});

const Label = (props, title, value) => (
  <Layout style={[styles.lable]}>
    <Text {...props} style={[styles.lableName]}>
      {title}
    </Text>
    <Text
      {...props}
      // eslint-disable-next-line react/destructuring-assignment
      style={[props.style, styles.lableText]}
      numberOfLines={1}
      ellipsizeMode="tail"
    >
      {value}
    </Text>
  </Layout>
);

export default function HomePage3() {
  const { showDialog } = useModel("dialogModel", true);
  const [text, changeText] = React.useState("");
  const {
    img,
    updateMerchant,
    introduction,
    name,
    phone,
    address,
    category,
    week,
    endTime,
    startTime,
  } = useModel("userModel");
  const categoryList = new ListUtil(category);
  const { success } = useModel("loadingModel");

  const {
    home3Title1,
    home3Title2,
    confirm,
    getWordsStr,
    weekWords,
  } = useModel("wordsModel");

  const imgList = React.useMemo(() => {
    const list = img ? img.split(",") : [];
    list.push("");
    return [...new Set(list)];
  }, [img]);

  const openTime = React.useMemo(() => {
    if (startTime && endTime && week && weekWords) {
      // eslint-disable-next-line no-underscore-dangle
      const _o = new OpenTimeUtil(startTime, endTime, week, weekWords());
      return _o.getShowStr();
    }
    return "";
  }, [startTime, endTime, week, weekWords]);

  // eslint-disable-next-line no-shadow
  function changeImg(img, index) {
    const _imgs = [...imgList];
    _imgs.splice(index, 1, img);
    const _img1 = new Set(_imgs);
    updateMerchant({
      img: [..._img1].join(","),
    });
  }

  function delImg(index) {
    const _imgs = [...imgList];
    _imgs.splice(index, 1);
    const _img1 = new Set(_imgs);
    updateMerchant({
      img: [..._img1].join(","),
    });
  }

  const showImgList = list => {
    return list.map((item, index) => {
      return (
        <Layout key={index} style={styles.upload}>
          <UpLoadImage
            value={item}
            // eslint-disable-next-line no-shadow
            changeIcon={img => changeImg(img, index)}
            size={67}
            hasCancel
            delEvent={() => {
              delImg(index);
            }}
          />
        </Layout>
      );
    });
  };

  function showChange(key, val, title, max, type) {
    showDialog({
      pla: "",
      maxLength: max || 50,
      defaultValue: val,
      InputType: type,
      isEdit: true,
      title,
      cancelable: true,
      confirmCallback: info => {
        updateMerchant({ [key]: info });
      },
    });
  }

  return (
    <Layout style={styles.tabContainer}>
      <Layout style={styles.top}>
        <Layout style={styles.imgList}>{showImgList(imgList)}</Layout>

        <Layout>
          <Text style={styles.text}>{home3Title1}</Text>
          <Textarea
            containerStyle={styles.textareaContainer}
            style={styles.textarea}
            onChangeText={changeText}
            defaultValue={introduction}
            maxLength={500}
            placeholder={home3Title2}
            placeholderTextColor="#B4B4B4"
            underlineColorAndroid="transparent"
          />
          <Button
            size="small"
            style={styles.button}
            onPress={() => {
              updateMerchant({
                introduction: text,
              }).then(() => {
                success("成功");
              });
            }}
          >
            {confirm}
          </Button>
        </Layout>
      </Layout>
      <Menu style={styles.menu}>
        <MenuItem
          title={props => Label(props, getWordsStr("register_form_1"), name)}
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() =>
            showChange("name", name, getWordsStr("register_form_1"), 25, "text")
          }
        />
        <MenuItem
          title={props =>
            Label(
              props,
              getWordsStr("guideHome_form_1"),
              categoryList.getKey("name")
            )
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => {}}
        />
        <MenuItem
          title={props =>
            Label(props, getWordsStr("guideHome_form_2"), address)
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() =>
            showChange("address", address, getWordsStr("guideHome_form_2"))
          }
        />
        <MenuItem
          title={props => Label(props, getWordsStr("guideHome_form_3"), phone)}
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() =>
            showChange(
              "phone",
              phone,
              getWordsStr("guideHome_form_3"),
              11,
              "phone"
            )
          }
        />
        <MenuItem
          title={props =>
            Label(props, getWordsStr("guideHome_form_4"), openTime)
          }
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => {}}
        />
        <MenuItem
          title={getWordsStr("guideHome_form_5")}
          accessoryRight={ForwardIcon}
          style={styles.menuItem}
          onPress={() => {
            RootNavigation.navigate("Qualification");
          }}
        />
      </Menu>
    </Layout>
  );
}