@apexcura/ui-components 0.0.8-Beta12 → 0.0.8-Beta2

package/dist/index.d.mts

@@ -18,7 +18,8 @@ type ElementType = {
     maxLength?: number;
     fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
-    dropDownOptions?: any[];
+    options: any[];
+    onFocusHandler: () => void;
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -61,7 +62,7 @@ declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
 declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
+declare const MultipleSelectElement: () => React$1.JSX.Element;
 
 declare const ButtonElement: () => React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -18,7 +18,8 @@ type ElementType = {
     maxLength?: number;
     fieldNames?: any[];
     onChange?: (value: string | number | boolean | any[]) => void;
-    dropDownOptions?: any[];
+    options: any[];
+    onFocusHandler: () => void;
 };
 
 interface ElementExecuterProps$3 extends ElementType {
@@ -61,7 +62,7 @@ declare const CkEditor: (props: ElementExecuterProps) => React$1.JSX.Element;
 
 declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
 
-declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
+declare const MultipleSelectElement: () => React$1.JSX.Element;
 
 declare const ButtonElement: () => React$1.JSX.Element;
 

package/dist/index.js

@@ -159,7 +159,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ import_react5.default.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -178,7 +178,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
@@ -187,12 +187,12 @@ var SelectElement = (props) => {
 var import_react6 = __toESM(require("react"));
 var import_antd6 = require("antd");
 var RadioElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange3 = (e) => {
     if (props && props.onChange) {
       props.onChange(e.target.value);
     }
   };
-  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ import_react6.default.createElement(import_antd6.Radio, { value: 4, onChange: handleChange3 }, "D"));
 };
 
 // src/Components/Checkbox.tsx
@@ -204,7 +204,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = (0, import_react7.useState)(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const handleChange = (list) => {
+  const handleChange3 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       props.onChange(list);
@@ -236,7 +236,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange3
     }
   ));
 };
@@ -301,13 +301,10 @@ var onSearch = (value) => {
   console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
 var SingleSelectElement = (props) => {
-  console.log("dropdownoptions....................", props.dropDownOptions);
-  const handleChange = (value) => {
-    if (props.onChange) {
-      props.onChange(value);
-    }
-  };
+  console.log(props.options);
   return /* @__PURE__ */ import_react10.default.createElement(
     import_antd8.Select,
     {
@@ -317,6 +314,7 @@ var SingleSelectElement = (props) => {
       onChange: handleChange,
       onSearch,
       filterOption,
+      onFocus: props.onFocusHandler,
       options: []
     }
   );
@@ -325,18 +323,46 @@ var SingleSelectElement = (props) => {
 // src/Components/Select/MultipleSelectElement.tsx
 var import_react11 = __toESM(require("react"));
 var import_antd9 = require("antd");
-var MultipleSelectElement = (props) => {
-  const handleChange = (value) => {
-    if (props.onChange) {
-      props.onChange(value);
-    }
-  };
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
   return /* @__PURE__ */ import_react11.default.createElement(
     import_antd9.Select,
     {
       mode: "multiple",
-      placeholder: props.placeholder,
-      onChange: handleChange
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ import_react11.default.createElement(import_antd9.Space, null, /* @__PURE__ */ import_react11.default.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
     }
   );
 };

package/dist/index.mjs

@@ -113,7 +113,7 @@ var labelRender = (props) => {
   return /* @__PURE__ */ React5.createElement("span", null, "select gender");
 };
 var SelectElement = (props) => {
-  const handleChange = (value) => {
+  const handleChange3 = (value) => {
     if (props.onChange) {
       props.onChange(value);
     }
@@ -132,7 +132,7 @@ var SelectElement = (props) => {
       style: props.styles,
       className: props.classNames,
       variant: props.variant,
-      onChange: handleChange
+      onChange: handleChange3
     }
   );
 };
@@ -141,12 +141,12 @@ var SelectElement = (props) => {
 import React6 from "react";
 import { Radio } from "antd";
 var RadioElement = (props) => {
-  const handleChange = (e) => {
+  const handleChange3 = (e) => {
     if (props && props.onChange) {
       props.onChange(e.target.value);
     }
   };
-  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange }, "D"));
+  return /* @__PURE__ */ React6.createElement(Radio.Group, { name: "radiogroup", defaultValue: 1 }, /* @__PURE__ */ React6.createElement(Radio, { value: 1, onChange: handleChange3 }, "A"), /* @__PURE__ */ React6.createElement(Radio, { value: 2, onChange: handleChange3 }, "B"), /* @__PURE__ */ React6.createElement(Radio, { value: 3, onChange: handleChange3 }, "C"), /* @__PURE__ */ React6.createElement(Radio, { value: 4, onChange: handleChange3 }, "D"));
 };
 
 // src/Components/Checkbox.tsx
@@ -158,7 +158,7 @@ var defaultCheckedList = [];
 var CheckboxElement = (props) => {
   const [checkedList, setCheckedList] = useState2(defaultCheckedList);
   const checkAll = plainOptions.length === checkedList.length;
-  const handleChange = (list) => {
+  const handleChange3 = (list) => {
     setCheckedList(list);
     if (props.onChange) {
       props.onChange(list);
@@ -190,7 +190,7 @@ var CheckboxElement = (props) => {
       className: props.classNames,
       options: plainOptions,
       value: checkedList,
-      onChange: handleChange
+      onChange: handleChange3
     }
   ));
 };
@@ -255,13 +255,10 @@ var onSearch = (value) => {
   console.log("search:", value);
 };
 var filterOption = (input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase());
+var handleChange = () => {
+};
 var SingleSelectElement = (props) => {
-  console.log("dropdownoptions....................", props.dropDownOptions);
-  const handleChange = (value) => {
-    if (props.onChange) {
-      props.onChange(value);
-    }
-  };
+  console.log(props.options);
   return /* @__PURE__ */ React9.createElement(
     Select2,
     {
@@ -271,6 +268,7 @@ var SingleSelectElement = (props) => {
       onChange: handleChange,
       onSearch,
       filterOption,
+      onFocus: props.onFocusHandler,
       options: []
     }
   );
@@ -278,19 +276,47 @@ var SingleSelectElement = (props) => {
 
 // src/Components/Select/MultipleSelectElement.tsx
 import React10 from "react";
-import { Select as Select3 } from "antd";
-var MultipleSelectElement = (props) => {
-  const handleChange = (value) => {
-    if (props.onChange) {
-      props.onChange(value);
-    }
-  };
+import { Select as Select3, Space as Space2 } from "antd";
+var handleChange2 = (value) => {
+  console.log(`selected ${value}`);
+};
+var options = [
+  {
+    label: "China",
+    value: "china",
+    emoji: "\u{1F1E8}\u{1F1F3}",
+    desc: "China (\u4E2D\u56FD)"
+  },
+  {
+    label: "USA",
+    value: "usa",
+    emoji: "\u{1F1FA}\u{1F1F8}",
+    desc: "USA (\u7F8E\u56FD)"
+  },
+  {
+    label: "Japan",
+    value: "japan",
+    emoji: "\u{1F1EF}\u{1F1F5}",
+    desc: "Japan (\u65E5\u672C)"
+  },
+  {
+    label: "Korea",
+    value: "korea",
+    emoji: "\u{1F1F0}\u{1F1F7}",
+    desc: "Korea (\u97E9\u56FD)"
+  }
+];
+var MultipleSelectElement = () => {
   return /* @__PURE__ */ React10.createElement(
     Select3,
     {
       mode: "multiple",
-      placeholder: props.placeholder,
-      onChange: handleChange
+      style: { width: "100%" },
+      placeholder: "select one country",
+      defaultValue: ["china"],
+      onChange: handleChange2,
+      options,
+      optionRender: (option) => /* @__PURE__ */ React10.createElement(Space2, null, /* @__PURE__ */ React10.createElement("span", { role: "img", "aria-label": option.data.label }, option.data.emoji), option.data.desc)
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.8-Beta12",
+  "version": "0.0.8-Beta2",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 ApexCura
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.