Dingdong_app/components/UpLoadImage.js

/* eslint-disable consistent-return */
/* eslint-disable no-else-return */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable no-async-promise-executor */
/* eslint-disable prefer-promise-reject-errors */
/* eslint-disable no-underscore-dangle */
import React from "react";
import { Button, Icon } from "@ui-kitten/components";
import { useModel } from "flooks";
import * as ImagePicker from "expo-image-picker";
import { Image, Platform } from "react-native";

const _pickImage = (loading, aspect) => {
  return ImagePicker.requestCameraRollPermissionsAsync()
    .then(res => {
      if (!res.granted) {
        return Promise.reject("notAllod");
      } else {
        return ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images,
          allowsEditing: true,
          aspect: aspect || [(1, 1)],
          quality: 0.6,
          base64: true,
        });
      }
    })
    .then(res => {
      if (!res.cancelled) {
        loading();
        if (Platform.OS === "web") {
          return Promise.resolve(res.uri);
        }
        return Promise.resolve(res.base64);
      } else {
        return Promise.reject("cancel");
      }
    });
};

export default function UpLoadImage(props) {
  const { httpPost } = useModel("httpModel", true);
  const { loading } = useModel("loadingModel", true);
  // eslint-disable-next-line no-shadow
  const renderPulseIcon = props => <Icon {...props} name="plus-outline" />;
  const { aspect, size } = props;

  const width = React.useMemo(() => {
    if (size) {
      return size;
    } else {
      return 67;
    }
  }, [size, aspect]);

  const height = React.useMemo(() => {
    if (size && aspect) {
      return (size / aspect[0]) * aspect[1];
    } else if (size) {
      return size;
    } else {
      return 67;
    }
  }, [size, aspect]);

  return (
    <>
      <Button
        style={[props.style, { width, height }]}
        appearance="imageButton"
        onPress={() => {
          _pickImage(loading, aspect).then(img => {
            httpPost("/upload/base64", {
              base64: img,
            }).then(res => {
              props.changeIcon(res);
            });
          });
        }}
        accessoryLeft={imgprops => {
          if (props.value && props.value !== " ") {
            return (
              <Image
                style={{
                  width: "100%",
                  height: "100%",
                }}
                source={{ uri: props.value }}
              />
            );
          }
          return renderPulseIcon(imgprops);
        }}
      />
      {/* {props.hasCancel === true && props.value && (
        <Button
          size="tiny"
          status="danger"
          accessoryLeft={ForwardIcon}
          appearance="imgButton"
          style={{
            position: "absolute",
            right: -5,
            top: -5,
            borderRadius: 30,
          }}
          onPress={() => {
            showDialog({
              bodyText: removeTips,
              status: "danger",
              cancelable: true,
              confirmCallback: () => {
                props.delEvent();
              },
            });
          }}
        />
      )} */}
    </>
  );
}