@app-studio/web 0.9.28 → 0.9.29

package/dist/components/Formik/AttachmentPreview.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+interface AttachmentPreviewProps {
+    files: Array<{
+        name: string;
+        size: number;
+        type: string;
+        url?: string;
+    }>;
+    onRemove?: (index: number) => void;
+    maxHeight?: string;
+    views?: {
+        container?: any;
+        item?: any;
+        name?: any;
+        removeButton?: any;
+    };
+}
+export declare const AttachmentPreview: React.FC<AttachmentPreviewProps>;
+export {};

package/dist/components/Formik/index.d.ts

@@ -14,3 +14,4 @@ export { FormikComboBox } from './Formik.ComboBox';
 export { FormikSlider } from './Formik.Slider';
 export { FormikOTPInput } from './Formik.OTPInput';
 export { FormikUploader } from './Formik.Uploader';
+export { AttachmentPreview } from './AttachmentPreview';

package/dist/web.cjs.development.js

@@ -17196,6 +17196,139 @@ var FormikUploader = _ref => {
 };
 FormikUploader.displayName = 'FormikUploader';
 
+var AttachmentPreview = _ref => {
+  var {
+    files,
+    onRemove,
+    maxHeight = '120px',
+    views = {}
+  } = _ref;
+  if (files.length === 0) {
+    return null;
+  }
+  var formatFileSize = React.useCallback(bytes => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  }, []);
+  return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "6px",
+    padding: "8px 0",
+    maxHeight: maxHeight,
+    overflowY: "auto"
+  }, views == null ? void 0 : views.container), files.map((file, index) => {
+    var previewUrl = file.url || '';
+    var isImage = file.type.startsWith('image/');
+    var isVideo = file.type.startsWith('video/');
+    var isAudio = file.type.startsWith('audio/');
+    return /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+      key: index,
+      alignItems: "center",
+      gap: "6px",
+      padding: "4px 8px",
+      borderRadius: "6px",
+      backgroundColor: "color.gray.100",
+      position: "relative",
+      animate: {
+        from: {
+          opacity: 0,
+          scale: 0.9
+        },
+        to: {
+          opacity: 1,
+          scale: 1
+        }
+      },
+      animationDuration: 0.2
+    }, views == null ? void 0 : views.item), /*#__PURE__*/React__default.createElement(HoverCard, null, /*#__PURE__*/React__default.createElement(HoverCard.Trigger, null, /*#__PURE__*/React__default.createElement(appStudio.View, {
+      position: "relative"
+    }, isImage && previewUrl && (/*#__PURE__*/React__default.createElement(appStudio.Image, {
+      src: previewUrl,
+      alt: file.name,
+      width: "60px",
+      height: "60px",
+      objectFit: "cover",
+      borderRadius: "4px"
+    })), isVideo && previewUrl && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "video",
+      src: previewUrl,
+      alt: file.name,
+      controls: false,
+      muted: true,
+      width: "60px",
+      height: "60px",
+      objectFit: "cover",
+      borderRadius: "4px"
+    })), isAudio && (/*#__PURE__*/React__default.createElement(appStudio.Center, {
+      width: "60px",
+      height: "60px",
+      backgroundColor: "color.gray.200",
+      borderRadius: "4px"
+    }, /*#__PURE__*/React__default.createElement(AudioIcon, {
+      widthHeight: 24,
+      color: "color.black"
+    }))), !isImage && !isVideo && !isAudio && (/*#__PURE__*/React__default.createElement(appStudio.Center, {
+      width: "60px",
+      height: "60px",
+      backgroundColor: "color.gray.200",
+      borderRadius: "4px"
+    }, /*#__PURE__*/React__default.createElement(FileIcon, {
+      widthHeight: 24,
+      color: "color.black"
+    }))), onRemove && (/*#__PURE__*/React__default.createElement(appStudio.Button, {
+      position: "absolute",
+      top: "-4px",
+      right: "-4px",
+      width: "20px",
+      height: "20px",
+      minWidth: "20px",
+      minHeight: "20px",
+      borderRadius: "50%",
+      backgroundColor: "color.red.500",
+      color: "white",
+      fontSize: 14,
+      fontWeight: "bold",
+      padding: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      border: "2px solid white",
+      _hover: {
+        backgroundColor: 'color.red.600'
+      },
+      onClick: e => {
+        e.stopPropagation();
+        onRemove(index);
+      },
+      "aria-label": "Remove " + file.name
+    }, "\u00D7")))), /*#__PURE__*/React__default.createElement(HoverCard.Content, null, isImage && previewUrl && (/*#__PURE__*/React__default.createElement(appStudio.Image, {
+      src: previewUrl,
+      alt: file.name,
+      maxWidth: "300px"
+    })), isVideo && previewUrl && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "video",
+      src: previewUrl,
+      controls: true,
+      maxWidth: "300px"
+    })), isAudio && previewUrl && (/*#__PURE__*/React__default.createElement(appStudio.View, {
+      as: "audio",
+      src: previewUrl,
+      controls: true,
+      width: '100%'
+    })), /*#__PURE__*/React__default.createElement(Text, Object.assign({
+      marginTop: "4px",
+      truncateText: true,
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      width: '100%',
+      fontSize: 12
+    }, views == null ? void 0 : views.name), file.name, " (", formatFileSize(file.size), ")"))));
+  }));
+};
+
 var SliderComponent$1 = props => {
   // Get state and handlers from the custom hook
   var sliderState = useSliderState(props);
@@ -35675,6 +35808,7 @@ exports.Alert = Alert;
 exports.ArrowIcon = ArrowIcon;
 exports.AspectRatio = AspectRatio;
 exports.AttachmentIcon = AttachmentIcon;
+exports.AttachmentPreview = AttachmentPreview;
 exports.AudioIcon = AudioIcon;
 exports.AudioInput = AudioInput;
 exports.AudioWaveform = AudioWaveform;