@oxyhq/services/lib/commonjs/ui/components/fileManagement/UploadPreview.js

OxyHQ Expo/React Native SDK — UI components, screens, and native features

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UploadPreview = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _expoImage = require("expo-image");
var _vectorIcons = require("@expo/vector-icons");
var _fileManagement = require("../../utils/fileManagement.js");
var _styles = require("./styles.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const UploadPreviewContent = ({
  pendingFiles,
  onConfirm,
  onCancel,
  onRemoveFile,
  themeStyles
}) => {
  const backgroundColor = themeStyles.backgroundColor;
  const borderColor = themeStyles.borderColor;
  const totalSize = pendingFiles.reduce((sum, f) => sum + f.size, 0);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: [_styles.fileManagementStyles.uploadPreviewContainer, {
      backgroundColor
    }],
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_styles.fileManagementStyles.uploadPreviewHeader, {
        borderBottomColor: borderColor
      }],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
        style: [_styles.fileManagementStyles.uploadPreviewTitle, {
          color: themeStyles.textColor
        }],
        children: ["Review Files (", pendingFiles.length, ")"]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        onPress: onCancel,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "close",
          size: 24,
          color: themeStyles.textColor
        })
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
      style: _styles.fileManagementStyles.uploadPreviewList,
      children: pendingFiles.map((pendingFile, index) => {
        const isImage = pendingFile.type.startsWith('image/');
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: [_styles.fileManagementStyles.uploadPreviewItem, {
            backgroundColor: themeStyles.secondaryBackgroundColor,
            borderColor
          }],
          children: [isImage && pendingFile.preview ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoImage.Image, {
            source: {
              uri: pendingFile.preview
            },
            style: _styles.fileManagementStyles.uploadPreviewThumbnail,
            contentFit: "cover"
          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: [_styles.fileManagementStyles.uploadPreviewIconContainer, {
              backgroundColor: themeStyles.isDarkTheme ? '#333333' : '#F0F0F0'
            }],
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
              name: (0, _fileManagement.getFileIcon)(pendingFile.type),
              size: 32,
              color: themeStyles.primaryColor
            })
          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: _styles.fileManagementStyles.uploadPreviewInfo,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
              style: [_styles.fileManagementStyles.uploadPreviewName, {
                color: themeStyles.textColor
              }],
              numberOfLines: 1,
              children: pendingFile.name
            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
              style: [_styles.fileManagementStyles.uploadPreviewMeta, {
                color: themeStyles.isDarkTheme ? '#BBBBBB' : '#666666'
              }],
              children: [(0, _fileManagement.formatFileSize)(pendingFile.size), " \u2022 ", pendingFile.type]
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
            style: _styles.fileManagementStyles.uploadPreviewRemove,
            onPress: () => onRemoveFile(index),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
              name: "close-circle",
              size: 24,
              color: themeStyles.dangerColor
            })
          })]
        }, index);
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [_styles.fileManagementStyles.uploadPreviewFooter, {
        borderTopColor: borderColor
      }],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: _styles.fileManagementStyles.uploadPreviewStats,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
          style: [_styles.fileManagementStyles.uploadPreviewStatsText, {
            color: themeStyles.textColor
          }],
          children: [pendingFiles.length, " file", pendingFiles.length !== 1 ? 's' : '']
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [_styles.fileManagementStyles.uploadPreviewStatsText, {
            color: themeStyles.textColor
          }],
          children: (0, _fileManagement.formatFileSize)(totalSize)
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: _styles.fileManagementStyles.uploadPreviewActions,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          style: [_styles.fileManagementStyles.uploadPreviewCancelButton, {
            borderColor,
            backgroundColor: 'transparent'
          }],
          onPress: onCancel,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: [_styles.fileManagementStyles.uploadPreviewCancelText, {
              color: themeStyles.textColor
            }],
            children: "Cancel"
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
          style: [_styles.fileManagementStyles.uploadPreviewConfirmButton, {
            backgroundColor: themeStyles.primaryColor
          }],
          onPress: onConfirm,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
            name: "cloud-upload",
            size: 20,
            color: "#FFFFFF"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: _styles.fileManagementStyles.uploadPreviewConfirmText,
            children: "Upload"
          })]
        })]
      })]
    })]
  });
};
const UploadPreview = ({
  visible,
  pendingFiles,
  onConfirm,
  onCancel,
  onRemoveFile,
  themeStyles,
  inline = false
}) => {
  // If inline mode, render content directly without Modal
  if (inline) {
    if (!visible) return null;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(UploadPreviewContent, {
      pendingFiles: pendingFiles,
      onConfirm: onConfirm,
      onCancel: onCancel,
      onRemoveFile: onRemoveFile,
      themeStyles: themeStyles
    });
  }

  // Default: render with Modal (for backward compatibility)
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
    visible: visible,
    animationType: "slide",
    presentationStyle: "pageSheet",
    onRequestClose: onCancel,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(UploadPreviewContent, {
      pendingFiles: pendingFiles,
      onConfirm: onConfirm,
      onCancel: onCancel,
      onRemoveFile: onRemoveFile,
      themeStyles: themeStyles
    })
  });
};
exports.UploadPreview = UploadPreview;
//# sourceMappingURL=UploadPreview.js.map