@luscii-healthtech/web-ui 6.2.2 → 6.3.0

package/dist/components/Form/FormImagePicker.d.ts

@@ -5,5 +5,5 @@ interface FormImagePickerProps extends ImagePickerFieldConfiguration, FormFieldL
     control: Control;
     rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
 }
-export declare const FormImagePicker: React.ForwardRefExoticComponent<Omit<FormImagePickerProps, "ref"> & React.RefAttributes<any>>;
+export declare const FormImagePicker: React.ForwardRefExoticComponent<FormImagePickerProps & React.RefAttributes<any>>;
 export {};

package/dist/components/Form/form.types.d.ts

@@ -3,7 +3,7 @@ import React, { HTMLInputTypeAttribute } from "react";
 import { InputProps } from "../Input/Input";
 import { RadioGroupProps } from "../RadioGroup/RadioGroupV2";
 import { SelectProps } from "../Select/Select";
-import { ImagePickerProps } from "../ImagePicker/ImagePicker";
+import { ImagePickerProps } from "../MediaPicker/MediaPicker";
 import { PartialProperties } from "../../types/general.types";
 import { CheckboxProps } from "../Checkbox/Checkbox";
 import { CheckboxListProps } from "../CheckboxList/CheckboxList.types";

package/dist/components/MediaPicker/MediaPicker.d.ts

@@ -3,8 +3,11 @@ import { CategoryProps } from "./ImageCategory";
 export interface TargetProps {
     target: {
         name: string | null | undefined;
+        /**
+         * It is called imageData, but it can any file that was selected. The name is kept for backwards compatibility for now.
+         */
         value: string | null | undefined | {
-            imageData: string;
+            imageData: FormData;
         };
     };
 }
@@ -12,9 +15,8 @@ export interface ImagePickerProps {
     name: string;
     images: string[];
     categories: CategoryProps[];
-    preselectedImage?: string | {
-        imageData: string;
-    };
+    preselectedImage?: string;
+    preselectedMediaType?: "image" | "video";
     /**
      * Array of [valid MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types).
      *
@@ -34,6 +36,8 @@ export interface ImagePickerProps {
     handleChange: (target: TargetProps) => void;
     isUploadButtonVisible?: boolean;
     isClearButtonVisible?: boolean;
+    isUploading?: boolean;
+    isErrorUploading?: boolean;
     localisation: Partial<Record<"openModalButton" | "selectButton" | "error" | "uploadImage" | "clearSelection" | "cancel" | "search" | "unsupportedMediaType" | "modalTitle", string>>;
 }
 export declare const ImagePickerInner: React.FC<ImagePickerProps & {
@@ -47,16 +51,37 @@ export interface MediaPickerProps {
     name: string;
     media: string[];
     categories: CategoryProps[];
-    preselectedMedia?: string | {
-        mediaData: string;
-    };
+    /**
+     * If you add preselectedMedia you must also specify preselectedMediaType, especially if it is not an image.
+     *
+     * @example
+     * ```tsx
+     * <MediaPicker preselectedMedia="http://www.domain.com/someVideo.mp4" preselectedMediaType="video"/>
+     * ```
+     */
+    preselectedMedia?: string;
+    preselectedMediaType?: "image" | "video";
     clearIndex?: number;
     type?: "normal" | "compact";
+    /**
+     * Array of [valid MIME types](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types).
+     *
+     * If the media the user tries to upload doesn't match one of the
+     * MIME types in this array, an error message will be displayed in
+     * the UI.
+     *
+     * @example
+     * ```tsx
+     * <MediaPicker acceptedMimeTypes={[ "text/*", "image/jpeg", "video/mp4"]} />
+     * ```
+     */
     acceptedMimeTypes?: string[];
     isDisabled?: boolean;
     onChange: (target: TargetProps) => void;
     isUploadButtonVisible?: boolean;
     isClearButtonVisible?: boolean;
+    isUploading?: boolean;
+    isErrorUploading?: boolean;
     localisation: Partial<Record<"openModalButton" | "selectButton" | "error" | "upload" | "clearSelection" | "cancel" | "search" | "unsupportedMediaType" | "modalTitle", string>>;
 }
 export declare const MediaPicker: (props: MediaPickerProps) => React.JSX.Element;

package/dist/index.development.js

@@ -1537,16 +1537,6 @@ const isSubstring = (string, searchTerm, caseSensitive = false) => {
   const searchTermWithCase = caseSensitive ? searchTerm : searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase();
   return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
 };
-const getBase64 = (file) => {
-  return new Promise((resolve, reject) => {
-    const fr = new FileReader();
-    fr.onerror = reject;
-    fr.onload = function() {
-      resolve(fr.result.split(",")[1]);
-    };
-    fr.readAsDataURL(file);
-  });
-};
 
 var img$i = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e";
 
@@ -4818,7 +4808,7 @@ const ImageCategory = (props) => {
   );
 };
 
-const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, isDisabled = false, name, preselectedImage, acceptedMimeTypes = ["image/svg+xml"], type = "normal", isUploadButtonVisible = false, isClearButtonVisible = false, localisation, innerRef }) => {
+const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, isDisabled = false, name, preselectedImage, preselectedMediaType = "image", acceptedMimeTypes = ["image/svg+xml"], type = "normal", isUploadButtonVisible = false, isClearButtonVisible = false, isUploading = false, isErrorUploading = false, localisation, innerRef }) => {
   var _a;
   const placeholderImage = clearImageIndex !== void 0 && images[clearImageIndex] ? images[clearImageIndex] : img;
   const isTypeCompact = type === "compact";
@@ -4833,8 +4823,16 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
   React.useEffect(() => {
     if (preselectedImage && typeof preselectedImage === "string") {
       setSelectedMedia(preselectedImage);
+      setSelectedMediaType(preselectedMediaType);
+    }
+  }, [preselectedImage, preselectedMediaType]);
+  React.useEffect(() => {
+    if (isErrorUploading) {
+      setSelectedMedia(placeholderImage);
+      setSelectedMediaType("image");
+      setHighlightedImage(null);
     }
-  }, [preselectedImage]);
+  }, [isErrorUploading]);
   const handleSearchChange = (event) => {
     const searchQuery = event.target.value;
     setSearch(searchQuery);
@@ -4849,15 +4847,17 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
     setHighlightedImage(event.currentTarget.src);
   };
   const handleDeleteClick = () => {
+    handleChange({ target: { name, value: "" } });
     if (selectedMedia) {
       URL.revokeObjectURL(selectedMedia);
     }
-    handleChange({ target: { name, value: "" } });
     setSelectedMedia(placeholderImage);
+    setSelectedMediaType("image");
     setHighlightedImage(null);
   };
   function handleConfirmSelection() {
     setSelectedMedia(highlightedImage !== null && highlightedImage !== void 0 ? highlightedImage : placeholderImage);
+    setSelectedMediaType("image");
     handleChange({
       target: { name, value: highlightedImage }
     });
@@ -4866,16 +4866,20 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
   const handleCloseModal = () => {
     setIsImagesPanelOpen(false);
   };
+  const mediaType = (mimeType) => {
+    return mimeType.split("/")[0];
+  };
   const uploadImage = (event) => __awaiter(void 0, void 0, void 0, function* () {
     var _b;
     if (event.currentTarget.files) {
       const file = event.currentTarget.files[0];
       if (acceptedMimeTypes.includes(file.type)) {
         setSelectedMedia(URL.createObjectURL(file));
-        setSelectedMediaType(file.type.split("/")[0]);
-        const base64String = yield getBase64(file);
+        setSelectedMediaType(mediaType(file.type));
+        const data = new FormData();
+        data.append("file", file, file.name);
         handleChange({
-          target: { name, value: { imageData: base64String } }
+          target: { name, value: { imageData: data } }
         });
       } else {
         setError((_b = localisation.error) !== null && _b !== void 0 ? _b : null);
@@ -4891,15 +4895,18 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
       selectedMedia && React__namespace.default.createElement(
         "div",
         { className: classNames__default.default({
-          "ui-h-11 ui-w-11 ui-rounded-full ui-bg-secondary ui-p-3": isTypeCompact,
-          "ui-h-44 ": !isTypeCompact
+          "ui-h-11 ui-w-11 ui-flex-shrink-0 ui-rounded-full ui-bg-secondary ui-p-3": isTypeCompact,
+          "ui-h-44 ui-w-full": !isTypeCompact
         }) },
-        selectedMediaType === "image" && React__namespace.default.createElement(Image$1, { className: classNames__default.default("ui-h-full", {
-          "ui-rounded ui-bg-secondary ui-p-3": !isTypeCompact
-        }), src: selectedMedia }),
-        selectedMediaType === "video" && React__namespace.default.createElement("video", { className: classNames__default.default("ui-h-full", {
-          "ui-rounded ui-bg-secondary ui-p-3": !isTypeCompact
+        isUploading && React__namespace.default.createElement(LoadingIndicator, { className: "ui-my-16" }),
+        !isUploading && selectedMediaType === "image" && React__namespace.default.createElement(Image$1, { className: classNames__default.default("ui-h-full", {
+          "ui-w-full ui-rounded ui-bg-secondary ui-object-contain ui-p-3": !isTypeCompact,
+          "ui-w-full": isTypeCompact
         }), src: selectedMedia }),
+        !isUploading && !isErrorUploading && selectedMediaType === "video" && React__namespace.default.createElement("video", { className: classNames__default.default("ui-h-full", {
+          "ui-w-full ui-rounded ui-bg-secondary ui-object-contain ui-p-3": !isTypeCompact,
+          "ui-w-full": isTypeCompact
+        }), src: selectedMedia, playsInline: true, controls: true, disablePictureInPicture: true, preload: "none", poster: placeholderImage }, "There is a video, but your browser doesn't support showing the video."),
         selectedMediaType !== "image" && selectedMediaType !== "video" && React__namespace.default.createElement(InfoBlock, { message: (_a = localisation.unsupportedMediaType) !== null && _a !== void 0 ? _a : "File uploaded successfully but preview not supported." })
       ),
       error && React__namespace.default.createElement(ErrorBlock, { className: "cweb-no-action-error", message: error }),
@@ -4940,13 +4947,7 @@ const ImagePickerInner = ({ categories, clearImageIndex, handleChange, images, i
 const ImagePicker = React__namespace.default.forwardRef((props, ref) => React__namespace.default.createElement(ImagePickerInner, Object.assign({}, props, { innerRef: ref })));
 const MediaPicker = (props) => {
   var _a, _b;
-  let preselectedImage = void 0;
-  if (props.preselectedMedia && typeof props.preselectedMedia === "string") {
-    preselectedImage = props.preselectedMedia;
-  } else if (props.preselectedMedia && typeof props.preselectedMedia !== "string" && props.preselectedMedia.mediaData) {
-    preselectedImage = { imageData: props.preselectedMedia.mediaData };
-  }
-  const mappedProps = Object.assign(Object.assign({}, props), { preselectedImage, images: props.media, handleChange: props.onChange, clearImageIndex: props.clearIndex, localisation: Object.assign(Object.assign({}, props.localisation), { uploadImage: (_b = (_a = props.localisation) === null || _a === void 0 ? void 0 : _a.upload) !== null && _b !== void 0 ? _b : "Upload file" }) });
+  const mappedProps = Object.assign(Object.assign({}, props), { preselectedImage: props.preselectedMedia, images: props.media, handleChange: props.onChange, clearImageIndex: props.clearIndex, localisation: Object.assign(Object.assign({}, props.localisation), { uploadImage: (_b = (_a = props.localisation) === null || _a === void 0 ? void 0 : _a.upload) !== null && _b !== void 0 ? _b : "Upload file" }) });
   return React__namespace.default.createElement(ImagePicker, Object.assign({}, mappedProps));
 };