linear-react-components-ui 2.0.0-beta.7 → 2.0.0-beta.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/inputs/number/Currency.js +13 -1
- package/lib/inputs/number/Currency.js.map +1 -1
- package/lib/inputs/number/Decimal.js +13 -1
- package/lib/inputs/number/Decimal.js.map +1 -1
- package/lib/inputs/number/index.js +13 -1
- package/lib/inputs/number/index.js.map +1 -1
- package/lib/inputs/types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -22,6 +22,7 @@ const CurrencyField = (props) => {
|
|
|
22
22
|
displayCurrencySymbol = true
|
|
23
23
|
} = props;
|
|
24
24
|
const currencyNumberInputRef = useRef(null);
|
|
25
|
+
const isResetting = useRef(false);
|
|
25
26
|
const leftElements = displayCurrencySymbol ? /* @__PURE__ */ jsx("span", { className: "currency-symbol", children: currencySymbol }) : [];
|
|
26
27
|
const {
|
|
27
28
|
value: maskedValue,
|
|
@@ -40,6 +41,10 @@ const CurrencyField = (props) => {
|
|
|
40
41
|
}, {
|
|
41
42
|
ref: currencyNumberInputRef,
|
|
42
43
|
onAccept: (__, options, event) => {
|
|
44
|
+
if (isResetting.current) {
|
|
45
|
+
isResetting.current = false;
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
43
48
|
const parsedValue = numberToEnUS(options.unmaskedValue);
|
|
44
49
|
props?.onChange?.({
|
|
45
50
|
...event,
|
|
@@ -69,8 +74,15 @@ const CurrencyField = (props) => {
|
|
|
69
74
|
props?.onBlur?.(event_0);
|
|
70
75
|
};
|
|
71
76
|
useEffect(() => {
|
|
77
|
+
if (_.isNil(props?.value)) {
|
|
78
|
+
if (maskedValue !== "") {
|
|
79
|
+
isResetting.current = true;
|
|
80
|
+
setMaskedValue("");
|
|
81
|
+
}
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
72
84
|
const valueToPtBR = numberToPtBR(props?.value) ?? "";
|
|
73
|
-
if (!_.
|
|
85
|
+
if (!_.isEqual(parseFloat(_.toString(props?.value)), numberToEnUS(maskedValue))) {
|
|
74
86
|
setMaskedValue(valueToPtBR);
|
|
75
87
|
}
|
|
76
88
|
}, [props?.value]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Currency.js","sources":["../../../src/lib/inputs/number/Currency.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport _ from 'lodash';\nimport { useIMask } from 'react-imask';\nimport { ICurrencyProps } from './types';\nimport { numberToEnUS, numberToPtBR } from './format_number';\nimport InputTextBase from '../base/InputTextBase';\nimport { mergeRefs } from '../../form2/helpers';\nimport type { CustomInputEvent } from '../base/types';\n\nconst CurrencyField = (props: ICurrencyProps) => {\n const {\n inputRef = undefined, textAlign = 'left', themePopover = 'light', popoverAlign = 'left',\n min = undefined, max = undefined, allowNegative = false, scale = 2, normalizeZeros = true,\n padFractionalZeros = false, unmask = true, currencySymbol = 'R$', displayCurrencySymbol = true,\n } = props;\n const currencyNumberInputRef = useRef<HTMLInputElement | null>(null);\n const leftElements = displayCurrencySymbol ?\n <span className=\"currency-symbol\">{currencySymbol}</span>\n : [];\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n unmask,\n scale,\n normalizeZeros,\n padFractionalZeros,\n max,\n min: !_.isNil(min) ? min : (allowNegative ? undefined : 0),\n radix: ',',\n mapToRadix: ['.'],\n thousandsSeparator: '.',\n }, {\n ref: currencyNumberInputRef,\n onAccept: (__, options, event) => {\n const parsedValue = numberToEnUS(options.unmaskedValue);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = numberToEnUS(maskedValue) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(numberToPtBR(min) ?? _.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n const valueToPtBR = numberToPtBR(props?.value) ?? '';\n if (!_.
|
|
1
|
+
{"version":3,"file":"Currency.js","sources":["../../../src/lib/inputs/number/Currency.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\nimport _ from 'lodash';\nimport { useIMask } from 'react-imask';\nimport { ICurrencyProps } from './types';\nimport { numberToEnUS, numberToPtBR } from './format_number';\nimport InputTextBase from '../base/InputTextBase';\nimport { mergeRefs } from '../../form2/helpers';\nimport type { CustomInputEvent } from '../base/types';\n\nconst CurrencyField = (props: ICurrencyProps) => {\n const {\n inputRef = undefined, textAlign = 'left', themePopover = 'light', popoverAlign = 'left',\n min = undefined, max = undefined, allowNegative = false, scale = 2, normalizeZeros = true,\n padFractionalZeros = false, unmask = true, currencySymbol = 'R$', displayCurrencySymbol = true,\n } = props;\n const currencyNumberInputRef = useRef<HTMLInputElement | null>(null);\n const isResetting = useRef(false);\n const leftElements = displayCurrencySymbol ?\n <span className=\"currency-symbol\">{currencySymbol}</span>\n : [];\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n unmask,\n scale,\n normalizeZeros,\n padFractionalZeros,\n max,\n min: !_.isNil(min) ? min : (allowNegative ? undefined : 0),\n radix: ',',\n mapToRadix: ['.'],\n thousandsSeparator: '.',\n }, {\n ref: currencyNumberInputRef,\n onAccept: (__, options, event) => {\n if (isResetting.current) {\n isResetting.current = false;\n return;\n }\n const parsedValue = numberToEnUS(options.unmaskedValue);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = numberToEnUS(maskedValue) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(numberToPtBR(min) ?? _.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n if (_.isNil(props?.value)) {\n if (maskedValue !== '') {\n isResetting.current = true;\n setMaskedValue('');\n }\n return;\n }\n const valueToPtBR = numberToPtBR(props?.value) ?? '';\n if (!_.isEqual(\n parseFloat(_.toString(props?.value)), numberToEnUS(maskedValue),\n )) {\n setMaskedValue(valueToPtBR);\n }\n }, [props?.value]);\n\n return (\n <InputTextBase\n {...props}\n inputRef={mergeRefs(currencyNumberInputRef, inputRef) as any}\n type=\"text\"\n onChange={() => { }}\n leftElements={leftElements}\n onBlur={handleBlur}\n value={maskedValue}\n textAlign={textAlign}\n themePopover={themePopover}\n popoverAlign={popoverAlign} />\n );\n};\n\nexport default CurrencyField;\n"],"names":["CurrencyField","props","inputRef","undefined","textAlign","themePopover","popoverAlign","min","max","allowNegative","scale","normalizeZeros","padFractionalZeros","unmask","currencySymbol","displayCurrencySymbol","currencyNumberInputRef","useRef","isResetting","leftElements","value","maskedValue","setValue","setMaskedValue","useIMask","mask","Number","_","isNil","radix","mapToRadix","thousandsSeparator","ref","onAccept","__","options","event","current","parsedValue","numberToEnUS","unmaskedValue","onChange","target","name","handleBlur","currentValue","isNaN","numberToPtBR","toString","onBlur","useEffect","valueToPtBR","isEqual","parseFloat","mergeRefs"],"mappings":";;;;;;;AASA,MAAMA,gBAAgBA,CAACC,UAA0B;AAC/C,QAAM;AAAA,IACJC,WAAWC;AAAAA,IAAWC,YAAY;AAAA,IAAQC,eAAe;AAAA,IAASC,eAAe;AAAA,IACjFC,MAAMJ;AAAAA,IAAWK,MAAML;AAAAA,IAAWM,gBAAgB;AAAA,IAAOC,QAAQ;AAAA,IAAGC,iBAAiB;AAAA,IACrFC,qBAAqB;AAAA,IAAOC,SAAS;AAAA,IAAMC,iBAAiB;AAAA,IAAMC,wBAAwB;AAAA,EAAA,IACxFd;AACJ,QAAMe,yBAAyBC,OAAgC,IAAI;AACnE,QAAMC,cAAcD,OAAO,KAAK;AAChC,QAAME,eAAeJ,wBACnB,oBAAC,QAAA,EAAK,WAAU,mBAAmBD,UAAAA,eAAAA,CAAe,IAChD,CAAA;AAEJ,QAAM;AAAA,IAAEM,OAAOC;AAAAA,IAAaC,UAAUC;AAAAA,EAAAA,IAAmBC,SAAS;AAAA,IAChEC,MAAMC;AAAAA,IACNb;AAAAA,IACAH;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAJ;AAAAA,IACAD,KAAK,CAACoB,EAAEC,MAAMrB,GAAG,IAAIA,MAAOE,gBAAgBN,SAAY;AAAA,IACxD0B,OAAO;AAAA,IACPC,YAAY,CAAC,GAAG;AAAA,IAChBC,oBAAoB;AAAA,EAAA,GACnB;AAAA,IACDC,KAAKhB;AAAAA,IACLiB,UAAUA,CAACC,IAAIC,SAASC,UAAU;AAChC,UAAIlB,YAAYmB,SAAS;AACvBnB,oBAAYmB,UAAU;AACtB;AAAA,MACF;AACA,YAAMC,cAAcC,aAAaJ,QAAQK,aAAa;AACtDvC,aAAOwC,WAAW;AAAA,QAChB,GAAGL;AAAAA,QACHM,QAAQ;AAAA,UACN,GAAGN,OAAOM;AAAAA,UACVC,MAAM1C,OAAO0C;AAAAA,UACbvB,OAAOkB;AAAAA,QAAAA;AAAAA,MACT,CACsC;AAAA,IAC1C;AAAA,EAAA,CACD;AAMD,QAAMM,aAAaA,CAACR,YAA4B;AAC9C,QAAI,CAACT,EAAEC,MAAMrB,GAAG,GAAG;AACjB,YAAMsC,eAAeN,aAAalB,WAAW;AAC7C,UAAIM,EAAEmB,MAAMD,YAAY,KAAKA,eAAetC,KAAK;AAC/CgB,uBAAewB,aAAaxC,GAAG,KAAKoB,EAAEqB,SAASzC,GAAG,CAAC;AACnDN,eAAOwC,WAAW;AAAA,UAChB,GAAGL;AAAAA,UACHM,QAAQ;AAAA,YACN,GAAGN,SAAOM;AAAAA,YACVC,MAAM1C,OAAO0C;AAAAA,YACbvB,OAAOb;AAAAA,UAAAA;AAAAA,QACT,CACmB;AAAA,MACvB;AAAA,IACF;AACAN,WAAOgD,SAASb,OAAK;AAAA,EACvB;AAEAc,YAAU,MAAM;AACd,QAAIvB,EAAEC,MAAM3B,OAAOmB,KAAK,GAAG;AACzB,UAAIC,gBAAgB,IAAI;AACtBH,oBAAYmB,UAAU;AACtBd,uBAAe,EAAE;AAAA,MACnB;AACA;AAAA,IACF;AACA,UAAM4B,cAAcJ,aAAa9C,OAAOmB,KAAK,KAAK;AAClD,QAAI,CAACO,EAAEyB,QACLC,WAAW1B,EAAEqB,SAAS/C,OAAOmB,KAAK,CAAC,GAAGmB,aAAalB,WAAW,CAChE,GAAG;AACDE,qBAAe4B,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAClD,OAAOmB,KAAK,CAAC;AAEjB,SACE,oBAAC,eAAA,EACC,GAAInB,OACJ,UAAUqD,UAAUtC,wBAAwBd,QAAQ,GACpD,MAAK,QACL,UAAU,MAAM;AAAA,EAAE,GAClB,cACA,QAAQ0C,YACR,OAAOvB,aACP,WACA,cACA,cAA2B;AAEjC;"}
|
|
@@ -20,6 +20,7 @@ const DecimalField = (props) => {
|
|
|
20
20
|
inputRef = void 0
|
|
21
21
|
} = props;
|
|
22
22
|
const decimalNumberInputRef = useRef(null);
|
|
23
|
+
const isResetting = useRef(false);
|
|
23
24
|
const {
|
|
24
25
|
value: maskedValue,
|
|
25
26
|
setValue: setMaskedValue
|
|
@@ -37,6 +38,10 @@ const DecimalField = (props) => {
|
|
|
37
38
|
}, {
|
|
38
39
|
ref: decimalNumberInputRef,
|
|
39
40
|
onAccept: (__, options, event) => {
|
|
41
|
+
if (isResetting.current) {
|
|
42
|
+
isResetting.current = false;
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
40
45
|
const parsedValue = numberToEnUS(options.unmaskedValue);
|
|
41
46
|
props?.onChange?.({
|
|
42
47
|
...event,
|
|
@@ -66,8 +71,15 @@ const DecimalField = (props) => {
|
|
|
66
71
|
props?.onBlur?.(event_0);
|
|
67
72
|
};
|
|
68
73
|
useEffect(() => {
|
|
74
|
+
if (_.isNil(props?.value)) {
|
|
75
|
+
if (maskedValue !== "") {
|
|
76
|
+
isResetting.current = true;
|
|
77
|
+
setMaskedValue("");
|
|
78
|
+
}
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
69
81
|
const valueToPtBR = numberToPtBR(props?.value) ?? "";
|
|
70
|
-
if (!_.
|
|
82
|
+
if (!_.isEqual(parseFloat(_.toString(props?.value)), numberToEnUS(maskedValue))) {
|
|
71
83
|
setMaskedValue(valueToPtBR);
|
|
72
84
|
}
|
|
73
85
|
}, [props?.value]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Decimal.js","sources":["../../../src/lib/inputs/number/Decimal.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React, { useEffect, useRef } from 'react';\nimport { useIMask } from 'react-imask';\nimport { IDecimalProps } from './types';\nimport { numberToEnUS, numberToPtBR } from './format_number';\nimport InputTextBase from '../base/InputTextBase';\nimport type { CustomInputEvent } from '../base/types';\nimport { mergeRefs } from '../../form2/helpers';\n\nconst DecimalField = (props: IDecimalProps) => {\n const {\n textAlign = 'left', themePopover = 'light', popoverAlign = 'left', min = undefined,\n max = undefined, allowNegative = false, scale = 2, normalizeZeros = true,\n padFractionalZeros = true, unmask = true, inputRef = undefined,\n } = props;\n const decimalNumberInputRef = useRef<HTMLInputElement | null>(null);\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n unmask,\n scale,\n normalizeZeros,\n padFractionalZeros,\n max,\n min: !_.isNil(min) ? min : (allowNegative ? undefined : 0),\n radix: ',',\n mapToRadix: ['.'],\n thousandsSeparator: '.',\n }, {\n ref: decimalNumberInputRef,\n onAccept: (__, options, event) => {\n const parsedValue = numberToEnUS(options.unmaskedValue);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = numberToEnUS(maskedValue) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(numberToPtBR(min) ?? _.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n const valueToPtBR = numberToPtBR(props?.value) ?? '';\n if (!_.
|
|
1
|
+
{"version":3,"file":"Decimal.js","sources":["../../../src/lib/inputs/number/Decimal.tsx"],"sourcesContent":["import _ from 'lodash';\nimport React, { useEffect, useRef } from 'react';\nimport { useIMask } from 'react-imask';\nimport { IDecimalProps } from './types';\nimport { numberToEnUS, numberToPtBR } from './format_number';\nimport InputTextBase from '../base/InputTextBase';\nimport type { CustomInputEvent } from '../base/types';\nimport { mergeRefs } from '../../form2/helpers';\n\nconst DecimalField = (props: IDecimalProps) => {\n const {\n textAlign = 'left', themePopover = 'light', popoverAlign = 'left', min = undefined,\n max = undefined, allowNegative = false, scale = 2, normalizeZeros = true,\n padFractionalZeros = true, unmask = true, inputRef = undefined,\n } = props;\n const decimalNumberInputRef = useRef<HTMLInputElement | null>(null);\n const isResetting = useRef(false);\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n unmask,\n scale,\n normalizeZeros,\n padFractionalZeros,\n max,\n min: !_.isNil(min) ? min : (allowNegative ? undefined : 0),\n radix: ',',\n mapToRadix: ['.'],\n thousandsSeparator: '.',\n }, {\n ref: decimalNumberInputRef,\n onAccept: (__, options, event) => {\n if (isResetting.current) {\n isResetting.current = false;\n return;\n }\n const parsedValue = numberToEnUS(options.unmaskedValue);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = numberToEnUS(maskedValue) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(numberToPtBR(min) ?? _.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n if (_.isNil(props?.value)) {\n if (maskedValue !== '') {\n isResetting.current = true;\n setMaskedValue('');\n }\n return;\n }\n const valueToPtBR = numberToPtBR(props?.value) ?? '';\n if (!_.isEqual(\n parseFloat(_.toString(props?.value)), numberToEnUS(maskedValue),\n )) {\n setMaskedValue(valueToPtBR);\n }\n }, [props?.value]);\n\n return (\n <InputTextBase\n {...props}\n inputRef={mergeRefs(decimalNumberInputRef, inputRef) as any}\n type=\"text\"\n onChange={() => { }}\n onBlur={handleBlur}\n value={maskedValue}\n textAlign={textAlign}\n themePopover={themePopover}\n popoverAlign={popoverAlign} />\n );\n};\n\nexport default DecimalField;\n"],"names":["DecimalField","props","textAlign","themePopover","popoverAlign","min","undefined","max","allowNegative","scale","normalizeZeros","padFractionalZeros","unmask","inputRef","decimalNumberInputRef","useRef","isResetting","value","maskedValue","setValue","setMaskedValue","useIMask","mask","Number","_","isNil","radix","mapToRadix","thousandsSeparator","ref","onAccept","__","options","event","current","parsedValue","numberToEnUS","unmaskedValue","onChange","target","name","handleBlur","currentValue","isNaN","numberToPtBR","toString","onBlur","useEffect","valueToPtBR","isEqual","parseFloat","mergeRefs"],"mappings":";;;;;;;AASA,MAAMA,eAAeA,CAACC,UAAyB;AAC7C,QAAM;AAAA,IACJC,YAAY;AAAA,IAAQC,eAAe;AAAA,IAASC,eAAe;AAAA,IAAQC,MAAMC;AAAAA,IACzEC,MAAMD;AAAAA,IAAWE,gBAAgB;AAAA,IAAOC,QAAQ;AAAA,IAAGC,iBAAiB;AAAA,IACpEC,qBAAqB;AAAA,IAAMC,SAAS;AAAA,IAAMC,WAAWP;AAAAA,EAAAA,IACnDL;AACJ,QAAMa,wBAAwBC,OAAgC,IAAI;AAClE,QAAMC,cAAcD,OAAO,KAAK;AAEhC,QAAM;AAAA,IAAEE,OAAOC;AAAAA,IAAaC,UAAUC;AAAAA,EAAAA,IAAmBC,SAAS;AAAA,IAChEC,MAAMC;AAAAA,IACNX;AAAAA,IACAH;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAJ;AAAAA,IACAF,KAAK,CAACmB,EAAEC,MAAMpB,GAAG,IAAIA,MAAOG,gBAAgBF,SAAY;AAAA,IACxDoB,OAAO;AAAA,IACPC,YAAY,CAAC,GAAG;AAAA,IAChBC,oBAAoB;AAAA,EAAA,GACnB;AAAA,IACDC,KAAKf;AAAAA,IACLgB,UAAUA,CAACC,IAAIC,SAASC,UAAU;AAChC,UAAIjB,YAAYkB,SAAS;AACvBlB,oBAAYkB,UAAU;AACtB;AAAA,MACF;AACA,YAAMC,cAAcC,aAAaJ,QAAQK,aAAa;AACtDpC,aAAOqC,WAAW;AAAA,QAChB,GAAGL;AAAAA,QACHM,QAAQ;AAAA,UACN,GAAGN,OAAOM;AAAAA,UACVC,MAAMvC,OAAOuC;AAAAA,UACbvB,OAAOkB;AAAAA,QAAAA;AAAAA,MACT,CACsC;AAAA,IAC1C;AAAA,EAAA,CACD;AAMD,QAAMM,aAAaA,CAACR,YAA4B;AAC9C,QAAI,CAACT,EAAEC,MAAMpB,GAAG,GAAG;AACjB,YAAMqC,eAAeN,aAAalB,WAAW;AAC7C,UAAIM,EAAEmB,MAAMD,YAAY,KAAKA,eAAerC,KAAK;AAC/Ce,uBAAewB,aAAavC,GAAG,KAAKmB,EAAEqB,SAASxC,GAAG,CAAC;AACnDJ,eAAOqC,WAAW;AAAA,UAChB,GAAGL;AAAAA,UACHM,QAAQ;AAAA,YACN,GAAGN,SAAOM;AAAAA,YACVC,MAAMvC,OAAOuC;AAAAA,YACbvB,OAAOZ;AAAAA,UAAAA;AAAAA,QACT,CACmB;AAAA,MACvB;AAAA,IACF;AACAJ,WAAO6C,SAASb,OAAK;AAAA,EACvB;AAEAc,YAAU,MAAM;AACd,QAAIvB,EAAEC,MAAMxB,OAAOgB,KAAK,GAAG;AACzB,UAAIC,gBAAgB,IAAI;AACtBF,oBAAYkB,UAAU;AACtBd,uBAAe,EAAE;AAAA,MACnB;AACA;AAAA,IACF;AACA,UAAM4B,cAAcJ,aAAa3C,OAAOgB,KAAK,KAAK;AAClD,QAAI,CAACO,EAAEyB,QACLC,WAAW1B,EAAEqB,SAAS5C,OAAOgB,KAAK,CAAC,GAAGmB,aAAalB,WAAW,CAChE,GAAG;AACDE,qBAAe4B,WAAW;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC/C,OAAOgB,KAAK,CAAC;AAEjB,SACE,oBAAC,eAAA,EACC,GAAIhB,OACJ,UAAUkD,UAAUrC,uBAAuBD,QAAQ,GACnD,MAAK,QACL,UAAU,MAAM;AAAA,EAAE,GAClB,QAAQ4B,YACR,OAAOvB,aACP,WACA,cACA,cAA2B;AAEjC;"}
|
|
@@ -17,6 +17,7 @@ const NumberField = (props) => {
|
|
|
17
17
|
inputRef = void 0
|
|
18
18
|
} = props;
|
|
19
19
|
const numberInputRef = useRef(null);
|
|
20
|
+
const isResetting = useRef(false);
|
|
20
21
|
const {
|
|
21
22
|
value: maskedValue,
|
|
22
23
|
setValue: setMaskedValue
|
|
@@ -33,6 +34,10 @@ const NumberField = (props) => {
|
|
|
33
34
|
}, {
|
|
34
35
|
ref: numberInputRef,
|
|
35
36
|
onAccept: (value, __, event) => {
|
|
37
|
+
if (isResetting.current) {
|
|
38
|
+
isResetting.current = false;
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
36
41
|
const parsedValue = parseInt(value, 10);
|
|
37
42
|
props?.onChange?.({
|
|
38
43
|
...event,
|
|
@@ -62,8 +67,15 @@ const NumberField = (props) => {
|
|
|
62
67
|
props?.onBlur?.(event_0);
|
|
63
68
|
};
|
|
64
69
|
useEffect(() => {
|
|
70
|
+
if (_.isNil(props?.value)) {
|
|
71
|
+
if (maskedValue !== "") {
|
|
72
|
+
isResetting.current = true;
|
|
73
|
+
setMaskedValue("");
|
|
74
|
+
}
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
65
77
|
const floatMaskedValue = Number(maskedValue || "0");
|
|
66
|
-
if (!_.
|
|
78
|
+
if (!_.isEqual(props?.value, floatMaskedValue) || _.isEqual(props?.value, 0)) {
|
|
67
79
|
setMaskedValue(_.toString(props?.value));
|
|
68
80
|
}
|
|
69
81
|
}, [props?.value]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/lib/inputs/number/index.tsx"],"sourcesContent":["import '../../assets/styles/numbers.scss';\n\nimport React, { useEffect, useRef } from 'react';\nimport _ from 'lodash';\nimport { useIMask } from 'react-imask';\nimport DecimalField from './Decimal';\nimport CurrencyField from './Currency';\nimport { INumberFieldProps } from './types';\nimport InputTextBase from '../base/InputTextBase';\nimport { CustomInputEvent } from '../base/types';\nimport { mergeRefs } from '../../form2/helpers';\n\nconst NumberField = (props: INumberFieldProps) => {\n const {\n textAlign = 'left', themePopover = 'light', popoverAlign = 'left', min = undefined, \n max = undefined, inputRef = undefined,\n } = props;\n const numberInputRef = useRef<HTMLInputElement | null>(null);\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n max,\n min,\n scale: 0,\n enum: undefined,\n to: undefined,\n from: undefined,\n normalizeZeros: true,\n padFractionalZeros: false,\n }, {\n ref: numberInputRef,\n onAccept: (value, __, event) => {\n const parsedValue = parseInt(value, 10);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as CustomInputEvent);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = parseInt(maskedValue, 10) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(_.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n const floatMaskedValue = Number(maskedValue || '0');\n if (!_.
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/lib/inputs/number/index.tsx"],"sourcesContent":["import '../../assets/styles/numbers.scss';\n\nimport React, { useEffect, useRef } from 'react';\nimport _ from 'lodash';\nimport { useIMask } from 'react-imask';\nimport DecimalField from './Decimal';\nimport CurrencyField from './Currency';\nimport { INumberFieldProps } from './types';\nimport InputTextBase from '../base/InputTextBase';\nimport { CustomInputEvent } from '../base/types';\nimport { mergeRefs } from '../../form2/helpers';\n\nconst NumberField = (props: INumberFieldProps) => {\n const {\n textAlign = 'left', themePopover = 'light', popoverAlign = 'left', min = undefined, \n max = undefined, inputRef = undefined,\n } = props;\n const numberInputRef = useRef<HTMLInputElement | null>(null);\n const isResetting = useRef(false);\n\n const { value: maskedValue, setValue: setMaskedValue } = useIMask({\n mask: Number,\n max,\n min,\n scale: 0,\n enum: undefined,\n to: undefined,\n from: undefined,\n normalizeZeros: true,\n padFractionalZeros: false,\n }, {\n ref: numberInputRef,\n onAccept: (value, __, event) => {\n if (isResetting.current) {\n isResetting.current = false;\n return;\n }\n const parsedValue = parseInt(value, 10);\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: parsedValue as any,\n },\n } as CustomInputEvent);\n },\n });\n\n /**\n * Função sobrescrevendo o evento onBlur para tratar o valor mínimo ao sair do campo, \n * garantindo que o valor não seja menor que o mínimo definido.\n */\n const handleBlur = (event: CustomInputEvent) => {\n if (!_.isNil(min)) {\n const currentValue = parseInt(maskedValue, 10) as number;\n if (_.isNaN(currentValue) || currentValue < min) {\n setMaskedValue(_.toString(min));\n props?.onChange?.({\n ...event,\n target: {\n ...event?.target,\n name: props?.name,\n value: min as any,\n },\n } as CustomInputEvent);\n }\n }\n props?.onBlur?.(event);\n };\n\n useEffect(() => {\n if (_.isNil(props?.value)) {\n if (maskedValue !== '') {\n isResetting.current = true;\n setMaskedValue('');\n }\n return;\n }\n const floatMaskedValue = Number(maskedValue || '0');\n if (!_.isEqual(props?.value, floatMaskedValue) || _.isEqual(props?.value, 0)) {\n setMaskedValue(_.toString(props?.value));\n }\n }, [props?.value]);\n\n return (\n <InputTextBase\n {...props}\n inputRef={mergeRefs(numberInputRef, inputRef) as any}\n type=\"number\"\n onChange={() => {}}\n onBlur={handleBlur}\n value={maskedValue}\n textAlign={textAlign}\n themePopover={themePopover}\n popoverAlign={popoverAlign} />\n );\n};\n\nexport default NumberField;\nexport {\n CurrencyField,\n DecimalField,\n};\n"],"names":["NumberField","props","textAlign","themePopover","popoverAlign","min","undefined","max","inputRef","numberInputRef","useRef","isResetting","value","maskedValue","setValue","setMaskedValue","useIMask","mask","Number","scale","enum","to","from","normalizeZeros","padFractionalZeros","ref","onAccept","__","event","current","parsedValue","parseInt","onChange","target","name","handleBlur","_","isNil","currentValue","isNaN","toString","onBlur","useEffect","floatMaskedValue","isEqual","mergeRefs"],"mappings":";;;;;;;;;AAYA,MAAMA,cAAcA,CAACC,UAA6B;AAChD,QAAM;AAAA,IACJC,YAAY;AAAA,IAAQC,eAAe;AAAA,IAASC,eAAe;AAAA,IAAQC,MAAMC;AAAAA,IACzEC,MAAMD;AAAAA,IAAWE,WAAWF;AAAAA,EAAAA,IAC1BL;AACJ,QAAMQ,iBAAiBC,OAAgC,IAAI;AAC3D,QAAMC,cAAcD,OAAO,KAAK;AAEhC,QAAM;AAAA,IAAEE,OAAOC;AAAAA,IAAaC,UAAUC;AAAAA,EAAAA,IAAmBC,SAAS;AAAA,IAChEC,MAAMC;AAAAA,IACNX;AAAAA,IACAF;AAAAA,IACAc,OAAO;AAAA,IACPC,MAAMd;AAAAA,IACNe,IAAIf;AAAAA,IACJgB,MAAMhB;AAAAA,IACNiB,gBAAgB;AAAA,IAChBC,oBAAoB;AAAA,EAAA,GACnB;AAAA,IACDC,KAAKhB;AAAAA,IACLiB,UAAUA,CAACd,OAAOe,IAAIC,UAAU;AAC9B,UAAIjB,YAAYkB,SAAS;AACvBlB,oBAAYkB,UAAU;AACtB;AAAA,MACF;AACA,YAAMC,cAAcC,SAASnB,OAAO,EAAE;AACtCX,aAAO+B,WAAW;AAAA,QAChB,GAAGJ;AAAAA,QACHK,QAAQ;AAAA,UACN,GAAGL,OAAOK;AAAAA,UACVC,MAAMjC,OAAOiC;AAAAA,UACbtB,OAAOkB;AAAAA,QAAAA;AAAAA,MACT,CACmB;AAAA,IACvB;AAAA,EAAA,CACD;AAMD,QAAMK,aAAaA,CAACP,YAA4B;AAC9C,QAAI,CAACQ,EAAEC,MAAMhC,GAAG,GAAG;AACjB,YAAMiC,eAAeP,SAASlB,aAAa,EAAE;AAC7C,UAAIuB,EAAEG,MAAMD,YAAY,KAAKA,eAAejC,KAAK;AAC/CU,uBAAeqB,EAAEI,SAASnC,GAAG,CAAC;AAC9BJ,eAAO+B,WAAW;AAAA,UAChB,GAAGJ;AAAAA,UACHK,QAAQ;AAAA,YACN,GAAGL,SAAOK;AAAAA,YACVC,MAAMjC,OAAOiC;AAAAA,YACbtB,OAAOP;AAAAA,UAAAA;AAAAA,QACT,CACmB;AAAA,MACvB;AAAA,IACF;AACAJ,WAAOwC,SAASb,OAAK;AAAA,EACvB;AAEAc,YAAU,MAAM;AACd,QAAIN,EAAEC,MAAMpC,OAAOW,KAAK,GAAG;AACzB,UAAIC,gBAAgB,IAAI;AACtBF,oBAAYkB,UAAU;AACtBd,uBAAe,EAAE;AAAA,MACnB;AACA;AAAA,IACF;AACA,UAAM4B,mBAAmBzB,OAAOL,eAAe,GAAG;AAClD,QAAI,CAACuB,EAAEQ,QAAQ3C,OAAOW,OAAO+B,gBAAgB,KAAKP,EAAEQ,QAAQ3C,OAAOW,OAAO,CAAC,GAAG;AAC5EG,qBAAeqB,EAAEI,SAASvC,OAAOW,KAAK,CAAC;AAAA,IACzC;AAAA,EACF,GAAG,CAACX,OAAOW,KAAK,CAAC;AAEjB,SACE,oBAAC,eAAA,EACC,GAAIX,OACJ,UAAU4C,UAAUpC,gBAAgBD,QAAQ,GAC5C,MAAK,UACL,UAAU,MAAM;AAAA,EAAC,GACjB,QAAQ2B,YACR,OAAOtB,aACP,WACA,cACA,cAA2B;AAEjC;"}
|
package/lib/inputs/types.d.ts
CHANGED