@grupalia/rn-ui-kit 0.15.0 → 0.17.0

package/src/components/CameraImageInput.tsx

@@ -0,0 +1,610 @@
+import { BottomSheetModal, BottomSheetModalProps } from '@gorhom/bottom-sheet';
+import clsx from 'clsx';
+import { styled } from 'nativewind';
+import React, {
+  useState, useCallback, useRef, useEffect, forwardRef,
+} from 'react';
+import toast from 'react-hot-toast/headless';
+import { ViewProps, ScrollView as RNScrollView } from 'react-native'; // eslint-disable-line no-restricted-imports
+import { CameraIcon, PhotoIcon, FolderIcon } from 'react-native-heroicons/outline';
+import { XMarkIcon } from 'react-native-heroicons/solid';
+import ImageModal from 'react-native-image-modal';
+import {
+  launchImageLibrary, PhotoQuality,
+} from 'react-native-image-picker';
+
+import BaseBottomSheetModal from './BaseBottomSheetModal';
+import {
+  View, TouchableOpacity, ScrollView, Image,
+} from '../hoc-components';
+import BaseIcon from './BaseIcon';
+import BaseSpinner from './BaseSpinner';
+import BaseText from './BaseText';
+import CameraWrapperModal, { CameraWrapperModalImage } from './CameraWrapperModal';
+import { useIsAboveBreakpoint } from '../hooks/useIsAboveBreakpoint';
+
+export interface CameraImage {
+  uri: string;
+  type?: string;
+  name?: string;
+  width?: number;
+  height?: number;
+  path?: string;
+}
+
+interface SingleImagePreviewProps {
+  image: CameraImage;
+  disabled: boolean;
+  handleRemoveImage: () => void;
+}
+
+function SingleImagePreview({ image, disabled, handleRemoveImage }: SingleImagePreviewProps) {
+  const largePhone = useIsAboveBreakpoint('xs');
+
+  return (
+    <View className="relative flex items-center justify-center self-center rounded-lg bg-secondary">
+      <ImageModal
+        source={{ uri: image.uri }}
+        resizeMode="cover"
+        imageBackgroundColor="black"
+        style={{ width: largePhone ? 200 : 120, height: largePhone ? 330 : 200 }}
+      />
+      {!disabled && (
+        <TouchableOpacity
+          onPress={() => handleRemoveImage()}
+          className="absolute -right-2 -top-2 rounded-full bg-error-primary p-1"
+        >
+          <BaseIcon
+            icon={XMarkIcon}
+            size={16}
+            color="fg-white"
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+interface MultipleImagePreviewProps {
+  images: CameraImage[];
+  disabled: boolean;
+  handleRemoveImage: (index: number) => void;
+  maxImages: number;
+  openCamera: () => void;
+  loading: boolean;
+}
+
+function MultipleImagePreview({
+  images, disabled, handleRemoveImage, maxImages, openCamera, loading,
+}: MultipleImagePreviewProps) {
+  const largePhone = useIsAboveBreakpoint('xs');
+  const showAddButton = !disabled && images && images.length < maxImages;
+  const scrollViewRef = useRef<RNScrollView>(null);
+
+  const prevImagesLengthRef = useRef(0);
+
+  const itemWidth = largePhone ? 132 : 84;
+  const itemHeight = largePhone ? 176 : 112;
+
+  const getMarginRight = (isLastImage: boolean, imagesCount: number) => {
+    if (isLastImage) return 15;
+
+    if (imagesCount > 2) return -itemWidth * 0.30;
+
+    return 0;
+  };
+
+  useEffect(() => {
+    if (scrollViewRef.current && images.length > prevImagesLengthRef.current) {
+      setTimeout(() => {
+        scrollViewRef.current?.scrollToEnd({ animated: true });
+      }, 100);
+    }
+
+    prevImagesLengthRef.current = images.length;
+  }, [images.length]);
+
+  return (
+    <View>
+      <ScrollView
+        ref={scrollViewRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{ paddingHorizontal: 10, alignItems: 'center' }}
+        className="mb-3"
+        decelerationRate="fast"
+      >
+        <View className="flex flex-row">
+          {images.map((image, index) => {
+            const uniqueId = image.name
+              || image.uri.substring(image.uri.lastIndexOf('/') + 1)
+              || `image-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+
+            const isLastImage = index === images.length - 1;
+
+            return (
+              <View
+                key={uniqueId}
+                className="overflow-hidden rounded-lg border border-brand-primary"
+                style={{
+                  zIndex: images.length - index,
+                  width: itemWidth,
+                  height: itemHeight,
+                  marginRight: getMarginRight(isLastImage, images.length),
+                }}
+              >
+                <ImageModal
+                  resizeMode="cover"
+                  imageBackgroundColor="black"
+                  style={{ width: itemWidth, height: itemHeight }}
+                  source={{ uri: image.uri }}
+                />
+
+                {!disabled && (
+                  <TouchableOpacity
+                    className="absolute right-2 top-1 rounded-full bg-error-solid p-1"
+                    onPress={() => handleRemoveImage(index)}
+                  >
+                    <BaseIcon
+                      icon={XMarkIcon}
+                      size={16}
+                      color="fg-white"
+                    />
+                  </TouchableOpacity>
+                )}
+              </View>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      {showAddButton && (
+        <TouchableOpacity
+          onPress={openCamera}
+          disabled={loading}
+          className={clsx(
+            'flex w-full flex-col items-center justify-center rounded-lg border border-secondary py-1',
+            disabled && 'opacity-50',
+          )}
+        >
+          {loading ? (
+            <BaseSpinner size="small" />
+          ) : (
+            <>
+              <BaseIcon
+                icon={CameraIcon}
+                size={20}
+                color="fg-secondary"
+              />
+              <BaseText className="mt-1 text-center text-xs font-semibold text-brand-secondary">
+                Agregar foto
+              </BaseText>
+            </>
+          )}
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+}
+
+interface InputMethodSelectionModalProps extends Omit<BottomSheetModalProps, 'children'> {
+  onClose: () => void;
+  onSelectCamera?: () => void;
+  onSelectGallery?: () => void;
+  onSelectCustomGallery?: () => void;
+}
+
+const InputMethodSelectionModal = forwardRef<BottomSheetModal, InputMethodSelectionModalProps>(({
+  onClose, onSelectCamera, onSelectGallery, onSelectCustomGallery, ...props
+}, ref) => (
+  <BaseBottomSheetModal
+    ref={ref}
+    {...props}
+  >
+    <View className="p-4 pb-8">
+      <BaseText className="mb-4 text-center text-lg font-semibold text-secondary">
+        Seleccionar fuente
+      </BaseText>
+      <View className="space-y-3">
+        {onSelectCamera && (
+          <TouchableOpacity
+            onPress={onSelectCamera}
+            className="flex-row items-center rounded-lg border border-secondary p-4"
+          >
+            <BaseIcon
+              icon={CameraIcon}
+              size={24}
+              color="fg-secondary"
+            />
+            <BaseText className="ml-3 text-secondary">Tomar foto</BaseText>
+          </TouchableOpacity>
+        )}
+        {onSelectGallery && (
+          <TouchableOpacity
+            onPress={onSelectGallery}
+            className="flex-row items-center rounded-lg border border-secondary p-4"
+          >
+            <BaseIcon
+              icon={PhotoIcon}
+              size={24}
+              color="fg-secondary"
+            />
+            <BaseText className="ml-3 text-secondary">Seleccionar de galería</BaseText>
+          </TouchableOpacity>
+        )}
+        {onSelectCustomGallery && (
+          <TouchableOpacity
+            onPress={onSelectCustomGallery}
+            className="flex-row items-center rounded-lg border border-secondary p-4"
+          >
+            <BaseIcon
+              icon={FolderIcon}
+              size={24}
+              color="fg-secondary"
+            />
+            <BaseText className="ml-3 text-secondary">Archivos guardados</BaseText>
+          </TouchableOpacity>
+        )}
+      </View>
+      <TouchableOpacity
+        onPress={onClose}
+        className="mt-4 rounded-lg bg-gray-100 p-3"
+      >
+        <BaseText className="text-center text-secondary">Cancelar</BaseText>
+      </TouchableOpacity>
+    </View>
+  </BaseBottomSheetModal>
+));
+
+interface CustomGalleryModalProps extends Omit<BottomSheetModalProps, 'children'> {
+  onClose: () => void;
+  customImages: CameraImage[];
+  onSelectFile: (file: CameraImage) => void;
+}
+
+const CustomGalleryModal = forwardRef<BottomSheetModal, CustomGalleryModalProps>(({
+  onClose, customImages, onSelectFile, ...props
+}, ref) => (
+  <BaseBottomSheetModal
+    ref={ref}
+    {...props}
+  >
+    <View className="px-4 pb-4">
+      <View className="mb-4 flex-row items-center justify-between">
+        <BaseText className="text-lg font-semibold">Archivos guardados</BaseText>
+        <TouchableOpacity
+          onPress={onClose}
+          className="p-2"
+        >
+          <BaseIcon
+            icon={XMarkIcon}
+            size={24}
+            color="fg-secondary"
+          />
+        </TouchableOpacity>
+      </View>
+      {customImages.length > 0 && (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 20 }}
+        >
+          <View className="flex flex-row flex-wrap">
+            {customImages.map((image) => (
+              <View
+                key={image.uri}
+                className="mb-2 mr-2 aspect-[2/3] w-[30%]"
+              >
+                <TouchableOpacity
+                  className="flex-1 overflow-hidden rounded-lg border border-primary"
+                  onPress={() => onSelectFile(image)}
+                >
+                  <Image
+                    source={{ uri: image.uri }}
+                    className="flex-1"
+                    resizeMode="cover"
+                  />
+                </TouchableOpacity>
+              </View>
+            ))}
+          </View>
+        </ScrollView>
+      )}
+      {customImages.length === 0 && (
+        <View className="flex-1 items-center justify-center">
+          <BaseText className="text-tertiary">No hay archivos guardados</BaseText>
+        </View>
+      )}
+    </View>
+  </BaseBottomSheetModal>
+));
+
+export interface CameraImageInputProps extends ViewProps {
+  label?: string;
+  description?: string;
+  callToAction?: React.ReactNode;
+  disabled?: boolean;
+  multiple?: boolean;
+  maxImages?: number;
+  pathToSave?: string;
+  selectFromCamera?: boolean;
+  selectFromGallery?: boolean;
+  customImages?: CameraImage[];
+  imageOptions?: {
+    maxWidth?: number;
+    maxHeight?: number;
+    quality?: PhotoQuality;
+    includeBase64?: boolean;
+  };
+  value?: CameraImage | CameraImage[] | null;
+  onValueChange?: (value: CameraImage | CameraImage[] | null) => void;
+  showImages?: boolean;
+  hasError?: boolean;
+}
+
+function CameraImageInput({
+  label,
+  description,
+  callToAction,
+  disabled = false,
+  multiple = false,
+  maxImages = 5,
+  pathToSave,
+  selectFromCamera = false,
+  selectFromGallery = false,
+  customImages,
+  imageOptions = {
+    maxWidth: 1024,
+    maxHeight: 1024,
+    quality: 0.8,
+    includeBase64: false,
+  },
+  value,
+  onValueChange,
+  showImages = true,
+  hasError = false,
+  ...props
+}: CameraImageInputProps) {
+  if (!selectFromCamera && !selectFromGallery && !customImages?.length) {
+    throw new Error('You must provide at least one of selectFromCamera, selectFromGallery, or customGalleryPath');
+  }
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const inputMethodBottomSheetRef = useRef<BottomSheetModal>(null);
+  const customGalleryBottomSheetRef = useRef<BottomSheetModal>(null);
+
+  const handleGallerySelect = useCallback(async () => {
+    try {
+      setLoading(true);
+      const result = await launchImageLibrary({
+        mediaType: 'photo',
+        selectionLimit: multiple ? maxImages : 1,
+        ...imageOptions,
+      });
+
+      if (result.didCancel || !result.assets?.length) {
+        return;
+      }
+
+      if (multiple) {
+        const newImages: CameraImage[] = result.assets.map((asset) => ({
+          uri: asset.uri!,
+          type: asset.type,
+          name: asset.fileName,
+          width: asset.width,
+          height: asset.height,
+        }));
+
+        const currentImages = (value as CameraImage[]) || [];
+        const combinedImages = [...currentImages, ...newImages];
+        onValueChange?.(combinedImages.slice(0, maxImages));
+      } else {
+        const asset = result.assets[0];
+        const newImage: CameraImage = {
+          uri: asset.uri!,
+          type: asset.type,
+          name: asset.fileName,
+          width: asset.width,
+          height: asset.height,
+        };
+        onValueChange?.(newImage);
+      }
+    } catch {
+      toast.error('Error al seleccionar la imagen');
+    } finally {
+      setLoading(false);
+    }
+  }, [value, onValueChange, multiple, maxImages, imageOptions]);
+
+  const handleCustomFileSelect = useCallback((file: CameraImage) => {
+    try {
+      const newImage = file;
+
+      if (multiple) {
+        const currentImages = (value as CameraImage[]) || [];
+        const newImages = [...currentImages, newImage];
+        onValueChange?.(newImages);
+      } else {
+        onValueChange?.(newImage);
+      }
+      customGalleryBottomSheetRef.current?.dismiss();
+    } catch {
+      toast.error('Error al procesar la imagen');
+    }
+  }, [value, onValueChange, multiple]);
+
+  const openInputMethod = useCallback(() => {
+    if (disabled || loading) return;
+
+    if (selectFromCamera && !(selectFromGallery || customImages?.length)) {
+      setModalVisible(true);
+      return;
+    }
+
+    if (!selectFromCamera && (selectFromGallery || customImages?.length)) {
+      if (customImages?.length) {
+        inputMethodBottomSheetRef.current?.present();
+      } else {
+        handleGallerySelect();
+      }
+      return;
+    }
+
+    inputMethodBottomSheetRef.current?.present();
+  }, [
+    disabled,
+    loading,
+    selectFromCamera,
+    selectFromGallery,
+    customImages,
+    handleGallerySelect,
+  ]);
+
+  const handleSelectCamera = useCallback(() => {
+    inputMethodBottomSheetRef.current?.dismiss();
+    setModalVisible(true);
+  }, []);
+
+  const handleSelectGallery = useCallback(() => {
+    inputMethodBottomSheetRef.current?.dismiss();
+    handleGallerySelect();
+  }, [handleGallerySelect]);
+
+  const handleSelectCustomGallery = useCallback(async () => {
+    inputMethodBottomSheetRef.current?.dismiss();
+    customGalleryBottomSheetRef.current?.present();
+  }, []);
+
+  const handleCapture = useCallback((photoFile: CameraWrapperModalImage) => {
+    try {
+      setLoading(true);
+      const newImage: CameraImage = {
+        uri: photoFile.uri,
+        path: photoFile.path,
+        type: 'image/jpeg',
+        name: `photo_${Date.now()}.jpg`,
+        width: photoFile.width,
+        height: photoFile.height,
+      };
+
+      if (multiple) {
+        const currentImages = (value as CameraImage[]) || [];
+        const newImages = [...currentImages, newImage];
+        onValueChange?.(newImages);
+      } else {
+        onValueChange?.(newImage);
+      }
+      setModalVisible(false);
+    } catch {
+      toast.error('Error al procesar la imagen');
+    } finally {
+      setLoading(false);
+    }
+  }, [value, onValueChange, multiple]);
+
+  const handleRemoveImage = useCallback((index?: number) => {
+    if (multiple && typeof index === 'number') {
+      const currentImages = (value as CameraImage[]) || [];
+      const newImages = [...currentImages];
+      newImages.splice(index, 1);
+      onValueChange?.(newImages.length > 0 ? newImages : null);
+    } else {
+      onValueChange?.(null);
+    }
+  }, [onValueChange, multiple, value]);
+
+  const hasImages = multiple ? (value as CameraImage[])?.length > 0 : !!value;
+
+  return (
+    <View
+      className="flex flex-col"
+      {...props}
+    >
+      <View>
+        {label && (
+          <BaseText className="font-semibold text-secondary">{label}</BaseText>
+        )}
+        {description && (
+          <BaseText className="text-tertiary">{description}</BaseText>
+        )}
+      </View>
+      <View className={clsx(
+        'rounded-lg border',
+        !(value && (value as CameraImage[]).length > 0) && 'h-full',
+        showImages && 'p-2',
+        disabled ? 'border-disabled bg-disabled' : 'border-primary bg-primary',
+        hasError && 'border-error',
+      )}
+      >
+        {(!showImages || !hasImages || (!hasImages && multiple)) && (
+          <View className="flex flex-1 flex-row justify-center space-x-4">
+            <TouchableOpacity
+              onPress={openInputMethod}
+              disabled={disabled || loading}
+              className={clsx(
+                'flex flex-1 flex-col items-center justify-center rounded-lg',
+                disabled ? 'opacity-50' : '',
+                showImages && hasImages && 'border border-secondary',
+              )}
+            >
+              {loading ? (
+                <BaseSpinner size="small" />
+              ) : (
+                <>
+                  <BaseIcon
+                    icon={(() => {
+                      if (selectFromCamera && selectFromGallery) return PhotoIcon;
+                      if (selectFromCamera) return CameraIcon;
+                      return PhotoIcon;
+                    })()}
+                    size={24}
+                    color="fg-secondary"
+                  />
+                  {callToAction}
+                </>
+              )}
+            </TouchableOpacity>
+          </View>
+        )}
+        {showImages && !multiple && value && (
+          <SingleImagePreview
+            image={value as CameraImage}
+            disabled={disabled}
+            handleRemoveImage={() => handleRemoveImage()}
+          />
+        )}
+        {showImages && multiple && value && (value as CameraImage[]).length > 0 && (
+          <MultipleImagePreview
+            images={value as CameraImage[]}
+            disabled={disabled}
+            handleRemoveImage={handleRemoveImage}
+            maxImages={maxImages}
+            openCamera={openInputMethod}
+            loading={loading}
+          />
+        )}
+      </View>
+      <InputMethodSelectionModal
+        ref={inputMethodBottomSheetRef}
+        onClose={() => inputMethodBottomSheetRef.current?.dismiss()}
+        onSelectCamera={selectFromCamera ? handleSelectCamera : undefined}
+        onSelectGallery={selectFromGallery ? handleSelectGallery : undefined}
+        onSelectCustomGallery={customImages?.length ? handleSelectCustomGallery : undefined}
+      />
+      <CustomGalleryModal
+        ref={customGalleryBottomSheetRef}
+        onClose={() => customGalleryBottomSheetRef.current?.dismiss()}
+        customImages={customImages || []}
+        onSelectFile={handleCustomFileSelect}
+      />
+      <CameraWrapperModal
+        pathToSave={pathToSave}
+        visible={modalVisible}
+        onClose={() => setModalVisible(false)}
+        onCapture={handleCapture}
+      />
+    </View>
+  );
+}
+
+export default styled(CameraImageInput);