@tecsinapse/react-native-kit 1.22.7 → 1.22.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/cjs/components/atoms/Avatar/Avatar.js +3 -21
- package/dist/cjs/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/atoms/Badge/Badge.js +9 -43
- package/dist/cjs/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/atoms/BottomNavigator/BottomNavigator.js +14 -43
- package/dist/cjs/components/atoms/BottomNavigator/BottomNavigator.js.map +1 -1
- package/dist/cjs/components/atoms/BottomNavigator/Item.js +13 -43
- package/dist/cjs/components/atoms/BottomNavigator/Item.js.map +1 -1
- package/dist/cjs/components/atoms/Button/Button.js +9 -42
- 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/Loading.js +3 -21
- package/dist/cjs/components/atoms/Button/States/Loading.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/GroupButton/GroupButtonOption.js +3 -21
- package/dist/cjs/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/dist/cjs/components/atoms/Header/Header.js +18 -48
- package/dist/cjs/components/atoms/Header/Header.js.map +1 -1
- package/dist/cjs/components/atoms/Input/Input.js +32 -84
- package/dist/cjs/components/atoms/Input/Input.js.map +1 -1
- package/dist/cjs/components/atoms/InputMask/InputMask.js +29 -83
- package/dist/cjs/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/ModalGroupManager.js +5 -33
- package/dist/cjs/components/atoms/Modal/ModalGroupManager.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/ModalLifecycleHandler.js +67 -86
- package/dist/cjs/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/useLazyModalManager.js +1 -1
- package/dist/cjs/components/atoms/Modal/useLazyModalManager.js.map +1 -1
- package/dist/cjs/components/atoms/Modal/useModalManager.js +1 -1
- package/dist/cjs/components/atoms/Modal/useModalManager.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Pulse.js +4 -5
- package/dist/cjs/components/atoms/Skeleton/Pulse.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Skeleton.js +13 -47
- package/dist/cjs/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/cjs/components/atoms/Skeleton/Wave.js +5 -6
- package/dist/cjs/components/atoms/Skeleton/Wave.js.map +1 -1
- package/dist/cjs/components/atoms/SnappingSlider/SnappingSlider.js +11 -43
- package/dist/cjs/components/atoms/SnappingSlider/SnappingSlider.js.map +1 -1
- package/dist/cjs/components/atoms/Tag/Tag.js +5 -33
- package/dist/cjs/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/atoms/Text/Text.js +4 -31
- package/dist/cjs/components/atoms/Text/Text.js.map +1 -1
- package/dist/cjs/components/atoms/Text/styled.js +3 -3
- package/dist/cjs/components/atoms/Text/styled.js.map +1 -1
- package/dist/cjs/components/atoms/TextArea/TextArea.js +29 -83
- package/dist/cjs/components/atoms/TextArea/TextArea.js.map +1 -1
- package/dist/cjs/components/molecules/Calendar/Calendar.js +8 -40
- package/dist/cjs/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +15 -48
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js +12 -43
- package/dist/cjs/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js +8 -40
- package/dist/cjs/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Grid.js +20 -55
- package/dist/cjs/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/cjs/components/molecules/Grid/Item/Item.js +28 -75
- package/dist/cjs/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js +13 -47
- package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/TextComponent.js +7 -23
- package/dist/cjs/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/cjs/components/molecules/IconTextButton/styled.js +3 -3
- package/dist/cjs/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/cjs/components/molecules/InputPassword/InputPassword.js +4 -35
- package/dist/cjs/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js +15 -47
- package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -49
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/styled.js +2 -2
- package/dist/cjs/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/cjs/components/molecules/Select/Modal.js +25 -71
- package/dist/cjs/components/molecules/Select/Modal.js.map +1 -1
- package/dist/cjs/components/molecules/Select/Select.js +37 -91
- package/dist/cjs/components/molecules/Select/Select.js.map +1 -1
- package/dist/cjs/components/molecules/Select/styled.js +3 -6
- package/dist/cjs/components/molecules/Select/styled.js.map +1 -1
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js +10 -41
- package/dist/cjs/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/dist/esm/components/atoms/Avatar/Avatar.js +3 -21
- package/dist/esm/components/atoms/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/atoms/Badge/Badge.js +9 -43
- package/dist/esm/components/atoms/Badge/Badge.js.map +1 -1
- package/dist/esm/components/atoms/BottomNavigator/BottomNavigator.js +14 -43
- package/dist/esm/components/atoms/BottomNavigator/BottomNavigator.js.map +1 -1
- package/dist/esm/components/atoms/BottomNavigator/Item.js +13 -43
- package/dist/esm/components/atoms/BottomNavigator/Item.js.map +1 -1
- package/dist/esm/components/atoms/Button/Button.js +9 -42
- package/dist/esm/components/atoms/Button/Button.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Error.js +6 -24
- package/dist/esm/components/atoms/Button/States/Error.js.map +1 -1
- package/dist/esm/components/atoms/Button/States/Loading.js +3 -21
- package/dist/esm/components/atoms/Button/States/Loading.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/GroupButton/GroupButtonOption.js +3 -21
- package/dist/esm/components/atoms/GroupButton/GroupButtonOption.js.map +1 -1
- package/dist/esm/components/atoms/Header/Header.js +18 -48
- package/dist/esm/components/atoms/Header/Header.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +32 -84
- package/dist/esm/components/atoms/Input/Input.js.map +1 -1
- package/dist/esm/components/atoms/InputMask/InputMask.js +29 -83
- package/dist/esm/components/atoms/InputMask/InputMask.js.map +1 -1
- package/dist/esm/components/atoms/Modal/ModalGroupManager.js +5 -33
- package/dist/esm/components/atoms/Modal/ModalGroupManager.js.map +1 -1
- package/dist/esm/components/atoms/Modal/ModalLifecycleHandler.js +67 -86
- package/dist/esm/components/atoms/Modal/ModalLifecycleHandler.js.map +1 -1
- package/dist/esm/components/atoms/Modal/useLazyModalManager.js +1 -1
- package/dist/esm/components/atoms/Modal/useLazyModalManager.js.map +1 -1
- package/dist/esm/components/atoms/Modal/useModalManager.js +1 -1
- package/dist/esm/components/atoms/Modal/useModalManager.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Pulse.js +4 -5
- package/dist/esm/components/atoms/Skeleton/Pulse.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Skeleton.js +13 -47
- package/dist/esm/components/atoms/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/components/atoms/Skeleton/Wave.js +5 -6
- package/dist/esm/components/atoms/Skeleton/Wave.js.map +1 -1
- package/dist/esm/components/atoms/SnappingSlider/SnappingSlider.js +11 -43
- package/dist/esm/components/atoms/SnappingSlider/SnappingSlider.js.map +1 -1
- package/dist/esm/components/atoms/Tag/Tag.js +5 -33
- package/dist/esm/components/atoms/Tag/Tag.js.map +1 -1
- package/dist/esm/components/atoms/Text/Text.js +4 -31
- package/dist/esm/components/atoms/Text/Text.js.map +1 -1
- package/dist/esm/components/atoms/Text/styled.js +3 -3
- package/dist/esm/components/atoms/Text/styled.js.map +1 -1
- package/dist/esm/components/atoms/TextArea/TextArea.js +29 -83
- package/dist/esm/components/atoms/TextArea/TextArea.js.map +1 -1
- package/dist/esm/components/molecules/Calendar/Calendar.js +8 -40
- package/dist/esm/components/molecules/Calendar/Calendar.js.map +1 -1
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +15 -48
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js +12 -43
- package/dist/esm/components/molecules/DateTimePicker/DateTimePicker.js.map +1 -1
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js +8 -40
- package/dist/esm/components/molecules/DateTimeSelector/DateTimeSelector.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Grid.js +20 -55
- package/dist/esm/components/molecules/Grid/Grid.js.map +1 -1
- package/dist/esm/components/molecules/Grid/Item/Item.js +28 -75
- package/dist/esm/components/molecules/Grid/Item/Item.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/IconTextButton.js +13 -47
- package/dist/esm/components/molecules/IconTextButton/IconTextButton.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/TextComponent.js +7 -23
- package/dist/esm/components/molecules/IconTextButton/TextComponent.js.map +1 -1
- package/dist/esm/components/molecules/IconTextButton/styled.js +3 -3
- package/dist/esm/components/molecules/IconTextButton/styled.js.map +1 -1
- package/dist/esm/components/molecules/InputPassword/InputPassword.js +4 -35
- package/dist/esm/components/molecules/InputPassword/InputPassword.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js +15 -47
- package/dist/esm/components/molecules/LabeledSwitch/LabelComponent.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js +14 -49
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/styled.js +2 -2
- package/dist/esm/components/molecules/LabeledSwitch/styled.js.map +1 -1
- package/dist/esm/components/molecules/Select/Modal.js +25 -71
- package/dist/esm/components/molecules/Select/Modal.js.map +1 -1
- package/dist/esm/components/molecules/Select/Select.js +38 -92
- package/dist/esm/components/molecules/Select/Select.js.map +1 -1
- package/dist/esm/components/molecules/Select/styled.js +3 -6
- package/dist/esm/components/molecules/Select/styled.js.map +1 -1
- package/dist/esm/components/molecules/Snackbar/Snackbar.js +10 -41
- package/dist/esm/components/molecules/Snackbar/Snackbar.js.map +1 -1
- package/package.json +3 -3
|
@@ -4,88 +4,33 @@ import { View } from 'react-native';
|
|
|
4
4
|
import { StyledInputContainer, StyledNativeInputMask } from './styled.js';
|
|
5
5
|
import Text from '../Text/Text.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 InputMask = React__default.forwardRef(
|
|
39
|
-
(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
"label",
|
|
66
|
-
"labelColor",
|
|
67
|
-
"labelColorVariant",
|
|
68
|
-
"labelColorTone",
|
|
69
|
-
"labelTypography",
|
|
70
|
-
"labelStack",
|
|
71
|
-
"labelWeight",
|
|
72
|
-
"leftComponent",
|
|
73
|
-
"rightComponent",
|
|
74
|
-
"disabled",
|
|
75
|
-
"style",
|
|
76
|
-
"borderColor",
|
|
77
|
-
"borderColorGradation",
|
|
78
|
-
"inputFontStack",
|
|
79
|
-
"inputFontWeight",
|
|
80
|
-
"inputContainerStyle",
|
|
81
|
-
"variant",
|
|
82
|
-
"hintComponent",
|
|
83
|
-
"hint",
|
|
84
|
-
"onFocus",
|
|
85
|
-
"onBlur",
|
|
86
|
-
"value",
|
|
87
|
-
"placeholder"
|
|
88
|
-
]);
|
|
8
|
+
({
|
|
9
|
+
label,
|
|
10
|
+
labelColor,
|
|
11
|
+
labelColorVariant,
|
|
12
|
+
labelColorTone,
|
|
13
|
+
labelTypography,
|
|
14
|
+
labelStack,
|
|
15
|
+
labelWeight,
|
|
16
|
+
leftComponent,
|
|
17
|
+
rightComponent,
|
|
18
|
+
disabled,
|
|
19
|
+
style,
|
|
20
|
+
borderColor,
|
|
21
|
+
borderColorGradation,
|
|
22
|
+
inputFontStack = "default",
|
|
23
|
+
inputFontWeight = "bold",
|
|
24
|
+
inputContainerStyle,
|
|
25
|
+
variant = "default",
|
|
26
|
+
hintComponent,
|
|
27
|
+
hint,
|
|
28
|
+
onFocus,
|
|
29
|
+
onBlur,
|
|
30
|
+
value,
|
|
31
|
+
placeholder,
|
|
32
|
+
...rest
|
|
33
|
+
}, ref) => {
|
|
89
34
|
const _hint = hintComponent || /* @__PURE__ */ React__default.createElement(Hint, {
|
|
90
35
|
TextComponent: Text,
|
|
91
36
|
text: hint,
|
|
@@ -116,7 +61,8 @@ const InputMask = React__default.forwardRef(
|
|
|
116
61
|
focused,
|
|
117
62
|
disabled,
|
|
118
63
|
variant
|
|
119
|
-
}, /* @__PURE__ */ React__default.createElement(StyledNativeInputMask,
|
|
64
|
+
}, /* @__PURE__ */ React__default.createElement(StyledNativeInputMask, {
|
|
65
|
+
...rest,
|
|
120
66
|
placeholder: onlyLabel ? label : placeholder,
|
|
121
67
|
value,
|
|
122
68
|
ref,
|
|
@@ -125,7 +71,7 @@ const InputMask = React__default.forwardRef(
|
|
|
125
71
|
disabled,
|
|
126
72
|
onFocus: handleFocus,
|
|
127
73
|
onBlur: handleBlur
|
|
128
|
-
}))
|
|
74
|
+
})), hint && _hint);
|
|
129
75
|
}
|
|
130
76
|
);
|
|
131
77
|
InputMask.displayName = "InputMask";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMask.js","sources":["../../../../../src/components/atoms/InputMask/InputMask.tsx"],"sourcesContent":["import {\n FontStackType,\n FontWeightType,\n Hint,\n InputContainerProps,\n InputMaskElementProps,\n useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextInput, View } from 'react-native';\nimport { StyledInputContainer, StyledNativeInputMask } from './styled';\nimport { Text } from '../Text';\n\nexport interface InputMaskNativeProps\n extends Omit<InputMaskElementProps, 'style'>,\n InputContainerProps {\n inputFontStack?: FontStackType;\n inputFontWeight?: FontWeightType;\n}\n\nconst InputMask: FC<InputMaskNativeProps> = React.forwardRef(\n (\n {\n label,\n labelColor,\n labelColorVariant,\n labelColorTone,\n labelTypography,\n labelStack,\n labelWeight,\n leftComponent,\n rightComponent,\n disabled,\n style,\n borderColor,\n borderColorGradation,\n inputFontStack = 'default',\n inputFontWeight = 'bold',\n inputContainerStyle,\n variant = 'default',\n hintComponent,\n hint,\n onFocus,\n onBlur,\n value,\n placeholder,\n ...rest\n },\n ref\n ) => {\n const _hint = hintComponent || (\n <Hint TextComponent={Text} text={hint} variant={variant} />\n );\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const onlyLabel = label && !placeholder;\n\n return (\n <View style={style}>\n <StyledInputContainer\n label={String(value) ? label : undefined}\n labelColor={labelColor}\n labelColorVariant={labelColorVariant}\n labelColorTone={labelColorTone}\n labelTypography={labelTypography}\n labelStack={labelStack}\n labelWeight={labelWeight}\n LabelComponent={Text}\n leftComponent={leftComponent}\n rightComponent={rightComponent}\n borderColor={borderColor}\n borderColorGradation={borderColorGradation}\n inputContainerStyle={inputContainerStyle}\n focused={focused}\n disabled={disabled}\n variant={variant}\n >\n <StyledNativeInputMask\n {...rest}\n placeholder={onlyLabel ? label : placeholder}\n value={value}\n ref={ref as React.Ref<TextInput>}\n fontStack={inputFontStack}\n fontWeight={inputFontWeight}\n disabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </StyledInputContainer>\n {hint && _hint}\n </View>\n );\n }\n);\n\nInputMask.displayName = 'InputMask';\n\nexport default InputMask;\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputMask.js","sources":["../../../../../src/components/atoms/InputMask/InputMask.tsx"],"sourcesContent":["import {\n FontStackType,\n FontWeightType,\n Hint,\n InputContainerProps,\n InputMaskElementProps,\n useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { TextInput, View } from 'react-native';\nimport { StyledInputContainer, StyledNativeInputMask } from './styled';\nimport { Text } from '../Text';\n\nexport interface InputMaskNativeProps\n extends Omit<InputMaskElementProps, 'style'>,\n InputContainerProps {\n inputFontStack?: FontStackType;\n inputFontWeight?: FontWeightType;\n}\n\nconst InputMask: FC<InputMaskNativeProps> = React.forwardRef(\n (\n {\n label,\n labelColor,\n labelColorVariant,\n labelColorTone,\n labelTypography,\n labelStack,\n labelWeight,\n leftComponent,\n rightComponent,\n disabled,\n style,\n borderColor,\n borderColorGradation,\n inputFontStack = 'default',\n inputFontWeight = 'bold',\n inputContainerStyle,\n variant = 'default',\n hintComponent,\n hint,\n onFocus,\n onBlur,\n value,\n placeholder,\n ...rest\n },\n ref\n ) => {\n const _hint = hintComponent || (\n <Hint TextComponent={Text} text={hint} variant={variant} />\n );\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n const onlyLabel = label && !placeholder;\n\n return (\n <View style={style}>\n <StyledInputContainer\n label={String(value) ? label : undefined}\n labelColor={labelColor}\n labelColorVariant={labelColorVariant}\n labelColorTone={labelColorTone}\n labelTypography={labelTypography}\n labelStack={labelStack}\n labelWeight={labelWeight}\n LabelComponent={Text}\n leftComponent={leftComponent}\n rightComponent={rightComponent}\n borderColor={borderColor}\n borderColorGradation={borderColorGradation}\n inputContainerStyle={inputContainerStyle}\n focused={focused}\n disabled={disabled}\n variant={variant}\n >\n <StyledNativeInputMask\n {...rest}\n placeholder={onlyLabel ? label : placeholder}\n value={value}\n ref={ref as React.Ref<TextInput>}\n fontStack={inputFontStack}\n fontWeight={inputFontWeight}\n disabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </StyledInputContainer>\n {hint && _hint}\n </View>\n );\n }\n);\n\nInputMask.displayName = 'InputMask';\n\nexport default InputMask;\n"],"names":["React"],"mappings":";;;;;;AAoBA,MAAM,YAAsCA,cAAM,CAAA,UAAA;AAAA,EAChD,CACE;AAAA,IACE,KAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,oBAAA;AAAA,IACA,cAAiB,GAAA,SAAA;AAAA,IACjB,eAAkB,GAAA,MAAA;AAAA,IAClB,mBAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,aAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,KAAA,GAAQ,iCACXA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,aAAe,EAAA,IAAA;AAAA,MAAM,IAAM,EAAA,IAAA;AAAA,MAAM,OAAA;AAAA,KAAkB,CAAA,CAAA;AAE3D,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,WAAA,EAAgB,GAAA,aAAA;AAAA,MAC3C,OAAA;AAAA,MACA,MAAA;AAAA,MACA,CAAC,QAAA;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,SAAS,CAAC,WAAA,CAAA;AAE5B,IAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,KAAA;AAAA,KAAA,kBACHA,cAAA,CAAA,aAAA,CAAA,oBAAA,EAAA;AAAA,MACC,KAAO,EAAA,MAAA,CAAO,KAAK,CAAA,GAAI,KAAQ,GAAA,KAAA,CAAA;AAAA,MAC/B,UAAA;AAAA,MACA,iBAAA;AAAA,MACA,cAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAgB,EAAA,IAAA;AAAA,MAChB,aAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,oBAAA;AAAA,MACA,mBAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,KAAA,kBAECA,cAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,WAAA,EAAa,YAAY,KAAQ,GAAA,WAAA;AAAA,MACjC,KAAA;AAAA,MACA,GAAA;AAAA,MACA,SAAW,EAAA,cAAA;AAAA,MACX,UAAY,EAAA,eAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,KACV,CACF,CACC,EAAA,IAAA,IAAQ,KACX,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}
|
|
@@ -2,46 +2,18 @@ import React__default, { useState } from 'react';
|
|
|
2
2
|
import { Modal } from 'react-native';
|
|
3
3
|
import { createModalLifecycleHandler } from './ModalLifecycleHandler.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
|
-
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
5
|
const modalLifecycle = createModalLifecycleHandler();
|
|
34
|
-
const ModalGroupManager = (
|
|
35
|
-
var _b = _a, { children } = _b, others = __objRest(_b, ["children"]);
|
|
6
|
+
const ModalGroupManager = ({ children, ...others }) => {
|
|
36
7
|
modalLifecycle.attach(useState([]));
|
|
37
8
|
const _render = modalLifecycle.render();
|
|
38
9
|
const hasModals = _render.length > 0;
|
|
39
|
-
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children, /* @__PURE__ */ React__default.createElement(Modal,
|
|
10
|
+
return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children, /* @__PURE__ */ React__default.createElement(Modal, {
|
|
40
11
|
transparent: true,
|
|
41
12
|
statusBarTranslucent: true,
|
|
42
13
|
animationType: "none",
|
|
43
|
-
visible: hasModals
|
|
44
|
-
|
|
14
|
+
visible: hasModals,
|
|
15
|
+
...others
|
|
16
|
+
}, _render));
|
|
45
17
|
};
|
|
46
18
|
|
|
47
19
|
export { ModalGroupManager, modalLifecycle };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalGroupManager.js","sources":["../../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler();\n\n/**\n * It's responsable for rendering all the modal components.\n *\n * @param param0\n * @returns\n */\nexport const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {\n modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));\n const _render = modalLifecycle.render();\n const hasModals = _render.length > 0;\n\n return (\n <>\n {children}\n <RNModal\n transparent\n statusBarTranslucent\n animationType=\"none\"\n visible={hasModals}\n {...others}\n >\n {_render}\n </RNModal>\n </>\n );\n};\n"],"names":["React","RNModal"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalGroupManager.js","sources":["../../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler();\n\n/**\n * It's responsable for rendering all the modal components.\n *\n * @param param0\n * @returns\n */\nexport const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {\n modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));\n const _render = modalLifecycle.render();\n const hasModals = _render.length > 0;\n\n return (\n <>\n {children}\n <RNModal\n transparent\n statusBarTranslucent\n animationType=\"none\"\n visible={hasModals}\n {...others}\n >\n {_render}\n </RNModal>\n </>\n );\n};\n"],"names":["React","RNModal"],"mappings":";;;;AAKO,MAAM,iBAAiB,2BAA4B,GAAA;AAQnD,MAAM,iBAAoC,GAAA,CAAC,EAAE,QAAA,EAAA,GAAa,QAAa,KAAA;AAC5E,EAAA,cAAA,CAAe,MAAO,CAAA,QAAA,CAAqC,EAAE,CAAC,CAAA,CAAA;AAC9D,EAAM,MAAA,OAAA,GAAU,eAAe,MAAO,EAAA,CAAA;AACtC,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAS,GAAA,CAAA,CAAA;AAEnC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACG,0BACAA,cAAA,CAAA,aAAA,CAAAC,KAAA,EAAA;AAAA,IACC,WAAW,EAAA,IAAA;AAAA,IACX,oBAAoB,EAAA,IAAA;AAAA,IACpB,aAAc,EAAA,MAAA;AAAA,IACd,OAAS,EAAA,SAAA;AAAA,IACR,GAAG,MAAA;AAAA,GAAA,EAEH,OACH,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -1,97 +1,78 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __defProps = Object.defineProperties;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
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
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
22
3
|
class ModalLifecycleHandler {
|
|
4
|
+
nodeGroup;
|
|
5
|
+
state;
|
|
23
6
|
constructor() {
|
|
24
|
-
this.
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
7
|
+
this.nodeGroup = /* @__PURE__ */ new Map();
|
|
8
|
+
this.state = void 0;
|
|
9
|
+
}
|
|
10
|
+
attach = (state) => {
|
|
11
|
+
this.state = state;
|
|
12
|
+
};
|
|
13
|
+
update = () => {
|
|
14
|
+
requestAnimationFrame(() => {
|
|
15
|
+
const nodes = Array.from(this.nodeGroup.values()).filter((node) => node.visible || !!node.lastVisualization).sort(
|
|
16
|
+
(nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0)
|
|
17
|
+
).map((node, index, filteredNodes) => {
|
|
18
|
+
const modalElement = node.modal();
|
|
19
|
+
const { props } = modalElement;
|
|
20
|
+
return React__default.cloneElement(modalElement, {
|
|
21
|
+
...props,
|
|
22
|
+
key: node.id,
|
|
23
|
+
visible: node.visible,
|
|
24
|
+
isLastShown: filteredNodes.length - 1 === index,
|
|
25
|
+
close: () => this.close(node.id),
|
|
26
|
+
onClose: () => {
|
|
27
|
+
this.remove(node.id);
|
|
28
|
+
props.onClose?.();
|
|
33
29
|
}
|
|
34
|
-
).map((node, index, filteredNodes) => {
|
|
35
|
-
const modalElement = node.modal();
|
|
36
|
-
const { props } = modalElement;
|
|
37
|
-
return React__default.cloneElement(modalElement, __spreadProps(__spreadValues({}, props), {
|
|
38
|
-
key: node.id,
|
|
39
|
-
visible: node.visible,
|
|
40
|
-
isLastShown: filteredNodes.length - 1 === index,
|
|
41
|
-
close: () => this.close(node.id),
|
|
42
|
-
onClose: () => {
|
|
43
|
-
var _a;
|
|
44
|
-
this.remove(node.id);
|
|
45
|
-
(_a = props.onClose) == null ? void 0 : _a.call(props);
|
|
46
|
-
}
|
|
47
|
-
}));
|
|
48
30
|
});
|
|
49
|
-
const [, updateState] = this.state || [];
|
|
50
|
-
updateState == null ? void 0 : updateState(nodes);
|
|
51
31
|
});
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}
|
|
63
|
-
this.nodeGroup.set(id, { id, modal });
|
|
64
|
-
};
|
|
65
|
-
this.destroy = (id) => {
|
|
66
|
-
this.nodeGroup.delete(id);
|
|
67
|
-
this.update();
|
|
68
|
-
};
|
|
69
|
-
this.remove = (id) => {
|
|
70
|
-
const savedNode = this.findNode(id);
|
|
71
|
-
savedNode && this.nodeGroup.set(id, __spreadProps(__spreadValues({}, savedNode), { lastVisualization: void 0 }));
|
|
72
|
-
this.update();
|
|
73
|
-
};
|
|
74
|
-
this.findNode = (id) => {
|
|
75
|
-
const node = this.nodeGroup.get(id);
|
|
76
|
-
!node && console.warn(`No modal was found with the id "${id}"`);
|
|
77
|
-
return node;
|
|
78
|
-
};
|
|
79
|
-
this.show = (id) => {
|
|
32
|
+
const [, updateState] = this.state || [];
|
|
33
|
+
updateState?.(nodes);
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
render = () => {
|
|
37
|
+
const [modals] = this.state || [];
|
|
38
|
+
return modals || [];
|
|
39
|
+
};
|
|
40
|
+
sync = (id, modal) => {
|
|
41
|
+
if (this.nodeGroup.has(id)) {
|
|
80
42
|
const savedNode = this.findNode(id);
|
|
81
|
-
savedNode && this.nodeGroup.set(id,
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
this.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
this.nodeGroup
|
|
93
|
-
this.
|
|
94
|
-
}
|
|
43
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode, modal });
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
this.nodeGroup.set(id, { id, modal });
|
|
47
|
+
};
|
|
48
|
+
destroy = (id) => {
|
|
49
|
+
this.nodeGroup.delete(id);
|
|
50
|
+
this.update();
|
|
51
|
+
};
|
|
52
|
+
remove = (id) => {
|
|
53
|
+
const savedNode = this.findNode(id);
|
|
54
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: void 0 });
|
|
55
|
+
this.update();
|
|
56
|
+
};
|
|
57
|
+
findNode = (id) => {
|
|
58
|
+
const node = this.nodeGroup.get(id);
|
|
59
|
+
!node && console.warn(`No modal was found with the id "${id}"`);
|
|
60
|
+
return node;
|
|
61
|
+
};
|
|
62
|
+
show = (id) => {
|
|
63
|
+
const savedNode = this.findNode(id);
|
|
64
|
+
savedNode && this.nodeGroup.set(id, {
|
|
65
|
+
...savedNode,
|
|
66
|
+
visible: true,
|
|
67
|
+
lastVisualization: new Date()
|
|
68
|
+
});
|
|
69
|
+
this.update();
|
|
70
|
+
};
|
|
71
|
+
close = (id) => {
|
|
72
|
+
const savedNode = this.findNode(id);
|
|
73
|
+
savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false });
|
|
74
|
+
this.update();
|
|
75
|
+
};
|
|
95
76
|
}
|
|
96
77
|
const createModalLifecycleHandler = () => {
|
|
97
78
|
return new ModalLifecycleHandler();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalLifecycleHandler.js","sources":["../../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"sourcesContent":["import React, { Dispatch, ReactElement } from 'react';\nimport { IBaseModal } from './ui/types';\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n id: string;\n visible?: boolean;\n lastVisualization?: Date;\n modal: () => ReactElement<IBaseModal>;\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n nodeGroup: Map<string, ModalNode>;\n state:\n | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n | undefined;\n\n constructor() {\n this.nodeGroup = new Map();\n this.state = undefined;\n }\n\n /**\n * Holds the ModalGroupManager state.\n *\n * @param state\n */\n public attach = (\n state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n ) => {\n this.state = state;\n };\n\n /**\n * Updates all the modal components.\n */\n public update = () => {\n requestAnimationFrame(() => {\n const nodes = Array.from(this.nodeGroup.values())\n .filter(node => node.visible || !!node.lastVisualization)\n .sort(\n (nodeA, nodeB) =>\n (nodeA.lastVisualization?.getTime() || 0) -\n (nodeB.lastVisualization?.getTime() || 0)\n )\n .map((node, index, filteredNodes) => {\n const modalElement = node.modal();\n const { props } = modalElement;\n return React.cloneElement(modalElement, {\n ...props,\n key: node.id,\n visible: node.visible,\n isLastShown: filteredNodes.length - 1 === index,\n close: () => this.close(node.id),\n onClose: () => {\n this.remove(node.id);\n props.onClose?.();\n },\n });\n });\n\n const [, updateState] = this.state || [];\n updateState?.(nodes);\n });\n };\n\n /**\n * Renders all selected modals.\n *\n * @returns\n */\n public render = (): ReactElement<IBaseModal>[] => {\n const [modals] = this.state || [];\n return modals || [];\n };\n\n /**\n * Tells to the lifecycle handler that a modal component needs to be handled.\n *\n * @param id\n * @param modal\n * @returns\n */\n public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n if (this.nodeGroup.has(id)) {\n const savedNode = this.findNode(id);\n savedNode && this.nodeGroup.set(id, { ...savedNode, modal });\n return;\n }\n this.nodeGroup.set(id, { id, modal });\n };\n\n /**\n * Destroy a modal from the lifecycle handler.\n *\n * @param id\n */\n public destroy = (id: string) => {\n this.nodeGroup.delete(id);\n this.update();\n };\n\n /**\n * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal\n * component is no longer used by the application.\n *\n * @param id\n */\n private remove = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode &&\n this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined });\n this.update();\n };\n\n /**\n * Find a modal node by id.\n *\n * @param id\n */\n private findNode = (id: string) => {\n const node = this.nodeGroup.get(id);\n !node && console.warn(`No modal was found with the id \"${id}\"`);\n return node;\n };\n\n /**\n * Makes a modal appears.\n *\n * @param id\n */\n public show = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode &&\n this.nodeGroup.set(id, {\n ...savedNode,\n visible: true,\n lastVisualization: new Date(),\n });\n this.update();\n };\n\n /**\n * Makes a modal disappears.\n *\n * @param id\n */\n public close = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false });\n this.update();\n };\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n *\n * @returns\n */\nexport const createModalLifecycleHandler = () => {\n return new ModalLifecycleHandler();\n};\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ModalLifecycleHandler.js","sources":["../../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"sourcesContent":["import React, { Dispatch, ReactElement } from 'react';\nimport { IBaseModal } from './ui/types';\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n id: string;\n visible?: boolean;\n lastVisualization?: Date;\n modal: () => ReactElement<IBaseModal>;\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n nodeGroup: Map<string, ModalNode>;\n state:\n | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n | undefined;\n\n constructor() {\n this.nodeGroup = new Map();\n this.state = undefined;\n }\n\n /**\n * Holds the ModalGroupManager state.\n *\n * @param state\n */\n public attach = (\n state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n ) => {\n this.state = state;\n };\n\n /**\n * Updates all the modal components.\n */\n public update = () => {\n requestAnimationFrame(() => {\n const nodes = Array.from(this.nodeGroup.values())\n .filter(node => node.visible || !!node.lastVisualization)\n .sort(\n (nodeA, nodeB) =>\n (nodeA.lastVisualization?.getTime() || 0) -\n (nodeB.lastVisualization?.getTime() || 0)\n )\n .map((node, index, filteredNodes) => {\n const modalElement = node.modal();\n const { props } = modalElement;\n return React.cloneElement(modalElement, {\n ...props,\n key: node.id,\n visible: node.visible,\n isLastShown: filteredNodes.length - 1 === index,\n close: () => this.close(node.id),\n onClose: () => {\n this.remove(node.id);\n props.onClose?.();\n },\n });\n });\n\n const [, updateState] = this.state || [];\n updateState?.(nodes);\n });\n };\n\n /**\n * Renders all selected modals.\n *\n * @returns\n */\n public render = (): ReactElement<IBaseModal>[] => {\n const [modals] = this.state || [];\n return modals || [];\n };\n\n /**\n * Tells to the lifecycle handler that a modal component needs to be handled.\n *\n * @param id\n * @param modal\n * @returns\n */\n public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n if (this.nodeGroup.has(id)) {\n const savedNode = this.findNode(id);\n savedNode && this.nodeGroup.set(id, { ...savedNode, modal });\n return;\n }\n this.nodeGroup.set(id, { id, modal });\n };\n\n /**\n * Destroy a modal from the lifecycle handler.\n *\n * @param id\n */\n public destroy = (id: string) => {\n this.nodeGroup.delete(id);\n this.update();\n };\n\n /**\n * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal\n * component is no longer used by the application.\n *\n * @param id\n */\n private remove = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode &&\n this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined });\n this.update();\n };\n\n /**\n * Find a modal node by id.\n *\n * @param id\n */\n private findNode = (id: string) => {\n const node = this.nodeGroup.get(id);\n !node && console.warn(`No modal was found with the id \"${id}\"`);\n return node;\n };\n\n /**\n * Makes a modal appears.\n *\n * @param id\n */\n public show = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode &&\n this.nodeGroup.set(id, {\n ...savedNode,\n visible: true,\n lastVisualization: new Date(),\n });\n this.update();\n };\n\n /**\n * Makes a modal disappears.\n *\n * @param id\n */\n public close = (id: string) => {\n const savedNode = this.findNode(id);\n savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false });\n this.update();\n };\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n *\n * @returns\n */\nexport const createModalLifecycleHandler = () => {\n return new ModalLifecycleHandler();\n};\n"],"names":["React"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { v4 } from 'uuid';
|
|
|
3
3
|
import { modalLifecycle } from './ModalGroupManager.js';
|
|
4
4
|
|
|
5
5
|
const useLazyModalManager = (modalId) => {
|
|
6
|
-
const [id] = useState(modalId
|
|
6
|
+
const [id] = useState(modalId ?? v4());
|
|
7
7
|
const requestUpdate = useCallback(() => modalLifecycle.update(), []);
|
|
8
8
|
const sync = useCallback(
|
|
9
9
|
(modal) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useLazyModalManager.js","sources":["../../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @returns\n * @param modalId\n */\nexport const useLazyModalManager = (modalId?: string) => {\n const [id] = useState(modalId ?? uuidv4());\n\n const requestUpdate = useCallback(() => modalLifecycle.update(), []);\n\n const sync = useCallback(\n (modal: ReactElement<IBaseModal>) => {\n modalLifecycle.sync(id, () => modal);\n return null;\n },\n [id]\n );\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n requestUpdate,\n sync,\n show,\n close,\n };\n};\n"],"names":["uuidv4"],"mappings":";;;;AAYa,MAAA,mBAAA,GAAsB,CAAC,OAAqB,KAAA;AACvD,EAAA,MAAM,CAAC,EAAE,CAAA,GAAI,QAAS,CAAA,OAAA,
|
|
1
|
+
{"version":3,"file":"useLazyModalManager.js","sources":["../../../../../src/components/atoms/Modal/useLazyModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @returns\n * @param modalId\n */\nexport const useLazyModalManager = (modalId?: string) => {\n const [id] = useState(modalId ?? uuidv4());\n\n const requestUpdate = useCallback(() => modalLifecycle.update(), []);\n\n const sync = useCallback(\n (modal: ReactElement<IBaseModal>) => {\n modalLifecycle.sync(id, () => modal);\n return null;\n },\n [id]\n );\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n requestUpdate,\n sync,\n show,\n close,\n };\n};\n"],"names":["uuidv4"],"mappings":";;;;AAYa,MAAA,mBAAA,GAAsB,CAAC,OAAqB,KAAA;AACvD,EAAA,MAAM,CAAC,EAAE,CAAA,GAAI,QAAS,CAAA,OAAA,IAAWA,IAAQ,CAAA,CAAA;AAEzC,EAAA,MAAM,gBAAgB,WAAY,CAAA,MAAM,eAAe,MAAO,EAAA,EAAG,EAAE,CAAA,CAAA;AAEnE,EAAA,MAAM,IAAO,GAAA,WAAA;AAAA,IACX,CAAC,KAAoC,KAAA;AACnC,MAAe,cAAA,CAAA,IAAA,CAAK,EAAI,EAAA,MAAM,KAAK,CAAA,CAAA;AACnC,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,EAAE,CAAA;AAAA,GACL,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,YAAY,MAAM;AAC7B,IAAA,cAAA,CAAe,KAAK,EAAE,CAAA,CAAA;AAAA,GACxB,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,EAAM,MAAA,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,cAAA,CAAe,MAAM,EAAE,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,OAAA,MAAM,cAAe,CAAA,OAAA,CAAQ,EAAE,CAAA,CAAA;AAAA,GACxC,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -3,7 +3,7 @@ import { v4 } from 'uuid';
|
|
|
3
3
|
import { modalLifecycle } from './ModalGroupManager.js';
|
|
4
4
|
|
|
5
5
|
const useModalManager = (modal, modalId) => {
|
|
6
|
-
const [id] = useState(modalId
|
|
6
|
+
const [id] = useState(modalId ?? v4());
|
|
7
7
|
modalLifecycle.sync(id, modal);
|
|
8
8
|
const show = useCallback(() => {
|
|
9
9
|
modalLifecycle.show(id);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useModalManager.js","sources":["../../../../../src/components/atoms/Modal/useModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @param id\n * @param modal\n * @returns\n */\nexport const useModalManager = (\n modal: () => ReactElement<IBaseModal>,\n modalId?: string\n) => {\n const [id] = useState(modalId ?? uuidv4());\n modalLifecycle.sync(id, modal);\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n show,\n close,\n };\n};\n"],"names":["uuidv4"],"mappings":";;;;AAaa,MAAA,eAAA,GAAkB,CAC7B,KAAA,EACA,OACG,KAAA;AACH,EAAA,MAAM,CAAC,EAAE,CAAA,GAAI,QAAS,CAAA,OAAA,
|
|
1
|
+
{"version":3,"file":"useModalManager.js","sources":["../../../../../src/components/atoms/Modal/useModalManager.ts"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { modalLifecycle } from './ModalGroupManager';\nimport { IBaseModal } from './ui/types';\n\n/**\n * Use this hook to tell the modal lifecycle handler that you want to add\n * a new modal component.\n *\n * @param id\n * @param modal\n * @returns\n */\nexport const useModalManager = (\n modal: () => ReactElement<IBaseModal>,\n modalId?: string\n) => {\n const [id] = useState(modalId ?? uuidv4());\n modalLifecycle.sync(id, modal);\n\n const show = useCallback(() => {\n modalLifecycle.show(id);\n }, [id]);\n\n const close = useCallback(() => {\n modalLifecycle.close(id);\n }, [id]);\n\n useEffect(() => {\n return () => modalLifecycle.destroy(id);\n }, []);\n\n return {\n show,\n close,\n };\n};\n"],"names":["uuidv4"],"mappings":";;;;AAaa,MAAA,eAAA,GAAkB,CAC7B,KAAA,EACA,OACG,KAAA;AACH,EAAA,MAAM,CAAC,EAAE,CAAA,GAAI,QAAS,CAAA,OAAA,IAAWA,IAAQ,CAAA,CAAA;AACzC,EAAe,cAAA,CAAA,IAAA,CAAK,IAAI,KAAK,CAAA,CAAA;AAE7B,EAAM,MAAA,IAAA,GAAO,YAAY,MAAM;AAC7B,IAAA,cAAA,CAAe,KAAK,EAAE,CAAA,CAAA;AAAA,GACxB,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,EAAM,MAAA,KAAA,GAAQ,YAAY,MAAM;AAC9B,IAAA,cAAA,CAAe,MAAM,EAAE,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,EAAE,CAAC,CAAA,CAAA;AAEP,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,OAAA,MAAM,cAAe,CAAA,OAAA,CAAQ,EAAE,CAAA,CAAA;AAAA,GACxC,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,KAAA;AAAA,GACF,CAAA;AACF;;;;"}
|
|
@@ -8,19 +8,18 @@ const Pulse = ({
|
|
|
8
8
|
height,
|
|
9
9
|
childrenLayout
|
|
10
10
|
}) => {
|
|
11
|
-
var _a, _b;
|
|
12
11
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
13
12
|
useEffect(() => {
|
|
14
13
|
pulseAnimation(active, animatedValue);
|
|
15
14
|
}, [active]);
|
|
16
15
|
return /* @__PURE__ */ React__default.createElement(Animated.View, {
|
|
17
16
|
style: {
|
|
18
|
-
width: width
|
|
19
|
-
height: height
|
|
17
|
+
width: width ?? childrenLayout.width,
|
|
18
|
+
height: height ?? childrenLayout.height,
|
|
20
19
|
backgroundColor: "rgba(0,0,0,0.05)",
|
|
21
20
|
position: "absolute",
|
|
22
|
-
top:
|
|
23
|
-
left:
|
|
21
|
+
top: childrenLayout.x ?? 0,
|
|
22
|
+
left: childrenLayout.y ?? 0,
|
|
24
23
|
zIndex: 2,
|
|
25
24
|
overflow: "hidden",
|
|
26
25
|
opacity: animatedValue
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pulse.js","sources":["../../../../../src/components/atoms/Skeleton/Pulse.tsx"],"sourcesContent":["import { Animated } from 'react-native';\nimport React, { useEffect, useRef } from 'react';\nimport { pulseAnimation } from './animation';\nimport { IAnimationComponent } from './types';\n\nexport const Pulse = ({\n active = true,\n width,\n height,\n childrenLayout,\n}: IAnimationComponent) => {\n const animatedValue = useRef(new Animated.Value(0)).current;\n\n useEffect(() => {\n pulseAnimation(active, animatedValue);\n }, [active]);\n\n return (\n <Animated.View\n style={{\n width: width ?? childrenLayout.width,\n height: height ?? childrenLayout.height,\n backgroundColor: 'rgba(0,0,0,0.05)',\n position: 'absolute',\n top: childrenLayout.x ?? 0,\n left: childrenLayout.y ?? 0,\n zIndex: 2,\n overflow: 'hidden',\n opacity: animatedValue,\n }}\n />\n );\n};\n"],"names":["React"],"mappings":";;;;AAKO,MAAM,QAAQ,CAAC;AAAA,EACpB,MAAS,GAAA,IAAA;AAAA,EACT,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2B,KAAA;
|
|
1
|
+
{"version":3,"file":"Pulse.js","sources":["../../../../../src/components/atoms/Skeleton/Pulse.tsx"],"sourcesContent":["import { Animated } from 'react-native';\nimport React, { useEffect, useRef } from 'react';\nimport { pulseAnimation } from './animation';\nimport { IAnimationComponent } from './types';\n\nexport const Pulse = ({\n active = true,\n width,\n height,\n childrenLayout,\n}: IAnimationComponent) => {\n const animatedValue = useRef(new Animated.Value(0)).current;\n\n useEffect(() => {\n pulseAnimation(active, animatedValue);\n }, [active]);\n\n return (\n <Animated.View\n style={{\n width: width ?? childrenLayout.width,\n height: height ?? childrenLayout.height,\n backgroundColor: 'rgba(0,0,0,0.05)',\n position: 'absolute',\n top: childrenLayout.x ?? 0,\n left: childrenLayout.y ?? 0,\n zIndex: 2,\n overflow: 'hidden',\n opacity: animatedValue,\n }}\n />\n );\n};\n"],"names":["React"],"mappings":";;;;AAKO,MAAM,QAAQ,CAAC;AAAA,EACpB,MAAS,GAAA,IAAA;AAAA,EACT,KAAA;AAAA,EACA,MAAA;AAAA,EACA,cAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,gBAAgB,MAAO,CAAA,IAAI,SAAS,KAAM,CAAA,CAAC,CAAC,CAAE,CAAA,OAAA,CAAA;AAEpD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,QAAQ,aAAa,CAAA,CAAA;AAAA,GACtC,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,SAAS,IAAT,EAAA;AAAA,IACC,KAAO,EAAA;AAAA,MACL,KAAA,EAAO,SAAS,cAAe,CAAA,KAAA;AAAA,MAC/B,MAAA,EAAQ,UAAU,cAAe,CAAA,MAAA;AAAA,MACjC,eAAiB,EAAA,kBAAA;AAAA,MACjB,QAAU,EAAA,UAAA;AAAA,MACV,GAAA,EAAK,eAAe,CAAK,IAAA,CAAA;AAAA,MACzB,IAAA,EAAM,eAAe,CAAK,IAAA,CAAA;AAAA,MAC1B,MAAQ,EAAA,CAAA;AAAA,MACR,QAAU,EAAA,QAAA;AAAA,MACV,OAAS,EAAA,aAAA;AAAA,KACX;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -4,50 +4,15 @@ import { Wrapper } from './styled.js';
|
|
|
4
4
|
import { Wave } from './Wave.js';
|
|
5
5
|
import { Pulse } from './Pulse.js';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
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 __objRest = (source, exclude) => {
|
|
24
|
-
var target = {};
|
|
25
|
-
for (var prop in source)
|
|
26
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
-
target[prop] = source[prop];
|
|
28
|
-
if (source != null && __getOwnPropSymbols)
|
|
29
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
-
target[prop] = source[prop];
|
|
32
|
-
}
|
|
33
|
-
return target;
|
|
34
|
-
};
|
|
35
|
-
const Skeleton = (_a) => {
|
|
36
|
-
var _b = _a, {
|
|
37
|
-
children,
|
|
38
|
-
width,
|
|
39
|
-
height,
|
|
40
|
-
radius,
|
|
41
|
-
active = true,
|
|
42
|
-
animation = "wave"
|
|
43
|
-
} = _b, rest = __objRest(_b, [
|
|
44
|
-
"children",
|
|
45
|
-
"width",
|
|
46
|
-
"height",
|
|
47
|
-
"radius",
|
|
48
|
-
"active",
|
|
49
|
-
"animation"
|
|
50
|
-
]);
|
|
7
|
+
const Skeleton = ({
|
|
8
|
+
children,
|
|
9
|
+
width,
|
|
10
|
+
height,
|
|
11
|
+
radius,
|
|
12
|
+
active = true,
|
|
13
|
+
animation = "wave",
|
|
14
|
+
...rest
|
|
15
|
+
}) => {
|
|
51
16
|
const [childrenLayout, setChildrenLayout] = useState({
|
|
52
17
|
width: 0,
|
|
53
18
|
height: 0,
|
|
@@ -62,11 +27,12 @@ const Skeleton = (_a) => {
|
|
|
62
27
|
const getChildrenLayout = (event) => {
|
|
63
28
|
setChildrenLayout(event.nativeEvent.layout);
|
|
64
29
|
};
|
|
65
|
-
return /* @__PURE__ */ React__default.createElement(Wrapper,
|
|
30
|
+
return /* @__PURE__ */ React__default.createElement(Wrapper, {
|
|
66
31
|
width,
|
|
67
32
|
height,
|
|
68
|
-
radius
|
|
69
|
-
|
|
33
|
+
radius,
|
|
34
|
+
...rest
|
|
35
|
+
}, active && animation === "wave" ? /* @__PURE__ */ React__default.createElement(Wave, {
|
|
70
36
|
active,
|
|
71
37
|
width,
|
|
72
38
|
height,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.js","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { BorderRadiusType } from '@tecsinapse/react-core';\nimport { LayoutChangeEvent, View, ViewProps } from 'react-native';\nimport { Wrapper } from './styled';\nimport { Wave } from './Wave';\nimport { Pulse } from './Pulse';\nimport { ChildrenLayout } from './types';\n\nexport interface SkeletonProps extends ViewProps {\n width?: number;\n height?: number;\n radius?: BorderRadiusType;\n active?: boolean;\n animation?: 'wave' | 'pulse';\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n children,\n width,\n height,\n radius,\n active = true,\n animation = 'wave',\n ...rest\n}) => {\n const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({\n width: 0,\n height: 0,\n y: 0,\n x: 0,\n });\n\n if (!width && !height && !children) {\n throw new Error(\n '[Skeleton] You should provide children or specify width and height'\n );\n }\n\n const getChildrenLayout = (event: LayoutChangeEvent) => {\n setChildrenLayout(event.nativeEvent.layout);\n };\n\n return (\n <Wrapper width={width} height={height} radius={radius} {...rest}>\n {active && animation === 'wave' ? (\n <Wave\n active={active}\n width={width}\n height={height}\n childrenLayout={childrenLayout}\n />\n ) : (\n <></>\n )}\n\n {active && animation === 'pulse' ? (\n <Pulse\n active={active}\n width={width}\n height={height}\n childrenLayout={childrenLayout}\n />\n ) : (\n <></>\n )}\n <View\n onLayout={event => getChildrenLayout(event)}\n style={{ opacity: active ? 0 : 1 }}\n pointerEvents={active ? 'none' : 'auto'}\n >\n {children}\n </View>\n </Wrapper>\n );\n};\n\nexport default Skeleton;\n"],"names":["React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Skeleton.js","sources":["../../../../../src/components/atoms/Skeleton/Skeleton.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { BorderRadiusType } from '@tecsinapse/react-core';\nimport { LayoutChangeEvent, View, ViewProps } from 'react-native';\nimport { Wrapper } from './styled';\nimport { Wave } from './Wave';\nimport { Pulse } from './Pulse';\nimport { ChildrenLayout } from './types';\n\nexport interface SkeletonProps extends ViewProps {\n width?: number;\n height?: number;\n radius?: BorderRadiusType;\n active?: boolean;\n animation?: 'wave' | 'pulse';\n}\n\nconst Skeleton: React.FC<SkeletonProps> = ({\n children,\n width,\n height,\n radius,\n active = true,\n animation = 'wave',\n ...rest\n}) => {\n const [childrenLayout, setChildrenLayout] = useState<ChildrenLayout>({\n width: 0,\n height: 0,\n y: 0,\n x: 0,\n });\n\n if (!width && !height && !children) {\n throw new Error(\n '[Skeleton] You should provide children or specify width and height'\n );\n }\n\n const getChildrenLayout = (event: LayoutChangeEvent) => {\n setChildrenLayout(event.nativeEvent.layout);\n };\n\n return (\n <Wrapper width={width} height={height} radius={radius} {...rest}>\n {active && animation === 'wave' ? (\n <Wave\n active={active}\n width={width}\n height={height}\n childrenLayout={childrenLayout}\n />\n ) : (\n <></>\n )}\n\n {active && animation === 'pulse' ? (\n <Pulse\n active={active}\n width={width}\n height={height}\n childrenLayout={childrenLayout}\n />\n ) : (\n <></>\n )}\n <View\n onLayout={event => getChildrenLayout(event)}\n style={{ opacity: active ? 0 : 1 }}\n pointerEvents={active ? 'none' : 'auto'}\n >\n {children}\n </View>\n </Wrapper>\n );\n};\n\nexport default Skeleton;\n"],"names":["React"],"mappings":";;;;;;AAgBA,MAAM,WAAoC,CAAC;AAAA,EACzC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAS,GAAA,IAAA;AAAA,EACT,SAAY,GAAA,MAAA;AAAA,EACT,GAAA,IAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAyB,CAAA;AAAA,IACnE,KAAO,EAAA,CAAA;AAAA,IACP,MAAQ,EAAA,CAAA;AAAA,IACR,CAAG,EAAA,CAAA;AAAA,IACH,CAAG,EAAA,CAAA;AAAA,GACJ,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,KAAA,IAAS,CAAC,MAAA,IAAU,CAAC,QAAU,EAAA;AAClC,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,oEAAA;AAAA,KACF,CAAA;AAAA,GACF;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,KAA6B,KAAA;AACtD,IAAkB,iBAAA,CAAA,KAAA,CAAM,YAAY,MAAM,CAAA,CAAA;AAAA,GAC5C,CAAA;AAEA,EAAA,uBACGA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,KAAA;AAAA,IAAc,MAAA;AAAA,IAAgB,MAAA;AAAA,IAAiB,GAAG,IAAA;AAAA,GACxD,EAAA,MAAA,IAAU,SAAc,KAAA,MAAA,mBACtBA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,GACF,oBAEEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,CAAA,EAGH,MAAU,IAAA,SAAA,KAAc,0BACtBA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA,mBAEEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,CAAA,kBAEHA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACC,QAAA,EAAU,CAAS,KAAA,KAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,IAC1C,KAAO,EAAA,EAAE,OAAS,EAAA,MAAA,GAAS,IAAI,CAAE,EAAA;AAAA,IACjC,aAAA,EAAe,SAAS,MAAS,GAAA,MAAA;AAAA,GAAA,EAEhC,QACH,CACF,CAAA,CAAA;AAEJ;;;;"}
|
|
@@ -10,8 +10,7 @@ const Wave = ({
|
|
|
10
10
|
height,
|
|
11
11
|
childrenLayout
|
|
12
12
|
}) => {
|
|
13
|
-
|
|
14
|
-
const range = width != null ? width : childrenLayout.width;
|
|
13
|
+
const range = width ?? childrenLayout.width;
|
|
15
14
|
const animatedValue = useRef(new Animated.Value(0)).current;
|
|
16
15
|
const translateX = animatedValue.interpolate({
|
|
17
16
|
inputRange: [0, 1],
|
|
@@ -30,11 +29,11 @@ const Wave = ({
|
|
|
30
29
|
start: { x: 0, y: 0 },
|
|
31
30
|
end: { x: 1, y: 0 },
|
|
32
31
|
style: {
|
|
33
|
-
width: width
|
|
34
|
-
height: height
|
|
32
|
+
width: width ?? childrenLayout.width,
|
|
33
|
+
height: height ?? childrenLayout.height,
|
|
35
34
|
position: "absolute",
|
|
36
|
-
top:
|
|
37
|
-
left:
|
|
35
|
+
top: childrenLayout.y ?? 0,
|
|
36
|
+
left: childrenLayout.x ?? 0,
|
|
38
37
|
zIndex: 2,
|
|
39
38
|
overflow: "hidden",
|
|
40
39
|
transform: [
|