@kivid/native-components 1.0.0-alpha.6 → 1.0.0-alpha.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/dist/commonjs/components/Avatar/index.js +5 -4
- package/dist/commonjs/components/Avatar/index.js.map +1 -1
- package/dist/commonjs/components/ChatBubble/assets/class-variants.js +6 -6
- package/dist/commonjs/components/ChatBubble/assets/class-variants.js.map +1 -1
- package/dist/commonjs/components/ChatBubble/components/ChatBubbleSeal/index.js +5 -5
- package/dist/commonjs/components/ChatBubble/components/ChatBubbleSeal/index.js.map +1 -1
- package/dist/commonjs/components/ChatBubble/components/ChatBubbleText/index.js +4 -4
- package/dist/commonjs/components/ChatBubble/components/ChatBubbleText/index.js.map +1 -1
- package/dist/commonjs/components/ChatBubble/{context.js → contexts/ChatBubbleContext/index.js} +1 -1
- package/dist/commonjs/components/ChatBubble/contexts/ChatBubbleContext/index.js.map +1 -0
- package/dist/commonjs/components/ChatBubble/contexts/ChatBubbleContext/types.js +6 -0
- package/dist/commonjs/components/ChatBubble/contexts/ChatBubbleContext/types.js.map +1 -0
- package/dist/commonjs/components/ChatBubble/contexts/index.js +17 -0
- package/dist/commonjs/components/ChatBubble/contexts/index.js.map +1 -0
- package/dist/commonjs/components/ChatBubble/index.js +10 -9
- package/dist/commonjs/components/ChatBubble/index.js.map +1 -1
- package/dist/commonjs/components/IconButton/assets/class-variants.js +82 -0
- package/dist/commonjs/components/IconButton/assets/class-variants.js.map +1 -0
- package/dist/commonjs/components/IconButton/assets/design-system-showcase.js +119 -0
- package/dist/commonjs/components/IconButton/assets/design-system-showcase.js.map +1 -0
- package/dist/commonjs/components/IconButton/enums.js +33 -0
- package/dist/commonjs/components/IconButton/enums.js.map +1 -0
- package/dist/commonjs/components/IconButton/index.js +108 -0
- package/dist/commonjs/components/IconButton/index.js.map +1 -0
- package/dist/commonjs/components/IconButton/types.js +6 -0
- package/dist/commonjs/components/IconButton/types.js.map +1 -0
- package/dist/commonjs/components/ListButton/assets/class-variants.js +2 -10
- package/dist/commonjs/components/ListButton/assets/class-variants.js.map +1 -1
- package/dist/commonjs/components/ListButton/assets/design-system-showcase.js +424 -0
- package/dist/commonjs/components/ListButton/assets/design-system-showcase.js.map +1 -0
- package/dist/commonjs/components/ListButton/enums/index.js +0 -11
- package/dist/commonjs/components/ListButton/enums/index.js.map +1 -1
- package/dist/commonjs/components/ListButton/index.js +41 -36
- package/dist/commonjs/components/ListButton/index.js.map +1 -1
- package/dist/commonjs/components/OtpInput/assets/class-variant.js +1 -1
- package/dist/commonjs/components/OtpInput/assets/class-variant.js.map +1 -1
- package/dist/commonjs/components/OtpInput/components/InformationStatus/index.js +13 -11
- package/dist/commonjs/components/OtpInput/components/InformationStatus/index.js.map +1 -1
- package/dist/commonjs/components/OtpInput/enums/index.js +7 -8
- package/dist/commonjs/components/OtpInput/enums/index.js.map +1 -1
- package/dist/commonjs/components/OtpInput/index.js +66 -101
- package/dist/commonjs/components/OtpInput/index.js.map +1 -1
- package/dist/commonjs/components/PasswordInput/index.js +42 -0
- package/dist/commonjs/components/PasswordInput/index.js.map +1 -0
- package/dist/commonjs/components/PasswordInput/types.js +6 -0
- package/dist/commonjs/components/PasswordInput/types.js.map +1 -0
- package/dist/commonjs/components/TextInput/index.js +14 -3
- package/dist/commonjs/components/TextInput/index.js.map +1 -1
- package/dist/commonjs/components/Tooltip/index.js +44 -5
- package/dist/commonjs/components/Tooltip/index.js.map +1 -1
- package/dist/commonjs/components/index.js +33 -0
- package/dist/commonjs/components/index.js.map +1 -1
- package/dist/commonjs/iconography/Icons/index.js +1 -1
- package/dist/commonjs/iconography/Icons/index.js.map +1 -1
- package/dist/module/components/Avatar/index.js +5 -4
- package/dist/module/components/Avatar/index.js.map +1 -1
- package/dist/module/components/ChatBubble/assets/class-variants.js +6 -6
- package/dist/module/components/ChatBubble/assets/class-variants.js.map +1 -1
- package/dist/module/components/ChatBubble/components/ChatBubbleSeal/index.js +4 -4
- package/dist/module/components/ChatBubble/components/ChatBubbleSeal/index.js.map +1 -1
- package/dist/module/components/ChatBubble/components/ChatBubbleText/index.js +5 -4
- package/dist/module/components/ChatBubble/components/ChatBubbleText/index.js.map +1 -1
- package/dist/module/components/ChatBubble/{context.js → contexts/ChatBubbleContext/index.js} +1 -1
- package/dist/module/components/ChatBubble/contexts/ChatBubbleContext/index.js.map +1 -0
- package/dist/module/components/ChatBubble/contexts/ChatBubbleContext/types.js +4 -0
- package/dist/module/components/ChatBubble/contexts/ChatBubbleContext/types.js.map +1 -0
- package/dist/module/components/ChatBubble/contexts/index.js +4 -0
- package/dist/module/components/ChatBubble/contexts/index.js.map +1 -0
- package/dist/module/components/ChatBubble/index.js +9 -8
- package/dist/module/components/ChatBubble/index.js.map +1 -1
- package/dist/module/components/IconButton/assets/class-variants.js +79 -0
- package/dist/module/components/IconButton/assets/class-variants.js.map +1 -0
- package/dist/module/components/IconButton/assets/design-system-showcase.js +115 -0
- package/dist/module/components/IconButton/assets/design-system-showcase.js.map +1 -0
- package/dist/module/components/IconButton/enums.js +29 -0
- package/dist/module/components/IconButton/enums.js.map +1 -0
- package/dist/module/components/IconButton/index.js +103 -0
- package/dist/module/components/IconButton/index.js.map +1 -0
- package/dist/module/components/IconButton/types.js +4 -0
- package/dist/module/components/IconButton/types.js.map +1 -0
- package/dist/module/components/ListButton/assets/class-variants.js +2 -10
- package/dist/module/components/ListButton/assets/class-variants.js.map +1 -1
- package/dist/module/components/ListButton/assets/design-system-showcase.js +420 -0
- package/dist/module/components/ListButton/assets/design-system-showcase.js.map +1 -0
- package/dist/module/components/ListButton/enums/index.js +0 -1
- package/dist/module/components/ListButton/enums/index.js.map +1 -1
- package/dist/module/components/ListButton/index.js +44 -39
- package/dist/module/components/ListButton/index.js.map +1 -1
- package/dist/module/components/OtpInput/assets/class-variant.js +1 -1
- package/dist/module/components/OtpInput/assets/class-variant.js.map +1 -1
- package/dist/module/components/OtpInput/components/InformationStatus/index.js +15 -13
- package/dist/module/components/OtpInput/components/InformationStatus/index.js.map +1 -1
- package/dist/module/components/OtpInput/enums/index.js +6 -7
- package/dist/module/components/OtpInput/enums/index.js.map +1 -1
- package/dist/module/components/OtpInput/index.js +66 -101
- package/dist/module/components/OtpInput/index.js.map +1 -1
- package/dist/module/components/PasswordInput/index.js +37 -0
- package/dist/module/components/PasswordInput/index.js.map +1 -0
- package/dist/module/components/PasswordInput/types.js +4 -0
- package/dist/module/components/PasswordInput/types.js.map +1 -0
- package/dist/module/components/TextInput/index.js +14 -3
- package/dist/module/components/TextInput/index.js.map +1 -1
- package/dist/module/components/Tooltip/index.js +45 -6
- package/dist/module/components/Tooltip/index.js.map +1 -1
- package/dist/module/components/index.js +3 -0
- package/dist/module/components/index.js.map +1 -1
- package/dist/module/iconography/Icons/index.js +2 -2
- package/dist/module/iconography/Icons/index.js.map +1 -1
- package/dist/typescript/components/Avatar/types.d.ts +1 -0
- package/dist/typescript/components/ChatBubble/assets/class-variants.d.ts +1 -1
- package/dist/typescript/components/ChatBubble/components/ChatBubbleSeal/types.d.ts +1 -1
- package/dist/typescript/components/ChatBubble/components/ChatBubbleText/types.d.ts +1 -1
- package/dist/typescript/components/ChatBubble/contexts/ChatBubbleContext/index.d.ts +3 -0
- package/dist/typescript/components/ChatBubble/contexts/ChatBubbleContext/types.d.ts +6 -0
- package/dist/typescript/components/ChatBubble/contexts/index.d.ts +1 -0
- package/dist/typescript/components/ChatBubble/types.d.ts +2 -2
- package/dist/typescript/components/IconButton/assets/class-variants.d.ts +8 -0
- package/dist/typescript/components/IconButton/assets/design-system-showcase.d.ts +17 -0
- package/dist/typescript/components/IconButton/enums.d.ts +22 -0
- package/dist/typescript/components/IconButton/index.d.ts +2 -0
- package/dist/typescript/components/IconButton/types.d.ts +15 -0
- package/dist/typescript/components/ListButton/assets/class-variants.d.ts +1 -4
- package/dist/typescript/components/ListButton/assets/design-system-showcase.d.ts +14 -0
- package/dist/typescript/components/ListButton/enums/index.d.ts +0 -1
- package/dist/typescript/components/ListButton/types.d.ts +7 -5
- package/dist/typescript/components/OtpInput/components/InformationStatus/types.d.ts +2 -2
- package/dist/typescript/components/OtpInput/enums/index.d.ts +2 -3
- package/dist/typescript/components/OtpInput/index.d.ts +1 -1
- package/dist/typescript/components/OtpInput/types.d.ts +4 -4
- package/dist/typescript/components/PasswordInput/index.d.ts +2 -0
- package/dist/typescript/components/PasswordInput/types.d.ts +3 -0
- package/dist/typescript/components/TextInput/index.d.ts +1 -1
- package/dist/typescript/components/TextInput/types.d.ts +3 -0
- package/dist/typescript/components/Tooltip/components/Content/types.d.ts +1 -0
- package/dist/typescript/components/Tooltip/types.d.ts +2 -1
- package/dist/typescript/components/index.d.ts +6 -0
- package/package.json +5 -5
- package/src/components/Avatar/index.tsx +4 -4
- package/src/components/Avatar/types.ts +1 -0
- package/src/components/ChatBubble/assets/class-variants.ts +6 -6
- package/src/components/ChatBubble/components/ChatBubbleSeal/index.tsx +5 -4
- package/src/components/ChatBubble/components/ChatBubbleSeal/types.ts +1 -1
- package/src/components/ChatBubble/components/ChatBubbleText/index.tsx +4 -3
- package/src/components/ChatBubble/components/ChatBubbleText/types.ts +1 -1
- package/src/components/ChatBubble/{context.tsx → contexts/ChatBubbleContext/index.tsx} +1 -10
- package/src/components/ChatBubble/contexts/ChatBubbleContext/types.ts +11 -0
- package/src/components/ChatBubble/contexts/index.ts +1 -0
- package/src/components/ChatBubble/index.tsx +12 -10
- package/src/components/ChatBubble/types.ts +2 -3
- package/src/components/IconButton/assets/class-variants.ts +126 -0
- package/src/components/IconButton/assets/design-system-showcase.ts +246 -0
- package/src/components/IconButton/enums.ts +26 -0
- package/src/components/IconButton/index.tsx +124 -0
- package/src/components/IconButton/types.ts +22 -0
- package/src/components/ListButton/assets/class-variants.ts +2 -11
- package/src/components/ListButton/assets/design-system-showcase.ts +502 -0
- package/src/components/ListButton/enums/index.ts +0 -1
- package/src/components/ListButton/index.tsx +44 -41
- package/src/components/ListButton/types.ts +7 -5
- package/src/components/OtpInput/assets/class-variant.ts +1 -1
- package/src/components/OtpInput/components/InformationStatus/index.tsx +15 -14
- package/src/components/OtpInput/components/InformationStatus/types.ts +2 -2
- package/src/components/OtpInput/enums/index.ts +1 -2
- package/src/components/OtpInput/index.tsx +77 -136
- package/src/components/OtpInput/types.ts +4 -4
- package/src/components/PasswordInput/index.tsx +37 -0
- package/src/components/PasswordInput/types.ts +4 -0
- package/src/components/TextInput/index.tsx +17 -3
- package/src/components/TextInput/types.ts +3 -0
- package/src/components/Tooltip/components/Content/types.ts +1 -0
- package/src/components/Tooltip/index.tsx +57 -5
- package/src/components/Tooltip/types.ts +2 -1
- package/src/components/index.ts +8 -0
- package/src/iconography/Icons/index.tsx +2 -3
- package/dist/commonjs/components/ChatBubble/context.js.map +0 -1
- package/dist/commonjs/components/ListButton/enums/icon-color.js +0 -18
- package/dist/commonjs/components/ListButton/enums/icon-color.js.map +0 -1
- package/dist/module/components/ChatBubble/context.js.map +0 -1
- package/dist/module/components/ListButton/enums/icon-color.js +0 -14
- package/dist/module/components/ListButton/enums/icon-color.js.map +0 -1
- package/dist/typescript/components/ChatBubble/context.d.ts +0 -8
- package/dist/typescript/components/ListButton/enums/icon-color.d.ts +0 -10
- package/src/components/ListButton/enums/icon-color.ts +0 -10
|
@@ -8,15 +8,15 @@ import { Button } from "../../../Button";
|
|
|
8
8
|
import { HighlightedText } from "../../../HighlightedText";
|
|
9
9
|
import LoadingDots from "../../../LoadingDots";
|
|
10
10
|
import { Chip } from "../../../Chip";
|
|
11
|
-
import { Text } from "react-native";
|
|
11
|
+
import { Text, View } from "react-native";
|
|
12
12
|
import { ChipVariantEnum } from "../../../Chip/enums";
|
|
13
13
|
import { SealVariantEnum } from "../../../Seal/enums";
|
|
14
|
-
import {
|
|
14
|
+
import { OTPInputInformationStatusEnum } from "../../enums";
|
|
15
15
|
import { SizeEnum, CornersEnum } from "../../../../enums";
|
|
16
16
|
|
|
17
17
|
export function InformationStatus(props: InformationStatusProps) {
|
|
18
18
|
const {
|
|
19
|
-
status =
|
|
19
|
+
status = OTPInputInformationStatusEnum.DEFAULT,
|
|
20
20
|
disabled = false,
|
|
21
21
|
onPress,
|
|
22
22
|
} = props;
|
|
@@ -24,7 +24,7 @@ export function InformationStatus(props: InformationStatusProps) {
|
|
|
24
24
|
const renderInformation = useMemo(() => {
|
|
25
25
|
const textStyle = merge("", disabled && "opacity-50");
|
|
26
26
|
|
|
27
|
-
if (status ===
|
|
27
|
+
if (status === OTPInputInformationStatusEnum.DEFAULT) {
|
|
28
28
|
return (
|
|
29
29
|
<>
|
|
30
30
|
<Button
|
|
@@ -47,7 +47,7 @@ export function InformationStatus(props: InformationStatusProps) {
|
|
|
47
47
|
);
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
if (status ===
|
|
50
|
+
if (status === OTPInputInformationStatusEnum.LOADING) {
|
|
51
51
|
return (
|
|
52
52
|
<>
|
|
53
53
|
<LoadingDots variant="dark" />
|
|
@@ -61,25 +61,26 @@ export function InformationStatus(props: InformationStatusProps) {
|
|
|
61
61
|
);
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
if (status ===
|
|
64
|
+
if (status === OTPInputInformationStatusEnum.SUCCESS) {
|
|
65
65
|
return (
|
|
66
|
-
|
|
67
|
-
<Chip
|
|
68
|
-
variant={ChipVariantEnum.OUTLINE}
|
|
69
|
-
sealVariant={SealVariantEnum.SUCCESS}
|
|
70
|
-
label="Confirmado"
|
|
71
|
-
/>
|
|
66
|
+
<View className="flex flex-col mt-600 gap-600 items-center">
|
|
72
67
|
<HighlightedText
|
|
73
68
|
highlightText="Código validado"
|
|
74
69
|
text="com sucesso."
|
|
75
70
|
reverse
|
|
76
71
|
className={textStyle}
|
|
77
72
|
/>
|
|
78
|
-
|
|
73
|
+
<Chip
|
|
74
|
+
variant={ChipVariantEnum.OUTLINE}
|
|
75
|
+
sealVariant={SealVariantEnum.SUCCESS}
|
|
76
|
+
label="Confirmado"
|
|
77
|
+
className="max-w-fit"
|
|
78
|
+
/>
|
|
79
|
+
</View>
|
|
79
80
|
);
|
|
80
81
|
}
|
|
81
82
|
|
|
82
|
-
if (status ===
|
|
83
|
+
if (status === OTPInputInformationStatusEnum.ERROR) {
|
|
83
84
|
return (
|
|
84
85
|
<>
|
|
85
86
|
<Button
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { OTPInputInformationStatusEnum } from "../../enums";
|
|
2
2
|
export interface InformationStatusProps {
|
|
3
|
-
status:
|
|
3
|
+
status: OTPInputInformationStatusEnum;
|
|
4
4
|
disabled?: boolean;
|
|
5
5
|
onPress?: () => void;
|
|
6
6
|
}
|
|
@@ -1,175 +1,116 @@
|
|
|
1
1
|
import { useRef, useState } from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
NativeSyntheticEvent,
|
|
6
|
-
TextInputKeyPressEventData,
|
|
7
|
-
Platform,
|
|
8
|
-
TextInputFocusEventData,
|
|
9
|
-
TextInputChangeEventData,
|
|
10
|
-
} from "react-native";
|
|
11
|
-
import type { OtpInputProps } from "./types";
|
|
2
|
+
import { OTPInputInformationStatusEnum } from "./enums";
|
|
3
|
+
import { OtpInputProps } from "./types";
|
|
4
|
+
import { TextInput, Text, View, Platform } from "react-native";
|
|
12
5
|
import { merge } from "@kivid/tailwind-preset";
|
|
13
|
-
import { InformationStatus } from "./components";
|
|
14
|
-
import { InformationStatusEnum } from "./enums";
|
|
15
6
|
import { inputVariants } from "./assets/class-variant";
|
|
7
|
+
import { InformationStatus } from "./components";
|
|
16
8
|
|
|
17
9
|
export function OtpInput(props: OtpInputProps) {
|
|
18
10
|
const {
|
|
19
|
-
status =
|
|
20
|
-
|
|
11
|
+
status = OTPInputInformationStatusEnum.DEFAULT,
|
|
12
|
+
length = 6,
|
|
21
13
|
customInformation,
|
|
22
14
|
rounded = false,
|
|
23
15
|
disabled = false,
|
|
24
16
|
inputClassName,
|
|
25
17
|
onChange,
|
|
26
18
|
onPressRetryToken,
|
|
19
|
+
|
|
27
20
|
} = props;
|
|
21
|
+
const hasError = status === OTPInputInformationStatusEnum.ERROR;
|
|
22
|
+
|
|
23
|
+
const [code, setCode] = useState('');
|
|
28
24
|
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
|
|
25
|
+
const textInputRef = useRef<TextInput>(null)
|
|
26
|
+
const codeDigitsArray = new Array(length).fill(0)
|
|
27
|
+
|
|
28
|
+
const inputStyle = merge(
|
|
29
|
+
inputVariants({ rounded, hasError, disabled }),
|
|
30
|
+
inputClassName
|
|
32
31
|
);
|
|
33
|
-
const hasError = status === InformationStatusEnum.ERROR;
|
|
34
32
|
|
|
35
|
-
|
|
36
|
-
const values = [...inputValues];
|
|
37
|
-
const inputRefValuesJoined = values.join("");
|
|
33
|
+
const [inputContainerIsFocused, setInputContainerIsFocused] = useState(false)
|
|
38
34
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
35
|
+
function handleOnPress() {
|
|
36
|
+
setInputContainerIsFocused(true)
|
|
37
|
+
textInputRef.current?.focus()
|
|
42
38
|
}
|
|
43
39
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
) => {
|
|
48
|
-
const text = event.nativeEvent.text;
|
|
49
|
-
const newValues = [...inputValues];
|
|
50
|
-
|
|
51
|
-
if (text.length > 1) {
|
|
52
|
-
const chars = text.split("");
|
|
53
|
-
let targetIndex = index;
|
|
54
|
-
chars.forEach((char) => {
|
|
55
|
-
if (targetIndex < OTPInputsQuantity) {
|
|
56
|
-
newValues[targetIndex] = char;
|
|
57
|
-
targetIndex++;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
setInputValues(newValues);
|
|
61
|
-
onChange?.(newValues.join(""));
|
|
62
|
-
|
|
63
|
-
const nextEmptyIndex = newValues.findIndex((value) => !value);
|
|
64
|
-
if (nextEmptyIndex !== -1) {
|
|
65
|
-
inputsRef.current[nextEmptyIndex]?.focus();
|
|
66
|
-
} else {
|
|
67
|
-
inputsRef.current[OTPInputsQuantity - 1]?.focus();
|
|
68
|
-
}
|
|
69
|
-
return;
|
|
70
|
-
}
|
|
40
|
+
function handleOnBlur() {
|
|
41
|
+
setInputContainerIsFocused(false)
|
|
42
|
+
}
|
|
71
43
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
44
|
+
function handleChangeText(text: string) {
|
|
45
|
+
const textInputQuantity = text.replace(/\s+/g, '').slice(0, length);
|
|
46
|
+
setCode(textInputQuantity);
|
|
75
47
|
|
|
76
|
-
if (
|
|
77
|
-
|
|
78
|
-
if (nextEmptyIndex !== -1) {
|
|
79
|
-
inputsRef.current[nextEmptyIndex]?.focus();
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
const handleKeyDown = (
|
|
85
|
-
e: NativeSyntheticEvent<TextInputKeyPressEventData>,
|
|
86
|
-
index: number
|
|
87
|
-
) => {
|
|
88
|
-
if (e.nativeEvent.key === "Backspace") {
|
|
89
|
-
const hasValueAhead = inputValues.slice(index + 1).some((value) => value);
|
|
90
|
-
|
|
91
|
-
if (hasValueAhead) {
|
|
92
|
-
const lastFilledIndex = [...inputValues]
|
|
93
|
-
.map((value, i) => (value ? i : -1))
|
|
94
|
-
.filter((i) => i !== -1)
|
|
95
|
-
.pop();
|
|
96
|
-
|
|
97
|
-
if (lastFilledIndex !== undefined) {
|
|
98
|
-
inputsRef.current[lastFilledIndex]?.focus();
|
|
99
|
-
}
|
|
100
|
-
return;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
if (inputValues[index]) {
|
|
104
|
-
const newValues = [...inputValues];
|
|
105
|
-
newValues[index] = "";
|
|
106
|
-
setInputValues(newValues);
|
|
107
|
-
}
|
|
108
|
-
if (index > 0) {
|
|
109
|
-
inputsRef.current[index - 1]?.focus();
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
const handleFocus = (
|
|
115
|
-
event: NativeSyntheticEvent<TextInputFocusEventData>,
|
|
116
|
-
index: number
|
|
117
|
-
) => {
|
|
118
|
-
const firstEmptyIndex = inputValues.findIndex((value) => !value);
|
|
119
|
-
|
|
120
|
-
if (firstEmptyIndex !== -1 && index > firstEmptyIndex) {
|
|
121
|
-
inputsRef.current[firstEmptyIndex]?.focus();
|
|
122
|
-
event.preventDefault();
|
|
123
|
-
return;
|
|
48
|
+
if (textInputQuantity.length === length) {
|
|
49
|
+
onChange?.(textInputQuantity);
|
|
124
50
|
}
|
|
51
|
+
}
|
|
125
52
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
53
|
+
function handleInformationStatusOnPress() {
|
|
54
|
+
if (code.length === length) {
|
|
55
|
+
onPressRetryToken?.(code);
|
|
129
56
|
}
|
|
130
|
-
}
|
|
57
|
+
}
|
|
58
|
+
|
|
131
59
|
|
|
132
60
|
function renderInformationStatus() {
|
|
133
61
|
if (customInformation) {
|
|
134
62
|
return <>{customInformation}</>;
|
|
135
63
|
}
|
|
136
64
|
|
|
137
|
-
return <InformationStatus status={status} onPress={
|
|
65
|
+
return <InformationStatus status={status} onPress={handleInformationStatusOnPress} />;
|
|
138
66
|
}
|
|
139
67
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
68
|
+
function renderDigit(_value: string, index: number) {
|
|
69
|
+
const isCurrentDigit = index === code.length;
|
|
70
|
+
const isLastDigit = index === length - 1;
|
|
71
|
+
const isCodeFull = code.length === length;
|
|
72
|
+
|
|
73
|
+
const isDigitFocused = isCurrentDigit && inputContainerIsFocused || (isLastDigit && isCodeFull && inputContainerIsFocused)
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<Text
|
|
77
|
+
key={index}
|
|
78
|
+
className={inputStyle}
|
|
79
|
+
style={{
|
|
80
|
+
...(isDigitFocused ? { borderColor: '#98A3A3' } : {}),
|
|
81
|
+
...(code[index] ? {} : { color: '#98A3A3' })
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
{code[index] ?? "•"}
|
|
85
|
+
</Text>
|
|
86
|
+
)
|
|
87
|
+
}
|
|
144
88
|
|
|
145
89
|
return (
|
|
146
|
-
<View className=
|
|
147
|
-
<View className=
|
|
148
|
-
{
|
|
149
|
-
<TextInput
|
|
150
|
-
ref={(ref) => {
|
|
151
|
-
inputsRef.current[i] = ref;
|
|
152
|
-
}}
|
|
153
|
-
key={`otp-input-${i}`}
|
|
154
|
-
textContentType="oneTimeCode"
|
|
155
|
-
placeholder="_"
|
|
156
|
-
className={inputStyle}
|
|
157
|
-
autoComplete={
|
|
158
|
-
Platform.OS === "android" ? "sms-otp" : "one-time-code"
|
|
159
|
-
}
|
|
160
|
-
placeholderTextColor="#DEE7E7"
|
|
161
|
-
editable={!disabled}
|
|
162
|
-
value={inputValues[i]}
|
|
163
|
-
onChange={(e) => handleChange(e, i)}
|
|
164
|
-
onKeyPress={(e) => handleKeyDown(e, i)}
|
|
165
|
-
onFocus={(e) => handleFocus(e, i)}
|
|
166
|
-
/>
|
|
167
|
-
))}
|
|
90
|
+
<View className='flex-col gap-300 max-w-[280px] items-center justify-between'>
|
|
91
|
+
<View className='w-full flex-row justify-around gap-400'>
|
|
92
|
+
{codeDigitsArray.map(renderDigit)}
|
|
168
93
|
</View>
|
|
169
|
-
|
|
94
|
+
<TextInput
|
|
95
|
+
className='w-full h-1000 absolute text-transparent'
|
|
96
|
+
value={code}
|
|
97
|
+
onChangeText={handleChangeText}
|
|
98
|
+
maxLength={length}
|
|
99
|
+
editable={!disabled}
|
|
100
|
+
returnKeyType="done"
|
|
101
|
+
textContentType='oneTimeCode'
|
|
102
|
+
ref={textInputRef}
|
|
103
|
+
onBlur={handleOnBlur}
|
|
104
|
+
onPress={handleOnPress}
|
|
105
|
+
caretHidden={true}
|
|
106
|
+
autoComplete={
|
|
107
|
+
Platform.OS === "android" ? "sms-otp" : "one-time-code"
|
|
108
|
+
}
|
|
109
|
+
/>
|
|
170
110
|
{renderInformationStatus()}
|
|
171
111
|
</View>
|
|
172
|
-
|
|
112
|
+
|
|
113
|
+
)
|
|
173
114
|
}
|
|
174
115
|
|
|
175
|
-
export default OtpInput;
|
|
116
|
+
export default OtpInput;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { OTPInputInformationStatusEnum } from "./enums";
|
|
3
3
|
|
|
4
4
|
export interface OtpInputProps {
|
|
5
|
-
|
|
5
|
+
length?: number;
|
|
6
6
|
rounded?: boolean;
|
|
7
7
|
disabled?: boolean;
|
|
8
|
-
status?:
|
|
8
|
+
status?: OTPInputInformationStatusEnum;
|
|
9
9
|
customInformation?: React.ReactNode;
|
|
10
|
-
onChange: (value
|
|
10
|
+
onChange: (value?: string) => void;
|
|
11
11
|
onPressRetryToken?: (value: string) => void;
|
|
12
12
|
inputClassName?: string;
|
|
13
13
|
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
import TextInput from "../TextInput";
|
|
3
|
+
import { IconButton } from "../IconButton";
|
|
4
|
+
import { PasswordInputProps } from "./types";
|
|
5
|
+
import { Eye, EyeOff } from "@kivid/icons/native";
|
|
6
|
+
import { IconButtonVariantEnum } from "../IconButton/enums";
|
|
7
|
+
|
|
8
|
+
export function PasswordInput(props: PasswordInputProps) {
|
|
9
|
+
const [shouldHidePassword, setShouldHidePassword] = useState(true);
|
|
10
|
+
|
|
11
|
+
function toogleHidePassword() {
|
|
12
|
+
setShouldHidePassword(!shouldHidePassword);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function renderIcon() {
|
|
16
|
+
if (shouldHidePassword) {
|
|
17
|
+
return <Eye size={24} className="text-chia-900" />;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return <EyeOff size={24} className="text-chia-900" />;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<TextInput
|
|
25
|
+
{...props}
|
|
26
|
+
secureTextEntry={shouldHidePassword}
|
|
27
|
+
rightIcon={
|
|
28
|
+
<IconButton
|
|
29
|
+
onPress={toogleHidePassword}
|
|
30
|
+
accessibilityLabel="Toggle Password Visibility"
|
|
31
|
+
variant={IconButtonVariantEnum.GHOST}
|
|
32
|
+
icon={renderIcon()}
|
|
33
|
+
/>
|
|
34
|
+
}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
37
|
+
}
|
|
@@ -31,6 +31,9 @@ export function TextInput({
|
|
|
31
31
|
containerTestID,
|
|
32
32
|
ref,
|
|
33
33
|
tooltipClassName = "",
|
|
34
|
+
tooltipPointerClassName,
|
|
35
|
+
tooltipContainerClassName,
|
|
36
|
+
rightIcon,
|
|
34
37
|
...rest
|
|
35
38
|
}: TextInputProps) {
|
|
36
39
|
const inputRef = useRef<RNTextInput>(null);
|
|
@@ -52,6 +55,14 @@ export function TextInput({
|
|
|
52
55
|
);
|
|
53
56
|
};
|
|
54
57
|
|
|
58
|
+
const renderRightIcon = () => {
|
|
59
|
+
if (rightIcon) {
|
|
60
|
+
return rightIcon;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return renderSeal();
|
|
64
|
+
};
|
|
65
|
+
|
|
55
66
|
const handleChangeText = (text: string) => {
|
|
56
67
|
onChangeText?.(text);
|
|
57
68
|
};
|
|
@@ -70,10 +81,12 @@ export function TextInput({
|
|
|
70
81
|
|
|
71
82
|
return (
|
|
72
83
|
<Tooltip
|
|
73
|
-
|
|
74
|
-
message=
|
|
84
|
+
isOpenedByVariantError={hasError}
|
|
85
|
+
message={error}
|
|
75
86
|
variant={TooltipVariantEnum.ERROR}
|
|
76
87
|
className={tooltipClassName}
|
|
88
|
+
pointerClassName={tooltipPointerClassName}
|
|
89
|
+
containerClassName={tooltipContainerClassName}
|
|
77
90
|
>
|
|
78
91
|
<Pressable
|
|
79
92
|
testID={containerTestID}
|
|
@@ -134,7 +147,8 @@ export function TextInput({
|
|
|
134
147
|
}}
|
|
135
148
|
/>
|
|
136
149
|
</View>
|
|
137
|
-
|
|
150
|
+
|
|
151
|
+
{renderRightIcon()}
|
|
138
152
|
</Pressable>
|
|
139
153
|
</Tooltip>
|
|
140
154
|
);
|
|
@@ -19,6 +19,9 @@ export interface TextInputProps
|
|
|
19
19
|
labelClassName?: string;
|
|
20
20
|
containerTestID?: string;
|
|
21
21
|
tooltipClassName?: string;
|
|
22
|
+
tooltipPointerClassName?: string;
|
|
23
|
+
tooltipContainerClassName?: string;
|
|
24
|
+
rightIcon?: React.ReactNode;
|
|
22
25
|
onChangeText?: (text: string) => void;
|
|
23
26
|
ref?: React.RefObject<RNTextInput | null>;
|
|
24
27
|
}
|
|
@@ -1,38 +1,90 @@
|
|
|
1
|
-
import { View } from "react-native";
|
|
1
|
+
import { View, Pressable } from "react-native";
|
|
2
2
|
import { Content } from "./components";
|
|
3
3
|
import { useTooltipPosition } from "./hooks";
|
|
4
4
|
import { TooltipProps } from "./types";
|
|
5
5
|
|
|
6
6
|
import { TooltipVariantEnum } from "./enum";
|
|
7
|
+
import { useState, useCallback, cloneElement, isValidElement, ReactElement } from "react";
|
|
7
8
|
|
|
8
9
|
export function Tooltip(props: TooltipProps) {
|
|
9
10
|
const {
|
|
10
11
|
children,
|
|
11
12
|
message,
|
|
12
13
|
variant = TooltipVariantEnum.TRIGGER,
|
|
13
|
-
isVisible,
|
|
14
14
|
className,
|
|
15
15
|
containerClassName,
|
|
16
16
|
pointerClassName,
|
|
17
|
+
isOpenedByVariantError,
|
|
18
|
+
onChangeVisibility
|
|
17
19
|
} = props;
|
|
18
20
|
const { positionData, onTriggerLayout, onTooltipLayout } =
|
|
19
21
|
useTooltipPosition();
|
|
20
22
|
|
|
23
|
+
const [isVisible, setIsVisible] = useState(false);
|
|
24
|
+
|
|
25
|
+
const handleVisibilityChange = useCallback((visible: boolean) => {
|
|
26
|
+
setIsVisible(visible);
|
|
27
|
+
onChangeVisibility?.(visible);
|
|
28
|
+
}, [onChangeVisibility]);
|
|
29
|
+
|
|
30
|
+
const handleToggleVisibility = useCallback(() => {
|
|
31
|
+
const newVisibility = !isVisible;
|
|
32
|
+
handleVisibilityChange(newVisibility);
|
|
33
|
+
}, [isVisible, handleVisibilityChange]);
|
|
34
|
+
|
|
35
|
+
const renderTriggerContent = () => {
|
|
36
|
+
if (variant !== TooltipVariantEnum.TRIGGER) {
|
|
37
|
+
return children;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
if (isValidElement(children)) {
|
|
41
|
+
const child = children as ReactElement;
|
|
42
|
+
const childProps = child.props as any;
|
|
43
|
+
|
|
44
|
+
const componentType = child.type as any;
|
|
45
|
+
const componentName = (typeof componentType === 'function'
|
|
46
|
+
? componentType.displayName || componentType.name
|
|
47
|
+
: componentType) || '';
|
|
48
|
+
const isButton = componentName === 'Button' ||
|
|
49
|
+
componentName === 'Pressable' ||
|
|
50
|
+
componentName === 'TouchableOpacity';
|
|
51
|
+
|
|
52
|
+
if (isButton || (childProps && typeof childProps.onPress === 'function')) {
|
|
53
|
+
return cloneElement(child, {
|
|
54
|
+
...childProps,
|
|
55
|
+
onPress: (...args: any[]) => {
|
|
56
|
+
if (typeof childProps.onPress === 'function') {
|
|
57
|
+
childProps.onPress(...args);
|
|
58
|
+
handleToggleVisibility();
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
})
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return (
|
|
66
|
+
<Pressable onPress={handleToggleVisibility}>
|
|
67
|
+
{children}
|
|
68
|
+
</Pressable>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
|
|
21
72
|
return (
|
|
22
73
|
<View className="relative" onLayout={onTriggerLayout}>
|
|
23
|
-
{
|
|
74
|
+
{renderTriggerContent()}
|
|
24
75
|
|
|
25
76
|
<Content
|
|
26
77
|
message={message}
|
|
27
78
|
variant={variant}
|
|
28
|
-
isVisible={isVisible}
|
|
79
|
+
isVisible={variant === TooltipVariantEnum.TRIGGER ? isVisible : !!isOpenedByVariantError}
|
|
29
80
|
onLayout={onTooltipLayout}
|
|
30
81
|
translateX={positionData.adjustedPosition.translateX}
|
|
31
82
|
pointerOffset={positionData.pointerOffset}
|
|
32
83
|
className={className}
|
|
33
84
|
containerClassName={containerClassName}
|
|
34
85
|
pointerClassName={pointerClassName}
|
|
86
|
+
onChangeVisibility={handleVisibilityChange}
|
|
35
87
|
/>
|
|
36
88
|
</View>
|
|
37
89
|
);
|
|
38
|
-
}
|
|
90
|
+
}
|
package/src/components/index.ts
CHANGED
|
@@ -4,6 +4,7 @@ export type * from "./Button/types";
|
|
|
4
4
|
|
|
5
5
|
export * from "./ChatBubble";
|
|
6
6
|
export type * from "./ChatBubble/types";
|
|
7
|
+
export type * from "./ChatBubble/contexts/ChatBubbleContext/types";
|
|
7
8
|
|
|
8
9
|
export * from "./Chip";
|
|
9
10
|
export * from "./Chip/types";
|
|
@@ -63,3 +64,10 @@ export * from "./SelectButton/enums";
|
|
|
63
64
|
export * from "./RadioInput";
|
|
64
65
|
export type * from "./RadioInput/types";
|
|
65
66
|
export * from "./RadioInput/enums";
|
|
67
|
+
|
|
68
|
+
export * from "./IconButton";
|
|
69
|
+
export type * from "./IconButton/types";
|
|
70
|
+
export * from "./IconButton/enums";
|
|
71
|
+
|
|
72
|
+
export * from "./PasswordInput";
|
|
73
|
+
export type * from "./PasswordInput/types";
|
|
@@ -5,7 +5,6 @@ import {
|
|
|
5
5
|
Alert,
|
|
6
6
|
FlatList,
|
|
7
7
|
Pressable,
|
|
8
|
-
SafeAreaView,
|
|
9
8
|
Text,
|
|
10
9
|
TextInput,
|
|
11
10
|
View,
|
|
@@ -36,7 +35,7 @@ export function Icons(props: IconsProps) {
|
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
return (
|
|
39
|
-
<
|
|
38
|
+
<View className="m-16">
|
|
40
39
|
<TextInput
|
|
41
40
|
placeholder="Pesquisar ícones..."
|
|
42
41
|
placeholderTextColor="#98A3A3"
|
|
@@ -90,6 +89,6 @@ export function Icons(props: IconsProps) {
|
|
|
90
89
|
</View>
|
|
91
90
|
)}
|
|
92
91
|
/>
|
|
93
|
-
</
|
|
92
|
+
</View>
|
|
94
93
|
);
|
|
95
94
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","ChatBubbleContext","exports","createContext","useChatBubbleContext","context","useContext","Error"],"sourceRoot":"../../../../src","sources":["components/ChatBubble/context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAaO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,oBAAa,EAC5C,IACF,CAAC;AAEM,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACL,iBAAiB,CAAC;EAC7C,IAAI,CAACI,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CACb,iEACF,CAAC;EACH;EACA,OAAOF,OAAO;AAChB,CAAC;AAACH,OAAA,CAAAE,oBAAA,GAAAA,oBAAA","ignoreList":[]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.ListButtonIconColorEnum = void 0;
|
|
7
|
-
let ListButtonIconColorEnum = exports.ListButtonIconColorEnum = /*#__PURE__*/function (ListButtonIconColorEnum) {
|
|
8
|
-
ListButtonIconColorEnum["GRAPE"] = "grape";
|
|
9
|
-
ListButtonIconColorEnum["JAVA"] = "java";
|
|
10
|
-
ListButtonIconColorEnum["PEAR"] = "pear";
|
|
11
|
-
ListButtonIconColorEnum["TANGERINE"] = "tangerine";
|
|
12
|
-
ListButtonIconColorEnum["PITAYA"] = "pitaya";
|
|
13
|
-
ListButtonIconColorEnum["BLACKBERRY"] = "blackberry";
|
|
14
|
-
ListButtonIconColorEnum["CHIA"] = "chia";
|
|
15
|
-
ListButtonIconColorEnum["GHOST"] = "ghost";
|
|
16
|
-
return ListButtonIconColorEnum;
|
|
17
|
-
}({});
|
|
18
|
-
//# sourceMappingURL=icon-color.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ListButtonIconColorEnum","exports"],"sourceRoot":"../../../../../src","sources":["components/ListButton/enums/icon-color.ts"],"mappings":";;;;;;IAAYA,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,0BAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA","ignoreList":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useContext","ChatBubbleContext","useChatBubbleContext","context","Error"],"sourceRoot":"../../../../src","sources":["components/ChatBubble/context.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAajD,OAAO,MAAMC,iBAAiB,gBAAGF,aAAa,CAC5C,IACF,CAAC;AAED,OAAO,MAAMG,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,OAAO,GAAGH,UAAU,CAACC,iBAAiB,CAAC;EAC7C,IAAI,CAACE,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,iEACF,CAAC;EACH;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
export let ListButtonIconColorEnum = /*#__PURE__*/function (ListButtonIconColorEnum) {
|
|
4
|
-
ListButtonIconColorEnum["GRAPE"] = "grape";
|
|
5
|
-
ListButtonIconColorEnum["JAVA"] = "java";
|
|
6
|
-
ListButtonIconColorEnum["PEAR"] = "pear";
|
|
7
|
-
ListButtonIconColorEnum["TANGERINE"] = "tangerine";
|
|
8
|
-
ListButtonIconColorEnum["PITAYA"] = "pitaya";
|
|
9
|
-
ListButtonIconColorEnum["BLACKBERRY"] = "blackberry";
|
|
10
|
-
ListButtonIconColorEnum["CHIA"] = "chia";
|
|
11
|
-
ListButtonIconColorEnum["GHOST"] = "ghost";
|
|
12
|
-
return ListButtonIconColorEnum;
|
|
13
|
-
}({});
|
|
14
|
-
//# sourceMappingURL=icon-color.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ListButtonIconColorEnum"],"sourceRoot":"../../../../../src","sources":["components/ListButton/enums/icon-color.ts"],"mappings":";;AAAA,WAAYA,uBAAuB,0BAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA","ignoreList":[]}
|