@ssplib/react-components 0.0.214 → 0.0.216

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 (4) hide show
  1. package/components/form/input/Input.js +19 -18
  2. package/components/form/input/MaskInput.d.ts +1 -0
  3. package/components/form/input/MaskInput.js +16 -6
  4. package/package.json +1 -1
package/components/form/input/Input.js CHANGED
@@ -61,48 +61,49 @@ function Input(_a) {
61
61
  const error = errorData ? true : false;
62
62
  const formConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, context === null || context === void 0 ? void 0 : context.formRegister(name, {
63
63
  validate: (v, f) => {
64
- if (v.length <= 0 && props.required)
64
+ const value = v !== null && v !== void 0 ? v : '';
65
+ if (value.length <= 0 && props.required)
65
66
  return 'Este campo é obrigatório';
66
67
  if (type === 'cnpj') {
67
- if (v.length < 18 && props.required)
68
+ if (value.length < 18 && props.required)
68
69
  return 'O CNPJ precisa ter no mínimo 14 dígitos';
69
70
  }
70
71
  //
71
72
  else if (type === 'cpf') {
72
- if (v.length < 14 && props.required)
73
+ if (value.length < 14 && props.required)
73
74
  return 'O CPF precisa ter no mínimo 11 dígitos';
74
75
  } //
75
76
  else if (type === 'sei') {
76
- if (v.length < 22 && props.required)
77
+ if (value.length < 22 && props.required)
77
78
  return 'O Número SEI precisa ter no mínimo 19 dígitos';
78
79
  }
79
80
  //
80
81
  else if (type === 'cep') {
81
- if (v.length < 9 && props.required)
82
+ if (value.length < 9 && props.required)
82
83
  return 'O CPF precisa ter no mínimo 8 dígitos';
83
84
  }
84
85
  //
85
86
  else if (type === 'input' || type === 'password' || type === 'number') {
86
- if (v.length > inputMaxLength)
87
+ if (value.length > inputMaxLength)
87
88
  return `Limite máximo de ${inputMaxLength} caracteres`;
88
- if (v.length < inputMinLength && props.required)
89
+ if (value.length < inputMinLength && props.required)
89
90
  return `Limite mínimo de ${inputMinLength} caracteres`;
90
91
  }
91
92
  //
92
93
  else if (type === 'email') {
93
- if (v.length > 50)
94
+ if (value.length > 50)
94
95
  return 'Limite máximo de 50 caracteres';
95
96
  if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g.test(v) && props.required)
96
97
  return 'O e-mail inserido não é valido';
97
98
  }
98
99
  //
99
100
  else if (type === 'cpf_cnpj') {
100
- if ((v.length < 14 || (v.length > 14 && v.length < 18)) && props.required)
101
+ if ((value.length < 14 || (value.length > 14 && value.length < 18)) && props.required)
101
102
  return 'O CPF/CNPJ precisa ter no mínimo 11/14 dígitos';
102
103
  }
103
104
  //
104
105
  else if (type === 'phone') {
105
- if (v.length < 14 && props.required)
106
+ if (value.length < 14 && props.required)
106
107
  return 'O número precisa ter pelo menos 10 dígitos';
107
108
  }
108
109
  },
@@ -119,22 +120,22 @@ function Input(_a) {
119
120
  case 'number':
120
121
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
121
122
  mask: numberMask,
122
- } }));
123
+ }, watchValue: watchValue }));
123
124
  case 'cep':
124
125
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
125
126
  mask: '00000-000',
126
- } }));
127
+ }, watchValue: watchValue }));
127
128
  case 'phone':
128
129
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
129
130
  mask: '(00) [#]0000-0000',
130
131
  definitions: {
131
132
  '#': /^9$/,
132
133
  },
133
- } }));
134
+ }, watchValue: watchValue }));
134
135
  case 'sei':
135
136
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
136
137
  mask: '00000-00000000/0000-00',
137
- } }));
138
+ }, watchValue: watchValue }));
138
139
  case 'cpf_cnpj':
139
140
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
140
141
  mask: '000.000.000-00[0]',
@@ -143,19 +144,19 @@ function Input(_a) {
143
144
  setMask('00.000.000/0000-00');
144
145
  else
145
146
  setMask('000.000.000-00[0]');
146
- } }));
147
+ }, watchValue: watchValue }));
147
148
  case 'cpf':
148
149
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
149
150
  mask: '000.000.000-00',
150
- } }));
151
+ }, watchValue: watchValue }));
151
152
  case 'cnpj':
152
153
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
153
154
  mask: '00.000.000/0000-00',
154
- } }));
155
+ }, watchValue: watchValue }));
155
156
  case 'rg':
156
157
  return (react_1.default.createElement(MaskInput_1.default, { formConfig: formConfig, defaultValue: defaultValue, maskProps: {
157
158
  mask: '00000[000000]',
158
- } }));
159
+ }, watchValue: watchValue }));
159
160
  }
160
161
  };
161
162
  return (react_1.default.createElement(material_1.Grid, Object.assign({ item: true }, { xs, sm, md }),
package/components/form/input/MaskInput.d.ts CHANGED
@@ -9,5 +9,6 @@ export default function MaskInput(props: {
9
9
  };
10
10
  };
11
11
  disabled?: boolean;
12
+ watchValue?: string;
12
13
  onMask?: (value: string, setMask: React.Dispatch<React.SetStateAction<string>>) => void;
13
14
  }): JSX.Element;
package/components/form/input/MaskInput.js CHANGED
@@ -39,21 +39,31 @@ const react_1 = __importStar(require("react"));
39
39
  const react_imask_1 = require("react-imask");
40
40
  const form_1 = require("../../../context/form");
41
41
  const TextMaskCustom = react_1.default.forwardRef(function TextMaskCustom(props, ref) {
42
- const { onChange, maskProps, onMask, maskValue, setMaskValue } = props, prop = __rest(props, ["onChange", "maskProps", "onMask", "maskValue", "setMaskValue"]);
42
+ const { onChange, maskProps, onMask, maskValue, setMaskValue, watchValue } = props, prop = __rest(props, ["onChange", "maskProps", "onMask", "maskValue", "setMaskValue", "watchValue"]);
43
43
  const [mask, setMask] = (0, react_1.useState)(maskProps.mask);
44
44
  delete prop.value;
45
45
  const myRef = (0, react_1.useRef)(null);
46
46
  const [myValue, setMyValue] = (0, react_1.useState)('');
47
47
  const context = (0, react_1.useContext)(form_1.FormContext);
48
48
  (0, react_1.useEffect)(() => {
49
- const value = context.formGetValues(prop.name);
50
- if (value) {
51
- setMyValue(value);
49
+ console.log(watchValue);
50
+ if (watchValue) {
51
+ setMyValue(watchValue);
52
52
  }
53
- }, [context.formWatch(prop.name)]);
53
+ }, [watchValue]);
54
+ // useEffect(() => {
55
+ // // const value = context.formGetValues(prop.name)
56
+ // // console.log('VA::', value)
57
+ // // if (value) {
58
+ // // setMyValue(value)
59
+ // // }
60
+ // }, [context.formGetValues(prop.name)])
54
61
  (0, react_1.useEffect)(() => {
62
+ console.log('ddd');
55
63
  context.formSetValue(prop.name, myRef.current.element.value);
56
64
  }, [myValue]);
65
+ console.log(props);
66
+ delete prop.watchValue;
57
67
  return (react_1.default.createElement(react_imask_1.IMaskInput, Object.assign({}, prop, maskProps, { mask: mask, value: myValue, ref: myRef, inputRef: ref, onChange: (e) => { }, onAccept: (value, mask) => {
58
68
  setMyValue(value);
59
69
  mask.updateValue();
@@ -72,7 +82,7 @@ function MaskInput(props) {
72
82
  context.formSetValue(name, value);
73
83
  }, InputProps: {
74
84
  inputComponent: TextMaskCustom,
75
- inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue },
85
+ inputProps: { maskProps: props.maskProps, onMask: props.onMask, maskValue, setMaskValue, watchValue: props.watchValue },
76
86
  }, disabled: props.disabled, fullWidth: true }))));
77
87
  }
78
88
  exports.default = MaskInput;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssplib/react-components",
3
- "version": "0.0.214",
3
+ "version": "0.0.216",
4
4
  "description": "SSP React Components",
5
5
  "main": "index.js",
6
6
  "author": "Pedro Henrique <sr.hudrick@gmail.com>",