karsten-design-system 1.0.78 → 1.0.79

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.
Files changed (3) hide show
  1. package/dist/stories/components/input.js +22 -20
  2. package/dist/stories/components/input.js.map +1 -1
  3. package/package.json +1 -1
package/dist/stories/components/input.js CHANGED
@@ -3,7 +3,7 @@ import clsx from 'clsx';
3
3
  import { IconField } from 'primereact/iconfield';
4
4
  import { InputIcon } from 'primereact/inputicon';
5
5
  import { InputText } from 'primereact/inputtext';
6
- import { useState, useId } from 'react';
6
+ import { useState, useId, useEffect } from 'react';
7
7
  import { maskMoneyBRL, maskCEP, maskNumberWithDecimal, maskPhone, maskCellphone, maskOnlyNumbers, maskCNPJ, maskCPF } from '../../utils/masks/index.js';
8
8
 
9
9
  const variants = {
@@ -13,34 +13,36 @@ const variants = {
13
13
  function Input({ onChange, placeholder, disabled = false, error, icon, onClickIcon, iconColor = 'green', label, mask, ...props }) {
14
14
  const [isOnFocus, setIsOnFocus] = useState(false);
15
15
  const inputId = useId();
16
- const handleChange = (e) => {
17
- let value = e.target.value;
16
+ const [inputValue, setInputValue] = useState('');
17
+ const applyMask = (value, mask) => {
18
18
  switch (mask) {
19
19
  case 'cpf':
20
- value = maskCPF(value);
21
- break;
20
+ return maskCPF(value);
22
21
  case 'cnpj':
23
- value = maskCNPJ(value);
24
- break;
22
+ return maskCNPJ(value);
25
23
  case 'numbers':
26
- value = maskOnlyNumbers(value);
27
- break;
24
+ return maskOnlyNumbers(value);
28
25
  case 'cellphone':
29
- value = maskCellphone(value);
30
- break;
26
+ return maskCellphone(value);
31
27
  case 'phone':
32
- value = maskPhone(value);
33
- break;
28
+ return maskPhone(value);
34
29
  case 'decimal':
35
- value = maskNumberWithDecimal(value);
36
- break;
30
+ return maskNumberWithDecimal(value);
37
31
  case 'cep':
38
- value = maskCEP(value);
39
- break;
32
+ return maskCEP(value);
40
33
  case 'currency':
41
- value = maskMoneyBRL(value);
42
- break;
34
+ return maskMoneyBRL(value);
35
+ default:
36
+ return value;
43
37
  }
38
+ };
39
+ useEffect(() => {
40
+ const formatted = applyMask(props.value ?? '', mask);
41
+ setInputValue(formatted);
42
+ }, [props.value, mask]);
43
+ const handleChange = (e) => {
44
+ const value = applyMask(e.target.value, mask);
45
+ setInputValue(value);
44
46
  onChange(value);
45
47
  };
46
48
  const hasError = (props.value && error && !disabled) ||
@@ -49,7 +51,7 @@ function Input({ onChange, placeholder, disabled = false, error, icon, onClickIc
49
51
  ? 'text-redError'
50
52
  : disabled
51
53
  ? 'text-stone'
52
- : variants[iconColor]), onClick: onClickIcon }), jsxRuntimeExports.jsx(InputText, { id: inputId, type: "text", placeholder: placeholder, onChange: handleChange, disabled: disabled, onFocus: () => setIsOnFocus(true), onBlur: () => setIsOnFocus(false), invalid: hasError, className: clsx('w-100 font-roboto border !p-2 rounded-md focus:shadow-none', hasError ? 'border-redError' : 'border-gray focus:border-primary'), ...props })] }), jsxRuntimeExports.jsx("label", { htmlFor: inputId, className: clsx('absolute left-4 w-auto bg-background font-roboto px-1.5 transition-all leading-none ease-in-out durantion-200', isOnFocus || props.value
54
+ : variants[iconColor]), onClick: onClickIcon }), jsxRuntimeExports.jsx(InputText, { ...props, id: inputId, type: "text", placeholder: placeholder, onChange: handleChange, disabled: disabled, onFocus: () => setIsOnFocus(true), onBlur: () => setIsOnFocus(false), invalid: hasError, className: clsx('w-100 font-roboto border !p-2 rounded-md focus:shadow-none', hasError ? 'border-redError' : 'border-gray focus:border-primary'), value: inputValue })] }), jsxRuntimeExports.jsx("label", { htmlFor: inputId, className: clsx('absolute left-4 w-auto bg-background font-roboto px-1.5 transition-all leading-none ease-in-out durantion-200', isOnFocus || props.value
53
55
  ? '-top-[20%] text-sm'
54
56
  : hasError
55
57
  ? 'top-[23%] text-base'
package/dist/stories/components/input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
1
+ {"version":3,"file":"input.js","sources":["../../../../src/stories/components/input.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "karsten-design-system",
3
3
  "description": "Karsten Design System Components",
4
- "version": "1.0.78",
4
+ "version": "1.0.79",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",