Dingdong_client/components/ImagePicker.js

/* eslint-disable no-underscore-dangle */
import * as React from 'react';
import { Platform, View } from 'react-native';
import { Button, Icon, Image, Div } from 'react-native-magnus';
import * as ImagePicker from 'expo-image-picker';
import useModel from 'flooks';

import request from '../Utils/RequestUtils';
import Toast from '../flooks/Toast';

const _pickImage = (aspect, loading) => {
  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');
      }
    })
    .then((img) => {
      return request.post(`/upload/base64`, {
        data: { base64: img },
        requestType: 'form',
      });
    });
};

export default function ImagePickerCom(props) {
  const { aspect, img, setImg, cancelEvent, h, w } = props;
  const { loading, clearLoading } = useModel(Toast, []);

  return (
    <Div mr="sm" mb="sm">
      <Button
        bg="brand200"
        h={h || 67}
        w={w || 67}
        rounded="xs"
        onPress={() => {
          _pickImage(aspect || [1, 1], loading)
            .then((newImg) => {
              if (setImg) {
                setImg(newImg);
              }
            })
            .catch((e) => {
              console.log(e);
            })
            .finally(() => {
              clearLoading();
            });
        }}
      >
        {!img && <Icon name="plus" color="white" fontSize="4xl" />}
        {!!img && (
          <Image
            h={67}
            w={67}
            rounded="xs"
            source={{
              uri: img,
            }}
          />
        )}
      </Button>
      {cancelEvent && (
        <Button
          bg="red500"
          h={16}
          w={16}
          rounded="circle"
          position="absolute"
          right={-5}
          top={-5}
          onPress={cancelEvent}
        >
          <Icon name="minus" fontFamily="AntDesign" color="#fff" />
        </Button>
      )}
    </Div>
  );
}