@integry/sdk 4.5.2 → 4.5.4

package/src/components/MediaUpload/index.ts

@@ -0,0 +1,233 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable no-use-before-define */
+import { MediaObject, MediaType, UploadFileObj } from '@/interfaces';
+import { html } from 'htm/preact';
+import { useContext, useState, useRef, useEffect } from 'preact/hooks';
+import AppContext from '@/contexts/AppContext';
+import { Loader } from '../Loader';
+import { Input } from '../Input';
+import styles from './styles.module.scss';
+
+
+interface MediaUplaodProps {
+    media: MediaObject[];
+    allowedUploadMediaType?: string;
+    allowedMediaLabel?: string;
+    singleUpload?: boolean;
+    allowUploadViaURL?: boolean;
+    handleUploadMedia: (files: UploadFileObj[]) => void;
+}
+
+const MediaUplaod = (props: MediaUplaodProps) => {
+  const {
+      media,
+      allowedUploadMediaType = 'image/png,image/jpg,image/jpeg',
+      allowedMediaLabel = 'Supports: JPG, JPEG, PNG',
+      singleUpload = false,
+      allowUploadViaURL = false,
+      handleUploadMedia,
+    } = props;
+    const context = useContext(AppContext);
+    const [uploadFiles, setUploadFiles] = useState<UploadFileObj[]>(media);
+    const fileInpuRef = useRef<HTMLInputElement>();
+    const newFiletoUploadRef = useRef(false);
+
+      useEffect(() => {
+        if (uploadFiles.length > 0) {
+            if (newFiletoUploadRef.current === true) {
+                const anyFileUploading = uploadFiles.findIndex((fileObj) => fileObj.uploading === true);
+                if (anyFileUploading === -1) {
+                handleUploadMedia(uploadFiles);
+                newFiletoUploadRef.current = false;
+                }
+            } else {
+                handleUploadMedia(uploadFiles);
+            }
+        } else {
+            handleUploadMedia([]);
+        }
+    }, [uploadFiles]);
+
+    const triggerFileSelection = (): void => {
+        if (fileInpuRef.current) {
+        fileInpuRef.current.click();
+        }
+    };
+
+     const getFileType = (fileType: string): MediaType | null => {
+        if (fileType.split('/')[0] === 'image') {
+        return MediaType.IMAGE;
+        }
+        if (fileType.split('/')[0] === 'video') {
+        return MediaType.VIDEO;
+        }
+        return null;
+    };
+
+    const removeFile = (fileObj: UploadFileObj): void => {
+        const updatedUploadedFiles = uploadFiles.filter((tempFile) => {
+            if (fileObj.index) {
+                return tempFile.index !== fileObj.index
+            } if (fileObj.id) {
+                return tempFile.id !== fileObj.id
+            }
+            return true;
+        });
+        setUploadFiles([...updatedUploadedFiles]);
+    };
+
+    const setFileUploadingStatus = (
+        fileIndex: number,
+        uploading: boolean,
+        url: string
+    ): void => {
+        setUploadFiles((prev) => {
+        const updatedUploadedFiles = prev.map((fileObj) =>
+            fileObj.index === fileIndex
+            ? { ...fileObj, uploading, url: url || fileObj.url }
+            : fileObj
+        );
+        return [...updatedUploadedFiles];
+        });
+    };
+
+    const sendFileUploadRequest = (fileObj: UploadFileObj): void => {
+        if (fileObj.file) {
+            const requestData = new FormData();
+            requestData.set('file', fileObj.file);
+            context?.apiHandler
+            .uploadFile(requestData)
+            .then((data) => {
+                if (data) {
+                    if (fileObj.index) {
+                        setFileUploadingStatus(fileObj.index, false, data.file_path);
+                    }
+                } else {
+                    console.error(`Failed to upload media`);
+                }
+            })
+        }
+    };
+
+    const validateAndUploadFile = (fileObj: UploadFileObj): void => {
+    const allowedUploadMediaTypeArray = allowedUploadMediaType.split(',');
+    if (allowedUploadMediaTypeArray.includes(fileObj.file.type)) {
+      if (fileObj.file.type.includes('image')) {
+        const { url } = fileObj;
+        const image = new Image();
+        image.onload = () => {
+          newFiletoUploadRef.current = true;
+          if (singleUpload) {
+            setUploadFiles([fileObj]);
+          } else {
+            setUploadFiles((prev) => [...prev, fileObj]);
+          }
+          sendFileUploadRequest(fileObj);
+        };
+        image.src = url;
+      } else {
+        // handle other media types
+      }
+    } else {
+        // display error toast
+    }
+  };
+
+    const handleFileSelection = (e: InputEvent): void => {
+        if (e.currentTarget instanceof HTMLInputElement) {
+            const selectedFilesRaw = Array.from(e.currentTarget.files || []);
+            processSelectedFiles(selectedFilesRaw);
+            if (fileInpuRef.current) {
+                fileInpuRef.current.value = '';
+            }
+        }
+    };
+
+    const processSelectedFiles = (selectedFilesRaw: File[]): void => {
+        selectedFilesRaw?.forEach((file, index) => {
+            const fileObj = {
+                index: Math.floor(Math.random() * 100 + 1) + index,
+                file,
+                url: URL.createObjectURL(file),
+                type: getFileType(file.type),
+                uploading: true,
+            } as UploadFileObj;
+            validateAndUploadFile(fileObj);
+        });
+    }
+
+    const handleRemoveMedia = (mediaItem: UploadFileObj): void => {
+        removeFile(mediaItem);
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const dropHandler = (ev: any): void => {
+        // Prevent default behavior (Prevent file from being opened)
+        ev.preventDefault();
+        // Use DataTransfer interface to access the file(s)
+        const selectedFilesRaw = [...ev.dataTransfer.files];
+        processSelectedFiles(selectedFilesRaw);
+    };
+ 
+    const dragOverHandler = (ev: any) => {
+        // Prevent default behavior (Prevent file from being opened)
+        ev.preventDefault();
+    }
+
+    return html`
+        <div class="${styles.mediaUploadWrap}"> 
+          <div class="${styles.mediaUploader}">
+            <div class="${styles.dropMedia}" ondrop=${dropHandler} ondragover=${dragOverHandler}>
+                <input
+                class="${styles.hiddenFileInput}"
+                type="file"
+                ref=${fileInpuRef}
+                multiple
+                accept=${allowedUploadMediaType}
+                onChange=${handleFileSelection}
+                />
+                <img class="${styles.dropIcon}" />
+                <div class="${styles.dropText}">
+                    Drop your images here
+                    or <span class="${styles.link}" onclick=${triggerFileSelection}>browse</span>
+                    <p class=${styles.allowedMediaLabel}>${allowedMediaLabel}</p>
+                </div>
+            </div>
+            ${allowUploadViaURL && html`
+                <div class="${styles.urlField}">
+                    <${Input} value="" 
+                    className="media-url-field" 
+                    placeholder="Or paste a URL here" />
+                </div>
+            `}
+          </div>
+          ${uploadFiles.length > 0 && html`
+            <div class="${styles.mediaListing}">
+                ${uploadFiles.map((mediaItem, index) => {
+                    const { url, type, uploading = false } = mediaItem;
+                    if (type === MediaType.IMAGE) {
+                        return html`
+                        <div class="${styles.mediaPreview}" key=${`media_${mediaItem.id}_${index}}`}>
+                            ${uploading && html `<span class="${styles.uploadingImg}"><${Loader} fill="#4250F0" /></span>`}
+                            <span class="${styles.backgroundOverlay} ${uploading ? styles.uploading : ''} " />
+                            ${!uploading && html` 
+                            <span class="${styles.delMediaSpan}" onclick=${() => { handleRemoveMedia(mediaItem) }}>
+                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M1 4H14" stroke="#F05C42" stroke-width="1.4"/>
+                                <path d="M11.4829 5.5V6.16667L10.8162 13.5H4.14958L3.48291 6.16667V5.5" stroke="#F05C42" stroke-width="1.4" stroke-linejoin="round"/>
+                                <path d="M5.48291 3.5V2.16667C5.48291 1.79848 5.78139 1.5 6.14958 1.5H8.81624C9.18443 1.5 9.48291 1.79848 9.48291 2.16667V3.5" stroke="#F05C42" stroke-width="1.4"/>
+                                </svg>
+                                Delete
+                            </span>`}
+                            <img src=${url} alt="media-img" class="${styles.mediaImg}" />
+                        </div>
+                    `}
+                    return html``;
+                })}
+            </div>
+          `}
+        </div>
+  `;
+};
+
+export default MediaUplaod;

package/src/components/MediaUpload/styles.module.scss

@@ -0,0 +1,118 @@
+.mediaUploadWrap {
+    .mediaUploader {
+        .dropMedia {
+                background: rgba(242, 242, 242, 0.5);
+                border: 1px dashed #E0E0E0;
+                border-radius: 6px;
+                width: 288px;
+                height: 162px;
+            .dropIcon {
+
+            }
+            .dropText {
+                font-family: inherit;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 15px;
+                text-align: center;
+                color: #999999;
+                .link {
+                    font-family: inherit;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 15px;
+                    text-align: center;
+                    color: #4250F0;
+                    cursor: pointer;
+                }
+                .allowedMediaLabel {
+                    font-family: inherit;
+                    font-style: normal;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 15px;
+                    text-align: center;
+                    color: #999999;
+                    margin-top: 8px;
+                }
+            }
+            .hiddenFileInput {
+                display: none;
+            }
+        }
+        .urlField {
+           
+        }
+    }
+    .mediaListing {
+        margin-top: 24px;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 7px;
+        max-width: 288px;
+        .mediaPreview {
+            width: 140px;
+            height: 77px;
+            position: relative;
+            .delMediaSpan {
+                position: absolute;
+                z-index: 999;
+                display: flex;
+                align-items: center;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 12px;
+                line-height: 15px;
+                text-align: center;
+                color: #EB5757;
+                font-family: inherit;
+                top: 32px;
+                gap: 8px;
+                left: 40px;
+                cursor: pointer;
+                display: none;
+                .delIcon {
+
+                }
+            }
+            .mediaImg {
+                border: 1px solid #E0E0E0;
+                filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.08));
+                border-radius: 6px;
+                width: 140px;
+                height: 77px;
+            }
+            .backgroundOverlay {
+                background: #FFFFFF;
+                opacity: 0.8;
+                display: none;
+                width: 140px;
+                height: 77px;
+                position: absolute;
+                top: 0px;
+                left: 0px;
+                &.uploading {
+                    display: block;
+                    z-index: 9;
+                }
+            }
+            .uploadingImg {
+                position: absolute;
+                top: 32px;
+                left: 64px;
+                z-index: 99;
+            }
+            &:hover {
+                .backgroundOverlay {
+                    display: block;
+                    z-index: 9;
+                }
+                .delMediaSpan {
+                    display: flex;
+                }
+            }
+        }
+    }
+}

package/src/components/Modal/index.ts

@@ -0,0 +1,87 @@
+import { html, Component } from 'htm/preact';
+
+import styles from './styles.module.scss';
+
+interface ModalProps {
+  isOpen: boolean;
+  CustomCloseElement?: any;
+  onClose: () => void;
+  className?: string;
+  isCompact?: boolean;
+}
+
+class Modal extends Component<ModalProps> {
+  render() {
+    const { isOpen, CustomCloseElement, className, isCompact = false } = this.props;
+    return html`
+      <div
+        id="sdk-modal"
+        class=${`${styles.modal} ${isOpen ? `${styles.open}` : ''} ${
+          styles[className || '']
+        }`}
+        aria-labelledby="modal-title"
+        role="dialog"
+        aria-modal="true"
+      >
+        <div id="sdk-modal-container" class=${styles.modalContainer}>
+          <div
+            id="sdk-modal-container__inset"
+            class=${styles.inset}
+            aria-hidden="true"
+          ></div>
+
+          <span class=${styles.span} aria-hidden="true"></span>
+
+          <div
+            id="integry-sdk-modal-container__content"
+            style="${isCompact ? 'min-width: 395px; width: 395px; overflow-x: hidden;' : ''}"
+            class=${`${isCompact ? styles.contentWrapCompact : styles.contentWrap} ${isOpen ? `${styles.open}` : ''}`}
+          >
+            <div class=${isCompact ? styles.contentCompact : styles.content}>
+              ${CustomCloseElement
+                ? html` <div
+                    onclick=${this.props.onClose}
+                    class="integry-sdk-modal-close-btn"
+                  >
+                    <${CustomCloseElement} />
+                  </div>`
+                : this.props.onClose &&
+                  html`
+                    <div
+                      onclick=${this.props.onClose}
+                      class=${`integry-sdk-modal-close-btn ${isCompact ? styles.closeCompact : styles.close}`}
+                    >
+                      <svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 14 14"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M13 1L1 13"
+                          stroke="#4F4F4F"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                        <path
+                          d="M1 1L13 13"
+                          stroke="#4F4F4F"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  `}
+              ${this.props.isOpen && html` ${this.props.children} `}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+export { Modal };