@dropi/react-native-design-system 0.3.10 → 0.3.11

package/lib/molecules/InputField/Input.d.ts

@@ -2,25 +2,47 @@ type InputType = "text" | "number" | "email" | "password";
 type InputFactoryProps = {
     type: InputType;
 };
-export declare const Input: ({ type, ...props }: InputFactoryProps) => import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    type?: import("react-native").KeyboardTypeOptions;
+export declare const Input: ({ type, ...props }: InputFactoryProps) => (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
     preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly: boolean;
+}) => import("react/jsx-runtime").JSX.Element) | import("react").ForwardRefExoticComponent<import("react-native").TextInputProps & {
+    preIcon?: import("dropi-lib-icons").IconName;
+    helper?: string;
+    tooltip?: string;
+    value: string;
+    onChangeFunction: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+} & import("react").RefAttributes<import("react-native").TextInput>> | (({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, }: {
     label?: string;
+    preIcon?: import("dropi-lib-icons").IconName;
     helper?: string;
-    placeholder?: string;
     tooltip?: string;
+    placeholder?: string;
     value: string;
+    onChange: (value: string) => void;
     hasError: boolean;
     errorMessage?: string;
-    isFocus: boolean;
-} & import("react").RefAttributes<import("react-native").TextInput>> | (({ preIcon, helper, tooltip, value, onChange, hasError, errorMessage, readOnly, }: {
+    readOnly?: boolean;
+}) => import("react/jsx-runtime").JSX.Element) | (({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, allowDecimals, minValue, maxValue, }: {
+    label?: string;
     preIcon?: import("dropi-lib-icons").IconName;
     helper?: string;
     tooltip?: string;
+    placeholder?: string;
     value: string;
     onChange: (value: string) => void;
     hasError: boolean;
     errorMessage?: string;
-    readOnly: boolean;
+    readOnly?: boolean;
+    allowDecimals?: boolean;
+    minValue?: number;
+    maxValue?: number;
 }) => import("react/jsx-runtime").JSX.Element);
 export {};

package/lib/molecules/InputField/Input.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-var _BaseInput = require("./BaseInput");
+var _TextInput = require("./TextInput");
+var _NumberInput = require("./NumberInput");
 var _EmailInput = require("./EmailInput");
-// import { PasswordInput } from "./PasswordInput"
-
+var _PasswordInput = require("./PasswordInput");
 const InputComponents = {
-  text: _BaseInput.BaseInput,
-  number: _BaseInput.BaseInput,
+  text: _TextInput.TextInput,
+  number: _NumberInput.NumberInput,
   email: _EmailInput.EmailInput,
-  password: _EmailInput.EmailInput
+  password: _PasswordInput.PasswordInput
 };
 const Input = ({
   type,

package/lib/molecules/InputField/NumberInput.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from "dropi-lib-icons";
+type NumberInputProps = {
+    label?: string;
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    allowDecimals?: boolean;
+    minValue?: number;
+    maxValue?: number;
+};
+export declare const validateNumber: (value: string, allowDecimals?: boolean, minValue?: number, maxValue?: number) => boolean;
+export declare const NumberInput: ({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, allowDecimals, minValue, maxValue, }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/NumberInput.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateNumber = exports.NumberInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const validateNumber = (value, allowDecimals = true, minValue, maxValue) => {
+  if (value === "" || value === "-") return true;
+  const numberRegex = allowDecimals ? /^-?\d+\.?\d*$/ : /^-?\d+$/;
+  if (!numberRegex.test(value)) return false;
+  const numValue = parseFloat(value);
+  if (minValue !== undefined && numValue < minValue) return false;
+  if (maxValue !== undefined && numValue > maxValue) return false;
+  return true;
+};
+exports.validateNumber = validateNumber;
+const NumberInput = ({
+  label,
+  preIcon,
+  helper,
+  tooltip,
+  placeholder,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly = false,
+  allowDecimals = true,
+  minValue,
+  maxValue
+}) => {
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const [invalidNumber, setInvalidNumber] = (0, _react.useState)(false);
+  const [wasVisited, setWasVisited] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+    if (!wasVisited) {
+      setWasVisited(true);
+      if (value && !validateNumber(value, allowDecimals, minValue, maxValue)) {
+        setInvalidNumber(true);
+      }
+    }
+  };
+  const getErrorMessage = () => {
+    if (hasError) {
+      return errorMessage;
+    }
+    if (invalidNumber) {
+      if (!allowDecimals) {
+        return "Ingresa un número entero válido";
+      }
+      return "Ingresa un número válido";
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "decimal-pad",
+    label: label,
+    placeholder: placeholder || "Ingresa un número",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+      if (wasVisited) {
+        if (text === "" || validateNumber(text, allowDecimals, minValue, maxValue)) {
+          setInvalidNumber(false);
+        } else {
+          setInvalidNumber(true);
+        }
+      }
+    },
+    hasError: hasError || invalidNumber,
+    errorMessage: getErrorMessage(),
+    autoCorrect: false,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.NumberInput = NumberInput;

package/lib/molecules/InputField/TextInput.d.ts

@@ -0,0 +1,15 @@
+import { IconName } from "dropi-lib-icons";
+type TextInputProps = {
+    label?: string;
+    preIcon?: IconName;
+    helper?: string;
+    tooltip?: string;
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    hasError: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+};
+export declare const TextInput: ({ label, preIcon, helper, tooltip, placeholder, value, onChange, hasError, errorMessage, readOnly, }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/molecules/InputField/TextInput.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInput = void 0;
+var _BaseInput = require("./BaseInput");
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+const TextInput = ({
+  label,
+  preIcon,
+  helper,
+  tooltip,
+  placeholder,
+  value,
+  onChange,
+  hasError,
+  errorMessage,
+  readOnly = false
+}) => {
+  const [focus, setFocus] = (0, _react.useState)(false);
+  const onFocus = () => {
+    setFocus(true);
+  };
+  const onBlur = () => {
+    setFocus(false);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_BaseInput.BaseInput, {
+    type: "default",
+    label: label,
+    placeholder: placeholder || "Ingresa texto",
+    value: value,
+    preIcon: preIcon,
+    helper: helper,
+    tooltip: tooltip,
+    onChangeText: text => {
+      onChange(text);
+    },
+    hasError: hasError,
+    errorMessage: errorMessage,
+    autoCorrect: false,
+    readOnly: readOnly,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    isFocus: focus
+  });
+};
+exports.TextInput = TextInput;

package/lib/molecules/InputField/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./EmailInput";
 export * from "./PasswordInput";
 export * from "./BaseInput";
+export * from "./TextInput";
+export * from "./NumberInput";

package/lib/molecules/InputField/index.js

@@ -35,4 +35,26 @@ Object.keys(_BaseInput).forEach(function (key) {
       return _BaseInput[key];
     }
   });
+});
+var _TextInput = require("./TextInput");
+Object.keys(_TextInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _TextInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TextInput[key];
+    }
+  });
+});
+var _NumberInput = require("./NumberInput");
+Object.keys(_NumberInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NumberInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NumberInput[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/react-native-design-system",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "A React Native package built from scratch",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",