@arkyn/components 1.2.0
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/bundle.js +1348 -0
- package/dist/bundle.umd.cjs +32 -0
- package/dist/components/Badge/index.d.ts +5 -0
- package/dist/components/Badge/index.d.ts.map +1 -0
- package/dist/components/Badge/index.js +8 -0
- package/dist/components/Breadcrumb/index.d.ts +6 -0
- package/dist/components/Breadcrumb/index.d.ts.map +1 -0
- package/dist/components/Breadcrumb/index.js +18 -0
- package/dist/components/Button/index.d.ts +5 -0
- package/dist/components/Button/index.d.ts.map +1 -0
- package/dist/components/Button/index.js +9 -0
- package/dist/components/Divider/index.d.ts +5 -0
- package/dist/components/Divider/index.d.ts.map +1 -0
- package/dist/components/Divider/index.js +8 -0
- package/dist/components/Form/FormController/index.d.ts +6 -0
- package/dist/components/Form/FormController/index.d.ts.map +1 -0
- package/dist/components/Form/FormController/index.js +17 -0
- package/dist/components/Form/FormError/index.d.ts +4 -0
- package/dist/components/Form/FormError/index.d.ts.map +1 -0
- package/dist/components/Form/FormError/index.js +10 -0
- package/dist/components/Form/FormLabel/index.d.ts +5 -0
- package/dist/components/Form/FormLabel/index.d.ts.map +1 -0
- package/dist/components/Form/FormLabel/index.js +9 -0
- package/dist/components/Form/index.d.ts +4 -0
- package/dist/components/Form/index.d.ts.map +1 -0
- package/dist/components/Form/index.js +3 -0
- package/dist/components/IconButton/index.d.ts +5 -0
- package/dist/components/IconButton/index.d.ts.map +1 -0
- package/dist/components/IconButton/index.js +15 -0
- package/dist/components/Input/CpfCpnjInput/getConfig.d.ts +308 -0
- package/dist/components/Input/CpfCpnjInput/getConfig.d.ts.map +1 -0
- package/dist/components/Input/CpfCpnjInput/getConfig.js +35 -0
- package/dist/components/Input/CpfCpnjInput/index.d.ts +4 -0
- package/dist/components/Input/CpfCpnjInput/index.d.ts.map +1 -0
- package/dist/components/Input/CpfCpnjInput/index.js +47 -0
- package/dist/components/Input/CpfCpnjInput/utils.d.ts +10 -0
- package/dist/components/Input/CpfCpnjInput/utils.d.ts.map +1 -0
- package/dist/components/Input/CpfCpnjInput/utils.js +24 -0
- package/dist/components/Input/CurrencyInput/getConfig.d.ts +309 -0
- package/dist/components/Input/CurrencyInput/getConfig.d.ts.map +1 -0
- package/dist/components/Input/CurrencyInput/getConfig.js +37 -0
- package/dist/components/Input/CurrencyInput/index.d.ts +4 -0
- package/dist/components/Input/CurrencyInput/index.d.ts.map +1 -0
- package/dist/components/Input/CurrencyInput/index.js +41 -0
- package/dist/components/Input/CurrencyInput/utils.d.ts +11 -0
- package/dist/components/Input/CurrencyInput/utils.d.ts.map +1 -0
- package/dist/components/Input/CurrencyInput/utils.js +39 -0
- package/dist/components/Input/MaskInput/getConfig.d.ts +312 -0
- package/dist/components/Input/MaskInput/getConfig.d.ts.map +1 -0
- package/dist/components/Input/MaskInput/getConfig.js +36 -0
- package/dist/components/Input/MaskInput/index.d.ts +4 -0
- package/dist/components/Input/MaskInput/index.d.ts.map +1 -0
- package/dist/components/Input/MaskInput/index.js +42 -0
- package/dist/components/Input/SimpleInput/getConfig.d.ts +308 -0
- package/dist/components/Input/SimpleInput/getConfig.d.ts.map +1 -0
- package/dist/components/Input/SimpleInput/getConfig.js +35 -0
- package/dist/components/Input/SimpleInput/index.d.ts +4 -0
- package/dist/components/Input/SimpleInput/index.d.ts.map +1 -0
- package/dist/components/Input/SimpleInput/index.js +34 -0
- package/dist/components/Input/index.d.ts +5 -0
- package/dist/components/Input/index.d.ts.map +1 -0
- package/dist/components/Input/index.js +16 -0
- package/dist/components/Input/utils/morpheme.d.ts +4 -0
- package/dist/components/Input/utils/morpheme.d.ts.map +1 -0
- package/dist/components/Input/utils/morpheme.js +10 -0
- package/dist/components/Modal/Container/index.d.ts +10 -0
- package/dist/components/Modal/Container/index.d.ts.map +1 -0
- package/dist/components/Modal/Container/index.js +12 -0
- package/dist/components/Modal/Footer/index.d.ts +5 -0
- package/dist/components/Modal/Footer/index.d.ts.map +1 -0
- package/dist/components/Modal/Footer/index.js +8 -0
- package/dist/components/Modal/Header/index.d.ts +5 -0
- package/dist/components/Modal/Header/index.d.ts.map +1 -0
- package/dist/components/Modal/Header/index.js +13 -0
- package/dist/components/Modal/index.d.ts +9 -0
- package/dist/components/Modal/index.d.ts.map +1 -0
- package/dist/components/Modal/index.js +4 -0
- package/dist/components/Tooltip/index.d.ts +5 -0
- package/dist/components/Tooltip/index.d.ts.map +1 -0
- package/dist/components/Tooltip/index.js +7 -0
- package/dist/config/buildBadgeConfig.d.ts +274 -0
- package/dist/config/buildBadgeConfig.d.ts.map +1 -0
- package/dist/config/buildBadgeConfig.js +15 -0
- package/dist/config/buildBreadcrumLinkConfig.d.ts +288 -0
- package/dist/config/buildBreadcrumLinkConfig.d.ts.map +1 -0
- package/dist/config/buildBreadcrumLinkConfig.js +14 -0
- package/dist/config/buildBreadcrumbConfig.d.ts +272 -0
- package/dist/config/buildBreadcrumbConfig.d.ts.map +1 -0
- package/dist/config/buildBreadcrumbConfig.js +6 -0
- package/dist/config/buildButtonConfig.d.ts +286 -0
- package/dist/config/buildButtonConfig.d.ts.map +1 -0
- package/dist/config/buildButtonConfig.js +18 -0
- package/dist/config/buildFormLabelConfig.d.ts +274 -0
- package/dist/config/buildFormLabelConfig.d.ts.map +1 -0
- package/dist/config/buildFormLabelConfig.js +10 -0
- package/dist/index.d.ts +10 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +13 -0
- package/dist/style.css +1 -0
- package/dist/utils/generateIcon.d.ts +4 -0
- package/dist/utils/generateIcon.d.ts.map +1 -0
- package/dist/utils/generateIcon.js +7 -0
- package/package.json +30 -0
- package/src/components/Badge/index.tsx +18 -0
- package/src/components/Badge/styles.css +119 -0
- package/src/components/Breadcrumb/index.tsx +35 -0
- package/src/components/Breadcrumb/styles.css +39 -0
- package/src/components/Button/index.tsx +27 -0
- package/src/components/Button/styles.css +363 -0
- package/src/components/Divider/index.tsx +17 -0
- package/src/components/Divider/styles.css +17 -0
- package/src/components/Form/FormController/index.tsx +36 -0
- package/src/components/Form/FormController/styles.css +5 -0
- package/src/components/Form/FormError/index.tsx +11 -0
- package/src/components/Form/FormError/styles.css +6 -0
- package/src/components/Form/FormLabel/index.tsx +13 -0
- package/src/components/Form/FormLabel/styles.css +15 -0
- package/src/components/Form/index.ts +3 -0
- package/src/components/IconButton/index.tsx +44 -0
- package/src/components/IconButton/styles.css +318 -0
- package/src/components/Input/CpfCpnjInput/getConfig.tsx +60 -0
- package/src/components/Input/CpfCpnjInput/index.tsx +112 -0
- package/src/components/Input/CpfCpnjInput/utils.ts +30 -0
- package/src/components/Input/CurrencyInput/getConfig.tsx +64 -0
- package/src/components/Input/CurrencyInput/index.tsx +103 -0
- package/src/components/Input/CurrencyInput/utils.ts +56 -0
- package/src/components/Input/MaskInput/getConfig.tsx +62 -0
- package/src/components/Input/MaskInput/index.tsx +89 -0
- package/src/components/Input/SimpleInput/getConfig.tsx +60 -0
- package/src/components/Input/SimpleInput/index.tsx +87 -0
- package/src/components/Input/index.tsx +17 -0
- package/src/components/Input/styles.css +223 -0
- package/src/components/Input/utils/morpheme.tsx +19 -0
- package/src/components/Modal/Container/index.tsx +53 -0
- package/src/components/Modal/Container/styles.css +35 -0
- package/src/components/Modal/Footer/index.tsx +12 -0
- package/src/components/Modal/Footer/styles.css +27 -0
- package/src/components/Modal/Header/index.tsx +26 -0
- package/src/components/Modal/Header/styles.css +36 -0
- package/src/components/Modal/index.ts +5 -0
- package/src/components/Tooltip/index.tsx +26 -0
- package/src/components/Tooltip/styles.css +112 -0
- package/src/config/buildBadgeConfig.tsx +32 -0
- package/src/config/buildBreadcrumLinkConfig.tsx +27 -0
- package/src/config/buildBreadcrumbConfig.tsx +12 -0
- package/src/config/buildButtonConfig.tsx +38 -0
- package/src/config/buildFormLabelConfig.tsx +17 -0
- package/src/index.ts +16 -0
- package/src/utils/generateIcon.tsx +9 -0
- package/tsconfig.json +23 -0
- package/vite.config.js +25 -0
@@ -0,0 +1,35 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Loader2 } from "lucide-react";
|
3
|
+
import { morpheme } from "../utils/morpheme";
|
4
|
+
function getConfig(props, isFocused) {
|
5
|
+
const { isLoading, isError, size = "md", className: baseClassName = "", variant = "solid", prefix: basePrefix, sufix: baseSufix, leftIcon: LeftIcon, rightIcon: RightIcon, disabled, readOnly, onFocus, onBlur, title, style, onChange, ...rest } = props;
|
6
|
+
const loadingPosition = RightIcon ? "right" : "left";
|
7
|
+
const hasPrefix = !!basePrefix ? "hasPrefix" : "";
|
8
|
+
const hasSufix = !!baseSufix ? "hasSufix" : "";
|
9
|
+
const errored = isError ? "errored" : "";
|
10
|
+
const opacity = disabled || readOnly || isLoading ? "opacity" : "";
|
11
|
+
const focused = isFocused ? "focused" : "";
|
12
|
+
const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
|
13
|
+
const iconSizes = { md: 14, lg: 16 };
|
14
|
+
const iconSize = iconSizes[size];
|
15
|
+
return {
|
16
|
+
isLoading,
|
17
|
+
className,
|
18
|
+
prefix: morpheme(basePrefix, iconSize, "prefix"),
|
19
|
+
sufix: morpheme(baseSufix, iconSize, "sufix"),
|
20
|
+
LeftIcon,
|
21
|
+
RightIcon,
|
22
|
+
disabled,
|
23
|
+
readOnly,
|
24
|
+
onFocus,
|
25
|
+
onBlur,
|
26
|
+
title,
|
27
|
+
style,
|
28
|
+
onChange,
|
29
|
+
loadingPosition,
|
30
|
+
iconSize: iconSize,
|
31
|
+
Spinner: _jsx(Loader2, { className: "spinner", size: iconSize, strokeWidth: 2.5 }),
|
32
|
+
...rest,
|
33
|
+
};
|
34
|
+
}
|
35
|
+
export { getConfig };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CpfCpnjInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAStD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAoG7C;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { useRef, useState } from "react";
|
3
|
+
import { useFormController } from "../../Form/FormController";
|
4
|
+
import { getConfig } from "./getConfig";
|
5
|
+
import { MAX_LENGTH, TYPES, applyMask, clear, getMask } from "./utils";
|
6
|
+
function CpfCnpjInput(props) {
|
7
|
+
const [isFocused, setIsFocused] = useState(false);
|
8
|
+
const [inputValue, setInputValue] = useState(clear(props?.defaultValue || ""));
|
9
|
+
const baseRef = useRef(null);
|
10
|
+
const { inputRef, id, error } = useFormController();
|
11
|
+
const ref = inputRef || baseRef;
|
12
|
+
const isError = props.isError || !!error;
|
13
|
+
const { disabled, title, style, className, prefix, sufix, iconSize, loadingPosition, isLoading, LeftIcon, readOnly, onFocus, onBlur, RightIcon, Spinner, onChange, value, defaultValue = "", ...rest } = getConfig({ ...props, id, isError }, isFocused);
|
14
|
+
const showLeftIcon = LeftIcon && !isLoading;
|
15
|
+
const showRightIcon = RightIcon && !isLoading;
|
16
|
+
const showLeftSpinner = loadingPosition === "left" && isLoading;
|
17
|
+
const showRightSpinner = loadingPosition === "right" && isLoading;
|
18
|
+
function handleSectionClick() {
|
19
|
+
if (disabled || !ref?.current)
|
20
|
+
return;
|
21
|
+
setIsFocused(true);
|
22
|
+
ref.current.focus();
|
23
|
+
}
|
24
|
+
function handleChange(event) {
|
25
|
+
let value = clear(event.target.value);
|
26
|
+
const mask = getMask(value);
|
27
|
+
let nextLength = value.length;
|
28
|
+
if (nextLength > MAX_LENGTH)
|
29
|
+
return;
|
30
|
+
value = applyMask(value, TYPES[mask]);
|
31
|
+
event.target.value = value;
|
32
|
+
setInputValue(value);
|
33
|
+
onChange && onChange(event);
|
34
|
+
}
|
35
|
+
function handleFocus(e) {
|
36
|
+
setIsFocused(true);
|
37
|
+
if (onFocus)
|
38
|
+
onFocus(e);
|
39
|
+
}
|
40
|
+
function handleBlur(e) {
|
41
|
+
setIsFocused(false);
|
42
|
+
if (onBlur)
|
43
|
+
onBlur(e);
|
44
|
+
}
|
45
|
+
return (_jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [prefix, showLeftSpinner && Spinner, showLeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsx("input", { disabled: disabled || isLoading, readOnly: readOnly, ref: ref, value: value || inputValue, onFocus: handleFocus, onChange: handleChange, onBlur: handleBlur, ...rest }), showRightIcon && _jsx(RightIcon, { size: iconSize, strokeWidth: 2.5 }), showRightSpinner && Spinner, sufix] }));
|
46
|
+
}
|
47
|
+
export { CpfCnpjInput };
|
@@ -0,0 +1,10 @@
|
|
1
|
+
declare function clear(value: string): string;
|
2
|
+
declare function applyMask(value: string, mask: "CPF" | "CNPJ"): string;
|
3
|
+
declare function getMask(value: string): "CNPJ" | "CPF";
|
4
|
+
declare const TYPES: {
|
5
|
+
CPF: string;
|
6
|
+
CNPJ: string;
|
7
|
+
};
|
8
|
+
declare const MAX_LENGTH: number;
|
9
|
+
export { clear, applyMask, MAX_LENGTH, TYPES, getMask };
|
10
|
+
//# sourceMappingURL=utils.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CpfCpnjInput/utils.ts"],"names":[],"mappings":"AAAA,iBAAS,KAAK,CAAC,KAAK,EAAE,MAAM,UAE3B;AAED,iBAAS,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,MAAM,UAYrD;AAED,iBAAS,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAE9C;AAED,QAAA,MAAM,KAAK;;;CAGV,CAAC;AAEF,QAAA,MAAM,UAAU,QAA2B,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
function clear(value) {
|
2
|
+
return value && value.replace(/[^0-9]/g, "");
|
3
|
+
}
|
4
|
+
function applyMask(value, mask) {
|
5
|
+
let result = "";
|
6
|
+
let inc = 0;
|
7
|
+
Array.from(value).forEach((letter, index) => {
|
8
|
+
if (!mask[index + inc].match(/[0-9]/)) {
|
9
|
+
result += mask[index + inc];
|
10
|
+
inc++;
|
11
|
+
}
|
12
|
+
result += letter;
|
13
|
+
});
|
14
|
+
return result;
|
15
|
+
}
|
16
|
+
function getMask(value) {
|
17
|
+
return value.length > 11 ? "CNPJ" : "CPF";
|
18
|
+
}
|
19
|
+
const TYPES = {
|
20
|
+
CPF: "999.999.999-999",
|
21
|
+
CNPJ: "99.999.999/9999-99",
|
22
|
+
};
|
23
|
+
const MAX_LENGTH = clear(TYPES.CNPJ).length;
|
24
|
+
export { clear, applyMask, MAX_LENGTH, TYPES, getMask };
|
@@ -0,0 +1,309 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { CurrencyInputProps } from "@arkyn/types";
|
3
|
+
declare function getConfig(props: CurrencyInputProps, isFocused: boolean): {
|
4
|
+
suppressHydrationWarning?: boolean;
|
5
|
+
color?: string;
|
6
|
+
height?: string | number;
|
7
|
+
id?: string;
|
8
|
+
lang?: string;
|
9
|
+
min?: string | number;
|
10
|
+
name: string;
|
11
|
+
type: "currency";
|
12
|
+
width?: string | number;
|
13
|
+
role?: import("react").AriaRole;
|
14
|
+
tabIndex?: number;
|
15
|
+
"aria-activedescendant"?: string;
|
16
|
+
"aria-atomic"?: boolean | "true" | "false";
|
17
|
+
"aria-autocomplete"?: "list" | "none" | "inline" | "both";
|
18
|
+
"aria-braillelabel"?: string;
|
19
|
+
"aria-brailleroledescription"?: string;
|
20
|
+
"aria-busy"?: boolean | "true" | "false";
|
21
|
+
"aria-checked"?: boolean | "true" | "false" | "mixed";
|
22
|
+
"aria-colcount"?: number;
|
23
|
+
"aria-colindex"?: number;
|
24
|
+
"aria-colindextext"?: string;
|
25
|
+
"aria-colspan"?: number;
|
26
|
+
"aria-controls"?: string;
|
27
|
+
"aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time";
|
28
|
+
"aria-describedby"?: string;
|
29
|
+
"aria-description"?: string;
|
30
|
+
"aria-details"?: string;
|
31
|
+
"aria-disabled"?: boolean | "true" | "false";
|
32
|
+
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup";
|
33
|
+
"aria-errormessage"?: string;
|
34
|
+
"aria-expanded"?: boolean | "true" | "false";
|
35
|
+
"aria-flowto"?: string;
|
36
|
+
"aria-grabbed"?: boolean | "true" | "false";
|
37
|
+
"aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree";
|
38
|
+
"aria-hidden"?: boolean | "true" | "false";
|
39
|
+
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
|
40
|
+
"aria-keyshortcuts"?: string;
|
41
|
+
"aria-label"?: string;
|
42
|
+
"aria-labelledby"?: string;
|
43
|
+
"aria-level"?: number;
|
44
|
+
"aria-live"?: "off" | "assertive" | "polite";
|
45
|
+
"aria-modal"?: boolean | "true" | "false";
|
46
|
+
"aria-multiline"?: boolean | "true" | "false";
|
47
|
+
"aria-multiselectable"?: boolean | "true" | "false";
|
48
|
+
"aria-orientation"?: "horizontal" | "vertical";
|
49
|
+
"aria-owns"?: string;
|
50
|
+
"aria-placeholder"?: string;
|
51
|
+
"aria-posinset"?: number;
|
52
|
+
"aria-pressed"?: boolean | "true" | "false" | "mixed";
|
53
|
+
"aria-readonly"?: boolean | "true" | "false";
|
54
|
+
"aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
|
55
|
+
"aria-required"?: boolean | "true" | "false";
|
56
|
+
"aria-roledescription"?: string;
|
57
|
+
"aria-rowcount"?: number;
|
58
|
+
"aria-rowindex"?: number;
|
59
|
+
"aria-rowindextext"?: string;
|
60
|
+
"aria-rowspan"?: number;
|
61
|
+
"aria-selected"?: boolean | "true" | "false";
|
62
|
+
"aria-setsize"?: number;
|
63
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other";
|
64
|
+
"aria-valuemax"?: number;
|
65
|
+
"aria-valuemin"?: number;
|
66
|
+
"aria-valuenow"?: number;
|
67
|
+
"aria-valuetext"?: string;
|
68
|
+
children?: import("react").ReactNode;
|
69
|
+
dangerouslySetInnerHTML?: {
|
70
|
+
__html: string | TrustedHTML;
|
71
|
+
};
|
72
|
+
onCopy?: import("react").ClipboardEventHandler<HTMLInputElement>;
|
73
|
+
onCopyCapture?: import("react").ClipboardEventHandler<HTMLInputElement>;
|
74
|
+
onCut?: import("react").ClipboardEventHandler<HTMLInputElement>;
|
75
|
+
onCutCapture?: import("react").ClipboardEventHandler<HTMLInputElement>;
|
76
|
+
onPaste?: import("react").ClipboardEventHandler<HTMLInputElement>;
|
77
|
+
onPasteCapture?: import("react").ClipboardEventHandler<HTMLInputElement>;
|
78
|
+
onCompositionEnd?: import("react").CompositionEventHandler<HTMLInputElement>;
|
79
|
+
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLInputElement>;
|
80
|
+
onCompositionStart?: import("react").CompositionEventHandler<HTMLInputElement>;
|
81
|
+
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLInputElement>;
|
82
|
+
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLInputElement>;
|
83
|
+
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLInputElement>;
|
84
|
+
onFocusCapture?: import("react").FocusEventHandler<HTMLInputElement>;
|
85
|
+
onBlurCapture?: import("react").FocusEventHandler<HTMLInputElement>;
|
86
|
+
onChangeCapture?: import("react").FormEventHandler<HTMLInputElement>;
|
87
|
+
onBeforeInput?: import("react").FormEventHandler<HTMLInputElement>;
|
88
|
+
onBeforeInputCapture?: import("react").FormEventHandler<HTMLInputElement>;
|
89
|
+
onInput?: import("react").FormEventHandler<HTMLInputElement>;
|
90
|
+
onInputCapture?: import("react").FormEventHandler<HTMLInputElement>;
|
91
|
+
onReset?: import("react").FormEventHandler<HTMLInputElement>;
|
92
|
+
onResetCapture?: import("react").FormEventHandler<HTMLInputElement>;
|
93
|
+
onSubmit?: import("react").FormEventHandler<HTMLInputElement>;
|
94
|
+
onSubmitCapture?: import("react").FormEventHandler<HTMLInputElement>;
|
95
|
+
onInvalid?: import("react").FormEventHandler<HTMLInputElement>;
|
96
|
+
onInvalidCapture?: import("react").FormEventHandler<HTMLInputElement>;
|
97
|
+
onLoad?: import("react").ReactEventHandler<HTMLInputElement>;
|
98
|
+
onLoadCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
99
|
+
onError?: import("react").ReactEventHandler<HTMLInputElement>;
|
100
|
+
onErrorCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
101
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLInputElement>;
|
102
|
+
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLInputElement>;
|
103
|
+
onKeyPress?: import("react").KeyboardEventHandler<HTMLInputElement>;
|
104
|
+
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLInputElement>;
|
105
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLInputElement>;
|
106
|
+
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLInputElement>;
|
107
|
+
onAbort?: import("react").ReactEventHandler<HTMLInputElement>;
|
108
|
+
onAbortCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
109
|
+
onCanPlay?: import("react").ReactEventHandler<HTMLInputElement>;
|
110
|
+
onCanPlayCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
111
|
+
onCanPlayThrough?: import("react").ReactEventHandler<HTMLInputElement>;
|
112
|
+
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
113
|
+
onDurationChange?: import("react").ReactEventHandler<HTMLInputElement>;
|
114
|
+
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
115
|
+
onEmptied?: import("react").ReactEventHandler<HTMLInputElement>;
|
116
|
+
onEmptiedCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
117
|
+
onEncrypted?: import("react").ReactEventHandler<HTMLInputElement>;
|
118
|
+
onEncryptedCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
119
|
+
onEnded?: import("react").ReactEventHandler<HTMLInputElement>;
|
120
|
+
onEndedCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
121
|
+
onLoadedData?: import("react").ReactEventHandler<HTMLInputElement>;
|
122
|
+
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
123
|
+
onLoadedMetadata?: import("react").ReactEventHandler<HTMLInputElement>;
|
124
|
+
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
125
|
+
onLoadStart?: import("react").ReactEventHandler<HTMLInputElement>;
|
126
|
+
onLoadStartCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
127
|
+
onPause?: import("react").ReactEventHandler<HTMLInputElement>;
|
128
|
+
onPauseCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
129
|
+
onPlay?: import("react").ReactEventHandler<HTMLInputElement>;
|
130
|
+
onPlayCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
131
|
+
onPlaying?: import("react").ReactEventHandler<HTMLInputElement>;
|
132
|
+
onPlayingCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
133
|
+
onProgress?: import("react").ReactEventHandler<HTMLInputElement>;
|
134
|
+
onProgressCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
135
|
+
onRateChange?: import("react").ReactEventHandler<HTMLInputElement>;
|
136
|
+
onRateChangeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
137
|
+
onResize?: import("react").ReactEventHandler<HTMLInputElement>;
|
138
|
+
onResizeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
139
|
+
onSeeked?: import("react").ReactEventHandler<HTMLInputElement>;
|
140
|
+
onSeekedCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
141
|
+
onSeeking?: import("react").ReactEventHandler<HTMLInputElement>;
|
142
|
+
onSeekingCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
143
|
+
onStalled?: import("react").ReactEventHandler<HTMLInputElement>;
|
144
|
+
onStalledCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
145
|
+
onSuspend?: import("react").ReactEventHandler<HTMLInputElement>;
|
146
|
+
onSuspendCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
147
|
+
onTimeUpdate?: import("react").ReactEventHandler<HTMLInputElement>;
|
148
|
+
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
149
|
+
onVolumeChange?: import("react").ReactEventHandler<HTMLInputElement>;
|
150
|
+
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
151
|
+
onWaiting?: import("react").ReactEventHandler<HTMLInputElement>;
|
152
|
+
onWaitingCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
153
|
+
onAuxClick?: import("react").MouseEventHandler<HTMLInputElement>;
|
154
|
+
onAuxClickCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
155
|
+
onClick?: import("react").MouseEventHandler<HTMLInputElement>;
|
156
|
+
onClickCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
157
|
+
onContextMenu?: import("react").MouseEventHandler<HTMLInputElement>;
|
158
|
+
onContextMenuCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
159
|
+
onDoubleClick?: import("react").MouseEventHandler<HTMLInputElement>;
|
160
|
+
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
161
|
+
onDrag?: import("react").DragEventHandler<HTMLInputElement>;
|
162
|
+
onDragCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
163
|
+
onDragEnd?: import("react").DragEventHandler<HTMLInputElement>;
|
164
|
+
onDragEndCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
165
|
+
onDragEnter?: import("react").DragEventHandler<HTMLInputElement>;
|
166
|
+
onDragEnterCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
167
|
+
onDragExit?: import("react").DragEventHandler<HTMLInputElement>;
|
168
|
+
onDragExitCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
169
|
+
onDragLeave?: import("react").DragEventHandler<HTMLInputElement>;
|
170
|
+
onDragLeaveCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
171
|
+
onDragOver?: import("react").DragEventHandler<HTMLInputElement>;
|
172
|
+
onDragOverCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
173
|
+
onDragStart?: import("react").DragEventHandler<HTMLInputElement>;
|
174
|
+
onDragStartCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
175
|
+
onDrop?: import("react").DragEventHandler<HTMLInputElement>;
|
176
|
+
onDropCapture?: import("react").DragEventHandler<HTMLInputElement>;
|
177
|
+
onMouseDown?: import("react").MouseEventHandler<HTMLInputElement>;
|
178
|
+
onMouseDownCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
179
|
+
onMouseEnter?: import("react").MouseEventHandler<HTMLInputElement>;
|
180
|
+
onMouseLeave?: import("react").MouseEventHandler<HTMLInputElement>;
|
181
|
+
onMouseMove?: import("react").MouseEventHandler<HTMLInputElement>;
|
182
|
+
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
183
|
+
onMouseOut?: import("react").MouseEventHandler<HTMLInputElement>;
|
184
|
+
onMouseOutCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
185
|
+
onMouseOver?: import("react").MouseEventHandler<HTMLInputElement>;
|
186
|
+
onMouseOverCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
187
|
+
onMouseUp?: import("react").MouseEventHandler<HTMLInputElement>;
|
188
|
+
onMouseUpCapture?: import("react").MouseEventHandler<HTMLInputElement>;
|
189
|
+
onSelect?: import("react").ReactEventHandler<HTMLInputElement>;
|
190
|
+
onSelectCapture?: import("react").ReactEventHandler<HTMLInputElement>;
|
191
|
+
onTouchCancel?: import("react").TouchEventHandler<HTMLInputElement>;
|
192
|
+
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLInputElement>;
|
193
|
+
onTouchEnd?: import("react").TouchEventHandler<HTMLInputElement>;
|
194
|
+
onTouchEndCapture?: import("react").TouchEventHandler<HTMLInputElement>;
|
195
|
+
onTouchMove?: import("react").TouchEventHandler<HTMLInputElement>;
|
196
|
+
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLInputElement>;
|
197
|
+
onTouchStart?: import("react").TouchEventHandler<HTMLInputElement>;
|
198
|
+
onTouchStartCapture?: import("react").TouchEventHandler<HTMLInputElement>;
|
199
|
+
onPointerDown?: import("react").PointerEventHandler<HTMLInputElement>;
|
200
|
+
onPointerDownCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
201
|
+
onPointerMove?: import("react").PointerEventHandler<HTMLInputElement>;
|
202
|
+
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
203
|
+
onPointerUp?: import("react").PointerEventHandler<HTMLInputElement>;
|
204
|
+
onPointerUpCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
205
|
+
onPointerCancel?: import("react").PointerEventHandler<HTMLInputElement>;
|
206
|
+
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
207
|
+
onPointerEnter?: import("react").PointerEventHandler<HTMLInputElement>;
|
208
|
+
onPointerLeave?: import("react").PointerEventHandler<HTMLInputElement>;
|
209
|
+
onPointerOver?: import("react").PointerEventHandler<HTMLInputElement>;
|
210
|
+
onPointerOverCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
211
|
+
onPointerOut?: import("react").PointerEventHandler<HTMLInputElement>;
|
212
|
+
onPointerOutCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
213
|
+
onGotPointerCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
214
|
+
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
215
|
+
onLostPointerCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
216
|
+
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLInputElement>;
|
217
|
+
onScroll?: import("react").UIEventHandler<HTMLInputElement>;
|
218
|
+
onScrollCapture?: import("react").UIEventHandler<HTMLInputElement>;
|
219
|
+
onWheel?: import("react").WheelEventHandler<HTMLInputElement>;
|
220
|
+
onWheelCapture?: import("react").WheelEventHandler<HTMLInputElement>;
|
221
|
+
onAnimationStart?: import("react").AnimationEventHandler<HTMLInputElement>;
|
222
|
+
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLInputElement>;
|
223
|
+
onAnimationEnd?: import("react").AnimationEventHandler<HTMLInputElement>;
|
224
|
+
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLInputElement>;
|
225
|
+
onAnimationIteration?: import("react").AnimationEventHandler<HTMLInputElement>;
|
226
|
+
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLInputElement>;
|
227
|
+
onTransitionEnd?: import("react").TransitionEventHandler<HTMLInputElement>;
|
228
|
+
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement>;
|
229
|
+
defaultChecked?: boolean;
|
230
|
+
suppressContentEditableWarning?: boolean;
|
231
|
+
accessKey?: string;
|
232
|
+
autoFocus?: boolean;
|
233
|
+
contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only";
|
234
|
+
contextMenu?: string;
|
235
|
+
dir?: string;
|
236
|
+
draggable?: boolean | "true" | "false";
|
237
|
+
hidden?: boolean;
|
238
|
+
nonce?: string;
|
239
|
+
slot?: string;
|
240
|
+
spellCheck?: boolean | "true" | "false";
|
241
|
+
translate?: "yes" | "no";
|
242
|
+
radioGroup?: string;
|
243
|
+
about?: string;
|
244
|
+
content?: string;
|
245
|
+
datatype?: string;
|
246
|
+
inlist?: any;
|
247
|
+
property?: string;
|
248
|
+
rel?: string;
|
249
|
+
resource?: string;
|
250
|
+
rev?: string;
|
251
|
+
typeof?: string;
|
252
|
+
vocab?: string;
|
253
|
+
autoCapitalize?: string;
|
254
|
+
autoCorrect?: string;
|
255
|
+
autoSave?: string;
|
256
|
+
itemProp?: string;
|
257
|
+
itemScope?: boolean;
|
258
|
+
itemType?: string;
|
259
|
+
itemID?: string;
|
260
|
+
itemRef?: string;
|
261
|
+
results?: number;
|
262
|
+
security?: string;
|
263
|
+
unselectable?: "on" | "off";
|
264
|
+
inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
|
265
|
+
is?: string;
|
266
|
+
form?: string;
|
267
|
+
list?: string;
|
268
|
+
step?: string | number;
|
269
|
+
formAction?: string;
|
270
|
+
formEncType?: string;
|
271
|
+
formMethod?: string;
|
272
|
+
formNoValidate?: boolean;
|
273
|
+
formTarget?: string;
|
274
|
+
accept?: string;
|
275
|
+
alt?: string;
|
276
|
+
autoComplete?: import("react").HTMLInputAutoCompleteAttribute;
|
277
|
+
capture?: boolean | "user" | "environment";
|
278
|
+
checked?: boolean;
|
279
|
+
enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send";
|
280
|
+
maxLength?: number;
|
281
|
+
minLength?: number;
|
282
|
+
multiple?: boolean;
|
283
|
+
pattern?: string;
|
284
|
+
placeholder?: string;
|
285
|
+
required?: boolean;
|
286
|
+
src?: string;
|
287
|
+
defaultValue?: number;
|
288
|
+
value?: number;
|
289
|
+
isLoading: boolean;
|
290
|
+
className: string;
|
291
|
+
prefix: import("react/jsx-runtime").JSX.Element;
|
292
|
+
sufix: import("react/jsx-runtime").JSX.Element;
|
293
|
+
LeftIcon: import("lucide-react").LucideIcon;
|
294
|
+
RightIcon: import("lucide-react").LucideIcon;
|
295
|
+
disabled: boolean;
|
296
|
+
readOnly: boolean;
|
297
|
+
onFocus: import("react").FocusEventHandler<HTMLInputElement>;
|
298
|
+
onBlur: import("react").FocusEventHandler<HTMLInputElement>;
|
299
|
+
title: string;
|
300
|
+
style: import("react").CSSProperties;
|
301
|
+
max: number;
|
302
|
+
onChange: (value: number) => void;
|
303
|
+
showCents: boolean;
|
304
|
+
loadingPosition: string;
|
305
|
+
iconSize: number;
|
306
|
+
Spinner: import("react/jsx-runtime").JSX.Element;
|
307
|
+
};
|
308
|
+
export { getConfig };
|
309
|
+
//# sourceMappingURL=getConfig.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"getConfig.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CurrencyInput/getConfig.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAKvD,iBAAS,SAAS,CAAC,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwD/D;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
+
import { Loader2 } from "lucide-react";
|
3
|
+
import { morpheme } from "../utils/morpheme";
|
4
|
+
function getConfig(props, isFocused) {
|
5
|
+
const { isLoading, isError, size = "md", className: baseClassName = "", variant = "solid", prefix: basePrefix, sufix: baseSufix, leftIcon: LeftIcon, rightIcon: RightIcon, disabled, readOnly, onFocus, onBlur, title, style, showCents = false, max = 1000000000, onChange, ...rest } = props;
|
6
|
+
const loadingPosition = RightIcon ? "right" : "left";
|
7
|
+
const hasPrefix = !!basePrefix ? "hasPrefix" : "";
|
8
|
+
const hasSufix = !!baseSufix ? "hasSufix" : "";
|
9
|
+
const errored = isError ? "errored" : "";
|
10
|
+
const opacity = disabled || readOnly || isLoading ? "opacity" : "";
|
11
|
+
const focused = isFocused ? "focused" : "";
|
12
|
+
const className = `arkyn_input ${hasPrefix} ${hasSufix} ${variant} ${size} ${opacity} ${errored} ${focused} ${baseClassName}`;
|
13
|
+
const iconSizes = { md: 14, lg: 16 };
|
14
|
+
const iconSize = iconSizes[size];
|
15
|
+
return {
|
16
|
+
isLoading,
|
17
|
+
className,
|
18
|
+
prefix: morpheme(basePrefix, iconSize, "prefix"),
|
19
|
+
sufix: morpheme(baseSufix, iconSize, "sufix"),
|
20
|
+
LeftIcon,
|
21
|
+
RightIcon,
|
22
|
+
disabled,
|
23
|
+
readOnly,
|
24
|
+
onFocus,
|
25
|
+
onBlur,
|
26
|
+
title,
|
27
|
+
style,
|
28
|
+
max,
|
29
|
+
onChange,
|
30
|
+
showCents,
|
31
|
+
loadingPosition,
|
32
|
+
iconSize: iconSize,
|
33
|
+
Spinner: _jsx(Loader2, { className: "spinner", size: iconSize, strokeWidth: 2.5 }),
|
34
|
+
...rest,
|
35
|
+
};
|
36
|
+
}
|
37
|
+
export { getConfig };
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CurrencyInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AASvD,iBAAS,aAAa,CAAC,KAAK,EAAE,kBAAkB,2CA2F/C;AAED,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import { useRef, useState } from "react";
|
3
|
+
import { useFormController } from "../../Form/FormController";
|
4
|
+
import { getConfig } from "./getConfig";
|
5
|
+
import { currencyInputKeyDown, valueDisplay } from "./utils";
|
6
|
+
function CurrencyInput(props) {
|
7
|
+
const [isFocused, setIsFocused] = useState(false);
|
8
|
+
const [currencyValue, setCurrencyValue] = useState(props.defaultValue || 0);
|
9
|
+
const baseRef = useRef(null);
|
10
|
+
const { inputRef, id, error } = useFormController();
|
11
|
+
const ref = inputRef || baseRef;
|
12
|
+
const isError = props.isError || !!error;
|
13
|
+
const { disabled, title, style, className, prefix, sufix, iconSize, loadingPosition, isLoading, LeftIcon, readOnly, onFocus, onBlur, RightIcon, Spinner, value, max, onKeyDown, onChange, showCents, ...rest } = getConfig({ ...props, id, isError }, isFocused);
|
14
|
+
const showLeftIcon = LeftIcon && !isLoading;
|
15
|
+
const showRightIcon = RightIcon && !isLoading;
|
16
|
+
const showLeftSpinner = loadingPosition === "left" && isLoading;
|
17
|
+
const showRightSpinner = loadingPosition === "right" && isLoading;
|
18
|
+
function handleSectionClick() {
|
19
|
+
if (disabled || !ref?.current)
|
20
|
+
return;
|
21
|
+
setIsFocused(true);
|
22
|
+
ref.current.focus();
|
23
|
+
}
|
24
|
+
function handleKeyDown(event) {
|
25
|
+
currencyInputKeyDown({ currencyValue, event, max, setCurrencyValue });
|
26
|
+
onChange && onChange(currencyValue);
|
27
|
+
onKeyDown && onKeyDown(event);
|
28
|
+
}
|
29
|
+
function handleFocus(e) {
|
30
|
+
setIsFocused(true);
|
31
|
+
if (onFocus)
|
32
|
+
onFocus(e);
|
33
|
+
}
|
34
|
+
function handleBlur(e) {
|
35
|
+
setIsFocused(false);
|
36
|
+
if (onBlur)
|
37
|
+
onBlur(e);
|
38
|
+
}
|
39
|
+
return (_jsxs("section", { title: title, style: style, onClick: handleSectionClick, className: className, children: [prefix, showLeftSpinner && Spinner, showLeftIcon && _jsx(LeftIcon, { size: iconSize, strokeWidth: 2.5 }), _jsx("input", { value: valueDisplay(value || currencyValue, showCents), onKeyDown: handleKeyDown, disabled: disabled || isLoading, readOnly: readOnly, ref: ref, onFocus: handleFocus, onChange: () => { }, onBlur: handleBlur, ...rest }), showRightSpinner && Spinner, showRightIcon && _jsx(RightIcon, { size: iconSize, strokeWidth: 2.5 }), sufix] }));
|
40
|
+
}
|
41
|
+
export { CurrencyInput };
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import type { KeyboardEvent } from "react";
|
2
|
+
type OnKeyDownProps = {
|
3
|
+
event: KeyboardEvent<HTMLDivElement>;
|
4
|
+
currencyValue: number;
|
5
|
+
setCurrencyValue: (value: number) => void;
|
6
|
+
max: number;
|
7
|
+
};
|
8
|
+
declare function valueDisplay(inputValue: number, showBRL: boolean): string;
|
9
|
+
declare function currencyInputKeyDown(args: OnKeyDownProps): void;
|
10
|
+
export { valueDisplay, currencyInputKeyDown };
|
11
|
+
//# sourceMappingURL=utils.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/CurrencyInput/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAM3C,KAAK,cAAc,GAAG;IACpB,KAAK,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,GAAG,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,iBAAS,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,UAUzD;AAED,iBAAS,oBAAoB,CAAC,IAAI,EAAE,cAAc,QA4BjD;AAED,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
const VALID_FIRST = /^[1-9]{1}$/;
|
2
|
+
const VALID_NEXT = /^[0-9]{1}$/;
|
3
|
+
const DELETE_KEY_CODE = 8;
|
4
|
+
function valueDisplay(inputValue, showBRL) {
|
5
|
+
if (inputValue === 0)
|
6
|
+
return "";
|
7
|
+
const value = (inputValue / 100).toLocaleString("pt-BR", {
|
8
|
+
style: "currency",
|
9
|
+
currency: "BRL",
|
10
|
+
});
|
11
|
+
if (showBRL)
|
12
|
+
return value;
|
13
|
+
return value.replace("R$", "").trim();
|
14
|
+
}
|
15
|
+
function currencyInputKeyDown(args) {
|
16
|
+
const { currencyValue, event, max, setCurrencyValue } = args;
|
17
|
+
const { key, keyCode } = event;
|
18
|
+
if ((currencyValue === 0 && !VALID_FIRST.test(key)) ||
|
19
|
+
(currencyValue !== 0 &&
|
20
|
+
!VALID_NEXT.test(key) &&
|
21
|
+
keyCode !== DELETE_KEY_CODE)) {
|
22
|
+
return;
|
23
|
+
}
|
24
|
+
const valueString = currencyValue.toString();
|
25
|
+
let nextValue;
|
26
|
+
if (keyCode !== DELETE_KEY_CODE) {
|
27
|
+
const nextValueString = currencyValue === 0 ? key : `${valueString}${key}`;
|
28
|
+
nextValue = Number.parseInt(nextValueString, 10);
|
29
|
+
}
|
30
|
+
else {
|
31
|
+
const nextValueString = valueString.slice(0, -1);
|
32
|
+
nextValue =
|
33
|
+
nextValueString === "" ? 0 : Number.parseInt(nextValueString, 10);
|
34
|
+
}
|
35
|
+
if (nextValue > Number(max))
|
36
|
+
return;
|
37
|
+
setCurrencyValue(nextValue);
|
38
|
+
}
|
39
|
+
export { valueDisplay, currencyInputKeyDown };
|