@apexcura/ui-components 0.0.13-Beta39 → 0.0.13-Beta40

package/dist/index.css

@@ -338,6 +338,10 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
 .flex {
   display: flex;
 }

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import React$1 from 'react';
 import { SizeType } from 'antd/es/config-provider/SizeContext';
+import { UploadFile } from 'antd/lib/upload/interface';
 
 type ElementType = {
     [x: string]: any;
@@ -95,7 +96,19 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
+declare const UploadElement: (feildData: {
+    value?: any;
+    name?: any;
+    label?: any;
+    max_count?: any;
+    accept?: any;
+    list_type?: any;
+    multiple?: any;
+    errors?: any;
+}, onInputChanges: (arg0: {
+    name: any;
+    value: any[] | UploadFile<any>[];
+}) => void) => React$1.JSX.Element;
 
 declare const Image: (props: ElementType) => React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import React$1 from 'react';
 import { SizeType } from 'antd/es/config-provider/SizeContext';
+import { UploadFile } from 'antd/lib/upload/interface';
 
 type ElementType = {
     [x: string]: any;
@@ -95,7 +96,19 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
+declare const UploadElement: (feildData: {
+    value?: any;
+    name?: any;
+    label?: any;
+    max_count?: any;
+    accept?: any;
+    list_type?: any;
+    multiple?: any;
+    errors?: any;
+}, onInputChanges: (arg0: {
+    name: any;
+    value: any[] | UploadFile<any>[];
+}) => void) => React$1.JSX.Element;
 
 declare const Image: (props: ElementType) => React$1.JSX.Element;
 

package/dist/index.js

@@ -830,28 +830,114 @@ var DateRangePickerElement = (props) => {
 
 // src/Components/UploadElement.tsx
 var import_react24 = __toESM(require("react"));
-var import_icons5 = require("@ant-design/icons");
 var import_antd17 = require("antd");
-var uploadProps = {
-  name: "file",
-  multiple: true,
-  // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
-  headers: {
-    authorization: "authorization-text"
-  },
-  onChange(info) {
-    if (info.file.status !== "uploading") {
-      console.log(info.file, info.fileList);
+var import_icons5 = require("@ant-design/icons");
+var UploadElement = (feildData, onInputChanges) => {
+  const [previewTitle, setPreviewTitle] = (0, import_react24.useState)(null);
+  const [previewOpen, setPreviewOpen] = (0, import_react24.useState)(false);
+  const [previewType, setPreviewType] = (0, import_react24.useState)(null);
+  const [previewImage, setPreviewImage] = (0, import_react24.useState)(null);
+  const uploadChange = (fileList) => {
+    if (!fileList || fileList.length === 0) return;
+    const selectedFile = fileList[0];
+    if (!selectedFile) return;
+    const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(selectedFile.type);
+    if (!isCorrectFile) {
+      import_antd17.Modal.error({
+        title: `(${selectedFile.name}) is an invalid file.`,
+        content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
+        zIndex: 1022
+      });
+      return;
+    }
+    const newFile = {
+      uid: `id${Math.random().toString(16).slice(2)}`,
+      name: selectedFile.name,
+      status: "done",
+      type: selectedFile.type,
+      size: selectedFile.size,
+      url: URL.createObjectURL(selectedFile)
+      // originFileObj: selectedFile,
+    };
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target?.result) {
+        newFile.thumbUrl = e.target.result.toString();
+      }
+    };
+    reader.readAsDataURL(selectedFile);
+    const newFileList = feildData.value ? [...feildData.value, newFile] : [newFile];
+    onInputChanges({
+      name: feildData.name,
+      value: newFileList
+    });
+  };
+  const uploadChange2 = ({ file, fileList }) => {
+    const newFileList = fileList.filter((f) => f.name !== file.name);
+    onInputChanges({
+      name: feildData.name,
+      value: newFileList
+    });
+  };
+  const handlePreview = async (file) => {
+    if (!file.url && !file.preview) {
+      file.preview = await URL.createObjectURL(file.originFileObj);
     }
-    if (info.file.status === "done") {
-      import_antd17.message.success(`${info.file.name} file uploaded successfully`);
-    } else if (info.file.status === "error") {
-      import_antd17.message.error(`${info.file.name} file upload failed.`);
+    setPreviewType(file.type || file.name.substring(file.name.lastIndexOf(".") + 1));
+    setPreviewTitle(file.name || (file.url || "").substring((file.url || "").lastIndexOf("/") + 1));
+    setPreviewOpen(true);
+  };
+  const handleCancel = () => {
+    setPreviewImage(null);
+    setPreviewType(null);
+    setPreviewOpen(false);
+    setPreviewTitle(null);
+  };
+  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, Object.keys(feildData).length !== 0 && /* @__PURE__ */ import_react24.default.createElement("span", { className: "native-camera-lib" }, /* @__PURE__ */ import_react24.default.createElement("p", { className: "flat-label text-capitalize" }, feildData.label), /* @__PURE__ */ import_react24.default.createElement("label", { className: "native-camera-button" }, /* @__PURE__ */ import_react24.default.createElement("div", { className: "ant-btn" }, /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null), " ", feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload"), /* @__PURE__ */ import_react24.default.createElement(
+    "input",
+    {
+      id: "upload",
+      type: "file",
+      accept: "image/*;capture=camera",
+      onChange: (e) => uploadChange(e.target.files)
     }
-  }
-};
-var UploadElement = (props) => {
-  return /* @__PURE__ */ import_react24.default.createElement(import_antd17.Upload, { ...uploadProps }, /* @__PURE__ */ import_react24.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null) }, "Click to Upload"));
+  )), /* @__PURE__ */ import_react24.default.createElement(
+    import_antd17.Upload,
+    {
+      accept: feildData.accept,
+      listType: feildData.list_type,
+      maxCount: feildData.max_count,
+      multiple: feildData.multiple,
+      fileList: feildData.value,
+      onChange: uploadChange2,
+      onPreview: handlePreview,
+      showUploadList: true
+    },
+    feildData.list_type === "picture-card" && /* @__PURE__ */ import_react24.default.createElement("div", null, /* @__PURE__ */ import_react24.default.createElement(import_icons5.PlusOutlined, null), /* @__PURE__ */ import_react24.default.createElement("div", { style: { marginTop: 8 } }, "Upload ", /* @__PURE__ */ import_react24.default.createElement("small", { className: "d-flex" }, "(Max:", feildData.max_count, ")"))),
+    feildData.list_type === "picture" && /* @__PURE__ */ import_react24.default.createElement(import_antd17.Button, { icon: /* @__PURE__ */ import_react24.default.createElement(import_icons5.UploadOutlined, null) }, feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload")
+  ), feildData.errors && feildData.errors.length > 0 && feildData.errors.map((error, eKey) => /* @__PURE__ */ import_react24.default.createElement("small", { key: eKey, className: "text-danger animated flash" }, error.message)), /* @__PURE__ */ import_react24.default.createElement(
+    import_antd17.Modal,
+    {
+      visible: previewOpen,
+      width: "100%",
+      zIndex: 1025,
+      centered: true,
+      maskClosable: false,
+      title: previewTitle,
+      footer: null,
+      onCancel: handleCancel,
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ import_react24.default.createElement(import_antd17.Tooltip, { title: "Close", placement: "bottom" }, /* @__PURE__ */ import_react24.default.createElement(import_icons5.CloseOutlined, { className: "border popup-close", onClick: handleCancel })),
+    previewType === "application/pdf" || previewType === "pdf" ? /* @__PURE__ */ import_react24.default.createElement(
+      "iframe",
+      {
+        title: "document",
+        style: { width: "95vw", height: "40vw" },
+        src: `${previewImage}#toolbar=0`
+      }
+    ) : /* @__PURE__ */ import_react24.default.createElement("img", { alt: "image", src: previewImage || void 0, className: "d-flex mx-auto w-100" })
+  )));
 };
 
 // src/Components/Image.tsx
@@ -882,7 +968,7 @@ var MultiSelect = (props) => {
       const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
       console.log("filterOption1--------", filterOption2);
       setSelectedValue((prev) => ({ ...prev, firstValue: filterOption2 && filterOption2 }));
-      props.onChange(selectedValue);
+      props.onChange(selectedValue.firstValue && selectedValue);
     }
   };
   const handleSecondChange = (value) => {
@@ -890,7 +976,7 @@ var MultiSelect = (props) => {
       const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
       console.log("filterOption2--------", filterOption2);
       setSelectedValue((prev) => ({ ...prev, secondValue: filterOption2 && filterOption2 }));
-      props.onChange(selectedValue);
+      props.onChange(selectedValue.secondValue && selectedValue);
     }
   };
   return /* @__PURE__ */ import_react27.default.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ import_react27.default.createElement(

package/dist/index.mjs

@@ -773,29 +773,115 @@ var DateRangePickerElement = (props) => {
 };
 
 // src/Components/UploadElement.tsx
-import React23 from "react";
-import { UploadOutlined } from "@ant-design/icons";
-import { Button as Button3, message, Upload } from "antd";
-var uploadProps = {
-  name: "file",
-  multiple: true,
-  // action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
-  headers: {
-    authorization: "authorization-text"
-  },
-  onChange(info) {
-    if (info.file.status !== "uploading") {
-      console.log(info.file, info.fileList);
+import React23, { useState as useState7 } from "react";
+import { Upload, Button as Button3, Modal as Modal2, Tooltip } from "antd";
+import { UploadOutlined, PlusOutlined as PlusOutlined2, CloseOutlined } from "@ant-design/icons";
+var UploadElement = (feildData, onInputChanges) => {
+  const [previewTitle, setPreviewTitle] = useState7(null);
+  const [previewOpen, setPreviewOpen] = useState7(false);
+  const [previewType, setPreviewType] = useState7(null);
+  const [previewImage, setPreviewImage] = useState7(null);
+  const uploadChange = (fileList) => {
+    if (!fileList || fileList.length === 0) return;
+    const selectedFile = fileList[0];
+    if (!selectedFile) return;
+    const isCorrectFile = ["image/png", "image/jpg", "image/jpeg"].includes(selectedFile.type);
+    if (!isCorrectFile) {
+      Modal2.error({
+        title: `(${selectedFile.name}) is an invalid file.`,
+        content: `Please upload files with the following extensions only (.png/.jpg/.jpeg)`,
+        zIndex: 1022
+      });
+      return;
+    }
+    const newFile = {
+      uid: `id${Math.random().toString(16).slice(2)}`,
+      name: selectedFile.name,
+      status: "done",
+      type: selectedFile.type,
+      size: selectedFile.size,
+      url: URL.createObjectURL(selectedFile)
+      // originFileObj: selectedFile,
+    };
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target?.result) {
+        newFile.thumbUrl = e.target.result.toString();
+      }
+    };
+    reader.readAsDataURL(selectedFile);
+    const newFileList = feildData.value ? [...feildData.value, newFile] : [newFile];
+    onInputChanges({
+      name: feildData.name,
+      value: newFileList
+    });
+  };
+  const uploadChange2 = ({ file, fileList }) => {
+    const newFileList = fileList.filter((f) => f.name !== file.name);
+    onInputChanges({
+      name: feildData.name,
+      value: newFileList
+    });
+  };
+  const handlePreview = async (file) => {
+    if (!file.url && !file.preview) {
+      file.preview = await URL.createObjectURL(file.originFileObj);
     }
-    if (info.file.status === "done") {
-      message.success(`${info.file.name} file uploaded successfully`);
-    } else if (info.file.status === "error") {
-      message.error(`${info.file.name} file upload failed.`);
+    setPreviewType(file.type || file.name.substring(file.name.lastIndexOf(".") + 1));
+    setPreviewTitle(file.name || (file.url || "").substring((file.url || "").lastIndexOf("/") + 1));
+    setPreviewOpen(true);
+  };
+  const handleCancel = () => {
+    setPreviewImage(null);
+    setPreviewType(null);
+    setPreviewOpen(false);
+    setPreviewTitle(null);
+  };
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, Object.keys(feildData).length !== 0 && /* @__PURE__ */ React23.createElement("span", { className: "native-camera-lib" }, /* @__PURE__ */ React23.createElement("p", { className: "flat-label text-capitalize" }, feildData.label), /* @__PURE__ */ React23.createElement("label", { className: "native-camera-button" }, /* @__PURE__ */ React23.createElement("div", { className: "ant-btn" }, /* @__PURE__ */ React23.createElement(UploadOutlined, null), " ", feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload"), /* @__PURE__ */ React23.createElement(
+    "input",
+    {
+      id: "upload",
+      type: "file",
+      accept: "image/*;capture=camera",
+      onChange: (e) => uploadChange(e.target.files)
     }
-  }
-};
-var UploadElement = (props) => {
-  return /* @__PURE__ */ React23.createElement(Upload, { ...uploadProps }, /* @__PURE__ */ React23.createElement(Button3, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, "Click to Upload"));
+  )), /* @__PURE__ */ React23.createElement(
+    Upload,
+    {
+      accept: feildData.accept,
+      listType: feildData.list_type,
+      maxCount: feildData.max_count,
+      multiple: feildData.multiple,
+      fileList: feildData.value,
+      onChange: uploadChange2,
+      onPreview: handlePreview,
+      showUploadList: true
+    },
+    feildData.list_type === "picture-card" && /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement(PlusOutlined2, null), /* @__PURE__ */ React23.createElement("div", { style: { marginTop: 8 } }, "Upload ", /* @__PURE__ */ React23.createElement("small", { className: "d-flex" }, "(Max:", feildData.max_count, ")"))),
+    feildData.list_type === "picture" && /* @__PURE__ */ React23.createElement(Button3, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, feildData.max_count ? `Upload (Max:${feildData.max_count})` : "Upload")
+  ), feildData.errors && feildData.errors.length > 0 && feildData.errors.map((error, eKey) => /* @__PURE__ */ React23.createElement("small", { key: eKey, className: "text-danger animated flash" }, error.message)), /* @__PURE__ */ React23.createElement(
+    Modal2,
+    {
+      visible: previewOpen,
+      width: "100%",
+      zIndex: 1025,
+      centered: true,
+      maskClosable: false,
+      title: previewTitle,
+      footer: null,
+      onCancel: handleCancel,
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ React23.createElement(Tooltip, { title: "Close", placement: "bottom" }, /* @__PURE__ */ React23.createElement(CloseOutlined, { className: "border popup-close", onClick: handleCancel })),
+    previewType === "application/pdf" || previewType === "pdf" ? /* @__PURE__ */ React23.createElement(
+      "iframe",
+      {
+        title: "document",
+        style: { width: "95vw", height: "40vw" },
+        src: `${previewImage}#toolbar=0`
+      }
+    ) : /* @__PURE__ */ React23.createElement("img", { alt: "image", src: previewImage || void 0, className: "d-flex mx-auto w-100" })
+  )));
 };
 
 // src/Components/Image.tsx
@@ -817,16 +903,16 @@ var SingleCheckbox = (props) => {
 };
 
 // src/Components/MultiSelect.tsx
-import React26, { useState as useState7 } from "react";
+import React26, { useState as useState8 } from "react";
 import { Select as Select4 } from "antd";
 var MultiSelect = (props) => {
-  const [selectedValue, setSelectedValue] = useState7({ firstValue: {}, secondValue: {} });
+  const [selectedValue, setSelectedValue] = useState8({ firstValue: {}, secondValue: {} });
   const handleFirstChange = (value) => {
     if (props.onChange) {
       const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
       console.log("filterOption1--------", filterOption2);
       setSelectedValue((prev) => ({ ...prev, firstValue: filterOption2 && filterOption2 }));
-      props.onChange(selectedValue);
+      props.onChange(selectedValue.firstValue && selectedValue);
     }
   };
   const handleSecondChange = (value) => {
@@ -834,7 +920,7 @@ var MultiSelect = (props) => {
       const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
       console.log("filterOption2--------", filterOption2);
       setSelectedValue((prev) => ({ ...prev, secondValue: filterOption2 && filterOption2 }));
-      props.onChange(selectedValue);
+      props.onChange(selectedValue.secondValue && selectedValue);
     }
   };
   return /* @__PURE__ */ React26.createElement("div", { className: props.className, style: { display: "flex", flexDirection: "row", backgroundColor: "white", borderRadius: 10, border: "1px solid gray", width: "100px" } }, /* @__PURE__ */ React26.createElement(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.13-Beta39",
+  "version": "0.0.13-Beta40",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",