@apexcura/ui-components 0.0.1 → 0.0.2

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,6 @@ 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 NumberInput: (props: ElementType) => React$1.JSX.Element;
 
-export { InputElement, PasswordElement, SelectElement };
+export { NumberInput, PasswordElement, TextElement };

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,6 @@ 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 NumberInput: (props: ElementType) => React$1.JSX.Element;
 
-export { InputElement, PasswordElement, SelectElement };
+export { NumberInput, PasswordElement, TextElement };

package/dist/index.js

@@ -30,19 +30,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  InputElement: () => InputElement,
+  NumberInput: () => NumberInput,
   PasswordElement: () => PasswordElement,
-  SelectElement: () => SelectElement
+  TextElement: () => TextElement
 });
 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 +90,53 @@ 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 options = [
-  {
-    value: "zhejiang",
-    label: "Zhejiang"
-  },
-  {
-    value: "jiangsu",
-    label: "Jiangsu"
-  }
-];
-var SelectElement = (props) => /* @__PURE__ */ import_react3.default.createElement(
-  import_antd3.Select,
-  {
-    placeholder: props.placeholder,
-    allowClear: true,
-    defaultValue: props.defaultValue,
-    id: props.id,
-    options
-  }
-);
+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 NumberInput = (props) => {
+  const [value, setValue] = (0, import_react3.useState)("");
+  return /* @__PURE__ */ import_react3.default.createElement(
+    NumericInput,
+    {
+      ...props,
+      style: { width: 120 },
+      value,
+      onChange: setValue
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  InputElement,
+  NumberInput,
   PasswordElement,
-  SelectElement
+  TextElement
 });

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,52 @@ 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/SelectElement.tsx
-import React3 from "react";
-import { Select as AntSelect } from "antd";
-var options = [
-  {
-    value: "zhejiang",
-    label: "Zhejiang"
-  },
-  {
-    value: "jiangsu",
-    label: "Jiangsu"
-  }
-];
-var SelectElement = (props) => /* @__PURE__ */ React3.createElement(
-  AntSelect,
-  {
-    placeholder: props.placeholder,
-    allowClear: true,
-    defaultValue: props.defaultValue,
-    id: props.id,
-    options
-  }
-);
+// 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 NumberInput = (props) => {
+  const [value, setValue] = useState2("");
+  return /* @__PURE__ */ React3.createElement(
+    NumericInput,
+    {
+      ...props,
+      style: { width: 120 },
+      value,
+      onChange: setValue
+    }
+  );
+};
 export {
-  InputElement,
+  NumberInput,
   PasswordElement,
-  SelectElement
+  TextElement
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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"