takeat-design-system-ui-kit 0.1.52 → 0.1.55
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/dist/cjs/components/FormItens/Input/Input.stories.d.ts +1 -0
- package/dist/cjs/components/FormItens/Input/Input.stories.js +52 -3
- package/dist/cjs/components/FormItens/Input/Input.stories.js.map +1 -1
- package/dist/cjs/components/FormItens/Input/index.d.ts +2 -1
- package/dist/cjs/components/FormItens/Input/index.js +22 -4
- package/dist/cjs/components/FormItens/Input/index.js.map +1 -1
- package/dist/esm/components/FormItens/Input/Input.stories.d.ts +1 -0
- package/dist/esm/components/FormItens/Input/Input.stories.js +51 -2
- package/dist/esm/components/FormItens/Input/Input.stories.js.map +1 -1
- package/dist/esm/components/FormItens/Input/index.d.ts +2 -1
- package/dist/esm/components/FormItens/Input/index.js +21 -4
- package/dist/esm/components/FormItens/Input/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.FormExample = exports.Default = void 0;
|
|
3
|
+
exports.CurrencyInputExample = exports.FormExample = exports.Default = void 0;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const react_hook_form_1 = require("react-hook-form");
|
|
6
6
|
const _1 = require(".");
|
|
@@ -8,6 +8,8 @@ const Switch_1 = require("../Switch");
|
|
|
8
8
|
const Radio_1 = require("../Radio");
|
|
9
9
|
const Button_1 = require("../../Button");
|
|
10
10
|
const Select_1 = require("../Select");
|
|
11
|
+
const styles_1 = require("../../StoriesComponents/styles");
|
|
12
|
+
const react_1 = require("react");
|
|
11
13
|
const meta = {
|
|
12
14
|
component: _1.Input,
|
|
13
15
|
title: "Design System/Input",
|
|
@@ -122,11 +124,11 @@ exports.FormExample = {
|
|
|
122
124
|
render: () => {
|
|
123
125
|
const { control, register, handleSubmit, getValues, formState: { errors }, } = (0, react_hook_form_1.useForm)();
|
|
124
126
|
const onSubmit = (data) => alert(JSON.stringify(data, null, 2));
|
|
125
|
-
return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), style: { display: "flex", flexDirection: "column", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(_1.Input, { placeholder: "Digite seu nome", label: "Nome", style: { width: 200 }, register: register("name", {
|
|
127
|
+
return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), style: { display: "flex", flexDirection: "column", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(_1.Input, { placeholder: "Digite seu nome", label: "Nome", style: { width: 200 }, mask: "(99) 99999-9999", register: register("name", {
|
|
126
128
|
required: "Nome é obrigatório",
|
|
127
129
|
minLength: {
|
|
128
130
|
value: 6,
|
|
129
|
-
message: "Nome deve ter no mínimo
|
|
131
|
+
message: "Nome deve ter no mínimo 6 caracteres",
|
|
130
132
|
},
|
|
131
133
|
}), info: "Testando info", error: errors.name?.message?.toString() }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { name: "test_switch", label: "Teste switch", register: register("test_switch", { required: "Sueqgifq" }) }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { label: "Testing 1", register: register("test_radio") }), (0, jsx_runtime_1.jsx)(Radio_1.Radio, { label: "Testing 2", register: register("test_radio") }), (0, jsx_runtime_1.jsx)(Select_1.Select, { name: "test_select", control: control, options: [
|
|
132
134
|
{ value: "chocolate", label: "Chocolate" },
|
|
@@ -137,4 +139,51 @@ exports.FormExample = {
|
|
|
137
139
|
}), error: errors.test_select?.message?.toString(), info: "Testando info" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", onClick: () => console.log("Get values: ", getValues()), children: "Enviar" })] }));
|
|
138
140
|
},
|
|
139
141
|
};
|
|
142
|
+
exports.CurrencyInputExample = {
|
|
143
|
+
name: "Exemplo de input de moeda",
|
|
144
|
+
args: {
|
|
145
|
+
isCurrency: true,
|
|
146
|
+
hasPrefix: true,
|
|
147
|
+
minimumFractionDigits: 2,
|
|
148
|
+
placeholder: "Digite o valor",
|
|
149
|
+
},
|
|
150
|
+
render: (args) => {
|
|
151
|
+
const { control, register, handleSubmit, getValues, formState: { errors }, } = (0, react_hook_form_1.useForm)();
|
|
152
|
+
const onSubmit = (data) => alert(JSON.stringify(data, null, 2));
|
|
153
|
+
const [onChangeValue, setOnChangeValue] = (0, react_1.useState)();
|
|
154
|
+
const [formData, setFormData] = (0, react_1.useState)({ currency: "" });
|
|
155
|
+
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(styles_1.Subtitle, { style: { whiteSpace: "pre-wrap" }, children: ["O input de moeda tem alguns funcionamentos diferentes.", (0, jsx_runtime_1.jsx)("br", {}), " Para utiliz\u00E1-lo junto com o react-hook-form ser\u00E1 necess\u00E1rio passar o \"control\" do useForm() e a fun\u00E7\u00E3o onChange dever\u00E1 ficar dentro do register. Al\u00E9m disso, o onChange do input de moeda retorna um objeto da seguinte forma: ", `{ target : { value: number }}`, ", sendo esse number o valor num\u00E9rico do input, ou seja R$ 4,44 vai retornar 4.44. ", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), " Exemplo:", `
|
|
156
|
+
const = {
|
|
157
|
+
control,
|
|
158
|
+
register,
|
|
159
|
+
handleSubmit,
|
|
160
|
+
getValues,
|
|
161
|
+
formState: { errors },
|
|
162
|
+
} = useForm();
|
|
163
|
+
|
|
164
|
+
return <form handleSubmit(onSubmit)>
|
|
165
|
+
<Input
|
|
166
|
+
isCurrency
|
|
167
|
+
hasPrefix
|
|
168
|
+
placeholder="Digite o valor"
|
|
169
|
+
control={control}
|
|
170
|
+
name="currency"
|
|
171
|
+
register={register("currency", {
|
|
172
|
+
required: "Valor é obrigatório",
|
|
173
|
+
onChange: (e) => console.log("Inside onChange: ", e.target.value),
|
|
174
|
+
})}
|
|
175
|
+
error={errors.currency?.message?.toString()}
|
|
176
|
+
/>
|
|
177
|
+
</form>`] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit(onSubmit), style: { display: "flex", flexDirection: "column", gap: 8 }, children: [(0, jsx_runtime_1.jsx)(_1.Input, { ...args, control: control, name: "currency", value: formData.currency, register: register("currency", {
|
|
178
|
+
required: "Valor é obrigatório",
|
|
179
|
+
onChange: (e) => setFormData({ currency: e.target.value }),
|
|
180
|
+
}), error: errors.currency?.message?.toString() }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", onClick: () => console.log("Get values: ", getValues()), children: "Clique para testar a valida\u00E7\u00E3o" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(styles_1.Subtitle, { style: { whiteSpace: "pre-wrap" }, children: ["Para utilizar sem o react-hook-form, basta n\u00E3o passar a prop \"control\" nem a \"register\", utilizando o onChange normalmente.", (0, jsx_runtime_1.jsx)("br", {}), "Exemplo:", (0, jsx_runtime_1.jsx)("br", {}), `<Input
|
|
181
|
+
isCurrency
|
|
182
|
+
hasPrefix
|
|
183
|
+
placeholder="Digite o valor"
|
|
184
|
+
value={onChangeValue}
|
|
185
|
+
onChange={(e) => setOnChangeValue(e.target.value)}
|
|
186
|
+
/>`] }), (0, jsx_runtime_1.jsx)(_1.Input, { isCurrency: true, hasPrefix: true, placeholder: "Digite o valor", value: onChangeValue, onChange: (e) => setOnChangeValue(e.target.value) }), (0, jsx_runtime_1.jsxs)("span", { children: ["Valor retornado: ", onChangeValue] })] }));
|
|
187
|
+
},
|
|
188
|
+
};
|
|
140
189
|
//# sourceMappingURL=Input.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/Input.stories.tsx"],"names":[],"mappings":";;;;AAAA,qDAA0C;AAC1C,wBAA0B;AAC1B,sCAAmC;AACnC,oCAAiC;AACjC,yCAAsC;AAEtC,sCAAmC;
|
|
1
|
+
{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/Input.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
12
12
|
isCurrency?: boolean;
|
|
13
13
|
hasPrefix?: boolean;
|
|
14
14
|
minimumFractionDigits?: number;
|
|
15
|
+
control?: any;
|
|
15
16
|
onChange?: (e: any) => void;
|
|
16
17
|
}
|
|
17
|
-
export declare const Input:
|
|
18
|
+
export declare const Input: ({ label, info, error, isLoading, register, mask, maskChar, containerStyles, isCurrency, hasPrefix, minimumFractionDigits, control, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -3,16 +3,34 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Input = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const react_1 = require("react");
|
|
7
6
|
const styles_1 = require("./styles");
|
|
7
|
+
const react_hook_form_1 = require("react-hook-form");
|
|
8
8
|
const react_input_mask_1 = tslib_1.__importDefault(require("react-input-mask"));
|
|
9
9
|
const styled_components_1 = require("styled-components");
|
|
10
10
|
const Spinner_1 = require("../../Spinner");
|
|
11
11
|
const icons_1 = require("../../icons");
|
|
12
12
|
const react_number_format_1 = require("react-number-format");
|
|
13
13
|
const functions_1 = require("../../../utils/functions");
|
|
14
|
-
|
|
14
|
+
const Input = ({ label, info, error, isLoading, register, mask, maskChar = null, containerStyles, isCurrency, hasPrefix, minimumFractionDigits, control, ...props }) => {
|
|
15
15
|
const theme = (0, styled_components_1.useTheme)();
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)(styles_1.InputWrapper, { style: { ...containerStyles, width: props.style?.width }, children: [label && (0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { hasError: !!error, children: [isCurrency ? ((0, jsx_runtime_1.jsx)(
|
|
17
|
-
}
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.InputWrapper, { style: { ...containerStyles, width: props.style?.width }, children: [label && (0, jsx_runtime_1.jsx)("label", { children: label }), (0, jsx_runtime_1.jsxs)(styles_1.InputContainer, { hasError: !!error, children: [isCurrency ? ((0, jsx_runtime_1.jsx)(CurrencyInput, { control: control, hasPrefix: hasPrefix, minimumFractionDigits: minimumFractionDigits, ...props })) : mask ? ((0, jsx_runtime_1.jsx)(MaskInput, { mask: mask, maskChar: maskChar, register: register, ...props })) : ((0, jsx_runtime_1.jsx)(NormalInput, { isLoading: isLoading, register: register, ...props })), error && (0, jsx_runtime_1.jsx)(icons_1.IconExclamation, { className: "error-icon" }), isLoading && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 16, color: theme.colors.neutral.light, style: { position: "absolute", right: 16, top: 12 } }))] }), (!!register || !!error || !!info) && ((0, jsx_runtime_1.jsx)(styles_1.AdditionalInfo, { className: "additional-info", isError: !!error, children: error || info }))] }));
|
|
17
|
+
};
|
|
18
|
+
exports.Input = Input;
|
|
19
|
+
const NormalInput = ({ isLoading, register, ...props }) => {
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)("input", { ...props, disabled: isLoading || props.disabled, ...register }));
|
|
21
|
+
};
|
|
22
|
+
const CurrencyInput = ({ control, name, hasPrefix, minimumFractionDigits = 2, value, register, isLoading, ...props }) => {
|
|
23
|
+
const multiplicator = 10 ** minimumFractionDigits;
|
|
24
|
+
return control ? ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name || "", control: control, render: ({ field }) => ((0, jsx_runtime_1.jsx)(react_number_format_1.NumberFormatBase, { format: (e) => (0, functions_1.currencyFormatter)(parseFloat(e), hasPrefix, minimumFractionDigits), value: Number(value) * multiplicator, ...props, onValueChange: (e) => {
|
|
25
|
+
field.onChange?.(e.floatValue ? e.floatValue / multiplicator : undefined);
|
|
26
|
+
}, defaultValue: props.defaultValue, disabled: isLoading || props.disabled, type: "text" })) })) : ((0, jsx_runtime_1.jsx)(react_number_format_1.NumberFormatBase, { format: (e) => (0, functions_1.currencyFormatter)(parseFloat(e), hasPrefix, minimumFractionDigits), ...props, value: Number(value) * multiplicator, defaultValue: props.defaultValue, disabled: isLoading || props.disabled, onChange: undefined, onValueChange: (e) => props.onChange?.({
|
|
27
|
+
target: {
|
|
28
|
+
//@ts-ignore
|
|
29
|
+
value: e.floatValue ? e.floatValue / multiplicator : undefined,
|
|
30
|
+
},
|
|
31
|
+
}), type: "text" }));
|
|
32
|
+
};
|
|
33
|
+
const MaskInput = ({ mask, maskChar, register, isLoading, ...props }) => {
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(react_input_mask_1.default, { mask: mask, maskChar: maskChar, ...props, disabled: isLoading || props.disabled, ...register }));
|
|
35
|
+
};
|
|
18
36
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/index.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,8 @@ import { Switch } from "../Switch";
|
|
|
5
5
|
import { Radio } from "../Radio";
|
|
6
6
|
import { Button } from "../../Button";
|
|
7
7
|
import { Select } from "../Select";
|
|
8
|
+
import { Subtitle } from "../../StoriesComponents/styles";
|
|
9
|
+
import { useState } from "react";
|
|
8
10
|
const meta = {
|
|
9
11
|
component: Input,
|
|
10
12
|
title: "Design System/Input",
|
|
@@ -119,11 +121,11 @@ export const FormExample = {
|
|
|
119
121
|
render: () => {
|
|
120
122
|
const { control, register, handleSubmit, getValues, formState: { errors }, } = useForm();
|
|
121
123
|
const onSubmit = (data) => alert(JSON.stringify(data, null, 2));
|
|
122
|
-
return (_jsxs("form", { onSubmit: handleSubmit(onSubmit), style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(Input, { placeholder: "Digite seu nome", label: "Nome", style: { width: 200 }, register: register("name", {
|
|
124
|
+
return (_jsxs("form", { onSubmit: handleSubmit(onSubmit), style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(Input, { placeholder: "Digite seu nome", label: "Nome", style: { width: 200 }, mask: "(99) 99999-9999", register: register("name", {
|
|
123
125
|
required: "Nome é obrigatório",
|
|
124
126
|
minLength: {
|
|
125
127
|
value: 6,
|
|
126
|
-
message: "Nome deve ter no mínimo
|
|
128
|
+
message: "Nome deve ter no mínimo 6 caracteres",
|
|
127
129
|
},
|
|
128
130
|
}), info: "Testando info", error: errors.name?.message?.toString() }), _jsx(Switch, { name: "test_switch", label: "Teste switch", register: register("test_switch", { required: "Sueqgifq" }) }), _jsx(Radio, { label: "Testing 1", register: register("test_radio") }), _jsx(Radio, { label: "Testing 2", register: register("test_radio") }), _jsx(Select, { name: "test_select", control: control, options: [
|
|
129
131
|
{ value: "chocolate", label: "Chocolate" },
|
|
@@ -134,4 +136,51 @@ export const FormExample = {
|
|
|
134
136
|
}), error: errors.test_select?.message?.toString(), info: "Testando info" }), _jsx(Button, { type: "submit", onClick: () => console.log("Get values: ", getValues()), children: "Enviar" })] }));
|
|
135
137
|
},
|
|
136
138
|
};
|
|
139
|
+
export const CurrencyInputExample = {
|
|
140
|
+
name: "Exemplo de input de moeda",
|
|
141
|
+
args: {
|
|
142
|
+
isCurrency: true,
|
|
143
|
+
hasPrefix: true,
|
|
144
|
+
minimumFractionDigits: 2,
|
|
145
|
+
placeholder: "Digite o valor",
|
|
146
|
+
},
|
|
147
|
+
render: (args) => {
|
|
148
|
+
const { control, register, handleSubmit, getValues, formState: { errors }, } = useForm();
|
|
149
|
+
const onSubmit = (data) => alert(JSON.stringify(data, null, 2));
|
|
150
|
+
const [onChangeValue, setOnChangeValue] = useState();
|
|
151
|
+
const [formData, setFormData] = useState({ currency: "" });
|
|
152
|
+
return (_jsxs("div", { children: [_jsxs(Subtitle, { style: { whiteSpace: "pre-wrap" }, children: ["O input de moeda tem alguns funcionamentos diferentes.", _jsx("br", {}), " Para utiliz\u00E1-lo junto com o react-hook-form ser\u00E1 necess\u00E1rio passar o \"control\" do useForm() e a fun\u00E7\u00E3o onChange dever\u00E1 ficar dentro do register. Al\u00E9m disso, o onChange do input de moeda retorna um objeto da seguinte forma: ", `{ target : { value: number }}`, ", sendo esse number o valor num\u00E9rico do input, ou seja R$ 4,44 vai retornar 4.44. ", _jsx("br", {}), _jsx("br", {}), " Exemplo:", `
|
|
153
|
+
const = {
|
|
154
|
+
control,
|
|
155
|
+
register,
|
|
156
|
+
handleSubmit,
|
|
157
|
+
getValues,
|
|
158
|
+
formState: { errors },
|
|
159
|
+
} = useForm();
|
|
160
|
+
|
|
161
|
+
return <form handleSubmit(onSubmit)>
|
|
162
|
+
<Input
|
|
163
|
+
isCurrency
|
|
164
|
+
hasPrefix
|
|
165
|
+
placeholder="Digite o valor"
|
|
166
|
+
control={control}
|
|
167
|
+
name="currency"
|
|
168
|
+
register={register("currency", {
|
|
169
|
+
required: "Valor é obrigatório",
|
|
170
|
+
onChange: (e) => console.log("Inside onChange: ", e.target.value),
|
|
171
|
+
})}
|
|
172
|
+
error={errors.currency?.message?.toString()}
|
|
173
|
+
/>
|
|
174
|
+
</form>`] }), _jsxs("form", { onSubmit: handleSubmit(onSubmit), style: { display: "flex", flexDirection: "column", gap: 8 }, children: [_jsx(Input, { ...args, control: control, name: "currency", value: formData.currency, register: register("currency", {
|
|
175
|
+
required: "Valor é obrigatório",
|
|
176
|
+
onChange: (e) => setFormData({ currency: e.target.value }),
|
|
177
|
+
}), error: errors.currency?.message?.toString() }), _jsx(Button, { type: "submit", onClick: () => console.log("Get values: ", getValues()), children: "Clique para testar a valida\u00E7\u00E3o" })] }), _jsx("br", {}), _jsx("br", {}), _jsxs(Subtitle, { style: { whiteSpace: "pre-wrap" }, children: ["Para utilizar sem o react-hook-form, basta n\u00E3o passar a prop \"control\" nem a \"register\", utilizando o onChange normalmente.", _jsx("br", {}), "Exemplo:", _jsx("br", {}), `<Input
|
|
178
|
+
isCurrency
|
|
179
|
+
hasPrefix
|
|
180
|
+
placeholder="Digite o valor"
|
|
181
|
+
value={onChangeValue}
|
|
182
|
+
onChange={(e) => setOnChangeValue(e.target.value)}
|
|
183
|
+
/>`] }), _jsx(Input, { isCurrency: true, hasPrefix: true, placeholder: "Digite o valor", value: onChangeValue, onChange: (e) => setOnChangeValue(e.target.value) }), _jsxs("span", { children: ["Valor retornado: ", onChangeValue] })] }));
|
|
184
|
+
},
|
|
185
|
+
};
|
|
137
186
|
//# sourceMappingURL=Input.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/Input.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/Input.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,8 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
12
12
|
isCurrency?: boolean;
|
|
13
13
|
hasPrefix?: boolean;
|
|
14
14
|
minimumFractionDigits?: number;
|
|
15
|
+
control?: any;
|
|
15
16
|
onChange?: (e: any) => void;
|
|
16
17
|
}
|
|
17
|
-
export declare const Input:
|
|
18
|
+
export declare const Input: ({ label, info, error, isLoading, register, mask, maskChar, containerStyles, isCurrency, hasPrefix, minimumFractionDigits, control, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
18
19
|
export {};
|
|
@@ -1,14 +1,31 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
2
|
import { AdditionalInfo, InputContainer, InputWrapper } from "./styles";
|
|
3
|
+
import { Controller } from "react-hook-form";
|
|
4
4
|
import ReactInputMask from "react-input-mask";
|
|
5
5
|
import { useTheme } from "styled-components";
|
|
6
6
|
import { Spinner } from "../../Spinner";
|
|
7
7
|
import { IconExclamation } from "../../icons";
|
|
8
8
|
import { NumberFormatBase } from "react-number-format";
|
|
9
9
|
import { currencyFormatter } from "../../../utils/functions";
|
|
10
|
-
export const Input =
|
|
10
|
+
export const Input = ({ label, info, error, isLoading, register, mask, maskChar = null, containerStyles, isCurrency, hasPrefix, minimumFractionDigits, control, ...props }) => {
|
|
11
11
|
const theme = useTheme();
|
|
12
|
-
return (_jsxs(InputWrapper, { style: { ...containerStyles, width: props.style?.width }, children: [label && _jsx("label", { children: label }), _jsxs(InputContainer, { hasError: !!error, children: [isCurrency ? (_jsx(
|
|
13
|
-
}
|
|
12
|
+
return (_jsxs(InputWrapper, { style: { ...containerStyles, width: props.style?.width }, children: [label && _jsx("label", { children: label }), _jsxs(InputContainer, { hasError: !!error, children: [isCurrency ? (_jsx(CurrencyInput, { control: control, hasPrefix: hasPrefix, minimumFractionDigits: minimumFractionDigits, ...props })) : mask ? (_jsx(MaskInput, { mask: mask, maskChar: maskChar, register: register, ...props })) : (_jsx(NormalInput, { isLoading: isLoading, register: register, ...props })), error && _jsx(IconExclamation, { className: "error-icon" }), isLoading && (_jsx(Spinner, { size: 16, color: theme.colors.neutral.light, style: { position: "absolute", right: 16, top: 12 } }))] }), (!!register || !!error || !!info) && (_jsx(AdditionalInfo, { className: "additional-info", isError: !!error, children: error || info }))] }));
|
|
13
|
+
};
|
|
14
|
+
const NormalInput = ({ isLoading, register, ...props }) => {
|
|
15
|
+
return (_jsx("input", { ...props, disabled: isLoading || props.disabled, ...register }));
|
|
16
|
+
};
|
|
17
|
+
const CurrencyInput = ({ control, name, hasPrefix, minimumFractionDigits = 2, value, register, isLoading, ...props }) => {
|
|
18
|
+
const multiplicator = 10 ** minimumFractionDigits;
|
|
19
|
+
return control ? (_jsx(Controller, { name: name || "", control: control, render: ({ field }) => (_jsx(NumberFormatBase, { format: (e) => currencyFormatter(parseFloat(e), hasPrefix, minimumFractionDigits), value: Number(value) * multiplicator, ...props, onValueChange: (e) => {
|
|
20
|
+
field.onChange?.(e.floatValue ? e.floatValue / multiplicator : undefined);
|
|
21
|
+
}, defaultValue: props.defaultValue, disabled: isLoading || props.disabled, type: "text" })) })) : (_jsx(NumberFormatBase, { format: (e) => currencyFormatter(parseFloat(e), hasPrefix, minimumFractionDigits), ...props, value: Number(value) * multiplicator, defaultValue: props.defaultValue, disabled: isLoading || props.disabled, onChange: undefined, onValueChange: (e) => props.onChange?.({
|
|
22
|
+
target: {
|
|
23
|
+
//@ts-ignore
|
|
24
|
+
value: e.floatValue ? e.floatValue / multiplicator : undefined,
|
|
25
|
+
},
|
|
26
|
+
}), type: "text" }));
|
|
27
|
+
};
|
|
28
|
+
const MaskInput = ({ mask, maskChar, register, isLoading, ...props }) => {
|
|
29
|
+
return (_jsx(ReactInputMask, { mask: mask, maskChar: maskChar, ...props, disabled: isLoading || props.disabled, ...register }));
|
|
30
|
+
};
|
|
14
31
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/FormItens/Input/index.tsx"],"names":[],"mappings":"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"}
|