@apexcura/ui-components 0.0.1 → 0.0.3

package/dist/index.d.mts

@@ -15,9 +15,10 @@ type ElementType = {
     label?: string;
     name?: string;
     suffix?: React.ReactNode;
+    maxLength?: number;
 };
 
-declare const InputElement: (props: ElementType) => React$1.JSX.Element;
+declare const TextElement: (props: ElementType) => React$1.JSX.Element;
 
 interface InputData {
     placeholder?: string;
@@ -31,11 +32,10 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
-interface SelectProps {
-    placeholder: string;
-    defaultValue: string;
-    id: string;
-}
-declare const SelectElement: React$1.FC<SelectProps>;
+declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
 
-export { InputElement, PasswordElement, SelectElement };
+export { NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };

package/dist/index.d.ts

@@ -15,9 +15,10 @@ type ElementType = {
     label?: string;
     name?: string;
     suffix?: React.ReactNode;
+    maxLength?: number;
 };
 
-declare const InputElement: (props: ElementType) => React$1.JSX.Element;
+declare const TextElement: (props: ElementType) => React$1.JSX.Element;
 
 interface InputData {
     placeholder?: string;
@@ -31,11 +32,10 @@ interface PasswordProps {
 }
 declare const PasswordElement: React$1.FC<PasswordProps>;
 
-interface SelectProps {
-    placeholder: string;
-    defaultValue: string;
-    id: string;
-}
-declare const SelectElement: React$1.FC<SelectProps>;
+declare const NumberElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const TextareaElement: (props: ElementType) => React$1.JSX.Element;
+
+declare const SelectElement: (props: ElementType) => React$1.JSX.Element;
 
-export { InputElement, PasswordElement, SelectElement };
+export { NumberElement, PasswordElement, SelectElement, TextElement, TextareaElement };

package/dist/index.js

@@ -30,19 +30,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  InputElement: () => InputElement,
+  NumberElement: () => NumberElement,
   PasswordElement: () => PasswordElement,
-  SelectElement: () => SelectElement
+  SelectElement: () => SelectElement,
+  TextElement: () => TextElement,
+  TextareaElement: () => TextareaElement
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/Components/InputElement.tsx
+// src/Components/TextElement.tsx
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
 var onHandleChange = ($event) => {
   console.log($event);
 };
-var InputElement = (props) => {
+var TextElement = (props) => {
   return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ import_react.default.createElement(
     import_antd.Input,
     {
@@ -90,32 +92,116 @@ var PasswordElement = ({ inputData }) => {
   return /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, { direction: "vertical" }, renderPasswordInput(), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Space, { direction: "horizontal" }, renderPasswordInput(), /* @__PURE__ */ import_react2.default.createElement(import_antd2.Button, { style: { width: 80 }, onClick: handleVisibilityToggle }, passwordVisible ? "Hide" : "Show")));
 };
 
-// src/Components/SelectElement.tsx
+// src/Components/NumberElement.tsx
 var import_react3 = __toESM(require("react"));
 var import_antd3 = require("antd");
+var formatNumber = (value) => new Intl.NumberFormat().format(value);
+var NumericInput = (props) => {
+  const { value, onChange } = props;
+  const handleChange = (e) => {
+    const { value: inputValue } = e.target;
+    const reg = /^-?\d*(\.\d*)?$/;
+    if (reg.test(inputValue) || inputValue === "" || inputValue === "-") {
+      onChange(inputValue);
+    }
+  };
+  const handleBlur = () => {
+    let valueTemp = value;
+    if (value.charAt(value.length - 1) === "." || value === "-") {
+      valueTemp = value.slice(0, -1);
+    }
+    onChange(valueTemp.replace(/0*(\d+)/, "$1"));
+  };
+  const title = value ? /* @__PURE__ */ import_react3.default.createElement("span", { className: "numeric-input-title" }, value !== "-" ? formatNumber(Number(value)) : "-") : "Input a number";
+  return /* @__PURE__ */ import_react3.default.createElement(import_antd3.Tooltip, { trigger: ["focus"], title, placement: "topLeft", overlayClassName: "numeric-input" }, /* @__PURE__ */ import_react3.default.createElement(
+    import_antd3.Input,
+    {
+      ...props,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      placeholder: "Input a number",
+      maxLength: 16
+    }
+  ));
+};
+var NumberElement = (props) => {
+  const [value, setValue] = (0, import_react3.useState)("");
+  return /* @__PURE__ */ import_react3.default.createElement(
+    NumericInput,
+    {
+      ...props,
+      style: { width: 120 },
+      value,
+      onChange: setValue
+    }
+  );
+};
+
+// src/Components/TextareaElement.tsx
+var import_react4 = __toESM(require("react"));
+var import_antd4 = require("antd");
+var { TextArea } = import_antd4.Input;
+var onHandleChange2 = ($event) => {
+  console.log($event);
+};
+var TextareaElement = (props) => /* @__PURE__ */ import_react4.default.createElement(import_antd4.Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ import_react4.default.createElement(
+  TextArea,
+  {
+    placeholder: props.placeholder,
+    allowClear: true,
+    defaultValue: props.defaultValue,
+    disabled: props.disabled,
+    id: props.name,
+    value: props.value,
+    status: props.status,
+    style: props.styles,
+    className: props.classNames,
+    variant: props.variant,
+    name: props.name,
+    showCount: true,
+    maxLength: props.maxLength,
+    onChange: onHandleChange2
+  }
+));
+
+// src/Components/SelectElement.tsx
+var import_react5 = __toESM(require("react"));
+var import_antd5 = require("antd");
 var options = [
   {
-    value: "zhejiang",
-    label: "Zhejiang"
+    value: "male",
+    label: "male"
+  },
+  {
+    value: "female",
+    label: "female"
   },
   {
-    value: "jiangsu",
-    label: "Jiangsu"
+    value: "other",
+    label: "other"
   }
 ];
-var SelectElement = (props) => /* @__PURE__ */ import_react3.default.createElement(
-  import_antd3.Select,
+var SelectElement = (props) => /* @__PURE__ */ import_react5.default.createElement(
+  import_antd5.Select,
   {
     placeholder: props.placeholder,
     allowClear: true,
     defaultValue: props.defaultValue,
-    id: props.id,
+    disabled: props.disabled,
+    id: props.name,
+    value: props.value,
+    status: props.status,
+    style: props.styles,
+    className: props.classNames,
+    variant: props.variant,
     options
   }
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  InputElement,
+  NumberElement,
   PasswordElement,
-  SelectElement
+  SelectElement,
+  TextElement,
+  TextareaElement
 });

package/dist/index.mjs

@@ -1,10 +1,10 @@
-// src/Components/InputElement.tsx
+// src/Components/TextElement.tsx
 import React from "react";
 import { Input as AntInput } from "antd";
 var onHandleChange = ($event) => {
   console.log($event);
 };
-var InputElement = (props) => {
+var TextElement = (props) => {
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { htmlFor: props.name }, props.label), /* @__PURE__ */ React.createElement(
     AntInput,
     {
@@ -52,31 +52,115 @@ var PasswordElement = ({ inputData }) => {
   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, { useState as useState2 } from "react";
+import { Input as Input2, Tooltip } from "antd";
+var formatNumber = (value) => new Intl.NumberFormat().format(value);
+var NumericInput = (props) => {
+  const { value, onChange } = props;
+  const handleChange = (e) => {
+    const { value: inputValue } = e.target;
+    const reg = /^-?\d*(\.\d*)?$/;
+    if (reg.test(inputValue) || inputValue === "" || inputValue === "-") {
+      onChange(inputValue);
+    }
+  };
+  const handleBlur = () => {
+    let valueTemp = value;
+    if (value.charAt(value.length - 1) === "." || value === "-") {
+      valueTemp = value.slice(0, -1);
+    }
+    onChange(valueTemp.replace(/0*(\d+)/, "$1"));
+  };
+  const title = value ? /* @__PURE__ */ React3.createElement("span", { className: "numeric-input-title" }, value !== "-" ? formatNumber(Number(value)) : "-") : "Input a number";
+  return /* @__PURE__ */ React3.createElement(Tooltip, { trigger: ["focus"], title, placement: "topLeft", overlayClassName: "numeric-input" }, /* @__PURE__ */ React3.createElement(
+    Input2,
+    {
+      ...props,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      placeholder: "Input a number",
+      maxLength: 16
+    }
+  ));
+};
+var NumberElement = (props) => {
+  const [value, setValue] = useState2("");
+  return /* @__PURE__ */ React3.createElement(
+    NumericInput,
+    {
+      ...props,
+      style: { width: 120 },
+      value,
+      onChange: setValue
+    }
+  );
+};
+
+// src/Components/TextareaElement.tsx
+import React4 from "react";
+import { Flex, Input as Input3 } from "antd";
+var { TextArea } = Input3;
+var onHandleChange2 = ($event) => {
+  console.log($event);
+};
+var TextareaElement = (props) => /* @__PURE__ */ React4.createElement(Flex, { vertical: true, gap: 32 }, /* @__PURE__ */ React4.createElement(
+  TextArea,
+  {
+    placeholder: props.placeholder,
+    allowClear: true,
+    defaultValue: props.defaultValue,
+    disabled: props.disabled,
+    id: props.name,
+    value: props.value,
+    status: props.status,
+    style: props.styles,
+    className: props.classNames,
+    variant: props.variant,
+    name: props.name,
+    showCount: true,
+    maxLength: props.maxLength,
+    onChange: onHandleChange2
+  }
+));
+
 // src/Components/SelectElement.tsx
-import React3 from "react";
+import React5 from "react";
 import { Select as AntSelect } from "antd";
 var options = [
   {
-    value: "zhejiang",
-    label: "Zhejiang"
+    value: "male",
+    label: "male"
+  },
+  {
+    value: "female",
+    label: "female"
   },
   {
-    value: "jiangsu",
-    label: "Jiangsu"
+    value: "other",
+    label: "other"
   }
 ];
-var SelectElement = (props) => /* @__PURE__ */ React3.createElement(
+var SelectElement = (props) => /* @__PURE__ */ React5.createElement(
   AntSelect,
   {
     placeholder: props.placeholder,
     allowClear: true,
     defaultValue: props.defaultValue,
-    id: props.id,
+    disabled: props.disabled,
+    id: props.name,
+    value: props.value,
+    status: props.status,
+    style: props.styles,
+    className: props.classNames,
+    variant: props.variant,
     options
   }
 );
 export {
-  InputElement,
+  NumberElement,
   PasswordElement,
-  SelectElement
+  SelectElement,
+  TextElement,
+  TextareaElement
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Apex cura React components library",
-  "keywords" : ["apec cura", "input", "ui", "react", "react-component"],
+  "keywords" : ["apex cura", "input", "ui", "react", "react-component"],
   "homepage": "https://www.apexcura.com/",
   "bugs": {
     "url": "https://github.com/apexcura/ui-components/issues"