@apexcura/ui-components 0.0.13-Beta7 → 0.0.13-Beta70

package/dist/index.mjs

@@ -2,7 +2,12 @@
 import React from "react";
 import { Input as AntInput } from "antd";
 var TextElement = (props) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
+  const handleChange = (e) => {
+    if (props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React.createElement(
     AntInput,
     {
       placeholder: props.placeholder,
@@ -18,7 +23,9 @@ var TextElement = (props) => {
       className: props.className,
       variant: props.variant,
       name: props.name,
-      onChange: (e) => props.onChange(e.target.value)
+      onChange: (e) => {
+        handleChange(e);
+      }
     }
   ));
 };
@@ -26,37 +33,47 @@ var TextElement = (props) => {
 // src/Components/PasswordElement.tsx
 import React2, { useState } from "react";
 import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
-import { Button, Input, Space } from "antd";
-var PasswordElement = ({ inputData }) => {
+import { Input } from "antd";
+var PasswordElement = (props) => {
   const [passwordVisible, setPasswordVisible] = useState(false);
   const handleVisibilityToggle = () => {
     setPasswordVisible((prev) => !prev);
   };
+  const handleChange = (e) => {
+    if (props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
   const renderVisibilityIcon = (visible) => visible ? /* @__PURE__ */ React2.createElement(EyeTwoTone, null) : /* @__PURE__ */ React2.createElement(EyeInvisibleOutlined, null);
-  const renderPasswordInput = () => /* @__PURE__ */ React2.createElement(
+  return /* @__PURE__ */ React2.createElement("div", { className: props.containerClassName }, /* @__PURE__ */ React2.createElement("label", { className: props.labelClassName }, props.label), /* @__PURE__ */ React2.createElement(
     Input.Password,
     {
-      placeholder: inputData.placeholder,
-      id: inputData.id,
-      prefix: inputData.prefix,
-      addonBefore: inputData.addonBefore,
-      type: inputData.type,
+      placeholder: props.placeholder,
+      className: props.className,
+      type: props.type,
+      onChange: (e) => {
+        handleChange(e);
+      },
       iconRender: renderVisibilityIcon,
-      visibilityToggle: { visible: passwordVisible, onVisibleChange: handleVisibilityToggle }
+      visibilityToggle: {
+        visible: passwordVisible,
+        onVisibleChange: handleVisibilityToggle
+      }
     }
-  );
-  return /* @__PURE__ */ React2.createElement(Space, { direction: "vertical" }, renderPasswordInput(), /* @__PURE__ */ React2.createElement(Space, { direction: "horizontal" }, renderPasswordInput(), /* @__PURE__ */ React2.createElement(Button, { style: { width: 80 }, onClick: handleVisibilityToggle }, passwordVisible ? "Hide" : "Show")));
+  ));
 };
 
 // src/Components/NumberElement.tsx
 import React3 from "react";
 import { Input as AntInput2 } from "antd";
 var NumberElement = (props) => {
-  const handleInputChange = (e) => {
+  const handleChange = (e) => {
     const newValue = e.target.value.replace(/[^0-9]/g, "");
-    props.onChange(newValue);
+    if (props.onChange) {
+      props.onChange(newValue);
+    }
   };
-  return /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React3.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React3.createElement(
     AntInput2,
     {
       placeholder: props.placeholder,
@@ -71,17 +88,24 @@ var NumberElement = (props) => {
       className: props.className,
       variant: props.variant,
       name: props.name,
-      onChange: handleInputChange
+      onChange: (e) => {
+        handleChange(e);
+      }
     }
-  );
+  ));
 };
 
 // src/Components/TextareaElement.tsx
 import React4 from "react";
-import { Flex, Input as Input2 } from "antd";
+import { Input as Input2 } from "antd";
 var { TextArea } = Input2;
 var TextareaElement = (props) => {
-  return /* @__PURE__ */ React4.createElement(Flex, null, /* @__PURE__ */ React4.createElement(
+  const handleChange = (e) => {
+    if (props.onChange) {
+      props.onChange(e.target.value);
+    }
+  };
+  return /* @__PURE__ */ React4.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React4.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React4.createElement(
     TextArea,
     {
       placeholder: props.placeholder,
@@ -95,7 +119,9 @@ var TextareaElement = (props) => {
       name: props.name,
       showCount: true,
       maxLength: props.maxLength,
-      onChange: (e) => props.onChange(e.target.value)
+      onChange: (e) => {
+        handleChange(e);
+      }
     }
   ));
 };
@@ -103,24 +129,18 @@ var TextareaElement = (props) => {
 // src/Components/SelectElement.tsx
 import React5 from "react";
 import { Select } from "antd";
-var labelRender = (props) => {
-  const { label, value } = props;
-  if (label) {
-    return value;
-  }
-  return /* @__PURE__ */ React5.createElement("span", null, "select gender");
-};
 var SelectElement = (props) => {
   const handleChange = (value) => {
+    console.log("sigleselectvalue----", value);
     if (props.onChange) {
-      props.onChange(value);
+      const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
+      props.onChange(filterOption2);
     }
   };
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React5.createElement("label", { htmlFor: props.name, className: props.labelClassName }, props.label), /* @__PURE__ */ React5.createElement(
     Select,
     {
-      labelRender,
-      options: props.fieldNames,
+      options: props.options,
       placeholder: props.placeholder,
       allowClear: true,
       defaultValue: props.defaultValue,
@@ -132,7 +152,7 @@ var SelectElement = (props) => {
       variant: props.variant,
       onChange: handleChange
     }
-  );
+  ));
 };
 
 // src/Components/RadioElement.tsx
@@ -183,7 +203,7 @@ var RadioElement = (props) => {
 
 // src/Components/Checkbox.tsx
 import React7, { useState as useState3 } from "react";
-import { Checkbox, Divider } from "antd";
+import { Checkbox } from "antd";
 var CheckboxGroup = Checkbox.Group;
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
@@ -192,9 +212,7 @@ var CheckboxElement = (props) => {
   const handleChange = (list) => {
     setCheckedList(list);
     if (props.onChange) {
-      const selectedOptions = list.map((value) => {
-        return { id: list.indexOf(value), value };
-      });
+      const selectedOptions = props.options && props.options.filter((option) => list.includes(option.value));
       props.onChange(selectedOptions);
     }
   };
@@ -216,7 +234,7 @@ var CheckboxElement = (props) => {
       checked: checkAll
     },
     "Check all"
-  ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     CheckboxGroup,
     {
       disabled: props.disabled,
@@ -230,55 +248,9 @@ var CheckboxElement = (props) => {
 };
 
 // src/Components/CkEditor.tsx
-import { useRef } from "react";
-import { Editor } from "@tinymce/tinymce-react";
 import React8 from "react";
 var CkEditor = (props) => {
-  const editorRef = useRef(null);
-  const log = () => {
-    if (editorRef.current) {
-      let content = editorRef.current.getContent();
-      if (props.onChange) {
-        props.onChange(content);
-      }
-    }
-  };
-  return /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
-    Editor,
-    {
-      apiKey: "rwpgt7maa54n0pe5mglhkl686p7h57sg6z636n6gf2mio1b9",
-      onInit: (_evt, editor) => {
-        if (editor) editorRef.current = editor;
-      },
-      initialValue: "<p>This is the initial content of the editor.</p>",
-      init: {
-        height: 500,
-        menubar: false,
-        plugins: [
-          "advlist",
-          "autolink",
-          "lists",
-          "link",
-          "image",
-          "charmap",
-          "preview",
-          "anchor",
-          "searchreplace",
-          "visualblocks",
-          "code",
-          "fullscreen",
-          "insertdatetime",
-          "media",
-          "table",
-          "code",
-          "help",
-          "wordcount"
-        ],
-        toolbar: "undo redo | blocks | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help",
-        content_style: "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }"
-      }
-    }
-  ), /* @__PURE__ */ React8.createElement("button", { onClick: log }, "Log editor content"));
+  return /* @__PURE__ */ React8.createElement("div", null);
 };
 
 // src/Components/Select/SingleSelectElement.tsx
@@ -291,7 +263,9 @@ var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includ
 var SingleSelectElement = (props) => {
   const handleChange = (values) => {
     if (props.onChange) {
-      const option = props.dropDownOptions?.find((option2) => String(option2.title) === values);
+      const option = props.dropDownOptions?.find(
+        (option2) => String(option2.title) === values
+      );
       const selectedOption = { id: option?.id, value: values };
       props.onChange([selectedOption]);
     }
@@ -305,7 +279,11 @@ var SingleSelectElement = (props) => {
       onChange: handleChange,
       onSearch,
       filterOption,
-      options: props.dropDownOptions?.map((eachOption) => ({ label: String(eachOption.title), value: String(eachOption.title), id: String(eachOption.id) }))
+      options: props.dropDownOptions?.map((eachOption) => ({
+        label: String(eachOption.title),
+        value: String(eachOption.title),
+        id: String(eachOption.id)
+      }))
     }
   );
 };
@@ -350,7 +328,7 @@ var ButtonElement = (props) => {
 
 // src/Components/AddMoreTable.tsx
 import React12, { useEffect, useState as useState4 } from "react";
-import { Table, Button as Button2 } from "antd";
+import { Table, Button } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 var AddMoreTable = (props) => {
   const { thead, tbody } = props;
@@ -445,13 +423,13 @@ var AddMoreTable = (props) => {
     eachRow.variable_data.forEach((variable, subIndex) => {
       Object.keys(variable).forEach((key) => {
         if (key === "SubRows") {
-          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+          rowData[`${key}`] = /* @__PURE__ */ React12.createElement("div", { key: subIndex }, eachRow.variable_data.length > 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleSubRowsDelete(rowIndex, subIndex) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), subIndex === eachRow.variable_data.length - 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleSubRowsAdd(rowIndex) }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
         } else {
           rowData[`${key}`] = renderInputElement(variable[key]);
         }
       });
     });
-    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button2, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button2, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
+    rowData.actions = /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement(Button, { onClick: () => onHandleDelete(eachRow.id) }, /* @__PURE__ */ React12.createElement(DeleteOutlined, null)), rowIndex === rows.length - 1 && /* @__PURE__ */ React12.createElement(Button, { onClick: onHandleRows }, /* @__PURE__ */ React12.createElement(PlusOutlined, null)));
     console.log("=====rowdata", rowData);
     return rowData;
   });
@@ -498,7 +476,7 @@ import React17 from "react";
 
 // src/Components/Notification.tsx
 import React14 from "react";
-import { Popover, Badge, Button as Button3, Avatar, List } from "antd";
+import { Popover, Badge, Button as Button2, Avatar, List } from "antd";
 import { IoIosNotifications } from "react-icons/io";
 var popoverContentStyle = {
   minWidth: "300px",
@@ -526,7 +504,7 @@ var Notification = (props) => /* @__PURE__ */ React14.createElement(
     trigger: "focus",
     placement: "bottomRight"
   },
-  /* @__PURE__ */ React14.createElement(Button3, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
+  /* @__PURE__ */ React14.createElement(Button2, { className: props.buttonClassName }, /* @__PURE__ */ React14.createElement(Badge, { size: "small", count: props.count }, /* @__PURE__ */ React14.createElement("span", { className: props.iconsClassName }, /* @__PURE__ */ React14.createElement(IoIosNotifications, null))))
 );
 
 // src/Components/SpanElement.tsx
@@ -728,7 +706,7 @@ var DatePickerElement = (props) => {
 
 // src/Components/DateRangePickerElement.tsx
 import React22 from "react";
-import { DatePicker as DatePicker2, Space as Space2 } from "antd";
+import { DatePicker as DatePicker2, Space } from "antd";
 import dayjs from "dayjs";
 var DateRangePickerElement = (props) => {
   const { RangePicker } = DatePicker2;
@@ -745,33 +723,125 @@ var DateRangePickerElement = (props) => {
     { label: "Last 30 Days", value: [dayjs().add(-30, "d"), dayjs()] },
     { label: "Last 90 Days", value: [dayjs().add(-90, "d"), dayjs()] }
   ];
-  return /* @__PURE__ */ React22.createElement(Space2, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
+  return /* @__PURE__ */ React22.createElement(Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ React22.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
 
 // src/Components/UploadElement.tsx
-import React23 from "react";
-import { UploadOutlined } from "@ant-design/icons";
-import { Button as Button4, 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, Modal as Modal2 } from "antd";
+import { PlusOutlined as PlusOutlined2 } from "@ant-design/icons";
+var UploadElement = (props) => {
+  const [files, setFiles] = useState7([]);
+  const uploadChange = (fileList) => {
+    if (!fileList || fileList.length === 0) return;
+    const newFileList = [...files];
+    for (let i = 0; i < fileList.length; i++) {
+      const selectedFile = fileList[i];
+      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);
+      newFileList.push(newFile);
     }
-    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.`);
+    setFiles(newFileList);
+    props.onChange && props.onChange({
+      name: props.name,
+      value: newFileList
+    });
+  };
+  return /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement(
+    Upload,
+    {
+      accept: props.accept,
+      listType: props.list_type,
+      maxCount: props.max_count,
+      multiple: true,
+      fileList: props.value ? props.value : [],
+      onChange: (e) => uploadChange(e.target.files),
+      showUploadList: true
+    },
+    /* @__PURE__ */ React23.createElement(PlusOutlined2, null),
+    /* @__PURE__ */ React23.createElement("div", { style: { marginTop: 8 } }, "Upload")
+  ));
+};
+
+// src/Components/Image.tsx
+import React24 from "react";
+var Image = (props) => {
+  return /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement("img", { className: props.className, src: props.img, alt: "image" }));
+};
+
+// src/Components/SingleCheckbox.tsx
+import React25 from "react";
+import { Checkbox as Checkbox2 } from "antd";
+var SingleCheckbox = (props) => {
+  const handleChange = (e) => {
+    if (props.onChange) {
+      props.onChange(e.target.checked);
     }
-  }
+  };
+  return /* @__PURE__ */ React25.createElement(Checkbox2, { onChange: (e) => handleChange(e), className: props.className }, props.label);
 };
-var UploadElement = (props) => {
-  return /* @__PURE__ */ React23.createElement(Upload, { ...uploadProps }, /* @__PURE__ */ React23.createElement(Button4, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, "Click to Upload"));
+
+// src/Components/MultiSelect.tsx
+import React26, { useState as useState8 } from "react";
+import { Select as Select4 } from "antd";
+var MultiSelect = (props) => {
+  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.firstValue && selectedValue);
+    }
+  };
+  const handleSecondChange = (value) => {
+    if (props.onChange) {
+      const filterOption2 = props.options && props.options.find((eachOption) => eachOption.value === value);
+      console.log("filterOption2--------", filterOption2);
+      setSelectedValue((prev) => ({ ...prev, secondValue: filterOption2 && filterOption2 }));
+      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(
+    Select4,
+    {
+      onChange: handleFirstChange,
+      variant: props.variant,
+      options: props.options
+    }
+  ), /* @__PURE__ */ React26.createElement("div", { style: { borderLeft: "1px solid gray", height: "33px" } }), /* @__PURE__ */ React26.createElement(
+    Select4,
+    {
+      onChange: handleSecondChange,
+      variant: props.variant,
+      options: props.options
+    }
+  ));
 };
 export {
   AddMoreTable,
@@ -780,6 +850,8 @@ export {
   CkEditor,
   DatePickerElement,
   DateRangePickerElement,
+  Image,
+  MultiSelect,
   MultipleSelectElement,
   Navbar,
   NumberElement,
@@ -787,6 +859,7 @@ export {
   RadioElement,
   SelectElement,
   Sidebar,
+  SingleCheckbox,
   SingleSelectElement,
   TableElement,
   TextElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.13-Beta7",
+  "version": "0.0.13-Beta70",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",
@@ -48,6 +48,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
+    "@apexcura/core": "^0.0.15-Beta34",
     "@apexcura/ui-components": "^0.0.11-Beta256",
     "@tinymce/tinymce-react": "^5.0.1",
     "autoprefixer": "^10.4.19",