Dingdong_app/components/UpLoadImage.js

/* 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 = () => {
  return new Promise(async (resolve, reject) => {
    try {
      const permissionResult = await ImagePicker.requestCameraRollPermissionsAsync();

      if (permissionResult.granted === false) {
        reject("notAllod");
      } else {
        const result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Images,
          allowsEditing: true,
          aspect: [1, 1],
          quality: 1,
          base64: true,
        });
        if (!result.cancelled) {
          if (Platform.OS === "web") {
            resolve(result.uri);
          } else {
            resolve(result.base64);
          }
        }
      }
    } catch (e) {
      reject(e);
    }
  });
};

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

  return (
    <>
      <Button
        style={[
          props.style,
          props.size ? { width: props.size, height: props.size } : {},
        ]}
        appearance="imageButton"
        onPress={() => {
          _pickImage().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();
              },
            });
          }}
        />
      )} */}
    </>
  );
}