@apexcura/ui-components 0.0.13-Beta0 → 0.0.13-Beta10

package/dist/index.d.mts

@@ -25,7 +25,8 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
-    onChange?: (value: string | number | boolean | object | any[]) => void;
+    onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
+    onClick?: () => void;
     dropDownOptions?: any[];
     id?: number;
     thead?: any[];
@@ -56,7 +57,7 @@ type ElementType = {
 };
 
 interface ElementExecuterProps$3 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 
@@ -73,12 +74,12 @@ interface PasswordProps {
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
 interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
 
 interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 
@@ -89,7 +90,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
 declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
@@ -111,4 +112,6 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
+declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };

package/dist/index.d.ts

@@ -25,7 +25,8 @@ type ElementType = {
     fields?: any[];
     schema?: any[];
     options?: any[];
-    onChange?: (value: string | number | boolean | object | any[]) => void;
+    onChange?: (value: string | number | boolean | object | any[] | undefined) => void;
+    onClick?: () => void;
     dropDownOptions?: any[];
     id?: number;
     thead?: any[];
@@ -56,7 +57,7 @@ type ElementType = {
 };
 
 interface ElementExecuterProps$3 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextElement: (props: ElementExecuterProps$3) => React$1.JSX.Element;
 
@@ -73,12 +74,12 @@ interface PasswordProps {
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
 interface ElementExecuterProps$2 extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const NumberElement: (props: ElementExecuterProps$2) => React$1.JSX.Element;
 
 interface ElementExecuterProps$1 extends ElementType {
-    onChange: (value: string | number | boolean | object | any[]) => void;
+    onChange: (value: string | number | boolean | object | any[] | undefined) => void;
 }
 declare const TextareaElement: (props: ElementExecuterProps$1) => React$1.JSX.Element;
 
@@ -89,7 +90,7 @@ declare const RadioElement: (props: ElementType) => React$1.JSX.Element;
 declare const CheckboxElement: (props: ElementType) => React$1.JSX.Element;
 
 interface ElementExecuterProps extends ElementType {
-    onChange: (value: string | number | object | boolean | any[]) => void;
+    onChange: (value: string | number | object | boolean | any[] | undefined) => void;
 }
 declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
@@ -111,4 +112,6 @@ declare const DatePickerElement: (props: ElementType) => React$1.JSX.Element;
 
 declare const DateRangePickerElement: (props: ElementType) => React$1.JSX.Element;
 
-export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement };
+declare const UploadElement: (props: ElementType) => React$1.JSX.Element;
+
+export { AddMoreTable, ButtonElement, CheckboxElement, CkEditor, DatePickerElement, DateRangePickerElement, MultipleSelectElement, Navbar, NumberElement, PasswordElement, RadioElement, SelectElement, Sidebar, SingleSelectElement, TableElement, TextElement, TextareaElement, UploadElement };

package/dist/index.js

@@ -46,7 +46,8 @@ __export(src_exports, {
   SingleSelectElement: () => SingleSelectElement,
   TableElement: () => TableElement,
   TextElement: () => TextElement,
-  TextareaElement: () => TextareaElement
+  TextareaElement: () => TextareaElement,
+  UploadElement: () => UploadElement
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -196,15 +197,12 @@ var RadioElement = (props) => {
   const [isDisabled, setIsDisabled] = (0, import_react6.useState)(props.disabled);
   const [selectedValue, setSelectedValue] = (0, import_react6.useState)(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
-  const handleChange = (e) => {
-    console.log(e);
-    const selectedVal = e.target.value;
-    const selectedLabel = props.options ? props.options.find((f) => f.value === selectedVal)?.label : "";
-    const selectedOptions = { label: selectedLabel, value: selectedVal };
-    setSelectedValue(selectedVal);
+  const handleChange = (option) => {
+    console.log(option);
+    setSelectedValue(option);
     setIsDisabled(true);
     if (props.onChange) {
-      props.onChange(selectedOptions);
+      props.onChange(option);
     }
   };
   const getButtonStyle = (option) => {
@@ -213,22 +211,26 @@ var RadioElement = (props) => {
   return /* @__PURE__ */ import_react6.default.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ import_react6.default.createElement("p", { className: props.labelClassName }, props.label), /* @__PURE__ */ import_react6.default.createElement(
     import_antd6.Radio.Group,
     {
-      onChange: handleChange,
       optionType,
       className: props.radioGroupClassName,
       value: selectedValue
     },
-    props.options && props.options.map((option) => /* @__PURE__ */ import_react6.default.createElement(
-      import_antd6.Radio,
-      {
-        key: option.value,
-        value: option.value,
-        disabled: isDisabled && selectedValue !== option.value,
-        className: getButtonStyle(option),
-        style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
-      },
-      option.label
-    ))
+    props.options && props.options.map((option) => {
+      return /* @__PURE__ */ import_react6.default.createElement(
+        import_antd6.Radio,
+        {
+          onChange: () => {
+            handleChange(option);
+          },
+          key: option.value,
+          value: option.value,
+          disabled: isDisabled && selectedValue !== option.value,
+          className: getButtonStyle(option),
+          style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
+        },
+        option.label
+      );
+    })
   ));
 };
 
@@ -236,12 +238,12 @@ var RadioElement = (props) => {
 var import_react7 = __toESM(require("react"));
 var import_antd7 = require("antd");
 var CheckboxGroup = import_antd7.Checkbox.Group;
-var plainOptions = ["Apple", "Pear", "Orange"];
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
-  const checkAll = plainOptions.length === checkedList.length;
+  const checkAll = props.options && props.options.length === checkedList.length;
   const handleChange = (list) => {
+    console.log("list========", list);
     setCheckedList(list);
     if (props.onChange) {
       const selectedOptions = list.map((value) => {
@@ -251,7 +253,7 @@ var CheckboxElement = (props) => {
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? plainOptions : [];
+    const newList = e.target.checked ? props.options : [];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -268,13 +270,13 @@ var CheckboxElement = (props) => {
       checked: checkAll
     },
     "Check all"
-  ), /* @__PURE__ */ import_react7.default.createElement(import_antd7.Divider, null), /* @__PURE__ */ import_react7.default.createElement(
+  ), /* @__PURE__ */ import_react7.default.createElement(
     CheckboxGroup,
     {
       disabled: props.disabled,
       style: props.styles,
       className: props.className,
-      options: plainOptions,
+      options: props.options,
       value: checkedList,
       onChange: handleChange
     }
@@ -389,13 +391,10 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 var import_react12 = __toESM(require("react"));
 var ButtonElement = (props) => {
-  const handleClick = typeof props.action === "string" ? () => {
-    console.log("Performing action:", props.action);
-  } : props.action;
   return /* @__PURE__ */ import_react12.default.createElement(
     "button",
     {
-      onClick: handleClick,
+      onClick: () => props.onClick && props.onClick(),
       className: `${props.className ? props.className : ""}`
     },
     props.icon && /* @__PURE__ */ import_react12.default.createElement("img", { src: props.icon }),
@@ -802,6 +801,32 @@ var DateRangePickerElement = (props) => {
   ];
   return /* @__PURE__ */ import_react23.default.createElement(import_antd16.Space, { direction: "vertical", size: 12 }, /* @__PURE__ */ import_react23.default.createElement(RangePicker, { presets: rangePresets, onChange: handleChange }));
 };
+
+// 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);
+    }
+    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.`);
+    }
+  }
+};
+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"));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddMoreTable,
@@ -820,5 +845,6 @@ var DateRangePickerElement = (props) => {
   SingleSelectElement,
   TableElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  UploadElement
 });

package/dist/index.mjs

@@ -144,15 +144,12 @@ var RadioElement = (props) => {
   const [isDisabled, setIsDisabled] = useState2(props.disabled);
   const [selectedValue, setSelectedValue] = useState2(props.value);
   const optionType = props.optionType === "button" ? "button" : void 0;
-  const handleChange = (e) => {
-    console.log(e);
-    const selectedVal = e.target.value;
-    const selectedLabel = props.options ? props.options.find((f) => f.value === selectedVal)?.label : "";
-    const selectedOptions = { label: selectedLabel, value: selectedVal };
-    setSelectedValue(selectedVal);
+  const handleChange = (option) => {
+    console.log(option);
+    setSelectedValue(option);
     setIsDisabled(true);
     if (props.onChange) {
-      props.onChange(selectedOptions);
+      props.onChange(option);
     }
   };
   const getButtonStyle = (option) => {
@@ -161,35 +158,39 @@ var RadioElement = (props) => {
   return /* @__PURE__ */ React6.createElement("div", { className: props.containerClassName }, props.label && /* @__PURE__ */ React6.createElement("p", { className: props.labelClassName }, props.label), /* @__PURE__ */ React6.createElement(
     Radio.Group,
     {
-      onChange: handleChange,
       optionType,
       className: props.radioGroupClassName,
       value: selectedValue
     },
-    props.options && props.options.map((option) => /* @__PURE__ */ React6.createElement(
-      Radio,
-      {
-        key: option.value,
-        value: option.value,
-        disabled: isDisabled && selectedValue !== option.value,
-        className: getButtonStyle(option),
-        style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
-      },
-      option.label
-    ))
+    props.options && props.options.map((option) => {
+      return /* @__PURE__ */ React6.createElement(
+        Radio,
+        {
+          onChange: () => {
+            handleChange(option);
+          },
+          key: option.value,
+          value: option.value,
+          disabled: isDisabled && selectedValue !== option.value,
+          className: getButtonStyle(option),
+          style: { pointerEvents: isDisabled && selectedValue !== option.value ? "none" : "auto" }
+        },
+        option.label
+      );
+    })
   ));
 };
 
 // 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 plainOptions = ["Apple", "Pear", "Orange"];
 var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState3(defaultCheckedList);
-  const checkAll = plainOptions.length === checkedList.length;
+  const checkAll = props.options && props.options.length === checkedList.length;
   const handleChange = (list) => {
+    console.log("list========", list);
     setCheckedList(list);
     if (props.onChange) {
       const selectedOptions = list.map((value) => {
@@ -199,7 +200,7 @@ var CheckboxElement = (props) => {
     }
   };
   const onHandleAllChanges = (e) => {
-    const newList = e.target.checked ? plainOptions : [];
+    const newList = e.target.checked ? props.options : [];
     setCheckedList(newList);
     if (props.onChange) {
       props.onChange(newList);
@@ -216,13 +217,13 @@ var CheckboxElement = (props) => {
       checked: checkAll
     },
     "Check all"
-  ), /* @__PURE__ */ React7.createElement(Divider, null), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React7.createElement(
     CheckboxGroup,
     {
       disabled: props.disabled,
       style: props.styles,
       className: props.className,
-      options: plainOptions,
+      options: props.options,
       value: checkedList,
       onChange: handleChange
     }
@@ -337,13 +338,10 @@ var MultipleSelectElement = (props) => {
 // src/Components/Button.tsx
 import React11 from "react";
 var ButtonElement = (props) => {
-  const handleClick = typeof props.action === "string" ? () => {
-    console.log("Performing action:", props.action);
-  } : props.action;
   return /* @__PURE__ */ React11.createElement(
     "button",
     {
-      onClick: handleClick,
+      onClick: () => props.onClick && props.onClick(),
       className: `${props.className ? props.className : ""}`
     },
     props.icon && /* @__PURE__ */ React11.createElement("img", { src: props.icon }),
@@ -750,6 +748,32 @@ var DateRangePickerElement = (props) => {
   ];
   return /* @__PURE__ */ React22.createElement(Space2, { 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);
+    }
+    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.`);
+    }
+  }
+};
+var UploadElement = (props) => {
+  return /* @__PURE__ */ React23.createElement(Upload, { ...uploadProps }, /* @__PURE__ */ React23.createElement(Button4, { icon: /* @__PURE__ */ React23.createElement(UploadOutlined, null) }, "Click to Upload"));
+};
 export {
   AddMoreTable,
   ButtonElement,
@@ -767,5 +791,6 @@ export {
   SingleSelectElement,
   TableElement,
   TextElement,
-  TextareaElement
+  TextareaElement,
+  UploadElement
 };

package/package.json

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