siam-ui-utils 3.0.4 → 3.0.6

package/dist/custom-input/CustomInputCurrency.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Input } from "reactstrap";
+import { fieldToCurrency } from "siam-utils";
+const CustomInputCurrency = (props) => {
+  const {
+    onChange = () => {
+    },
+    onFocus = () => {
+    },
+    value = {},
+    maxLength = "20",
+    style = {}
+  } = props;
+  const styleCurrency = { ...style, textAlign: "right" };
+  const [valueInputCur, setValueInputCur] = useState("");
+  const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const handleInputOnBlur = (event) => {
+    const { target } = event;
+    if (valueInputCur !== "") {
+      const valor = valueInputCur.replace(".", "");
+      const valorPersistence = valor.replace(",", ".");
+      setValueInputCur(fieldToCurrency(valorPersistence));
+      onChange({
+        ...event,
+        target: {
+          ...target,
+          value: valorPersistence,
+          valueCurrency: fieldToCurrency(valorPersistence),
+          valueFloat: parseFloat(valorPersistence)
+        }
+      });
+    }
+  };
+  const handleInputOnFocus = (e) => {
+    if (valueInputCur !== "") {
+      const valor = valueInputCur.replace("$ ", "");
+      const valor2 = valor.replace(/\./g, "");
+      setValueInputCur(valor2);
+    }
+    onFocus(e);
+  };
+  const handleInputChange = (event) => {
+    const { target } = event;
+    const valor = target.value.replace("$ ", "");
+    const valid = /^-?[0-9.]*(?:[,]\d?\d?)?$/;
+    if (valid.test(valor)) {
+      const sepDec = valor.slice(-1) === "." ? `${valor.slice(0, -1)},` : valor;
+      const punto = new RegExp(escapeRegExp("."), "g");
+      const sinSepMil = sepDec.replace(punto, "");
+      const posPuntoDec = sinSepMil.indexOf(",");
+      const parteDecimal = posPuntoDec >= 0 ? sinSepMil.slice(posPuntoDec) : "";
+      const parteEntera = posPuntoDec >= 0 ? sinSepMil.slice(0, posPuntoDec) : sinSepMil;
+      setValueInputCur(parteEntera + parteDecimal);
+    }
+  };
+  useEffect(() => {
+    if (value && value !== "") {
+      if (typeof value != "number" && value && value.includes("$")) {
+        setValueInputCur(value.toString());
+      } else {
+        setValueInputCur(fieldToCurrency(value.toString()));
+      }
+    } else {
+      setValueInputCur("");
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      style: styleCurrency,
+      maxLength,
+      value: valueInputCur,
+      onFocus: handleInputOnFocus,
+      onChange: handleInputChange,
+      onBlur: handleInputOnBlur
+    }
+  );
+};
+export {
+  CustomInputCurrency,
+  CustomInputCurrency as default
+};
+//# sourceMappingURL=CustomInputCurrency.js.map

package/dist/custom-input/CustomInputCurrency.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomInputCurrency.js","sources":["../../src/custom-input/CustomInputCurrency.jsx"],"sourcesContent":["import { useEffect, useState } from 'react';\r\nimport { Input } from 'reactstrap';\r\nimport { fieldToCurrency } from 'siam-utils';\r\n/**\r\n * value, //admite formato como devuelve la BD (varchar), flotante o currency\r\n * al setear un valor en el componente se visualiza como Currency:\r\n *    Formato $ 3.000,60\r\n * Al intentar editar el VALOR automaticamente se conviertea un numero cuyo formato es:\r\n *    sin separador de miles, sin simbolo pesos ($), y la coma como separador de decimales\r\n *    Formato: 3000,60\r\n * Al perder el foco el VALOR cambia a formato currency\r\n * Para el componente PADRE que lo esta usando, va a recibir desde el evento onblur un valor cuyo formato es el PERSISTENCE:\r\n *    Formato: 3000.60\r\n */\r\nexport const CustomInputCurrency = (props) => {\r\n  const {\r\n    onChange = () => {\r\n      undefined;\r\n    },\r\n    onFocus = () => {\r\n      undefined;\r\n    },\r\n    value = {},\r\n    maxLength = '20',\r\n    style = {},\r\n  } = props;\r\n  const styleCurrency = { ...style, textAlign: 'right' };\r\n  const [valueInputCur, setValueInputCur] = useState('');\r\n  const escapeRegExp = (string) =>\r\n    string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\r\n\r\n  const handleInputOnBlur = (event) => {\r\n    const { target } = event;\r\n    if (valueInputCur !== '') {\r\n      const valor = valueInputCur.replace('.', '');\r\n      const valorPersistence = valor.replace(',', '.');\r\n      setValueInputCur(fieldToCurrency(valorPersistence));\r\n      onChange({\r\n        ...event,\r\n        target: {\r\n          ...target,\r\n          value: valorPersistence,\r\n          valueCurrency: fieldToCurrency(valorPersistence),\r\n          valueFloat: parseFloat(valorPersistence),\r\n        },\r\n      });\r\n    }\r\n  };\r\n\r\n  const handleInputOnFocus = (e) => {\r\n    if (valueInputCur !== '') {\r\n      const valor = valueInputCur.replace('$ ', '');\r\n      const valor2 = valor.replace(/\\./g, '');\r\n      setValueInputCur(valor2);\r\n    }\r\n    onFocus(e);\r\n  };\r\n\r\n  const handleInputChange = (event) => {\r\n    const { target } = event;\r\n    const valor = target.value.replace('$ ', '');\r\n    const valid = /^-?[0-9.]*(?:[,]\\d?\\d?)?$/;\r\n    if (valid.test(valor)) {\r\n      const sepDec = valor.slice(-1) === '.' ? `${valor.slice(0, -1)},` : valor;\r\n      const punto = new RegExp(escapeRegExp('.'), 'g');\r\n      const sinSepMil = sepDec.replace(punto, '');\r\n      const posPuntoDec = sinSepMil.indexOf(',');\r\n      const parteDecimal = posPuntoDec >= 0 ? sinSepMil.slice(posPuntoDec) : '';\r\n      const parteEntera =\r\n        posPuntoDec >= 0 ? sinSepMil.slice(0, posPuntoDec) : sinSepMil;\r\n      setValueInputCur(parteEntera + parteDecimal);\r\n    }\r\n  };\r\n  useEffect(() => {\r\n    if (value && value !== '') {\r\n      if (typeof value != 'number' && value && value.includes('$')) {\r\n        setValueInputCur(value.toString());\r\n      } else {\r\n        setValueInputCur(fieldToCurrency(value.toString()));\r\n      }\r\n    } else {\r\n      setValueInputCur('');\r\n    }\r\n  }, [value]);\r\n\r\n  return (\r\n    <Input\r\n      {...props}\r\n      style={styleCurrency}\r\n      maxLength={maxLength}\r\n      value={valueInputCur}\r\n      onFocus={handleInputOnFocus}\r\n      onChange={handleInputChange}\r\n      onBlur={handleInputOnBlur}\r\n    />\r\n  );\r\n};\r\n\r\nexport default CustomInputCurrency;\r\n"],"names":[],"mappings":";;;;AAcO,MAAM,sBAAsB,CAAC,UAAU;AAC5C,QAAM;AAAA,IACJ,WAAW,MAAM;AAAA,IAEjB;AAAA,IACA,UAAU,MAAM;AAAA,IAEhB;AAAA,IACA,QAAQ,CAAA;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ,CAAA;AAAA,EAAC,IACP;AACJ,QAAM,gBAAgB,EAAE,GAAG,OAAO,WAAW,QAAA;AAC7C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,eAAe,CAAC,WACpB,OAAO,QAAQ,uBAAuB,MAAM;AAE9C,QAAM,oBAAoB,CAAC,UAAU;AACnC,UAAM,EAAE,WAAW;AACnB,QAAI,kBAAkB,IAAI;AACxB,YAAM,QAAQ,cAAc,QAAQ,KAAK,EAAE;AAC3C,YAAM,mBAAmB,MAAM,QAAQ,KAAK,GAAG;AAC/C,uBAAiB,gBAAgB,gBAAgB,CAAC;AAClD,eAAS;AAAA,QACP,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,OAAO;AAAA,UACP,eAAe,gBAAgB,gBAAgB;AAAA,UAC/C,YAAY,WAAW,gBAAgB;AAAA,QAAA;AAAA,MACzC,CACD;AAAA,IACH;AAAA,EACF;AAEA,QAAM,qBAAqB,CAAC,MAAM;AAChC,QAAI,kBAAkB,IAAI;AACxB,YAAM,QAAQ,cAAc,QAAQ,MAAM,EAAE;AAC5C,YAAM,SAAS,MAAM,QAAQ,OAAO,EAAE;AACtC,uBAAiB,MAAM;AAAA,IACzB;AACA,YAAQ,CAAC;AAAA,EACX;AAEA,QAAM,oBAAoB,CAAC,UAAU;AACnC,UAAM,EAAE,WAAW;AACnB,UAAM,QAAQ,OAAO,MAAM,QAAQ,MAAM,EAAE;AAC3C,UAAM,QAAQ;AACd,QAAI,MAAM,KAAK,KAAK,GAAG;AACrB,YAAM,SAAS,MAAM,MAAM,EAAE,MAAM,MAAM,GAAG,MAAM,MAAM,GAAG,EAAE,CAAC,MAAM;AACpE,YAAM,QAAQ,IAAI,OAAO,aAAa,GAAG,GAAG,GAAG;AAC/C,YAAM,YAAY,OAAO,QAAQ,OAAO,EAAE;AAC1C,YAAM,cAAc,UAAU,QAAQ,GAAG;AACzC,YAAM,eAAe,eAAe,IAAI,UAAU,MAAM,WAAW,IAAI;AACvE,YAAM,cACJ,eAAe,IAAI,UAAU,MAAM,GAAG,WAAW,IAAI;AACvD,uBAAiB,cAAc,YAAY;AAAA,IAC7C;AAAA,EACF;AACA,YAAU,MAAM;AACd,QAAI,SAAS,UAAU,IAAI;AACzB,UAAI,OAAO,SAAS,YAAY,SAAS,MAAM,SAAS,GAAG,GAAG;AAC5D,yBAAiB,MAAM,UAAU;AAAA,MACnC,OAAO;AACL,yBAAiB,gBAAgB,MAAM,SAAA,CAAU,CAAC;AAAA,MACpD;AAAA,IACF,OAAO;AACL,uBAAiB,EAAE;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,OAAO;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;"}

package/dist/custom-input/index.js

@@ -1,6 +1,7 @@
 import { CustomInputCheckbox } from "./CustomInputCheckbox.js";
 import { CustomInputRadio } from "./CustomInputRadio.js";
 import { CustomInputFile } from "./CustomInputFile.js";
+import { CustomInputCurrency } from "./CustomInputCurrency.js";
 import "react/jsx-runtime";
 import "react";
 import "../node_modules/react-multi-select-component/dist/esm/index.js";
@@ -10,6 +11,7 @@ import "./multi-select/styled-component.js";
 /* empty css                        */
 export {
   CustomInputCheckbox,
+  CustomInputCurrency,
   CustomInputFile,
   CustomInputRadio
 };

package/dist/custom-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "keywords": [
     "ampf-react",
     "ampf-utils",