dhre-ui-kit 0.0.294 → 0.0.295
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/lib/index.d.ts +70 -71
- package/lib/index.js +67 -67
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +209 -209
- package/lib/index.mjs.map +1 -1
- package/package.json +1 -1
package/lib/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var React
|
|
5
|
+
var React = require('react');
|
|
6
6
|
var reactRedux = require('react-redux');
|
|
7
7
|
var reactNative = require('react-native');
|
|
8
8
|
var Modal = require('react-native-modal');
|
|
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
|
|
|
41
41
|
return Object.freeze(n);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React
|
|
44
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
45
45
|
var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
|
|
46
46
|
var Clipboard__default = /*#__PURE__*/_interopDefaultLegacy(Clipboard);
|
|
47
47
|
var LottieView__default = /*#__PURE__*/_interopDefaultLegacy(LottieView);
|
|
@@ -302,7 +302,7 @@ const theme = {
|
|
|
302
302
|
}
|
|
303
303
|
};
|
|
304
304
|
|
|
305
|
-
const ThemeContext = React
|
|
305
|
+
const ThemeContext = React.createContext(void 0);
|
|
306
306
|
const ThemeProvider = ({ children }) => {
|
|
307
307
|
const mode = reactRedux.useSelector((state) => state.theme.currentTheme);
|
|
308
308
|
const filteredTheme = Object.keys(theme).reduce((acc, key) => {
|
|
@@ -312,7 +312,7 @@ const ThemeProvider = ({ children }) => {
|
|
|
312
312
|
return /* @__PURE__ */ React__default["default"].createElement(ThemeContext.Provider, { value: { theme: filteredTheme, mode } }, children);
|
|
313
313
|
};
|
|
314
314
|
const useTheme = () => {
|
|
315
|
-
const context = React
|
|
315
|
+
const context = React.useContext(ThemeContext);
|
|
316
316
|
if (context === void 0) {
|
|
317
317
|
throw new Error("useTheme must be used within a ThemeProvider");
|
|
318
318
|
}
|
|
@@ -1039,8 +1039,8 @@ const Checkbox = ({
|
|
|
1039
1039
|
containerStyle,
|
|
1040
1040
|
onPress
|
|
1041
1041
|
}) => {
|
|
1042
|
-
const [checked, setChecked] = React
|
|
1043
|
-
React
|
|
1042
|
+
const [checked, setChecked] = React.useState(isChecked || false);
|
|
1043
|
+
React.useEffect(() => {
|
|
1044
1044
|
setChecked(isChecked);
|
|
1045
1045
|
}, [isChecked]);
|
|
1046
1046
|
const handlePress = () => {
|
|
@@ -1123,7 +1123,7 @@ const CustomDropdown$1 = ({
|
|
|
1123
1123
|
upArrowIcon,
|
|
1124
1124
|
downArrowIcon
|
|
1125
1125
|
}) => {
|
|
1126
|
-
const [showOptions, setShowOptions] = React
|
|
1126
|
+
const [showOptions, setShowOptions] = React.useState(false);
|
|
1127
1127
|
return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
|
|
1128
1128
|
CustomTypography,
|
|
1129
1129
|
{
|
|
@@ -1252,10 +1252,10 @@ const CustomTextInput = ({
|
|
|
1252
1252
|
searchIcon,
|
|
1253
1253
|
...props
|
|
1254
1254
|
}) => {
|
|
1255
|
-
const [value, setValue] = React
|
|
1256
|
-
const [isFocused, setIsFocused] = React
|
|
1257
|
-
const [error, setError] = React
|
|
1258
|
-
const [isSecureTextEntry, setIsSecureTextEntry] = React
|
|
1255
|
+
const [value, setValue] = React.useState("");
|
|
1256
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
1257
|
+
const [error, setError] = React.useState(!!errorMessage);
|
|
1258
|
+
const [isSecureTextEntry, setIsSecureTextEntry] = React.useState(secureTextEntry);
|
|
1259
1259
|
const onFocus = () => {
|
|
1260
1260
|
handleFocus?.();
|
|
1261
1261
|
setIsFocused(true);
|
|
@@ -1574,7 +1574,7 @@ const CustomProgressBar = ({
|
|
|
1574
1574
|
valueTextStyle,
|
|
1575
1575
|
percentageTextStyle
|
|
1576
1576
|
}) => {
|
|
1577
|
-
React
|
|
1577
|
+
React.useEffect(() => {
|
|
1578
1578
|
const progressInterval = setInterval(() => {
|
|
1579
1579
|
if (progress < value) {
|
|
1580
1580
|
setProgress((prevProgress) => prevProgress + increment);
|
|
@@ -1749,7 +1749,7 @@ const Tabs = ({
|
|
|
1749
1749
|
style
|
|
1750
1750
|
}) => {
|
|
1751
1751
|
const { theme } = useTheme();
|
|
1752
|
-
const [data, setData] = React
|
|
1752
|
+
const [data, setData] = React.useState(
|
|
1753
1753
|
options.map((option) => ({
|
|
1754
1754
|
title: option,
|
|
1755
1755
|
id: option,
|
|
@@ -1832,7 +1832,7 @@ const Tags = ({
|
|
|
1832
1832
|
icon,
|
|
1833
1833
|
iconStyle
|
|
1834
1834
|
}) => {
|
|
1835
|
-
const [selectedTags, setSelectedTags] = React
|
|
1835
|
+
const [selectedTags, setSelectedTags] = React.useState([]);
|
|
1836
1836
|
const toggleTag = (tag) => {
|
|
1837
1837
|
setSelectedTags((prevSelectedTags) => {
|
|
1838
1838
|
const selectedTagsSet = new Set(prevSelectedTags);
|
|
@@ -1930,11 +1930,11 @@ const CustomSwitch = ({
|
|
|
1930
1930
|
trackWidth = type !== ToggleButtonType.SMALL ? 35 : 15,
|
|
1931
1931
|
width = type !== ToggleButtonType.SMALL ? 60 : 40
|
|
1932
1932
|
}) => {
|
|
1933
|
-
const [isOn, setIsOn] = React
|
|
1934
|
-
const animatedValue = React
|
|
1933
|
+
const [isOn, setIsOn] = React.useState(value);
|
|
1934
|
+
const animatedValue = React.useRef(
|
|
1935
1935
|
new reactNative.Animated.Value(value ? trackWidth : 0)
|
|
1936
1936
|
).current;
|
|
1937
|
-
React
|
|
1937
|
+
React.useEffect(() => {
|
|
1938
1938
|
reactNative.Animated.timing(animatedValue, {
|
|
1939
1939
|
toValue: isOn ? trackWidth : 0,
|
|
1940
1940
|
duration: 200,
|
|
@@ -2016,18 +2016,18 @@ const Accordion = ({
|
|
|
2016
2016
|
icon,
|
|
2017
2017
|
titleVariant = "B4_REGULAR"
|
|
2018
2018
|
}) => {
|
|
2019
|
-
const contentRef = React
|
|
2020
|
-
const [animation] = React
|
|
2021
|
-
const [contentHeight, setContentHeight] = React
|
|
2019
|
+
const contentRef = React.useRef(null);
|
|
2020
|
+
const [animation] = React.useState(new reactNative.Animated.Value(0));
|
|
2021
|
+
const [contentHeight, setContentHeight] = React.useState(0);
|
|
2022
2022
|
const { theme } = useTheme();
|
|
2023
|
-
React
|
|
2023
|
+
React.useEffect(() => {
|
|
2024
2024
|
if (contentRef.current) {
|
|
2025
2025
|
contentRef.current.measure((x, y, width, height) => {
|
|
2026
2026
|
setContentHeight(height);
|
|
2027
2027
|
});
|
|
2028
2028
|
}
|
|
2029
2029
|
}, [isOpen]);
|
|
2030
|
-
React
|
|
2030
|
+
React.useEffect(() => {
|
|
2031
2031
|
reactNative.Animated.timing(animation, {
|
|
2032
2032
|
toValue: isOpen ? 1 : 0,
|
|
2033
2033
|
duration: 300,
|
|
@@ -2122,14 +2122,14 @@ const styles$l = reactNative.StyleSheet.create({
|
|
|
2122
2122
|
|
|
2123
2123
|
const Toast = React__default["default"].forwardRef(
|
|
2124
2124
|
({ sucessIcon, errorIcon }, ref) => {
|
|
2125
|
-
const [visible, setVisible] = React
|
|
2126
|
-
const [message, setMessage] = React
|
|
2127
|
-
const [isSuccess, setIsSuccess] = React
|
|
2128
|
-
const [btnText, setBtnText] = React
|
|
2129
|
-
const [onBtnPress, setOnBtnPress] = React
|
|
2130
|
-
const [progress, setProgress] = React
|
|
2131
|
-
const [height, setHeight] = React
|
|
2132
|
-
const bottom = React
|
|
2125
|
+
const [visible, setVisible] = React.useState(false);
|
|
2126
|
+
const [message, setMessage] = React.useState("");
|
|
2127
|
+
const [isSuccess, setIsSuccess] = React.useState(true);
|
|
2128
|
+
const [btnText, setBtnText] = React.useState(null);
|
|
2129
|
+
const [onBtnPress, setOnBtnPress] = React.useState(null);
|
|
2130
|
+
const [progress, setProgress] = React.useState(0);
|
|
2131
|
+
const [height, setHeight] = React.useState(72);
|
|
2132
|
+
const bottom = React.useRef(new reactNative.Animated.Value(-80)).current;
|
|
2133
2133
|
const showToast = (toastMessage, duration = 3e3, success = true, buttonText = null, buttonAction = null, height2 = 72) => {
|
|
2134
2134
|
setMessage(toastMessage);
|
|
2135
2135
|
setIsSuccess(success);
|
|
@@ -2159,7 +2159,7 @@ const Toast = React__default["default"].forwardRef(
|
|
|
2159
2159
|
const simulateProgress = () => {
|
|
2160
2160
|
setProgress((prev) => prev + 0.1 > 1 ? 1 : prev + 0.1);
|
|
2161
2161
|
};
|
|
2162
|
-
React
|
|
2162
|
+
React.useEffect(() => {
|
|
2163
2163
|
if (visible) {
|
|
2164
2164
|
setProgress(0);
|
|
2165
2165
|
const interval = setInterval(simulateProgress, 180);
|
|
@@ -2427,8 +2427,8 @@ const SwipableList = (props) => {
|
|
|
2427
2427
|
titleStyle
|
|
2428
2428
|
} = props;
|
|
2429
2429
|
const { theme } = useTheme();
|
|
2430
|
-
const [currentOpenId, setCurrentOpenId] = React
|
|
2431
|
-
const swipeableRefs = React
|
|
2430
|
+
const [currentOpenId, setCurrentOpenId] = React.useState(null);
|
|
2431
|
+
const swipeableRefs = React.useRef({});
|
|
2432
2432
|
const closeSwipeable = (id) => {
|
|
2433
2433
|
swipeableRefs.current[id]?.close();
|
|
2434
2434
|
};
|
|
@@ -2574,7 +2574,7 @@ const CustomIcon = ({
|
|
|
2574
2574
|
};
|
|
2575
2575
|
|
|
2576
2576
|
function AnimationWithImperativeApi() {
|
|
2577
|
-
return /* @__PURE__ */
|
|
2577
|
+
return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { flex: 1 } }, /* @__PURE__ */ React__default["default"].createElement(
|
|
2578
2578
|
LottieView__default["default"],
|
|
2579
2579
|
{
|
|
2580
2580
|
style: { width: "100%", height: "100%" },
|
|
@@ -2872,7 +2872,7 @@ const styles$d = reactNative.StyleSheet.create({
|
|
|
2872
2872
|
|
|
2873
2873
|
const DateRangePicker = (props) => {
|
|
2874
2874
|
const { onButtonPress, btnTitle = "Apply" } = props;
|
|
2875
|
-
const [selectedRange, setSelectedRange] = React
|
|
2875
|
+
const [selectedRange, setSelectedRange] = React.useState({
|
|
2876
2876
|
startDate: "",
|
|
2877
2877
|
endDate: ""
|
|
2878
2878
|
});
|
|
@@ -3091,7 +3091,7 @@ const ScrollableList = ({
|
|
|
3091
3091
|
errorStyle,
|
|
3092
3092
|
activeTextStyle
|
|
3093
3093
|
}) => {
|
|
3094
|
-
const [selectedItem, setSelectedItem] = React
|
|
3094
|
+
const [selectedItem, setSelectedItem] = React.useState(
|
|
3095
3095
|
data && data.length > 0 ? data[0].name : null
|
|
3096
3096
|
);
|
|
3097
3097
|
const { theme } = useTheme();
|
|
@@ -3306,10 +3306,10 @@ const CountryDropDown = ({
|
|
|
3306
3306
|
errorMessage,
|
|
3307
3307
|
label
|
|
3308
3308
|
}) => {
|
|
3309
|
-
const [countryCode, setCountryCode] = React
|
|
3310
|
-
const [callingCode, setCallingCode] = React
|
|
3311
|
-
const [pickerVisible, setPickerVisible] = React
|
|
3312
|
-
const [isFocused, setIsFocused] = React
|
|
3309
|
+
const [countryCode, setCountryCode] = React.useState(defaultCountryCode);
|
|
3310
|
+
const [callingCode, setCallingCode] = React.useState(defaultCallingCode);
|
|
3311
|
+
const [pickerVisible, setPickerVisible] = React.useState(false);
|
|
3312
|
+
const [isFocused, setIsFocused] = React.useState(false);
|
|
3313
3313
|
const handleSelect = (country) => {
|
|
3314
3314
|
setCountryCode(country.cca2);
|
|
3315
3315
|
setCallingCode(`+${country.callingCode[0]}`);
|
|
@@ -3555,8 +3555,8 @@ const CustomDropdown = (props) => {
|
|
|
3555
3555
|
selectedItemTextStyle,
|
|
3556
3556
|
disable
|
|
3557
3557
|
} = props;
|
|
3558
|
-
const [value, setValue] = React
|
|
3559
|
-
const [isFocus, setIsFocus] = React
|
|
3558
|
+
const [value, setValue] = React.useState(defaultValue);
|
|
3559
|
+
const [isFocus, setIsFocus] = React.useState(false);
|
|
3560
3560
|
const renderLabel = () => {
|
|
3561
3561
|
if (value || isFocus) {
|
|
3562
3562
|
return /* @__PURE__ */ React__default["default"].createElement(
|
|
@@ -3714,12 +3714,12 @@ const CustomSwitchBtn = ({
|
|
|
3714
3714
|
inActiveTextStyle,
|
|
3715
3715
|
circleStyle
|
|
3716
3716
|
}) => {
|
|
3717
|
-
const [animatedValue] = React
|
|
3717
|
+
const [animatedValue] = React.useState(new reactNative.Animated.Value(value ? 1 : 0));
|
|
3718
3718
|
const translateX = animatedValue.interpolate({
|
|
3719
3719
|
inputRange: [0, 1],
|
|
3720
3720
|
outputRange: [0, 28]
|
|
3721
3721
|
});
|
|
3722
|
-
React
|
|
3722
|
+
React.useEffect(() => {
|
|
3723
3723
|
reactNative.Animated.timing(animatedValue, {
|
|
3724
3724
|
toValue: value ? 1 : 0,
|
|
3725
3725
|
duration: 300,
|
|
@@ -3921,10 +3921,10 @@ const CustomDocumentPicker = ({
|
|
|
3921
3921
|
uploadIcon,
|
|
3922
3922
|
deleteIcon
|
|
3923
3923
|
}) => {
|
|
3924
|
-
const [error, setError] = React
|
|
3925
|
-
const [docDetails, setDocDetails] = React
|
|
3924
|
+
const [error, setError] = React.useState("");
|
|
3925
|
+
const [docDetails, setDocDetails] = React.useState();
|
|
3926
3926
|
const { theme } = useTheme();
|
|
3927
|
-
const pickDocument = React
|
|
3927
|
+
const pickDocument = React.useCallback(async () => {
|
|
3928
3928
|
try {
|
|
3929
3929
|
const res = await DocumentPicker__default["default"].pickSingle({
|
|
3930
3930
|
type: fileTypes
|
|
@@ -3949,7 +3949,7 @@ const CustomDocumentPicker = ({
|
|
|
3949
3949
|
}
|
|
3950
3950
|
}
|
|
3951
3951
|
}, [fileTypes, maxFileSize, onDocumentUpload]);
|
|
3952
|
-
const removeDocument = React
|
|
3952
|
+
const removeDocument = React.useCallback(() => {
|
|
3953
3953
|
setDocDetails(void 0);
|
|
3954
3954
|
}, []);
|
|
3955
3955
|
return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(
|
|
@@ -3989,7 +3989,7 @@ const CustomDocumentPicker = ({
|
|
|
3989
3989
|
}
|
|
3990
3990
|
));
|
|
3991
3991
|
};
|
|
3992
|
-
var CustomDocumentPicker$1 = withThemeProvider(React
|
|
3992
|
+
var CustomDocumentPicker$1 = withThemeProvider(React.memo(CustomDocumentPicker));
|
|
3993
3993
|
|
|
3994
3994
|
const styles$5 = reactNative.StyleSheet.create({
|
|
3995
3995
|
textInputContainer: {
|
|
@@ -4049,11 +4049,11 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4049
4049
|
timerToResend = 6e4,
|
|
4050
4050
|
timerIcon
|
|
4051
4051
|
}, ref) => {
|
|
4052
|
-
const [otp, setOTP] = React
|
|
4053
|
-
const [isResendOtpEnable, setIsResendOtpEnable] = React
|
|
4054
|
-
const [activeInput, setActiveInput] = React
|
|
4055
|
-
const [resendOTPCount, setResendOTPCount] = React
|
|
4056
|
-
const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React
|
|
4052
|
+
const [otp, setOTP] = React.useState("");
|
|
4053
|
+
const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
|
|
4054
|
+
const [activeInput, setActiveInput] = React.useState(null);
|
|
4055
|
+
const [resendOTPCount, setResendOTPCount] = React.useState(0);
|
|
4056
|
+
const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = React.useState("");
|
|
4057
4057
|
const filteredTheme = Object?.keys(theme)?.reduce(
|
|
4058
4058
|
(acc, key) => {
|
|
4059
4059
|
acc[key] = theme[key][mode];
|
|
@@ -4062,8 +4062,8 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4062
4062
|
{}
|
|
4063
4063
|
);
|
|
4064
4064
|
const { theme: theme$1 } = mode ? { theme: filteredTheme } : useTheme();
|
|
4065
|
-
const [timeLeft, setTimeLeft] = React
|
|
4066
|
-
React
|
|
4065
|
+
const [timeLeft, setTimeLeft] = React.useState(60);
|
|
4066
|
+
React.useEffect(() => {
|
|
4067
4067
|
let timer;
|
|
4068
4068
|
if (!isResendOtpEnable && timeLeft > 0) {
|
|
4069
4069
|
timer = setInterval(() => {
|
|
@@ -4074,9 +4074,9 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4074
4074
|
}
|
|
4075
4075
|
return () => clearInterval(timer);
|
|
4076
4076
|
}, [timeLeft, isResendOtpEnable]);
|
|
4077
|
-
const refs = React
|
|
4077
|
+
const refs = React.useRef([]);
|
|
4078
4078
|
refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
|
|
4079
|
-
React
|
|
4079
|
+
React.useEffect(() => {
|
|
4080
4080
|
enableResendOtp();
|
|
4081
4081
|
}, []);
|
|
4082
4082
|
const onClickResendOTP = () => {
|
|
@@ -4106,7 +4106,7 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4106
4106
|
setTimeLeft(timerToResend / 1e3);
|
|
4107
4107
|
}, timerToResend);
|
|
4108
4108
|
};
|
|
4109
|
-
React
|
|
4109
|
+
React.useEffect(() => {
|
|
4110
4110
|
if (reactNative.Platform.OS === "android") {
|
|
4111
4111
|
onStartListeningOtp();
|
|
4112
4112
|
}
|
|
@@ -4162,7 +4162,7 @@ const OTPInput = React__default["default"].forwardRef(
|
|
|
4162
4162
|
refs.current[index - 1]?.focus();
|
|
4163
4163
|
}
|
|
4164
4164
|
};
|
|
4165
|
-
React
|
|
4165
|
+
React.useEffect(() => {
|
|
4166
4166
|
if (otp.length === length) {
|
|
4167
4167
|
onComplete?.(otp);
|
|
4168
4168
|
}
|
|
@@ -4466,12 +4466,12 @@ const CustomSlideButton = React__default["default"].forwardRef(
|
|
|
4466
4466
|
sliderTextColor = "#000",
|
|
4467
4467
|
resetTimer = 2e3
|
|
4468
4468
|
}, ref) => {
|
|
4469
|
-
const value = React
|
|
4470
|
-
const cardRef = React
|
|
4471
|
-
const [translateX] = React
|
|
4472
|
-
const sliderConteinerRef = React
|
|
4473
|
-
const [color, setColor] = React
|
|
4474
|
-
const [sliderBackgroundColorRef, setSliderBackgroundColorRef] = React
|
|
4469
|
+
const value = React.useRef(0);
|
|
4470
|
+
const cardRef = React.useRef(null);
|
|
4471
|
+
const [translateX] = React.useState(new reactNative.Animated.Value(0));
|
|
4472
|
+
const sliderConteinerRef = React.useRef(null);
|
|
4473
|
+
const [color, setColor] = React.useState(new reactNative.Animated.Value(0));
|
|
4474
|
+
const [sliderBackgroundColorRef, setSliderBackgroundColorRef] = React.useState(new reactNative.Animated.Value(0));
|
|
4475
4475
|
React__default["default"].useImperativeHandle(ref, () => ({
|
|
4476
4476
|
reset() {
|
|
4477
4477
|
resetAll();
|
|
@@ -4955,7 +4955,7 @@ const styles = reactNative.StyleSheet.create({
|
|
|
4955
4955
|
});
|
|
4956
4956
|
|
|
4957
4957
|
const RadioButtonGroup = ({ data, onSelect, containerStyle, labelStyle, optionContainerStyle }) => {
|
|
4958
|
-
const [selectedOption, setSelectedOption] = React
|
|
4958
|
+
const [selectedOption, setSelectedOption] = React.useState(data[0]?.value);
|
|
4959
4959
|
const handleSelect = (item) => {
|
|
4960
4960
|
setSelectedOption(item.value);
|
|
4961
4961
|
onSelect(item);
|