@platformbuilders/react-native-ui/dist/components/Avatar/index.js

Platform Builders Shared Components Library

import { __awaiter, __rest } from "tslib";
import React, { useState, useRef, useImperativeHandle } from 'react';
import { isEmpty } from 'lodash';
import { RNCamera } from 'react-native-camera';
import FastImage from 'react-native-fast-image';
import ImagePicker from 'react-native-image-picker';
import If from '../If';
import { ImageAvatarPlaceholder as defaultAvatar } from '../../assets/images';
import { Wrapper, CameraView, UploadIconWrapper, UploadIcon } from './styles';
const Avatar = React.forwardRef((_a, ref) => {
    var { id, image = defaultAvatar, accessibility = 'Upload de Avatar', accessibilityLabel, testID, size = 50, onPress, onUpload, showBorder = true, displayCamera = false } = _a, rest = __rest(_a, ["id", "image", "accessibility", "accessibilityLabel", "testID", "size", "onPress", "onUpload", "showBorder", "displayCamera"]);
    const [uploadedImage, setUploadedImage] = useState();
    const cameraRef = useRef();
    const openPicker = () => {
        const options = {
            title: 'Selecionar foto',
            cancelButtonTitle: 'Cancelar',
            takePhotoButtonTitle: 'Tirar foto',
            chooseFromLibraryButtonTitle: 'Escolher da galeria',
            quality: 0.3,
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        };
        return new Promise((resolve) => {
            ImagePicker.launchImageLibrary(options, (response) => {
                setUploadedImage(response.uri);
                if (onUpload) {
                    onUpload(response.uri);
                }
                resolve();
            });
        });
    };
    const takePicture = () => __awaiter(void 0, void 0, void 0, function* () {
        if (cameraRef.current) {
            const options = { quality: 0.5, base64: true };
            const data = yield cameraRef.current.takePictureAsync(options);
            setUploadedImage(data);
            return data;
        }
    });
    const getUploadImage = () => {
        return uploadedImage;
    };
    const clearUploadImage = () => {
        setUploadedImage('');
    };
    const getCurrentAvatar = () => {
        if (uploadedImage) {
            return { uri: uploadedImage };
        }
        if (image && !isEmpty(image)) {
            return { uri: image };
        }
        return defaultAvatar;
    };
    useImperativeHandle(ref, () => ({
        getUploadImage,
        clearUploadImage,
        takePicture,
        openPicker,
    }));
    return (React.createElement(Wrapper, Object.assign({ id: id, accessibility: accessibility, accessibilityLabel: accessibilityLabel || accessibility, testID: testID || id, size: size, onPress: onPress, disabled: !onPress, showBorder: showBorder }, rest),
        displayCamera && !uploadedImage ? (React.createElement(CameraView, { ref: cameraRef, size: size, type: RNCamera.Constants.Type.front, flashMode: RNCamera.Constants.FlashMode.auto, androidCameraPermissionOptions: {
                title: 'Câmera',
                message: 'Precisamos da sua permissão para usar a câmera',
                buttonPositive: 'Ok',
                buttonNegative: 'Cancelar',
            } })) : (React.createElement(FastImage, { source: getCurrentAvatar(), resizeMode: FastImage.resizeMode.cover, style: { width: '101%', height: '101%' } })),
        React.createElement(If, { condition: !!displayCamera },
            React.createElement(UploadIconWrapper, { size: size },
                React.createElement(UploadIcon, { id: "", accessibility: "" })))));
});
Avatar.displayName = 'AvatarComponent';
export default Avatar;
//# sourceMappingURL=index.js.map