@meatech/payblend_app_ui_component 1.1.37 → 1.1.38
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.
|
@@ -25,25 +25,21 @@ export const Switch: React.FC<SwitchProps> = ({
|
|
|
25
25
|
const resMinWidth = pw(2);
|
|
26
26
|
|
|
27
27
|
const switchTranslate = useSharedValue(0);
|
|
28
|
-
const [active, setActive] = useState<boolean>(isEnabled || false);
|
|
29
28
|
|
|
30
|
-
const progress = useDerivedValue(() => withTiming(
|
|
31
|
-
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
setActive(isEnabled as boolean);
|
|
34
|
-
}, [isEnabled]);
|
|
29
|
+
const progress = useDerivedValue(() => withTiming(isEnabled ? resMaxWidth : 0));
|
|
30
|
+
console.log('isEnabled', isEnabled);
|
|
35
31
|
|
|
36
32
|
const containerStyle = size
|
|
37
33
|
? styleBySize[size] || styleBySize.medium
|
|
38
34
|
: styleBySize.medium;
|
|
39
35
|
|
|
40
36
|
useEffect(() => {
|
|
41
|
-
if (
|
|
37
|
+
if (isEnabled) {
|
|
42
38
|
switchTranslate.value = resMaxWidth;
|
|
43
39
|
} else {
|
|
44
40
|
switchTranslate.value = resMinWidth;
|
|
45
41
|
}
|
|
46
|
-
}, [
|
|
42
|
+
}, [isEnabled, switchTranslate, resMaxWidth, resMinWidth]);
|
|
47
43
|
|
|
48
44
|
const customSpringStyles = useAnimatedStyle(() => ({
|
|
49
45
|
transform: [
|
|
@@ -72,9 +68,8 @@ export const Switch: React.FC<SwitchProps> = ({
|
|
|
72
68
|
});
|
|
73
69
|
|
|
74
70
|
const _onSwitch = async () => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
onSwitch && onSwitch(switchValue);
|
|
71
|
+
if (disabled) return;
|
|
72
|
+
onSwitch && onSwitch(!isEnabled);
|
|
78
73
|
};
|
|
79
74
|
|
|
80
75
|
return (
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAC,WAAW,EAAC,MAAM,QAAQ,CAAC;AAInC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAC,WAAW,EAAC,MAAM,QAAQ,CAAC;AAInC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+ExC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
3
|
import { StyleSheet, TouchableWithoutFeedback } from 'react-native';
|
|
4
4
|
import Animated, { useSharedValue, useDerivedValue, withTiming, useAnimatedStyle, withSpring, interpolateColor } from 'react-native-reanimated';
|
|
5
5
|
import '../../themes/base/styles.js';
|
|
@@ -13,22 +13,19 @@ const Switch = ({ isEnabled, activeColor = colors.teal['80'], inActiveColor = co
|
|
|
13
13
|
const resMaxWidth = size === 'small' ? responsiveWidth(16) : responsiveWidth(22);
|
|
14
14
|
const resMinWidth = responsiveWidth(2);
|
|
15
15
|
const switchTranslate = useSharedValue(0);
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
useEffect(() => {
|
|
19
|
-
setActive(isEnabled);
|
|
20
|
-
}, [isEnabled]);
|
|
16
|
+
const progress = useDerivedValue(() => withTiming(isEnabled ? resMaxWidth : 0));
|
|
17
|
+
console.log('isEnabled', isEnabled);
|
|
21
18
|
const containerStyle = size
|
|
22
19
|
? styleBySize[size] || styleBySize.medium
|
|
23
20
|
: styleBySize.medium;
|
|
24
21
|
useEffect(() => {
|
|
25
|
-
if (
|
|
22
|
+
if (isEnabled) {
|
|
26
23
|
switchTranslate.value = resMaxWidth;
|
|
27
24
|
}
|
|
28
25
|
else {
|
|
29
26
|
switchTranslate.value = resMinWidth;
|
|
30
27
|
}
|
|
31
|
-
}, [
|
|
28
|
+
}, [isEnabled, switchTranslate, resMaxWidth, resMinWidth]);
|
|
32
29
|
const customSpringStyles = useAnimatedStyle(() => ({
|
|
33
30
|
transform: [
|
|
34
31
|
{
|
|
@@ -50,9 +47,9 @@ const Switch = ({ isEnabled, activeColor = colors.teal['80'], inActiveColor = co
|
|
|
50
47
|
};
|
|
51
48
|
});
|
|
52
49
|
const _onSwitch = async () => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
onSwitch && onSwitch(
|
|
50
|
+
if (disabled)
|
|
51
|
+
return;
|
|
52
|
+
onSwitch && onSwitch(!isEnabled);
|
|
56
53
|
};
|
|
57
54
|
return (React.createElement(TouchableWithoutFeedback, { disabled: disabled, onPress: _onSwitch },
|
|
58
55
|
React.createElement(Animated.View, { style: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sources":["../../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport {useState, useEffect} from 'react';\nimport {StyleSheet, TouchableWithoutFeedback} from 'react-native';\nimport Animated, {\n interpolateColor,\n useSharedValue,\n useAnimatedStyle,\n withSpring,\n withTiming,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport {SwitchProps} from './type';\nimport {colors, pw} from '@ui/themes';\nimport {styleBySize} from './styles';\n\nexport const Switch: React.FC<SwitchProps> = ({\n isEnabled,\n activeColor = colors.teal['80'],\n inActiveColor = colors.neutral['60'],\n onSwitch,\n size,\n disabled = false,\n}) => {\n const resMaxWidth = size === 'small' ? pw(16) : pw(22);\n const resMinWidth = pw(2);\n\n const switchTranslate = useSharedValue(0);\n
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport {useState, useEffect} from 'react';\nimport {StyleSheet, TouchableWithoutFeedback} from 'react-native';\nimport Animated, {\n interpolateColor,\n useSharedValue,\n useAnimatedStyle,\n withSpring,\n withTiming,\n useDerivedValue,\n} from 'react-native-reanimated';\nimport {SwitchProps} from './type';\nimport {colors, pw} from '@ui/themes';\nimport {styleBySize} from './styles';\n\nexport const Switch: React.FC<SwitchProps> = ({\n isEnabled,\n activeColor = colors.teal['80'],\n inActiveColor = colors.neutral['60'],\n onSwitch,\n size,\n disabled = false,\n}) => {\n const resMaxWidth = size === 'small' ? pw(16) : pw(22);\n const resMinWidth = pw(2);\n\n const switchTranslate = useSharedValue(0);\n\n const progress = useDerivedValue(() => withTiming(isEnabled ? resMaxWidth : 0));\n console.log('isEnabled', isEnabled);\n\n const containerStyle = size\n ? styleBySize[size] || styleBySize.medium\n : styleBySize.medium;\n\n useEffect(() => {\n if (isEnabled) {\n switchTranslate.value = resMaxWidth;\n } else {\n switchTranslate.value = resMinWidth;\n }\n }, [isEnabled, switchTranslate, resMaxWidth, resMinWidth]);\n\n const customSpringStyles = useAnimatedStyle(() => ({\n transform: [\n {\n translateX: withSpring(switchTranslate.value, {\n mass: 1,\n damping: 15,\n stiffness: 120,\n overshootClamping: false,\n restSpeedThreshold: 0.001,\n restDisplacementThreshold: 0.001,\n }),\n },\n ],\n }));\n\n const backgroundColorStyle = useAnimatedStyle(() => {\n const backgroundColor = interpolateColor(\n progress.value,\n [0, resMaxWidth],\n [inActiveColor, activeColor],\n );\n return {\n backgroundColor,\n };\n });\n\n const _onSwitch = async () => {\n if (disabled) return;\n onSwitch && onSwitch(!isEnabled);\n };\n\n return (\n <TouchableWithoutFeedback disabled={disabled} onPress={_onSwitch}>\n <Animated.View\n style={[\n styles.container,\n backgroundColorStyle,\n {width: containerStyle.width},\n {height: containerStyle.height},\n ]}>\n <Animated.View\n style={[\n styles.circle,\n customSpringStyles,\n {width: containerStyle.circleSize},\n {height: containerStyle.circleSize},\n ]}\n />\n </Animated.View>\n </TouchableWithoutFeedback>\n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n borderRadius: pw(30),\n justifyContent: 'center',\n backgroundColor: colors.neutral['60'],\n },\n circle: {\n borderRadius: pw(30),\n backgroundColor: colors.white['10'],\n shadowColor: colors.black['100'],\n shadowOffset: {\n width: 0,\n height: pw(2),\n },\n shadowOpacity: 0.2,\n shadowRadius: 2.5,\n elevation: 4,\n },\n});\n"],"names":["pw"],"mappings":"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"}
|