@rpldy/upload-preview - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0-rc.0

lib/cjs/defaults.js

@@ -7,5 +7,3 @@ "use strict";
 exports.PREVIEW_DEFAULTS = void 0;
-
 var _shared = require("@rpldy/shared");
-
 const PREVIEW_DEFAULTS = (0, _shared.devFreeze)({
@@ -12,0 +10,0 @@ rememberPreviousBatches: false,

lib/cjs/index.js

@@ -25,12 +25,7 @@ "use strict";
 });
-
 var _UploadPreview = _interopRequireWildcard(require("./UploadPreview"));
-
 var _consts = require("./consts");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var _default = _UploadPreview.default;
 exports.default = _default;

lib/cjs/UploadPreview.js

@@ -7,19 +7,10 @@ "use strict";
 exports.getUploadPreviewForBatchItemsMethod = exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _sharedUi = require("@rpldy/shared-ui");
-
 var _usePreviewsLoader = require("./usePreviewsLoader");
-
 var _utils = require("./utils");
-
 var _consts = require("./consts");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 const showBasicPreview = (type, url, previewProps, onImgError) => type === _consts.PREVIEW_TYPES.VIDEO ? /*#__PURE__*/_react.default.createElement("video", _extends({
@@ -34,7 +25,7 @@ key: url,
 }, previewProps));
-
-const usePreviewMethods = (previews, clearPreviews, previewMethodsRef, onPreviewsChanged) => {
+const usePreviewMethods = (previews, clearPreviews, previewMethodsRef, onPreviewsChanged, removeItemFromPreview) => {
   (0, _react.useImperativeHandle)(previewMethodsRef, () => ({
-    clear: clearPreviews
-  }), [clearPreviews]);
+    clear: clearPreviews,
+    removePreview: removeItemFromPreview
+  }), [clearPreviews, removeItemFromPreview]);
   (0, _react.useEffect)(() => {
@@ -46,3 +37,2 @@ if (onPreviewsChanged) {
 };
-
 const getUploadPreviewForBatchItemsMethod = function () {
@@ -60,8 +50,8 @@ let method = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _sharedUi.useBatchStartListener;
       previews,
-      clearPreviews
+      clearPreviews,
+      removeItemFromPreview
     } = usePreviewsLoader(previewOptions);
     const onImagePreviewLoadError = (0, _react.useCallback)(e => {
-      const img = e.target;
+      const img = e.currentTarget;
       const fallback = (0, _utils.getFallbackUrlData)(props.fallbackUrl, img.src);
-
       if (fallback) {
@@ -71,3 +61,3 @@ img.src = fallback.url;
     }, [props.fallbackUrl]);
-    usePreviewMethods(previews, clearPreviews, previewMethodsRef, onPreviewsChanged);
+    usePreviewMethods(previews, clearPreviews, previewMethodsRef, onPreviewsChanged, removeItemFromPreview);
     return previews.map(data => {
@@ -80,2 +70,3 @@ const {
         isFallback,
+        removePreview,
         props: previewProps
@@ -89,3 +80,4 @@ } = data;
         name: name,
-        isFallback: isFallback
+        isFallback: isFallback,
+        removePreview: removePreview
       }, previewProps)) : showBasicPreview(type, url, previewProps, onImagePreviewLoadError);
@@ -95,7 +87,6 @@ });
 };
+
 /**
  * UploadPreview uses Batch start event to display uploading items
  */
-
-
 exports.getUploadPreviewForBatchItemsMethod = getUploadPreviewForBatchItemsMethod;
@@ -102,0 +93,0 @@ const UploadPreview = getUploadPreviewForBatchItemsMethod();

lib/cjs/usePreviewsLoader.js

@@ -7,33 +7,22 @@ "use strict";
 exports.getPreviewsLoaderHook = void 0;
-
 var _react = require("react");
-
 var _shared = require("@rpldy/shared");
-
 var _consts = require("./consts");
-
 var _utils = require("./utils");
-
 const getFilePreviewUrl = (file, options) => {
   let data = (0, _utils.getFileObjectUrlByType)(_consts.PREVIEW_TYPES.IMAGE, options.imageMimeTypes, options.maxPreviewImageSize || 0, file);
-
   if (!data) {
     data = (0, _utils.getFileObjectUrlByType)(_consts.PREVIEW_TYPES.VIDEO, options.videoMimeTypes, options.maxPreviewVideoSize || 0, file);
   }
-
   return data;
 };
-
 const getItemProps = (previewComponentProps, item, url, type) => {
   return (0, _shared.isFunction)(previewComponentProps) ? previewComponentProps(item, url, type) : previewComponentProps;
 };
-
-const loadPreviewData = (item, options) => {
+const loadPreviewData = (item, options, removeItemFromPreview) => {
   let data,
-      isFallback = false;
-
+    isFallback = false;
   if (item.file) {
     const file = item.file;
     data = getFilePreviewUrl(item.file, options);
-
     if (!data) {
@@ -50,15 +39,15 @@ data = (0, _utils.getFallbackUrlData)(options.fallbackUrl, file);
   }
-
-  return data && { ...data,
+  return data && {
+    ...data,
     id: item.id,
-    isFallback
+    isFallback,
+    removePreview: () => removeItemFromPreview(item.id)
   };
 };
-
 const mergePreviewData = (prev, next) => {
-  const newItems = []; //dedupe and merge new with existing
+  const newItems = [];
 
+  //dedupe and merge new with existing
   next.forEach(n => {
     const existingIndex = prev.findIndex(p => p.id === n.id);
-
     if (~existingIndex) {
@@ -72,8 +61,7 @@ prev.splice(existingIndex, 1, n);
 };
-
 const getPreviewsDataWithItemProps = (previewsData, items, previewComponentProps) => {
   let newData = previewsData;
-
   if (previewComponentProps) {
-    newData = previewsData.map(pd => ({ ...pd,
+    newData = previewsData.map(pd => ({
+      ...pd,
       props: getItemProps(previewComponentProps, items.find(_ref => {
@@ -87,6 +75,4 @@ let {
   }
-
   return newData;
 };
-
 const getPreviewsLoaderHook = batchItemsMethod => {
@@ -106,5 +92,17 @@ return props => {
     }, []);
+    const removeItemFromPreview = (0, _react.useCallback)(id => {
+      setPreviews(_ref2 => {
+        let {
+          previews,
+          items
+        } = _ref2;
+        return {
+          previews: previews.filter(prev => prev.id !== id),
+          items: items.filter(item => item.id !== id)
+        };
+      });
+    }, []);
     batchItemsMethod(batch => {
       const items = previewOptions.loadFirstOnly ? batch.items.slice(0, 1) : batch.items;
-      const previewsData = items.map(item => loadPreviewData(item, previewOptions)).filter(Boolean);
+      const previewsData = items.map(item => loadPreviewData(item, previewOptions, removeItemFromPreview)).filter(Boolean);
       setPreviews({
@@ -118,7 +116,7 @@ previews: props.rememberPreviousBatches ? mergePreviewData(previews.previews, previewsData) : previewsData,
       previews: previewsWithItemProps,
-      clearPreviews
+      clearPreviews,
+      removeItemFromPreview
     };
   };
 };
-
 exports.getPreviewsLoaderHook = getPreviewsLoaderHook;

lib/cjs/utils.js

@@ -13,23 +13,17 @@ "use strict";
 });
-
 var _shared = require("@rpldy/shared");
-
 var _consts = require("./consts");
-
 var _defaults = require("./defaults");
-
 const getWithMandatoryOptions = options => {
-  return { ..._defaults.PREVIEW_DEFAULTS,
+  return {
+    ..._defaults.PREVIEW_DEFAULTS,
     ...options
   };
 };
-
 exports.getWithMandatoryOptions = getWithMandatoryOptions;
-
 const getFallbackUrlData = (fallbackProp, file) => {
   let data = (0, _shared.isFunction)(fallbackProp) ? fallbackProp(file) : fallbackProp;
-
   if (typeof data === "string") {
     data = {
-      id: "",
+      // id: "",
       url: data,
@@ -40,14 +34,11 @@ name: file.name,
   }
-
   return data;
 };
-
 exports.getFallbackUrlData = getFallbackUrlData;
-
 const getFileObjectUrlByType = (type, mimeTypes, max, file) => {
   let data;
-
   if (mimeTypes && ~mimeTypes.indexOf(file.type)) {
     if (!max || file.size <= max) {
       data = {
+        // id: "",
         url: URL.createObjectURL(file),
@@ -59,6 +50,4 @@ name: file.name,
   }
-
   return data;
 };
-
 exports.getFileObjectUrlByType = getFileObjectUrlByType;

lib/esm/UploadPreview.js

 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { useCallback, useEffect, useImperativeHandle } from "react";
@@ -8,3 +7,2 @@ import { useBatchStartListener } from "@rpldy/shared-ui";
 import { PREVIEW_TYPES } from "./consts";
-
 const showBasicPreview = (type, url, previewProps, onImgError) => type === PREVIEW_TYPES.VIDEO ? /*#__PURE__*/React.createElement("video", _extends({
@@ -19,7 +17,7 @@ key: url,
 }, previewProps));
-
-const usePreviewMethods = (previews, clearPreviews, previewMethodsRef, onPreviewsChanged) => {
+const usePreviewMethods = (previews, clearPreviews, previewMethodsRef, onPreviewsChanged, removeItemFromPreview) => {
   useImperativeHandle(previewMethodsRef, () => ({
-    clear: clearPreviews
-  }), [clearPreviews]);
+    clear: clearPreviews,
+    removePreview: removeItemFromPreview
+  }), [clearPreviews, removeItemFromPreview]);
   useEffect(() => {
@@ -31,3 +29,2 @@ if (onPreviewsChanged) {
 };
-
 const getUploadPreviewForBatchItemsMethod = function () {
@@ -45,8 +42,8 @@ let method = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : useBatchStartListener;
       previews,
-      clearPreviews
+      clearPreviews,
+      removeItemFromPreview
     } = usePreviewsLoader(previewOptions);
     const onImagePreviewLoadError = useCallback(e => {
-      const img = e.target;
+      const img = e.currentTarget;
       const fallback = getFallbackUrlData(props.fallbackUrl, img.src);
-
       if (fallback) {
@@ -56,3 +53,3 @@ img.src = fallback.url;
     }, [props.fallbackUrl]);
-    usePreviewMethods(previews, clearPreviews, previewMethodsRef, onPreviewsChanged);
+    usePreviewMethods(previews, clearPreviews, previewMethodsRef, onPreviewsChanged, removeItemFromPreview);
     return previews.map(data => {
@@ -65,2 +62,3 @@ const {
         isFallback,
+        removePreview,
         props: previewProps
@@ -74,3 +72,4 @@ } = data;
         name: name,
-        isFallback: isFallback
+        isFallback: isFallback,
+        removePreview: removePreview
       }, previewProps)) : showBasicPreview(type, url, previewProps, onImagePreviewLoadError);
@@ -80,9 +79,8 @@ });
 };
+
 /**
  * UploadPreview uses Batch start event to display uploading items
  */
-
-
 const UploadPreview = getUploadPreviewForBatchItemsMethod();
 export { getUploadPreviewForBatchItemsMethod };
 export default UploadPreview;

lib/esm/usePreviewsLoader.js

@@ -5,25 +5,18 @@ import { useState, useCallback, useMemo } from "react";
 import { getWithMandatoryOptions, getFallbackUrlData, getFileObjectUrlByType } from "./utils";
-
 const getFilePreviewUrl = (file, options) => {
   let data = getFileObjectUrlByType(PREVIEW_TYPES.IMAGE, options.imageMimeTypes, options.maxPreviewImageSize || 0, file);
-
   if (!data) {
     data = getFileObjectUrlByType(PREVIEW_TYPES.VIDEO, options.videoMimeTypes, options.maxPreviewVideoSize || 0, file);
   }
-
   return data;
 };
-
 const getItemProps = (previewComponentProps, item, url, type) => {
   return isFunction(previewComponentProps) ? previewComponentProps(item, url, type) : previewComponentProps;
 };
-
-const loadPreviewData = (item, options) => {
+const loadPreviewData = (item, options, removeItemFromPreview) => {
   let data,
-      isFallback = false;
-
+    isFallback = false;
   if (item.file) {
     const file = item.file;
     data = getFilePreviewUrl(item.file, options);
-
     if (!data) {
@@ -40,15 +33,15 @@ data = getFallbackUrlData(options.fallbackUrl, file);
   }
-
-  return data && { ...data,
+  return data && {
+    ...data,
     id: item.id,
-    isFallback
+    isFallback,
+    removePreview: () => removeItemFromPreview(item.id)
   };
 };
-
 const mergePreviewData = (prev, next) => {
-  const newItems = []; //dedupe and merge new with existing
+  const newItems = [];
 
+  //dedupe and merge new with existing
   next.forEach(n => {
     const existingIndex = prev.findIndex(p => p.id === n.id);
-
     if (~existingIndex) {
@@ -62,8 +55,7 @@ prev.splice(existingIndex, 1, n);
 };
-
 const getPreviewsDataWithItemProps = (previewsData, items, previewComponentProps) => {
   let newData = previewsData;
-
   if (previewComponentProps) {
-    newData = previewsData.map(pd => ({ ...pd,
+    newData = previewsData.map(pd => ({
+      ...pd,
       props: getItemProps(previewComponentProps, items.find(_ref => {
@@ -77,6 +69,4 @@ let {
   }
-
   return newData;
 };
-
 const getPreviewsLoaderHook = batchItemsMethod => {
@@ -96,5 +86,17 @@ return props => {
     }, []);
+    const removeItemFromPreview = useCallback(id => {
+      setPreviews(_ref2 => {
+        let {
+          previews,
+          items
+        } = _ref2;
+        return {
+          previews: previews.filter(prev => prev.id !== id),
+          items: items.filter(item => item.id !== id)
+        };
+      });
+    }, []);
     batchItemsMethod(batch => {
       const items = previewOptions.loadFirstOnly ? batch.items.slice(0, 1) : batch.items;
-      const previewsData = items.map(item => loadPreviewData(item, previewOptions)).filter(Boolean);
+      const previewsData = items.map(item => loadPreviewData(item, previewOptions, removeItemFromPreview)).filter(Boolean);
       setPreviews({
@@ -108,7 +110,7 @@ previews: props.rememberPreviousBatches ? mergePreviewData(previews.previews, previewsData) : previewsData,
       previews: previewsWithItemProps,
-      clearPreviews
+      clearPreviews,
+      removeItemFromPreview
     };
   };
 };
-
 export { getPreviewsLoaderHook };

lib/esm/utils.js

 import { isFunction } from "@rpldy/shared";
 import { PREVIEW_TYPES } from "./consts";
 import { PREVIEW_DEFAULTS } from "./defaults";
-
 const getWithMandatoryOptions = options => {
-  return { ...PREVIEW_DEFAULTS,
+  return {
+    ...PREVIEW_DEFAULTS,
     ...options
   };
 };
-
 const getFallbackUrlData = (fallbackProp, file) => {
   let data = isFunction(fallbackProp) ? fallbackProp(file) : fallbackProp;
-
   if (typeof data === "string") {
     data = {
-      id: "",
+      // id: "",
       url: data,
@@ -22,12 +20,10 @@ name: file.name,
   }
-
   return data;
 };
-
 const getFileObjectUrlByType = (type, mimeTypes, max, file) => {
   let data;
-
   if (mimeTypes && ~mimeTypes.indexOf(file.type)) {
     if (!max || file.size <= max) {
       data = {
+        // id: "",
         url: URL.createObjectURL(file),
@@ -39,6 +35,4 @@ name: file.name,
   }
-
   return data;
 };
-
 export { isFunction, getWithMandatoryOptions, getFallbackUrlData, getFileObjectUrlByType };

package.json

 {
-  "version": "1.3.1",
+  "version": "1.4.0-rc.0",
   "name": "@rpldy/upload-preview",
@@ -34,10 +34,10 @@ "description": "preview component to show image or video being uploaded",
   "dependencies": {
-    "@rpldy/shared": "^1.3.1",
-    "@rpldy/shared-ui": "^1.3.1"
+    "@rpldy/shared": "^1.4.0-rc.0",
+    "@rpldy/shared-ui": "^1.4.0-rc.0"
   },
   "devDependencies": {
-    "@rpldy/upload-button": "^1.3.1",
-    "@rpldy/upload-url-input": "^1.3.1",
+    "@rpldy/upload-button": "^1.4.0-rc.0",
+    "@rpldy/upload-url-input": "^1.4.0-rc.0",
     "@storybook/addon-knobs": "^6.4.0",
-    "flow-bin": "^0.182.0",
+    "flow-bin": "^0.199.1",
     "react-image-crop": "^9.0.5",
@@ -53,3 +53,3 @@ "styled-components": "^5.3.5"
   },
-  "gitHead": "8a2473ae6d9521c5f16f5ae525466075ac02fd1f"
+  "gitHead": "96a9141aa17e74962f1606d836f8f9f5c4b7aef0"
 }

README.md

@@ -32,15 +32,15 @@ <a href="https://badge.fury.io/js/%40rpldy%2Fupload-preview">
 
-| Name (* = mandatory) | Type                                              | Default       | Description | 
-| --------------       |---------------------------------------------------| ------------- | -------------|
-| loadFirstOnly        | boolean                                           | false         | load preview only for the first item in a batch|
-| maxPreviewImageSize  | number                                            | 2e+7          | maximum size of image to preview|
-| maxPreviewVideoSize  | number                                            | 1e+8          | maximum size of video to preview|
-| fallbackUrl          | string &#124; [FallbackMethod](src/types.js#L16)  | undefined | static URL or function that returns fallback in case failed to load preview or when file over max size|
-| imageMimeTypes       | string[]                                          | [see list below](#default-image-types) | image mime types to load preview for|
-| videoMimeTypes       | string[]                                          | [see list below](#default-video-types) | video mime types to load preview for|
-| previewComponentProps | [PreviewComponentPropsOrMethod](src/types.js#L18) | undefined | object or function to generate object as additional props for the preview component|
-| PreviewComponent      | React.ComponentType&lt;any&gt;                    | img &#124; video | The component that will show the preview|
-| rememberPreviousBatches | boolean                                           | false | show previous batches' previews as opposed to just the last |
-| previewMethodsRef     | React Ref                                         | undefined | ref will be set with preview helper [methods](src/types.js#L29)|
-| onPreviewsChanged     | (PreviewItem[]) => void                           | undefined | callback will be called whenever preview items array changes|
+| Name (* = mandatory)    | Type                                              | Default                                | Description                                                                                            | 
+|-------------------------|---------------------------------------------------|----------------------------------------|--------------------------------------------------------------------------------------------------------|
+| loadFirstOnly           | boolean                                           | false                                  | load preview only for the first item in a batch                                                        |
+| maxPreviewImageSize     | number                                            | 2e+7                                   | maximum size of image to preview                                                                       |
+| maxPreviewVideoSize     | number                                            | 1e+8                                   | maximum size of video to preview                                                                       |
+| fallbackUrl             | string &#124; [FallbackMethod](src/types.js#L16)  | undefined                              | static URL or function that returns fallback in case failed to load preview or when file over max size |
+| imageMimeTypes          | string[]                                          | [see list below](#default-image-types) | image mime types to load preview for                                                                   |
+| videoMimeTypes          | string[]                                          | [see list below](#default-video-types) | video mime types to load preview for                                                                   |
+| previewComponentProps   | [PreviewComponentPropsOrMethod](src/types.js#L18) | undefined                              | object or function to generate object as additional props for the preview component                    |
+| PreviewComponent        | React.ComponentType&lt;any&gt;                    | img &#124; video                       | The component that will show the preview                                                               |
+| rememberPreviousBatches | boolean                                           | false                                  | show previous batches' previews as opposed to just the last                                            |
+| previewMethodsRef       | React Ref                                         | undefined                              | ref will be set with preview helper [methods](src/types.js#L29)                                        |
+| onPreviewsChanged       | (PreviewItem[]) => void                           | undefined                              | callback will be called whenever preview items array changes                                           |
 
@@ -73,3 +73,3 @@ ## Usage
 import React from "react";
-import Uploady from "@rpldy/uploady";
+import Uploady, { useAbortItem } from "@rpldy/uploady";
 import UploadPreview from "@rpldy/upload-preview";
@@ -79,2 +79,3 @@ import UploadButton from "@rpldy/upload-button";
 const PreviewsWithClear = () => {
+	const abortItem = useAbortItem();
 	const previewMethodsRef = useRef();
@@ -93,2 +94,9 @@ const [previews, setPreviews] = useState([]);
 
+	const onRemoveItem = useCallback(() => {
+		if (previewMethodsRef.current?.removePreview) {
+			abortItem("item-123"); //cancel the upload for the item
+            previewMethodsRef.current.removePreview("item-123") //need the item id to remove the preview
+        }
+    }, [previewMethodsRef]);
+	
 	return <>
@@ -113,7 +121,39 @@ <button onClick={onClear}>
 };
+```
 
+### previewMethodsRef
+
+```typescript
+type PreviewMethods = {
+    clear: () => void;
+    removePreview: (id: string) => void;
+};
 ```
 
+Provides access to preview related methods:
+
+- `clear` - will reset all items shown in the preview
+- `removePreview` - will remove a single item preview
+
+> These methods do not remove the item from the upload queue. ONLY from the preview.
+
+
 ### Custom Preview Component
- 
+
+The Upload Preview can be customized in several ways. The main method is through the _PreviewComponent_ prop.
+Passing a custom component will make the preview render your own UI per each file being uploaded.
+
+The custom component is called with the following props
+
+```typescript
+type PreviewProps = {
+	id: string;
+	url: string;
+	name: string;
+	type: PreviewType;
+	isFallback: boolean;
+    removePreview: () => void;
+};
+```
+
 For an example of using a custom preview component see [this story](https://react-uploady-storybook.netlify.app/?path=/story/upload-preview--with-progress). 
@@ -120,0 +160,0 @@

types/index.d.ts

@@ -9,2 +9,4 @@ import * as React from "react";
 
+export type RemovePreviewMethod = (id: string) => void;
+
 export type PreviewItem = {
@@ -16,12 +18,8 @@ id: string;
     isFallback: boolean;
+    removePreview: () => void;
     props: Record<string, unknown>;
 };
 
-export type PreviewData = {
-    previews: PreviewItem[];
-    clearPreviews: () => void;
-};
+export type FallbackType = string | PreviewItem;
 
-export type FallbackType = string | PreviewData;
-
 export type FallbackMethod = (file: FileLike) => FallbackType | void;
@@ -35,2 +33,3 @@
     clear: () => void;
+    removePreview: RemovePreviewMethod;
 };
@@ -37,0 +36,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40200

increased by10.13%

Lines of code

760

increased by6.74%

Number of lines in readme file

213

increased by23.12%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@rpldy/shared@^1.4.0-rc.0

• Updated@rpldy/shared-ui@^1.4.0-rc.0