@meatech/payblend_app_ui_component 1.1.31 → 1.1.33
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/.trunk/trunk.yaml +1 -1
- package/components/Switch/Switch.tsx +2 -1
- package/components/Switch/type.ts +1 -0
- package/dist/components/Switch/Switch.d.ts.map +1 -1
- package/dist/components/Switch/Switch.js +2 -2
- package/dist/components/Switch/Switch.js.map +1 -1
- package/dist/components/Switch/type.d.ts +1 -0
- package/dist/components/Switch/type.d.ts.map +1 -1
- package/package.json +1 -1
package/.trunk/trunk.yaml
CHANGED
|
@@ -19,6 +19,7 @@ export const Switch: React.FC<SwitchProps> = ({
|
|
|
19
19
|
inActiveColor = colors.neutral['60'],
|
|
20
20
|
onSwitch,
|
|
21
21
|
size,
|
|
22
|
+
disabled = false,
|
|
22
23
|
}) => {
|
|
23
24
|
const resMaxWidth = size === 'small' ? pw(16) : pw(22);
|
|
24
25
|
const resMinWidth = pw(2);
|
|
@@ -77,7 +78,7 @@ export const Switch: React.FC<SwitchProps> = ({
|
|
|
77
78
|
};
|
|
78
79
|
|
|
79
80
|
return (
|
|
80
|
-
<TouchableWithoutFeedback onPress={_onSwitch}>
|
|
81
|
+
<TouchableWithoutFeedback disabled={disabled} onPress={_onSwitch}>
|
|
81
82
|
<Animated.View
|
|
82
83
|
style={[
|
|
83
84
|
styles.container,
|
|
@@ -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,CAoFxC,CAAC"}
|
|
@@ -9,7 +9,7 @@ import { pw as responsiveWidth } from '../../themes/metrics.js';
|
|
|
9
9
|
import '../../themes/stats.js';
|
|
10
10
|
import { styleBySize } from './styles.js';
|
|
11
11
|
|
|
12
|
-
const Switch = ({ isEnabled, activeColor = colors.teal['80'], inActiveColor = colors.neutral['60'], onSwitch, size, }) => {
|
|
12
|
+
const Switch = ({ isEnabled, activeColor = colors.teal['80'], inActiveColor = colors.neutral['60'], onSwitch, size, disabled = false, }) => {
|
|
13
13
|
const resMaxWidth = size === 'small' ? responsiveWidth(16) : responsiveWidth(22);
|
|
14
14
|
const resMinWidth = responsiveWidth(2);
|
|
15
15
|
const switchTranslate = useSharedValue(0);
|
|
@@ -54,7 +54,7 @@ const Switch = ({ isEnabled, activeColor = colors.teal['80'], inActiveColor = co
|
|
|
54
54
|
setActive(switchValue);
|
|
55
55
|
onSwitch && onSwitch(switchValue);
|
|
56
56
|
};
|
|
57
|
-
return (React.createElement(TouchableWithoutFeedback, { onPress: _onSwitch },
|
|
57
|
+
return (React.createElement(TouchableWithoutFeedback, { disabled: disabled, onPress: _onSwitch },
|
|
58
58
|
React.createElement(Animated.View, { style: [
|
|
59
59
|
styles.container,
|
|
60
60
|
backgroundColorStyle,
|
|
@@ -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}) => {\n const resMaxWidth = size === 'small' ? pw(16) : pw(22);\n const resMinWidth = pw(2);\n\n const switchTranslate = useSharedValue(0);\n const [active, setActive] = useState<boolean>(isEnabled || false);\n\n const progress = useDerivedValue(() => withTiming(active ? resMaxWidth : 0));\n\n useEffect(() => {\n setActive(isEnabled as boolean);\n }, [isEnabled]);\n\n const containerStyle = size\n ? styleBySize[size] || styleBySize.medium\n : styleBySize.medium;\n\n useEffect(() => {\n if (active) {\n switchTranslate.value = resMaxWidth;\n } else {\n switchTranslate.value = resMinWidth;\n }\n }, [active, 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 const switchValue = !active;\n setActive(switchValue);\n onSwitch && onSwitch(switchValue);\n };\n\n return (\n <TouchableWithoutFeedback 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":";;;;;;;;;;;AAeO,MAAM,MAAM,GAA0B,CAAC,EAC5C,SAAS,EACT,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAC/B,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EACpC,QAAQ,EACR,IAAI,
|
|
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 const [active, setActive] = useState<boolean>(isEnabled || false);\n\n const progress = useDerivedValue(() => withTiming(active ? resMaxWidth : 0));\n\n useEffect(() => {\n setActive(isEnabled as boolean);\n }, [isEnabled]);\n\n const containerStyle = size\n ? styleBySize[size] || styleBySize.medium\n : styleBySize.medium;\n\n useEffect(() => {\n if (active) {\n switchTranslate.value = resMaxWidth;\n } else {\n switchTranslate.value = resMinWidth;\n }\n }, [active, 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 const switchValue = !active;\n setActive(switchValue);\n onSwitch && onSwitch(switchValue);\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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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../components/Switch/type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../components/Switch/type.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
|