@app-studio/web 0.9.28 → 0.9.29

package/dist/web.umd.development.js

@@ -17151,6 +17151,139 @@
   };
   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);
@@ -35630,6 +35763,7 @@
   exports.ArrowIcon = ArrowIcon;
   exports.AspectRatio = AspectRatio;
   exports.AttachmentIcon = AttachmentIcon;
+  exports.AttachmentPreview = AttachmentPreview;
   exports.AudioIcon = AudioIcon;
   exports.AudioInput = AudioInput;
   exports.AudioWaveform = AudioWaveform;