@tecsinapse/react-core 1.21.7 → 1.22.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/cjs/components/atoms/BoxContent/BoxContent.js +4 -31
- package/dist/cjs/components/atoms/BoxContent/BoxContent.js.map +1 -1
- package/dist/cjs/components/atoms/BoxContent/styled.js +1 -1
- package/dist/cjs/components/atoms/BoxContent/styled.js.map +1 -1
- package/dist/cjs/components/atoms/Button/Button.js +18 -61
- package/dist/cjs/components/atoms/Button/Button.js.map +1 -1
- package/dist/cjs/components/atoms/Button/States/Error.js +5 -23
- package/dist/cjs/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/cjs/components/atoms/Button/States/Success.js +3 -21
- package/dist/cjs/components/atoms/Button/States/Success.js.map +1 -1
- package/dist/cjs/components/atoms/Card/Card.js +12 -45
- package/dist/cjs/components/atoms/Card/Card.js.map +1 -1
- package/dist/cjs/components/atoms/Checkbox/Checkbox.js +13 -51
- package/dist/cjs/components/atoms/Checkbox/Checkbox.js.map +1 -1
- package/dist/cjs/components/atoms/Divider/Divider.js +4 -31
- package/dist/cjs/components/atoms/Divider/Divider.js.map +1 -1
- package/dist/cjs/components/atoms/GroupButton/GroupButton.js +19 -57
- package/dist/cjs/components/atoms/GroupButton/GroupButton.js.map +1 -1
- package/dist/cjs/components/atoms/GroupButton/styled.js +11 -11
- package/dist/cjs/components/atoms/GroupButton/styled.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/AntDesign.js +6 -37
- package/dist/cjs/components/atoms/Icon/AntDesign.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Entypo.js +6 -37
- package/dist/cjs/components/atoms/Icon/Entypo.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Evil.js +6 -37
- package/dist/cjs/components/atoms/Icon/Evil.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Feather.js +6 -37
- package/dist/cjs/components/atoms/Icon/Feather.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/FontAwesome.js +6 -37
- package/dist/cjs/components/atoms/Icon/FontAwesome.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/FontAwesomeFive.js +6 -37
- package/dist/cjs/components/atoms/Icon/FontAwesomeFive.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Fontisto.js +6 -37
- package/dist/cjs/components/atoms/Icon/Fontisto.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Foundation.js +6 -37
- package/dist/cjs/components/atoms/Icon/Foundation.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Icon.js +13 -54
- package/dist/cjs/components/atoms/Icon/Icon.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Ionicon.js +6 -37
- package/dist/cjs/components/atoms/Icon/Ionicon.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Material.js +6 -37
- package/dist/cjs/components/atoms/Icon/Material.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/MaterialCommunity.js +11 -45
- package/dist/cjs/components/atoms/Icon/MaterialCommunity.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Octicon.js +6 -37
- package/dist/cjs/components/atoms/Icon/Octicon.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/SimpleLine.js +6 -37
- package/dist/cjs/components/atoms/Icon/SimpleLine.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/Zocial.js +6 -37
- package/dist/cjs/components/atoms/Icon/Zocial.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/functions.d.ts +1 -2
- package/dist/cjs/components/atoms/Icon/functions.js +29 -28
- package/dist/cjs/components/atoms/Icon/functions.js.map +1 -1
- package/dist/cjs/components/atoms/Icon/styled.d.ts +3 -0
- package/dist/cjs/components/atoms/Icon/styled.js +17 -0
- package/dist/cjs/components/atoms/Icon/styled.js.map +1 -0
- package/dist/cjs/components/atoms/Input/InputContainer/InputContainer.js +21 -67
- package/dist/cjs/components/atoms/Input/InputContainer/InputContainer.js.map +1 -1
- package/dist/cjs/components/atoms/Input/InputElement/InputElement.js +11 -47
- package/dist/cjs/components/atoms/Input/InputElement/InputElement.js.map +1 -1
- package/dist/cjs/components/atoms/Input/InputMaskElement/InputMaskElement.js +15 -52
- package/dist/cjs/components/atoms/Input/InputMaskElement/InputMaskElement.js.map +1 -1
- package/dist/cjs/components/atoms/Input/PressableInputContainer/PressableInputContainer.js +11 -43
- package/dist/cjs/components/atoms/Input/PressableInputContainer/PressableInputContainer.js.map +1 -1
- package/dist/cjs/components/atoms/Input/hooks/useNumberMask.js +1 -17
- package/dist/cjs/components/atoms/Input/hooks/useNumberMask.js.map +1 -1
- package/dist/cjs/components/atoms/Input/hooks/useStringMask.js +2 -2
- package/dist/cjs/components/atoms/Input/hooks/useStringMask.js.map +1 -1
- package/dist/cjs/components/atoms/Input/styled.js +1 -1
- package/dist/cjs/components/atoms/Input/styled.js.map +1 -1
- package/dist/cjs/components/atoms/Paper/Paper.js +8 -43
- package/dist/cjs/components/atoms/Paper/Paper.js.map +1 -1
- package/dist/cjs/components/atoms/PressableSurface/PressableSurface.js +12 -49
- package/dist/cjs/components/atoms/PressableSurface/PressableSurface.js.map +1 -1
- package/dist/cjs/components/atoms/ProgressBar/ProgressBar.js +16 -52
- package/dist/cjs/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/cjs/components/atoms/RadioButton/RadioButton.js +13 -51
- package/dist/cjs/components/atoms/RadioButton/RadioButton.js.map +1 -1
- package/dist/cjs/components/atoms/Switch/Switch.js +14 -53
- package/dist/cjs/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/cjs/components/atoms/Tag/Tag.js +16 -52
- package/dist/cjs/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/atoms/Text/Text.js +17 -59
- package/dist/cjs/components/atoms/Text/Text.js.map +1 -1
- package/dist/cjs/components/molecules/Calendar/Calendar.js +20 -60
- package/dist/cjs/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/cjs/components/molecules/Calendar/components/MonthWeek.js +3 -3
- package/dist/cjs/components/molecules/Calendar/components/MonthWeek.js.map +1 -1
- package/dist/cjs/components/molecules/Calendar/styled.js +5 -8
- package/dist/cjs/components/molecules/Calendar/styled.js.map +1 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +30 -81
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DatePicker/styled.js +3 -6
- package/dist/cjs/components/molecules/DatePicker/styled.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js +42 -104
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js +26 -72
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimeSelector/Selector.js +15 -51
- package/dist/cjs/components/molecules/DateTimeSelector/Selector.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/functions.js +1 -2
- package/dist/cjs/components/molecules/Grid/functions.js.map +1 -1
- package/dist/cjs/components/molecules/HintInputContainer/HintInputContainer.js +17 -55
- package/dist/cjs/components/molecules/HintInputContainer/HintInputContainer.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/IconComponent.js +5 -21
- package/dist/cjs/components/molecules/IconTextButton/IconComponent.js.map +1 -1
- package/dist/cjs/components/molecules/InputPassword/InputPasswordIcon.js +8 -41
- package/dist/cjs/components/molecules/InputPassword/InputPasswordIcon.js.map +1 -1
- package/dist/cjs/components/molecules/InputPassword/styled.js +14 -1
- package/dist/cjs/components/molecules/InputPassword/styled.js.map +1 -1
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js +8 -25
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/cjs/styles/light.js +7 -20
- package/dist/cjs/styles/light.js.map +1 -1
- package/dist/cjs/utils/masks.js +2 -2
- package/dist/cjs/utils/masks.js.map +1 -1
- package/dist/esm/components/atoms/BoxContent/BoxContent.js +4 -31
- package/dist/esm/components/atoms/BoxContent/BoxContent.js.map +1 -1
- package/dist/esm/components/atoms/BoxContent/styled.js +1 -1
- package/dist/esm/components/atoms/BoxContent/styled.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.js +18 -61
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Error.js +5 -23
- package/dist/esm/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Success.js +3 -21
- package/dist/esm/components/atoms/Button/States/Success.js.map +1 -1
- package/dist/esm/components/atoms/Card/Card.js +12 -45
- package/dist/esm/components/atoms/Card/Card.js.map +1 -1
- package/dist/esm/components/atoms/Checkbox/Checkbox.js +13 -51
- package/dist/esm/components/atoms/Checkbox/Checkbox.js.map +1 -1
- package/dist/esm/components/atoms/Divider/Divider.js +4 -31
- package/dist/esm/components/atoms/Divider/Divider.js.map +1 -1
- package/dist/esm/components/atoms/GroupButton/GroupButton.js +19 -57
- package/dist/esm/components/atoms/GroupButton/GroupButton.js.map +1 -1
- package/dist/esm/components/atoms/GroupButton/styled.js +11 -11
- package/dist/esm/components/atoms/GroupButton/styled.js.map +1 -1
- package/dist/esm/components/atoms/Icon/AntDesign.js +5 -36
- package/dist/esm/components/atoms/Icon/AntDesign.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Entypo.js +5 -36
- package/dist/esm/components/atoms/Icon/Entypo.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Evil.js +5 -36
- package/dist/esm/components/atoms/Icon/Evil.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Feather.js +5 -36
- package/dist/esm/components/atoms/Icon/Feather.js.map +1 -1
- package/dist/esm/components/atoms/Icon/FontAwesome.js +5 -36
- package/dist/esm/components/atoms/Icon/FontAwesome.js.map +1 -1
- package/dist/esm/components/atoms/Icon/FontAwesomeFive.js +5 -36
- package/dist/esm/components/atoms/Icon/FontAwesomeFive.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Fontisto.js +5 -36
- package/dist/esm/components/atoms/Icon/Fontisto.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Foundation.js +5 -36
- package/dist/esm/components/atoms/Icon/Foundation.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Icon.js +13 -54
- package/dist/esm/components/atoms/Icon/Icon.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Ionicon.js +5 -36
- package/dist/esm/components/atoms/Icon/Ionicon.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Material.js +5 -36
- package/dist/esm/components/atoms/Icon/Material.js.map +1 -1
- package/dist/esm/components/atoms/Icon/MaterialCommunity.js +10 -44
- package/dist/esm/components/atoms/Icon/MaterialCommunity.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Octicon.js +5 -36
- package/dist/esm/components/atoms/Icon/Octicon.js.map +1 -1
- package/dist/esm/components/atoms/Icon/SimpleLine.js +5 -36
- package/dist/esm/components/atoms/Icon/SimpleLine.js.map +1 -1
- package/dist/esm/components/atoms/Icon/Zocial.js +5 -36
- package/dist/esm/components/atoms/Icon/Zocial.js.map +1 -1
- package/dist/esm/components/atoms/Icon/functions.d.ts +1 -2
- package/dist/esm/components/atoms/Icon/functions.js +30 -22
- package/dist/esm/components/atoms/Icon/functions.js.map +1 -1
- package/dist/esm/components/atoms/Icon/styled.d.ts +3 -0
- package/dist/esm/components/atoms/Icon/styled.js +9 -0
- package/dist/esm/components/atoms/Icon/styled.js.map +1 -0
- package/dist/esm/components/atoms/Input/InputContainer/InputContainer.js +21 -67
- package/dist/esm/components/atoms/Input/InputContainer/InputContainer.js.map +1 -1
- package/dist/esm/components/atoms/Input/InputElement/InputElement.js +11 -47
- package/dist/esm/components/atoms/Input/InputElement/InputElement.js.map +1 -1
- package/dist/esm/components/atoms/Input/InputMaskElement/InputMaskElement.js +15 -52
- package/dist/esm/components/atoms/Input/InputMaskElement/InputMaskElement.js.map +1 -1
- package/dist/esm/components/atoms/Input/PressableInputContainer/PressableInputContainer.js +11 -43
- package/dist/esm/components/atoms/Input/PressableInputContainer/PressableInputContainer.js.map +1 -1
- package/dist/esm/components/atoms/Input/hooks/useNumberMask.js +1 -17
- package/dist/esm/components/atoms/Input/hooks/useNumberMask.js.map +1 -1
- package/dist/esm/components/atoms/Input/hooks/useStringMask.js +2 -2
- package/dist/esm/components/atoms/Input/hooks/useStringMask.js.map +1 -1
- package/dist/esm/components/atoms/Input/styled.js +1 -1
- package/dist/esm/components/atoms/Input/styled.js.map +1 -1
- package/dist/esm/components/atoms/Paper/Paper.js +8 -43
- package/dist/esm/components/atoms/Paper/Paper.js.map +1 -1
- package/dist/esm/components/atoms/PressableSurface/PressableSurface.js +12 -49
- package/dist/esm/components/atoms/PressableSurface/PressableSurface.js.map +1 -1
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js +16 -52
- package/dist/esm/components/atoms/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/esm/components/atoms/RadioButton/RadioButton.js +13 -51
- package/dist/esm/components/atoms/RadioButton/RadioButton.js.map +1 -1
- package/dist/esm/components/atoms/Switch/Switch.js +14 -53
- package/dist/esm/components/atoms/Switch/Switch.js.map +1 -1
- package/dist/esm/components/atoms/Tag/Tag.js +16 -52
- package/dist/esm/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/esm/components/atoms/Text/Text.js +17 -59
- package/dist/esm/components/atoms/Text/Text.js.map +1 -1
- package/dist/esm/components/molecules/Calendar/Calendar.js +20 -60
- package/dist/esm/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/molecules/Calendar/components/MonthWeek.js +3 -3
- package/dist/esm/components/molecules/Calendar/components/MonthWeek.js.map +1 -1
- package/dist/esm/components/molecules/Calendar/styled.js +5 -8
- package/dist/esm/components/molecules/Calendar/styled.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +30 -81
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/styled.js +3 -6
- package/dist/esm/components/molecules/DatePicker/styled.js.map +1 -1
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js +42 -104
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js +26 -72
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/esm/components/molecules/DateTimeSelector/Selector.js +15 -51
- package/dist/esm/components/molecules/DateTimeSelector/Selector.js.map +1 -1
- package/dist/esm/components/molecules/Grid/functions.js +1 -2
- package/dist/esm/components/molecules/Grid/functions.js.map +1 -1
- package/dist/esm/components/molecules/HintInputContainer/HintInputContainer.js +17 -55
- package/dist/esm/components/molecules/HintInputContainer/HintInputContainer.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/IconComponent.js +5 -21
- package/dist/esm/components/molecules/IconTextButton/IconComponent.js.map +1 -1
- package/dist/esm/components/molecules/InputPassword/InputPasswordIcon.js +8 -41
- package/dist/esm/components/molecules/InputPassword/InputPasswordIcon.js.map +1 -1
- package/dist/esm/components/molecules/InputPassword/styled.js +14 -1
- package/dist/esm/components/molecules/InputPassword/styled.js.map +1 -1
- package/dist/esm/components/molecules/Snackbar/Snackbar.js +8 -25
- package/dist/esm/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/styles/light.js +8 -21
- package/dist/esm/styles/light.js.map +1 -1
- package/dist/esm/utils/masks.js +2 -2
- package/dist/esm/utils/masks.js.map +1 -1
- package/package.json +2 -2
|
@@ -2,71 +2,24 @@ import React__default from 'react';
|
|
|
2
2
|
import Text from '../../Text/Text.js';
|
|
3
3
|
import { StyledInputContainer, StyledBorderKeeper, StyledIconContent, StyledLabelContainer } from '../styled.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
|
-
const InputContainer = (_a) => {
|
|
37
|
-
var _b = _a, {
|
|
38
|
-
label,
|
|
39
|
-
labelColor = "medium",
|
|
40
|
-
labelColorTone,
|
|
41
|
-
labelColorVariant,
|
|
42
|
-
labelTypography = "label",
|
|
43
|
-
labelStack = "default",
|
|
44
|
-
labelWeight = "bold",
|
|
45
|
-
LabelComponent = Text,
|
|
46
|
-
leftComponent,
|
|
47
|
-
rightComponent,
|
|
48
|
-
inputContainerStyle,
|
|
49
|
-
disabled,
|
|
50
|
-
focused,
|
|
51
|
-
variant,
|
|
52
|
-
children
|
|
53
|
-
} = _b, rest = __objRest(_b, [
|
|
54
|
-
"label",
|
|
55
|
-
"labelColor",
|
|
56
|
-
"labelColorTone",
|
|
57
|
-
"labelColorVariant",
|
|
58
|
-
"labelTypography",
|
|
59
|
-
"labelStack",
|
|
60
|
-
"labelWeight",
|
|
61
|
-
"LabelComponent",
|
|
62
|
-
"leftComponent",
|
|
63
|
-
"rightComponent",
|
|
64
|
-
"inputContainerStyle",
|
|
65
|
-
"disabled",
|
|
66
|
-
"focused",
|
|
67
|
-
"variant",
|
|
68
|
-
"children"
|
|
69
|
-
]);
|
|
5
|
+
const InputContainer = ({
|
|
6
|
+
label,
|
|
7
|
+
labelColor = "medium",
|
|
8
|
+
labelColorTone,
|
|
9
|
+
labelColorVariant,
|
|
10
|
+
labelTypography = "label",
|
|
11
|
+
labelStack = "default",
|
|
12
|
+
labelWeight = "bold",
|
|
13
|
+
LabelComponent = Text,
|
|
14
|
+
leftComponent,
|
|
15
|
+
rightComponent,
|
|
16
|
+
inputContainerStyle,
|
|
17
|
+
disabled,
|
|
18
|
+
focused,
|
|
19
|
+
variant,
|
|
20
|
+
children,
|
|
21
|
+
...rest
|
|
22
|
+
}) => {
|
|
70
23
|
let _defaultLabelColor = labelColorVariant;
|
|
71
24
|
if (variant === "error")
|
|
72
25
|
_defaultLabelColor = "error";
|
|
@@ -74,11 +27,12 @@ const InputContainer = (_a) => {
|
|
|
74
27
|
_defaultLabelColor = "success";
|
|
75
28
|
const _labelColorVariant = disabled ? "secondary" : _defaultLabelColor;
|
|
76
29
|
const _labelColorTone = disabled ? "light" : labelColorTone;
|
|
77
|
-
return /* @__PURE__ */ React__default.createElement(StyledInputContainer,
|
|
30
|
+
return /* @__PURE__ */ React__default.createElement(StyledInputContainer, {
|
|
31
|
+
...rest,
|
|
78
32
|
style: inputContainerStyle,
|
|
79
33
|
focused,
|
|
80
34
|
disabled
|
|
81
|
-
}
|
|
35
|
+
}, /* @__PURE__ */ React__default.createElement(StyledBorderKeeper, {
|
|
82
36
|
focused,
|
|
83
37
|
disabled,
|
|
84
38
|
borderColor: _defaultLabelColor
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputContainer.js","sources":["../../../../../../src/components/atoms/Input/InputContainer/InputContainer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { InputElementProps } from '..';\nimport {\n ColorGradationType,\n ColorType,\n FontColorType,\n FontStackType,\n FontWeightType,\n TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { Text, TextProps } from '../../Text';\nimport {\n StyledBorderKeeper,\n StyledIconContent,\n StyledInputContainer,\n StyledLabelContainer,\n} from '../styled';\n\nexport type InputVariantType = 'default' | 'error' | 'success';\n\nexport interface InputContainerProps {\n label?: string;\n labelColor?: FontColorType;\n labelColorVariant?: ColorType;\n labelColorTone?: ColorGradationType;\n labelTypography?: TypographyVariationType;\n labelStack?: FontStackType;\n LabelComponent?: FC<TextProps>;\n labelWeight?: FontWeightType;\n leftComponent?: JSX.Element;\n rightComponent?: JSX.Element;\n borderColor?: ColorType;\n borderColorGradation?: ColorGradationType;\n style?: StyleProp<ViewStyle>;\n inputContainerStyle?: StyleProp<ViewStyle>;\n focused?: boolean;\n disabled?: boolean;\n variant?: InputVariantType;\n hint?: string;\n hintComponent?: JSX.Element;\n}\n\nconst InputContainer: FC<InputContainerProps & Partial<InputElementProps>> = ({\n label,\n labelColor = 'medium',\n labelColorTone,\n labelColorVariant,\n labelTypography = 'label',\n labelStack = 'default',\n labelWeight = 'bold',\n LabelComponent = Text,\n leftComponent,\n rightComponent,\n inputContainerStyle,\n disabled,\n focused,\n variant,\n children,\n ...rest\n}): JSX.Element => {\n let _defaultLabelColor = labelColorVariant;\n if (variant === 'error') _defaultLabelColor = 'error';\n if (variant === 'success') _defaultLabelColor = 'success';\n const _labelColorVariant = disabled ? 'secondary' : _defaultLabelColor;\n const _labelColorTone = disabled ? 'light' : labelColorTone;\n\n return (\n <StyledInputContainer\n {...rest}\n style={inputContainerStyle}\n focused={focused}\n disabled={disabled}\n >\n <StyledBorderKeeper\n focused={focused}\n disabled={disabled}\n borderColor={_defaultLabelColor}\n />\n\n {leftComponent && <StyledIconContent>{leftComponent}</StyledIconContent>}\n\n <StyledLabelContainer\n leftComponent={leftComponent}\n rightComponent={rightComponent}\n >\n {label && (\n <LabelComponent\n fontColor={labelColor}\n colorTone={_labelColorTone}\n colorVariant={_labelColorVariant}\n typography={labelTypography}\n fontWeight={labelWeight}\n fontStack={labelStack}\n >\n {label}\n </LabelComponent>\n )}\n {children}\n </StyledLabelContainer>\n\n {rightComponent && (\n <StyledIconContent>{rightComponent}</StyledIconContent>\n )}\n </StyledInputContainer>\n );\n};\n\nexport default InputContainer;\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputContainer.js","sources":["../../../../../../src/components/atoms/Input/InputContainer/InputContainer.tsx"],"sourcesContent":["import React, { FC } from 'react';\nimport { StyleProp, ViewStyle } from 'react-native';\nimport { InputElementProps } from '..';\nimport {\n ColorGradationType,\n ColorType,\n FontColorType,\n FontStackType,\n FontWeightType,\n TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { Text, TextProps } from '../../Text';\nimport {\n StyledBorderKeeper,\n StyledIconContent,\n StyledInputContainer,\n StyledLabelContainer,\n} from '../styled';\n\nexport type InputVariantType = 'default' | 'error' | 'success';\n\nexport interface InputContainerProps {\n label?: string;\n labelColor?: FontColorType;\n labelColorVariant?: ColorType;\n labelColorTone?: ColorGradationType;\n labelTypography?: TypographyVariationType;\n labelStack?: FontStackType;\n LabelComponent?: FC<TextProps>;\n labelWeight?: FontWeightType;\n leftComponent?: JSX.Element;\n rightComponent?: JSX.Element;\n borderColor?: ColorType;\n borderColorGradation?: ColorGradationType;\n style?: StyleProp<ViewStyle>;\n inputContainerStyle?: StyleProp<ViewStyle>;\n focused?: boolean;\n disabled?: boolean;\n variant?: InputVariantType;\n hint?: string;\n hintComponent?: JSX.Element;\n}\n\nconst InputContainer: FC<InputContainerProps & Partial<InputElementProps>> = ({\n label,\n labelColor = 'medium',\n labelColorTone,\n labelColorVariant,\n labelTypography = 'label',\n labelStack = 'default',\n labelWeight = 'bold',\n LabelComponent = Text,\n leftComponent,\n rightComponent,\n inputContainerStyle,\n disabled,\n focused,\n variant,\n children,\n ...rest\n}): JSX.Element => {\n let _defaultLabelColor = labelColorVariant;\n if (variant === 'error') _defaultLabelColor = 'error';\n if (variant === 'success') _defaultLabelColor = 'success';\n const _labelColorVariant = disabled ? 'secondary' : _defaultLabelColor;\n const _labelColorTone = disabled ? 'light' : labelColorTone;\n\n return (\n <StyledInputContainer\n {...rest}\n style={inputContainerStyle}\n focused={focused}\n disabled={disabled}\n >\n <StyledBorderKeeper\n focused={focused}\n disabled={disabled}\n borderColor={_defaultLabelColor}\n />\n\n {leftComponent && <StyledIconContent>{leftComponent}</StyledIconContent>}\n\n <StyledLabelContainer\n leftComponent={leftComponent}\n rightComponent={rightComponent}\n >\n {label && (\n <LabelComponent\n fontColor={labelColor}\n colorTone={_labelColorTone}\n colorVariant={_labelColorVariant}\n typography={labelTypography}\n fontWeight={labelWeight}\n fontStack={labelStack}\n >\n {label}\n </LabelComponent>\n )}\n {children}\n </StyledLabelContainer>\n\n {rightComponent && (\n <StyledIconContent>{rightComponent}</StyledIconContent>\n )}\n </StyledInputContainer>\n );\n};\n\nexport default InputContainer;\n"],"names":["React"],"mappings":";;;;AA2CA,MAAM,iBAAuE,CAAC;AAAA,EAC5E,KAAA;AAAA,EACA,UAAa,GAAA,QAAA;AAAA,EACb,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAkB,GAAA,OAAA;AAAA,EAClB,UAAa,GAAA,SAAA;AAAA,EACb,WAAc,GAAA,MAAA;AAAA,EACd,cAAiB,GAAA,IAAA;AAAA,EACjB,aAAA;AAAA,EACA,cAAA;AAAA,EACA,mBAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAmB,KAAA;AACjB,EAAA,IAAI,kBAAqB,GAAA,iBAAA,CAAA;AACzB,EAAA,IAAI,OAAY,KAAA,OAAA;AAAS,IAAqB,kBAAA,GAAA,OAAA,CAAA;AAC9C,EAAA,IAAI,OAAY,KAAA,SAAA;AAAW,IAAqB,kBAAA,GAAA,SAAA,CAAA;AAChD,EAAM,MAAA,kBAAA,GAAqB,WAAW,WAAc,GAAA,kBAAA,CAAA;AACpD,EAAM,MAAA,eAAA,GAAkB,WAAW,OAAU,GAAA,cAAA,CAAA;AAE7C,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAA,IACE,GAAG,IAAA;AAAA,IACJ,KAAO,EAAA,mBAAA;AAAA,IACP,OAAA;AAAA,IACA,QAAA;AAAA,GAAA,kBAECA,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAa,EAAA,kBAAA;AAAA,GACf,GAEC,aAAiB,oBAAAA,cAAA,CAAA,aAAA,CAAC,iBAAmB,EAAA,IAAA,EAAA,aAAc,mBAEnDA,cAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAA,IACC,aAAA;AAAA,IACA,cAAA;AAAA,GAAA,EAEC,yBACEA,cAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,SAAW,EAAA,UAAA;AAAA,IACX,SAAW,EAAA,eAAA;AAAA,IACX,YAAc,EAAA,kBAAA;AAAA,IACd,UAAY,EAAA,eAAA;AAAA,IACZ,UAAY,EAAA,WAAA;AAAA,IACZ,SAAW,EAAA,UAAA;AAAA,GAEV,EAAA,KACH,GAED,QACH,CAAA,EAEC,kCACEA,cAAA,CAAA,aAAA,CAAA,iBAAA,EAAA,IAAA,EAAmB,cAAe,CAEvC,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,55 +2,19 @@ import { useTheme } from '@emotion/react';
|
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { StyledInputElement } from '../styled.js';
|
|
4
4
|
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __defProps = Object.defineProperties;
|
|
7
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
8
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
9
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
-
var __spreadValues = (a, b) => {
|
|
13
|
-
for (var prop in b || (b = {}))
|
|
14
|
-
if (__hasOwnProp.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
if (__getOwnPropSymbols)
|
|
17
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
-
if (__propIsEnum.call(b, prop))
|
|
19
|
-
__defNormalProp(a, prop, b[prop]);
|
|
20
|
-
}
|
|
21
|
-
return a;
|
|
22
|
-
};
|
|
23
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __objRest = (source, exclude) => {
|
|
25
|
-
var target = {};
|
|
26
|
-
for (var prop in source)
|
|
27
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
if (source != null && __getOwnPropSymbols)
|
|
30
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
31
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
32
|
-
target[prop] = source[prop];
|
|
33
|
-
}
|
|
34
|
-
return target;
|
|
35
|
-
};
|
|
36
5
|
const InputElement = React__default.forwardRef(
|
|
37
|
-
(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
"onChange",
|
|
46
|
-
"placeholder",
|
|
47
|
-
"value",
|
|
48
|
-
"disabled",
|
|
49
|
-
"placeholderTextColor"
|
|
50
|
-
]);
|
|
6
|
+
({
|
|
7
|
+
onChange,
|
|
8
|
+
placeholder,
|
|
9
|
+
value,
|
|
10
|
+
disabled = false,
|
|
11
|
+
placeholderTextColor,
|
|
12
|
+
...rest
|
|
13
|
+
}, ref) => {
|
|
51
14
|
const theme = useTheme();
|
|
52
15
|
const _placeholderColor = placeholderTextColor || theme.font.color.dark;
|
|
53
|
-
return /* @__PURE__ */ React__default.createElement(StyledInputElement,
|
|
16
|
+
return /* @__PURE__ */ React__default.createElement(StyledInputElement, {
|
|
17
|
+
...rest,
|
|
54
18
|
ref,
|
|
55
19
|
onChangeText: onChange,
|
|
56
20
|
value,
|
|
@@ -58,7 +22,7 @@ const InputElement = React__default.forwardRef(
|
|
|
58
22
|
placeholderTextColor: _placeholderColor,
|
|
59
23
|
disabled,
|
|
60
24
|
editable: !disabled
|
|
61
|
-
})
|
|
25
|
+
});
|
|
62
26
|
}
|
|
63
27
|
);
|
|
64
28
|
InputElement.displayName = "InputElement";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputElement.js","sources":["../../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React from 'react';\nimport { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\n\nexport interface InputElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n value?: string;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: string) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst InputElement = React.forwardRef<TextInput, InputElementProps>(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n ...rest\n },\n ref\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChange}\n value={value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputElement.js","sources":["../../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React from 'react';\nimport { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\n\nexport interface InputElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n value?: string;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: string) => void;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst InputElement = React.forwardRef<TextInput, InputElementProps>(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n ...rest\n },\n ref\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChange}\n value={value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"names":["React"],"mappings":";;;;AAiBA,MAAM,eAAeA,cAAM,CAAA,UAAA;AAAA,EACzB,CACE;AAAA,IACE,QAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,oBAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACgB,KAAA;AAChB,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,IAAA,MAAM,iBAAoB,GAAA,oBAAA,IAAwB,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAA;AAEnE,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,YAAc,EAAA,QAAA;AAAA,MACd,KAAA;AAAA,MACA,WAAA;AAAA,MACA,oBAAsB,EAAA,iBAAA;AAAA,MACtB,QAAA;AAAA,MACA,UAAU,CAAC,QAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}
|
|
@@ -4,54 +4,16 @@ import { StyledInputElement } from '../styled.js';
|
|
|
4
4
|
import { useStringMask } from '../hooks/useStringMask.js';
|
|
5
5
|
import { useNumberMask } from '../hooks/useNumberMask.js';
|
|
6
6
|
|
|
7
|
-
var __defProp = Object.defineProperty;
|
|
8
|
-
var __defProps = Object.defineProperties;
|
|
9
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
10
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
11
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
12
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
13
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
14
|
-
var __spreadValues = (a, b) => {
|
|
15
|
-
for (var prop in b || (b = {}))
|
|
16
|
-
if (__hasOwnProp.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
if (__getOwnPropSymbols)
|
|
19
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
20
|
-
if (__propIsEnum.call(b, prop))
|
|
21
|
-
__defNormalProp(a, prop, b[prop]);
|
|
22
|
-
}
|
|
23
|
-
return a;
|
|
24
|
-
};
|
|
25
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
26
|
-
var __objRest = (source, exclude) => {
|
|
27
|
-
var target = {};
|
|
28
|
-
for (var prop in source)
|
|
29
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
30
|
-
target[prop] = source[prop];
|
|
31
|
-
if (source != null && __getOwnPropSymbols)
|
|
32
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
33
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
34
|
-
target[prop] = source[prop];
|
|
35
|
-
}
|
|
36
|
-
return target;
|
|
37
|
-
};
|
|
38
7
|
const InputMaskElement = React__default.forwardRef(
|
|
39
|
-
(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
"onChange",
|
|
49
|
-
"placeholder",
|
|
50
|
-
"value",
|
|
51
|
-
"disabled",
|
|
52
|
-
"placeholderTextColor",
|
|
53
|
-
"mask"
|
|
54
|
-
]);
|
|
8
|
+
({
|
|
9
|
+
onChange,
|
|
10
|
+
placeholder,
|
|
11
|
+
value,
|
|
12
|
+
disabled = false,
|
|
13
|
+
placeholderTextColor,
|
|
14
|
+
mask,
|
|
15
|
+
...rest
|
|
16
|
+
}, ref) => {
|
|
55
17
|
const theme = useTheme();
|
|
56
18
|
const _placeholderColor = placeholderTextColor || theme.font.color.dark;
|
|
57
19
|
const getInputHook = (value2) => {
|
|
@@ -65,11 +27,11 @@ const InputMaskElement = React__default.forwardRef(
|
|
|
65
27
|
return [void 0, void 0];
|
|
66
28
|
}
|
|
67
29
|
};
|
|
68
|
-
const [maskValue, setMaskValue] = getInputHook(value
|
|
69
|
-
const _value = maskValue === void 0 ? value
|
|
30
|
+
const [maskValue, setMaskValue] = getInputHook(value ?? "");
|
|
31
|
+
const _value = maskValue === void 0 ? value?.toString() : maskValue.formatted ? maskValue.formatted : "";
|
|
70
32
|
useEffect(() => {
|
|
71
33
|
if (onChange) {
|
|
72
|
-
onChange(maskValue
|
|
34
|
+
onChange(maskValue?.raw);
|
|
73
35
|
}
|
|
74
36
|
}, [maskValue]);
|
|
75
37
|
const onChangeValue = useCallback(
|
|
@@ -90,7 +52,8 @@ const InputMaskElement = React__default.forwardRef(
|
|
|
90
52
|
onChangeValue(value);
|
|
91
53
|
}
|
|
92
54
|
}, [value]);
|
|
93
|
-
return /* @__PURE__ */ React__default.createElement(StyledInputElement,
|
|
55
|
+
return /* @__PURE__ */ React__default.createElement(StyledInputElement, {
|
|
56
|
+
...rest,
|
|
94
57
|
ref,
|
|
95
58
|
onChangeText: onChangeValue,
|
|
96
59
|
value: _value,
|
|
@@ -98,7 +61,7 @@ const InputMaskElement = React__default.forwardRef(
|
|
|
98
61
|
placeholderTextColor: _placeholderColor,
|
|
99
62
|
disabled,
|
|
100
63
|
editable: !disabled
|
|
101
|
-
})
|
|
64
|
+
});
|
|
102
65
|
}
|
|
103
66
|
);
|
|
104
67
|
InputMaskElement.displayName = "InputMaskElement";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMaskElement.js","sources":["../../../../../../src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { useCallback, useEffect } from 'react';\nimport { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\nimport { MaskType, useStringMask } from '../hooks/useStringMask';\nimport { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';\n\nexport interface InputMaskElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n value?: string | number;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: any) => void;\n /**\n To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])\n A MaskType can be a string, RegExp, or Array<RegExp>.\n In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.\n For example a phone mask can be represented as ['(99) \\\\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.\n To use mask for numbers you have to pass a CurrencyOptions object\n A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.\n **/\n mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n mask,\n ...rest\n },\n ref\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n const getInputHook = (value: string | number) => {\n if (mask !== undefined) {\n if (Array.isArray(mask) || typeof mask === 'function') {\n return useStringMask(mask, value);\n } else {\n return useNumberMask(mask, value);\n }\n } else {\n return [undefined, undefined];\n }\n };\n\n const [maskValue, setMaskValue] = getInputHook(value ?? '');\n\n const _value =\n maskValue === undefined\n ? value?.toString()\n : maskValue.formatted\n ? maskValue.formatted\n : '';\n\n useEffect(() => {\n if (onChange) {\n onChange(maskValue?.raw);\n }\n }, [maskValue]);\n\n const onChangeValue = useCallback(\n (value: string | number) => {\n if (maskValue !== undefined && setMaskValue !== undefined) {\n setMaskValue(value);\n } else onChange && onChange(value);\n },\n [value]\n );\n\n useEffect(() => {\n /** Used to reinitialize maskValue when the value is updated in the parent component **/\n if (\n maskValue !== undefined &&\n setMaskValue !== undefined &&\n value !== undefined &&\n typeof maskValue === 'object'\n ) {\n /** Case there is a mask **/\n if (\n maskValue.raw !== undefined &&\n maskValue.raw.toString() !== value.toString()\n ) {\n onChangeValue(value);\n }\n } else if (maskValue === undefined && value !== undefined) {\n onChangeValue(value);\n }\n }, [value]);\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChangeValue}\n value={_value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nInputMaskElement.displayName = 'InputMaskElement';\n\nexport default InputMaskElement;\n"],"names":["React","value"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputMaskElement.js","sources":["../../../../../../src/components/atoms/Input/InputMaskElement/InputMaskElement.tsx"],"sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { useCallback, useEffect } from 'react';\nimport { StyleProp, TextInput, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\nimport { MaskType, useStringMask } from '../hooks/useStringMask';\nimport { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';\n\nexport interface InputMaskElementProps\n extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n style?: StyleProp<TextStyle>;\n value?: string | number;\n placeholder?: string;\n disabled?: boolean;\n onChange?: (value: any) => void;\n /**\n To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])\n A MaskType can be a string, RegExp, or Array<RegExp>.\n In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.\n For example a phone mask can be represented as ['(99) \\\\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.\n To use mask for numbers you have to pass a CurrencyOptions object\n A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.\n **/\n mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;\n onFocus?: () => void;\n onBlur?: () => void;\n}\n\nconst InputMaskElement = React.forwardRef<TextInput, InputMaskElementProps>(\n (\n {\n onChange,\n placeholder,\n value,\n disabled = false,\n placeholderTextColor,\n mask,\n ...rest\n },\n ref\n ): JSX.Element => {\n const theme = useTheme() as ThemeProp;\n\n const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n const getInputHook = (value: string | number) => {\n if (mask !== undefined) {\n if (Array.isArray(mask) || typeof mask === 'function') {\n return useStringMask(mask, value);\n } else {\n return useNumberMask(mask, value);\n }\n } else {\n return [undefined, undefined];\n }\n };\n\n const [maskValue, setMaskValue] = getInputHook(value ?? '');\n\n const _value =\n maskValue === undefined\n ? value?.toString()\n : maskValue.formatted\n ? maskValue.formatted\n : '';\n\n useEffect(() => {\n if (onChange) {\n onChange(maskValue?.raw);\n }\n }, [maskValue]);\n\n const onChangeValue = useCallback(\n (value: string | number) => {\n if (maskValue !== undefined && setMaskValue !== undefined) {\n setMaskValue(value);\n } else onChange && onChange(value);\n },\n [value]\n );\n\n useEffect(() => {\n /** Used to reinitialize maskValue when the value is updated in the parent component **/\n if (\n maskValue !== undefined &&\n setMaskValue !== undefined &&\n value !== undefined &&\n typeof maskValue === 'object'\n ) {\n /** Case there is a mask **/\n if (\n maskValue.raw !== undefined &&\n maskValue.raw.toString() !== value.toString()\n ) {\n onChangeValue(value);\n }\n } else if (maskValue === undefined && value !== undefined) {\n onChangeValue(value);\n }\n }, [value]);\n\n return (\n <StyledInputElement\n {...rest}\n ref={ref}\n onChangeText={onChangeValue}\n value={_value}\n placeholder={placeholder}\n placeholderTextColor={_placeholderColor}\n disabled={disabled}\n editable={!disabled}\n />\n );\n }\n);\n\nInputMaskElement.displayName = 'InputMaskElement';\n\nexport default InputMaskElement;\n"],"names":["React","value"],"mappings":";;;;;;AA4BA,MAAM,mBAAmBA,cAAM,CAAA,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,QAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,oBAAA;AAAA,IACA,IAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACgB,KAAA;AAChB,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAA,MAAM,iBAAoB,GAAA,oBAAA,IAAwB,KAAM,CAAA,IAAA,CAAK,KAAM,CAAA,IAAA,CAAA;AAEnE,IAAM,MAAA,YAAA,GAAe,CAACC,MAA2B,KAAA;AAC/C,MAAA,IAAI,SAAS,KAAW,CAAA,EAAA;AACtB,QAAA,IAAI,MAAM,OAAQ,CAAA,IAAI,CAAK,IAAA,OAAO,SAAS,UAAY,EAAA;AACrD,UAAO,OAAA,aAAA,CAAc,MAAMA,MAAK,CAAA,CAAA;AAAA,SAC3B,MAAA;AACL,UAAO,OAAA,aAAA,CAAc,MAAMA,MAAK,CAAA,CAAA;AAAA,SAClC;AAAA,OACK,MAAA;AACL,QAAO,OAAA,CAAC,QAAW,KAAS,CAAA,CAAA,CAAA;AAAA,OAC9B;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,YAAA,CAAa,SAAS,EAAE,CAAA,CAAA;AAE1D,IAAM,MAAA,MAAA,GACJ,cAAc,KACV,CAAA,GAAA,KAAA,EAAO,UACP,GAAA,SAAA,CAAU,SACV,GAAA,SAAA,CAAU,SACV,GAAA,EAAA,CAAA;AAEN,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,WAAW,GAAG,CAAA,CAAA;AAAA,OACzB;AAAA,KACF,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,CAACA,MAA2B,KAAA;AAC1B,QAAI,IAAA,SAAA,KAAc,KAAa,CAAA,IAAA,YAAA,KAAiB,KAAW,CAAA,EAAA;AACzD,UAAA,YAAA,CAAaA,MAAK,CAAA,CAAA;AAAA,SACpB;AAAO,UAAA,QAAA,IAAY,SAASA,MAAK,CAAA,CAAA;AAAA,OACnC;AAAA,MACA,CAAC,KAAK,CAAA;AAAA,KACR,CAAA;AAEA,IAAA,SAAA,CAAU,MAAM;AAEd,MACE,IAAA,SAAA,KAAc,UACd,YAAiB,KAAA,KAAA,CAAA,IACjB,UAAU,KACV,CAAA,IAAA,OAAO,cAAc,QACrB,EAAA;AAEA,QACE,IAAA,SAAA,CAAU,QAAQ,KAClB,CAAA,IAAA,SAAA,CAAU,IAAI,QAAS,EAAA,KAAM,KAAM,CAAA,QAAA,EACnC,EAAA;AACA,UAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,SACrB;AAAA,OACS,MAAA,IAAA,SAAA,KAAc,KAAa,CAAA,IAAA,KAAA,KAAU,KAAW,CAAA,EAAA;AACzD,QAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,OACrB;AAAA,KACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,IAAA,uBACGD,cAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,YAAc,EAAA,aAAA;AAAA,MACd,KAAO,EAAA,MAAA;AAAA,MACP,WAAA;AAAA,MACA,oBAAsB,EAAA,iBAAA;AAAA,MACtB,QAAA;AAAA,MACA,UAAU,CAAC,QAAA;AAAA,KACb,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}
|
|
@@ -2,53 +2,21 @@ import * as React from 'react';
|
|
|
2
2
|
import InputContainer from '../InputContainer/InputContainer.js';
|
|
3
3
|
import { StyledPressableSurface } from './styled.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
|
-
var __objRest = (source, exclude) => {
|
|
22
|
-
var target = {};
|
|
23
|
-
for (var prop in source)
|
|
24
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
-
target[prop] = source[prop];
|
|
26
|
-
if (source != null && __getOwnPropSymbols)
|
|
27
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
-
target[prop] = source[prop];
|
|
30
|
-
}
|
|
31
|
-
return target;
|
|
32
|
-
};
|
|
33
|
-
const PressableInputContainer = (_a) => {
|
|
34
|
-
var _b = _a, {
|
|
35
|
-
onPress,
|
|
36
|
-
disabled,
|
|
37
|
-
style,
|
|
38
|
-
children
|
|
39
|
-
} = _b, rest = __objRest(_b, [
|
|
40
|
-
"onPress",
|
|
41
|
-
"disabled",
|
|
42
|
-
"style",
|
|
43
|
-
"children"
|
|
44
|
-
]);
|
|
5
|
+
const PressableInputContainer = ({
|
|
6
|
+
onPress,
|
|
7
|
+
disabled,
|
|
8
|
+
style,
|
|
9
|
+
children,
|
|
10
|
+
...rest
|
|
11
|
+
}) => {
|
|
45
12
|
return /* @__PURE__ */ React.createElement(StyledPressableSurface, {
|
|
46
13
|
onPress,
|
|
47
14
|
disabled,
|
|
48
15
|
style
|
|
49
|
-
}, /* @__PURE__ */ React.createElement(InputContainer,
|
|
50
|
-
disabled
|
|
51
|
-
|
|
16
|
+
}, /* @__PURE__ */ React.createElement(InputContainer, {
|
|
17
|
+
disabled,
|
|
18
|
+
...rest
|
|
19
|
+
}, children));
|
|
52
20
|
};
|
|
53
21
|
|
|
54
22
|
export { PressableInputContainer as default };
|
package/dist/esm/components/atoms/Input/PressableInputContainer/PressableInputContainer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PressableInputContainer.js","sources":["../../../../../../src/components/atoms/Input/PressableInputContainer/PressableInputContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';\nimport InputContainer, {\n InputContainerProps,\n} from '../InputContainer/InputContainer';\nimport { StyledPressableSurface } from './styled';\n\nexport interface PressableInputContainerProps\n extends Omit<\n InputContainerProps,\n 'value' | 'onChange' | 'onChangeText' | 'disabled' | 'style'\n > {\n onPress?: () => void | never;\n disabled?: boolean;\n style?:\n | StyleProp<ViewStyle>\n | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);\n}\n\nconst PressableInputContainer: React.FC<PressableInputContainerProps> = ({\n onPress,\n disabled,\n style,\n children,\n ...rest\n}) => {\n return (\n <StyledPressableSurface onPress={onPress} disabled={disabled} style={style}>\n <InputContainer disabled={disabled} {...rest}>\n {children}\n </InputContainer>\n </StyledPressableSurface>\n );\n};\n\nexport default PressableInputContainer;\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PressableInputContainer.js","sources":["../../../../../../src/components/atoms/Input/PressableInputContainer/PressableInputContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PressableStateCallbackType, StyleProp, ViewStyle } from 'react-native';\nimport InputContainer, {\n InputContainerProps,\n} from '../InputContainer/InputContainer';\nimport { StyledPressableSurface } from './styled';\n\nexport interface PressableInputContainerProps\n extends Omit<\n InputContainerProps,\n 'value' | 'onChange' | 'onChangeText' | 'disabled' | 'style'\n > {\n onPress?: () => void | never;\n disabled?: boolean;\n style?:\n | StyleProp<ViewStyle>\n | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>);\n}\n\nconst PressableInputContainer: React.FC<PressableInputContainerProps> = ({\n onPress,\n disabled,\n style,\n children,\n ...rest\n}) => {\n return (\n <StyledPressableSurface onPress={onPress} disabled={disabled} style={style}>\n <InputContainer disabled={disabled} {...rest}>\n {children}\n </InputContainer>\n </StyledPressableSurface>\n );\n};\n\nexport default PressableInputContainer;\n"],"names":[],"mappings":";;;;AAmBA,MAAM,0BAAkE,CAAC;AAAA,EACvE,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAM,KAAA;AACJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,sBAAA,EAAA;AAAA,IAAuB,OAAA;AAAA,IAAkB,QAAA;AAAA,IAAoB,KAAA;AAAA,GAAA,kBAC3D,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IAAe,QAAA;AAAA,IAAqB,GAAG,IAAA;AAAA,GAAA,EACrC,QACH,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -2,22 +2,6 @@ import currency from 'currency.js';
|
|
|
2
2
|
import { useCallback, useState } from 'react';
|
|
3
3
|
import { extractNumbersFromString } from '../../../../utils/extractNumbersFromString.js';
|
|
4
4
|
|
|
5
|
-
var __defProp = Object.defineProperty;
|
|
6
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
-
var __spreadValues = (a, b) => {
|
|
11
|
-
for (var prop in b || (b = {}))
|
|
12
|
-
if (__hasOwnProp.call(b, prop))
|
|
13
|
-
__defNormalProp(a, prop, b[prop]);
|
|
14
|
-
if (__getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
-
if (__propIsEnum.call(b, prop))
|
|
17
|
-
__defNormalProp(a, prop, b[prop]);
|
|
18
|
-
}
|
|
19
|
-
return a;
|
|
20
|
-
};
|
|
21
5
|
const DEFAULT_OPTIONS = {
|
|
22
6
|
symbol: "R$ ",
|
|
23
7
|
separator: ".",
|
|
@@ -26,7 +10,7 @@ const DEFAULT_OPTIONS = {
|
|
|
26
10
|
};
|
|
27
11
|
const getRegex = (precision) => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, "g");
|
|
28
12
|
const getInternalNumberAndMask = (value, options) => {
|
|
29
|
-
const mergedOptions =
|
|
13
|
+
const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
|
|
30
14
|
const { precision = -1 } = mergedOptions;
|
|
31
15
|
let internalNumber;
|
|
32
16
|
if (typeof value === "number") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useNumberMask.js","sources":["../../../../../../src/components/atoms/Input/hooks/useNumberMask.ts"],"sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';\nimport { MaskValue } from './useStringMask';\n\nexport type CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n symbol: 'R$ ',\n separator: '.',\n decimal: ',',\n precision: 2,\n};\n\nconst getRegex = (precision: number) =>\n new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g');\n\nexport const getInternalNumberAndMask = (\n value: string | number,\n options?: CurrencyOptions\n): { internalNumber: number; mergedOptions: CurrencyOptions } => {\n const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n const { precision = -1 } = mergedOptions;\n\n let internalNumber;\n\n if (typeof value === 'number') {\n if (precision) {\n let stringValue = String(value);\n const decimalIndex = stringValue.indexOf('.');\n const currentPrecision = decimalIndex + precision;\n if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {\n const zeros = stringValue.length + 1 - currentPrecision;\n for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;\n }\n internalNumber = Number(stringValue);\n } else {\n internalNumber = value;\n }\n } else {\n const onlyNumbers = String(extractNumbersFromString(value));\n const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\n }\n\n if (internalNumber > Number.MAX_SAFE_INTEGER) {\n internalNumber = Number.MAX_SAFE_INTEGER;\n }\n\n if (internalNumber < Number.MIN_SAFE_INTEGER) {\n internalNumber = Number.MIN_SAFE_INTEGER;\n }\n\n return {\n internalNumber,\n mergedOptions,\n };\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useNumberMask = (\n options?: CurrencyOptions,\n defaultValue?: string | number\n): [MaskValue, (value: string | number) => void] => {\n const applyMask = useCallback(\n (value: string | number = 0): MaskValue => {\n const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n value,\n options\n );\n\n return {\n raw: internalNumber,\n formatted: currency(internalNumber).format(mergedOptions),\n };\n },\n [options, getRegex]\n );\n\n const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue);\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"names":["value"],"mappings":"
|
|
1
|
+
{"version":3,"file":"useNumberMask.js","sources":["../../../../../../src/components/atoms/Input/hooks/useNumberMask.ts"],"sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '../../../../utils/extractNumbersFromString';\nimport { MaskValue } from './useStringMask';\n\nexport type CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n symbol: 'R$ ',\n separator: '.',\n decimal: ',',\n precision: 2,\n};\n\nconst getRegex = (precision: number) =>\n new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g');\n\nexport const getInternalNumberAndMask = (\n value: string | number,\n options?: CurrencyOptions\n): { internalNumber: number; mergedOptions: CurrencyOptions } => {\n const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n const { precision = -1 } = mergedOptions;\n\n let internalNumber;\n\n if (typeof value === 'number') {\n if (precision) {\n let stringValue = String(value);\n const decimalIndex = stringValue.indexOf('.');\n const currentPrecision = decimalIndex + precision;\n if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {\n const zeros = stringValue.length + 1 - currentPrecision;\n for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;\n }\n internalNumber = Number(stringValue);\n } else {\n internalNumber = value;\n }\n } else {\n const onlyNumbers = String(extractNumbersFromString(value));\n const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\n }\n\n if (internalNumber > Number.MAX_SAFE_INTEGER) {\n internalNumber = Number.MAX_SAFE_INTEGER;\n }\n\n if (internalNumber < Number.MIN_SAFE_INTEGER) {\n internalNumber = Number.MIN_SAFE_INTEGER;\n }\n\n return {\n internalNumber,\n mergedOptions,\n };\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useNumberMask = (\n options?: CurrencyOptions,\n defaultValue?: string | number\n): [MaskValue, (value: string | number) => void] => {\n const applyMask = useCallback(\n (value: string | number = 0): MaskValue => {\n const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n value,\n options\n );\n\n return {\n raw: internalNumber,\n formatted: currency(internalNumber).format(mergedOptions),\n };\n },\n [options, getRegex]\n );\n\n const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue);\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"names":["value"],"mappings":"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"}
|
|
@@ -76,11 +76,11 @@ const useStringMask = (mask, defaultValue) => {
|
|
|
76
76
|
[mask]
|
|
77
77
|
);
|
|
78
78
|
const [value, setValue] = useState(
|
|
79
|
-
applyMask(defaultValue
|
|
79
|
+
applyMask(defaultValue?.toString())
|
|
80
80
|
);
|
|
81
81
|
const handleChangeValue = useCallback(
|
|
82
82
|
(formattedValue) => {
|
|
83
|
-
const { raw, formatted } = applyMask(formattedValue
|
|
83
|
+
const { raw, formatted } = applyMask(formattedValue?.toString());
|
|
84
84
|
setValue({
|
|
85
85
|
raw,
|
|
86
86
|
formatted
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useStringMask.js","sources":["../../../../../../src/components/atoms/Input/hooks/useStringMask.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport interface MaskValue {\n formatted?: string;\n raw?: string | number;\n}\n\nexport type MaskType = string | RegExp | Array<RegExp>;\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nexport const mergeMask = (value = '', mask: MaskType[]): MaskValue => {\n let formatted = '';\n let raw = '';\n let iMask = 0;\n let iChars = 0;\n\n while (!(iMask === mask.length || iChars === value.length)) {\n const maskChar = mask[iMask];\n const valueChar = value[iChars];\n\n if (maskChar === valueChar) {\n formatted += maskChar;\n iChars++;\n iMask++;\n continue;\n }\n\n const rawValueChar = value[iChars];\n\n if (typeof maskChar === 'object') {\n iChars++;\n\n const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;\n const matchRegex = RegExp(maskCharRegex).test(valueChar);\n\n if (matchRegex) {\n formatted += valueChar;\n raw += rawValueChar;\n iMask++;\n }\n } else {\n formatted += maskChar;\n iMask++;\n }\n }\n\n return { raw, formatted };\n};\n\nexport const getMask = (\n mask: MaskType[] | ((value: string) => MaskType[]),\n newValue: string\n): MaskType[] => {\n let maskArray: MaskType[];\n const regexArray: MaskType[] = [];\n\n if (typeof mask === 'function') {\n maskArray = mask(newValue);\n } else {\n maskArray = mask;\n }\n\n maskArray.forEach(exp => {\n if (typeof exp !== 'string') {\n if (Array.isArray(exp)) regexArray.push(exp);\n else regexArray.push(exp);\n } else {\n for (let i = 0; i < exp.length; i++) {\n if (exp[i] === '\\\\') {\n regexArray.push(exp[i + 1]);\n i++;\n } else {\n if (exp[i] === '9') regexArray.push(/\\d/);\n else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);\n else regexArray.push(exp[i]);\n }\n }\n }\n });\n\n return regexArray;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useStringMask = (\n mask: MaskType[] | ((value: string) => MaskType[]),\n defaultValue?: string | number\n): [MaskValue, (text: string | number) => void] => {\n const applyMask = useCallback(\n (value = ''): MaskValue => {\n const selectedMask = getMask(mask, value);\n const { formatted, raw } = mergeMask(value, selectedMask);\n\n return {\n raw,\n formatted,\n };\n },\n [mask]\n );\n\n const [value, setValue] = useState<MaskValue>(\n applyMask(defaultValue?.toString())\n );\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue?.toString());\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"names":["value"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"useStringMask.js","sources":["../../../../../../src/components/atoms/Input/hooks/useStringMask.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nexport interface MaskValue {\n formatted?: string;\n raw?: string | number;\n}\n\nexport type MaskType = string | RegExp | Array<RegExp>;\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nexport const mergeMask = (value = '', mask: MaskType[]): MaskValue => {\n let formatted = '';\n let raw = '';\n let iMask = 0;\n let iChars = 0;\n\n while (!(iMask === mask.length || iChars === value.length)) {\n const maskChar = mask[iMask];\n const valueChar = value[iChars];\n\n if (maskChar === valueChar) {\n formatted += maskChar;\n iChars++;\n iMask++;\n continue;\n }\n\n const rawValueChar = value[iChars];\n\n if (typeof maskChar === 'object') {\n iChars++;\n\n const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;\n const matchRegex = RegExp(maskCharRegex).test(valueChar);\n\n if (matchRegex) {\n formatted += valueChar;\n raw += rawValueChar;\n iMask++;\n }\n } else {\n formatted += maskChar;\n iMask++;\n }\n }\n\n return { raw, formatted };\n};\n\nexport const getMask = (\n mask: MaskType[] | ((value: string) => MaskType[]),\n newValue: string\n): MaskType[] => {\n let maskArray: MaskType[];\n const regexArray: MaskType[] = [];\n\n if (typeof mask === 'function') {\n maskArray = mask(newValue);\n } else {\n maskArray = mask;\n }\n\n maskArray.forEach(exp => {\n if (typeof exp !== 'string') {\n if (Array.isArray(exp)) regexArray.push(exp);\n else regexArray.push(exp);\n } else {\n for (let i = 0; i < exp.length; i++) {\n if (exp[i] === '\\\\') {\n regexArray.push(exp[i + 1]);\n i++;\n } else {\n if (exp[i] === '9') regexArray.push(/\\d/);\n else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);\n else regexArray.push(exp[i]);\n }\n }\n }\n });\n\n return regexArray;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useStringMask = (\n mask: MaskType[] | ((value: string) => MaskType[]),\n defaultValue?: string | number\n): [MaskValue, (text: string | number) => void] => {\n const applyMask = useCallback(\n (value = ''): MaskValue => {\n const selectedMask = getMask(mask, value);\n const { formatted, raw } = mergeMask(value, selectedMask);\n\n return {\n raw,\n formatted,\n };\n },\n [mask]\n );\n\n const [value, setValue] = useState<MaskValue>(\n applyMask(defaultValue?.toString())\n );\n\n const handleChangeValue = useCallback(\n (formattedValue: string | number) => {\n const { raw, formatted } = applyMask(formattedValue?.toString());\n setValue({\n raw,\n formatted,\n });\n },\n [applyMask, setValue]\n );\n\n return [value, handleChangeValue];\n};\n"],"names":["value"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils/ResponsiveFontSize';\nimport { InputContainerProps } from './InputContainer/InputContainer';\nimport { Icon } from '../Icon';\nconst leftIconStyles = ({\n leftComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !leftComponent &&\n css`\n padding-left: ${theme.spacing.centi};\n `;\n\nconst rightIconStyles = ({\n rightComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !rightComponent &&\n css`\n padding-right: ${theme.spacing.centi};\n `;\n\nconst disabledContainerStyles = ({\n disabled,\n}: Partial<InputContainerProps> & StyleProps) =>\n disabled &&\n css`\n background-color: transparent;\n `;\n\nexport const disabledInputStyles = ({\n disabled,\n theme,\n}: Partial<InputContainerProps> & Partial<StyleProps>) =>\n disabled &&\n css`\n color: ${theme?.color.secondary.light};\n `;\n\nconst focusedStyles = ({\n focused,\n borderColor = 'secondary',\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n focused &&\n css`\n border-width: ${theme.borderWidth.nano};\n border-color: ${theme.color[borderColor].dark};\n `;\n\nexport const StyledIconContent = styled.View<Partial<StyleProps>>`\n z-index: ${({ theme }) => theme.zIndex.default};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledInputContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n flex-direction: row;\n align-items: center;\n min-height: ${RFValueStr('44px')};\n`;\n\nexport const StyledInputElementBase = styled(TextInput)<\n InputElementProps & Partial<StyleProps>\n>`\n font-family: ${({ theme }) => `'${theme.font.stack.default}'`};\n font-size: ${({ theme }) => theme.typography.base.fontSize};\n font-weight: ${({ theme }) => theme.font.weight.bold};\n color: ${({ theme }) => theme.font.color.dark};\n`;\n\nexport const StyledLabelContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>(\n props => css`\n flex: 1;\n padding: ${props.theme.spacing.micro} 0;\n ${leftIconStyles(props)}\n ${rightIconStyles(props)}\n `\n);\n\nconst StyledBorderKeeperBase = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n border-color: ${({\n theme,\n borderColor = 'secondary',\n borderColorGradation = 'light',\n }) => theme.color[borderColor][borderColorGradation]};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n border-width: ${({ theme }) => theme.borderWidth.pico};\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBorderKeeper = styled(StyledBorderKeeperBase)<\n Partial<StyleProps>\n>(\n props => css`\n ${focusedStyles(props)}\n ${disabledContainerStyles(props)}\n `\n);\n\nexport const StyledInputElement = styled(StyledInputElementBase)<\n InputElementProps & Partial<StyleProps>\n>(\n props => css`\n width: 100%;\n ${disabledInputStyles(props)}\n `\n);\n\nexport const StyledHintContainer = styled.View<Partial<StyleProps>>`\n margin-top: ${({ theme }) => theme.spacing.micro};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n"],"names":[],"mappings":";;;;;AAOA,MAAM,iBAAiB,CAAC;AAAA,EACtB,aAAA;AAAA,EACA,KAAA;AACF,CAAA,KACE,CAAC,aACD,IAAA,GAAA,CAAA;AAAA,kBAAA,EACkB,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAGlC,MAAM,kBAAkB,CAAC;AAAA,EACvB,cAAA;AAAA,EACA,KAAA;AACF,CAAA,KACE,CAAC,cACD,IAAA,GAAA,CAAA;AAAA,mBAAA,EACmB,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA,EAAA,CAAA,CAAA;AAGnC,MAAM,0BAA0B,CAAC;AAAA,EAC/B,QAAA;AACF,CAAA,KACE,QACA,IAAA,GAAA,CAAA;AAAA;AAAA,EAAA,CAAA,CAAA;AAIK,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AACF,CAAA,KACE,QACA,IAAA,GAAA,CAAA;AAAA,WACW,EAAA,KAAA,
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Input/styled.ts"],"sourcesContent":["import styled, { css } from '@emotion/native';\nimport { TextInput } from 'react-native';\nimport { InputElementProps } from '.';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils/ResponsiveFontSize';\nimport { InputContainerProps } from './InputContainer/InputContainer';\nimport { Icon } from '../Icon';\nconst leftIconStyles = ({\n leftComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !leftComponent &&\n css`\n padding-left: ${theme.spacing.centi};\n `;\n\nconst rightIconStyles = ({\n rightComponent,\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n !rightComponent &&\n css`\n padding-right: ${theme.spacing.centi};\n `;\n\nconst disabledContainerStyles = ({\n disabled,\n}: Partial<InputContainerProps> & StyleProps) =>\n disabled &&\n css`\n background-color: transparent;\n `;\n\nexport const disabledInputStyles = ({\n disabled,\n theme,\n}: Partial<InputContainerProps> & Partial<StyleProps>) =>\n disabled &&\n css`\n color: ${theme?.color.secondary.light};\n `;\n\nconst focusedStyles = ({\n focused,\n borderColor = 'secondary',\n theme,\n}: Partial<InputContainerProps> & StyleProps) =>\n focused &&\n css`\n border-width: ${theme.borderWidth.nano};\n border-color: ${theme.color[borderColor].dark};\n `;\n\nexport const StyledIconContent = styled.View<Partial<StyleProps>>`\n z-index: ${({ theme }) => theme.zIndex.default};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledInputContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n flex-direction: row;\n align-items: center;\n min-height: ${RFValueStr('44px')};\n`;\n\nexport const StyledInputElementBase = styled(TextInput)<\n InputElementProps & Partial<StyleProps>\n>`\n font-family: ${({ theme }) => `'${theme.font.stack.default}'`};\n font-size: ${({ theme }) => theme.typography.base.fontSize};\n font-weight: ${({ theme }) => theme.font.weight.bold};\n color: ${({ theme }) => theme.font.color.dark};\n`;\n\nexport const StyledLabelContainer = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>(\n props => css`\n flex: 1;\n padding: ${props.theme.spacing.micro} 0;\n ${leftIconStyles(props)}\n ${rightIconStyles(props)}\n `\n);\n\nconst StyledBorderKeeperBase = styled.View<\n Partial<InputContainerProps> & Partial<StyleProps>\n>`\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n border-color: ${({\n theme,\n borderColor = 'secondary',\n borderColorGradation = 'light',\n }) => theme.color[borderColor][borderColorGradation]};\n border-radius: ${({ theme }) => theme.borderRadius.mili};\n border-width: ${({ theme }) => theme.borderWidth.pico};\n position: absolute;\n width: 100%;\n height: 100%;\n`;\n\nexport const StyledBorderKeeper = styled(StyledBorderKeeperBase)<\n Partial<StyleProps>\n>(\n props => css`\n ${focusedStyles(props)}\n ${disabledContainerStyles(props)}\n `\n);\n\nexport const StyledInputElement = styled(StyledInputElementBase)<\n InputElementProps & Partial<StyleProps>\n>(\n props => css`\n width: 100%;\n ${disabledInputStyles(props)}\n `\n);\n\nexport const StyledHintContainer = styled.View<Partial<StyleProps>>`\n margin-top: ${({ theme }) => theme.spacing.micro};\n flex-direction: row;\n align-items: center;\n`;\n\nexport const StyledHintIcon = styled(Icon)<Partial<StyleProps>>`\n margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n"],"names":[],"mappings":"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"}
|