@xhsreds/reds-rn-next 0.0.2 → 0.0.4-beta123
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/coverage/coverage-final.json +13 -11
- package/lib/cjs/components/Button/interface/index.js +0 -2
- package/lib/cjs/components/Button/interface/index.js.map +1 -1
- package/lib/cjs/components/ConfigProvider/hooks/themeToken/useThemeToken.js +9 -1
- package/lib/cjs/components/ConfigProvider/hooks/themeToken/useThemeToken.js.map +1 -1
- package/lib/cjs/components/ConfigProvider/interface/index.js +18 -0
- package/lib/cjs/components/ConfigProvider/interface/index.js.map +1 -1
- package/lib/cjs/components/NN/index.js +83 -0
- package/lib/cjs/components/NN/index.js.map +1 -0
- package/lib/cjs/components/NN/interface/index.js +13 -0
- package/lib/cjs/components/NN/interface/index.js.map +1 -0
- package/lib/cjs/components/NNNN/index.js +83 -0
- package/lib/cjs/components/NNNN/index.js.map +1 -0
- package/lib/cjs/components/NNNN/interface/index.js +13 -0
- package/lib/cjs/components/NNNN/interface/index.js.map +1 -0
- package/lib/cjs/components/PP/index.js +83 -0
- package/lib/cjs/components/PP/index.js.map +1 -0
- package/lib/cjs/components/PP/interface/index.js +14 -0
- package/lib/cjs/components/PP/interface/index.js.map +1 -0
- package/lib/cjs/components/Popover/interface/index.js +12 -0
- package/lib/cjs/components/Popover/interface/index.js.map +1 -1
- package/lib/cjs/components/Switch/index.js.map +1 -1
- package/lib/cjs/components/Switch/interface/index.js +1 -2
- package/lib/cjs/components/Switch/interface/index.js.map +1 -1
- package/lib/esm/components/Button/interface/index.js +0 -2
- package/lib/esm/components/Button/interface/index.js.map +1 -1
- package/lib/esm/components/ConfigProvider/hooks/themeToken/useThemeToken.js +9 -1
- package/lib/esm/components/ConfigProvider/hooks/themeToken/useThemeToken.js.map +1 -1
- package/lib/esm/components/ConfigProvider/interface/index.js +17 -0
- package/lib/esm/components/ConfigProvider/interface/index.js.map +1 -1
- package/lib/esm/components/NN/index.js +79 -0
- package/lib/esm/components/NN/index.js.map +1 -0
- package/lib/esm/components/NN/interface/index.js +11 -0
- package/lib/esm/components/NN/interface/index.js.map +1 -0
- package/lib/esm/components/NNNN/index.js +79 -0
- package/lib/esm/components/NNNN/index.js.map +1 -0
- package/lib/esm/components/NNNN/interface/index.js +11 -0
- package/lib/esm/components/NNNN/interface/index.js.map +1 -0
- package/lib/esm/components/PP/index.js +79 -0
- package/lib/esm/components/PP/index.js.map +1 -0
- package/lib/esm/components/PP/interface/index.js +12 -0
- package/lib/esm/components/PP/interface/index.js.map +1 -0
- package/lib/esm/components/Popover/interface/index.js +11 -0
- package/lib/esm/components/Popover/interface/index.js.map +1 -1
- package/lib/esm/components/Switch/index.js.map +1 -1
- package/lib/esm/components/Switch/interface/index.js +1 -2
- package/lib/esm/components/Switch/interface/index.js.map +1 -1
- package/lib/types/src/components/Button/interface/index.d.ts +2 -3
- package/lib/types/src/components/ConfigProvider/hooks/themeToken/useThemeToken.d.ts +1 -1
- package/lib/types/src/components/ConfigProvider/interface/index.d.ts +11 -0
- package/lib/types/src/components/NN/index.d.ts +7 -0
- package/lib/types/src/components/NN/interface/index.d.ts +10 -0
- package/lib/types/src/components/NNNN/index.d.ts +7 -0
- package/lib/types/src/components/NNNN/interface/index.d.ts +10 -0
- package/lib/types/src/components/PP/index.d.ts +7 -0
- package/lib/types/src/components/PP/interface/index.d.ts +11 -0
- package/lib/types/src/components/Popover/interface/index.d.ts +7 -3
- package/lib/types/src/components/Switch/interface/index.d.ts +4 -2
- package/package.json +2 -2
- package/src/components/Button/doc/index.mdx +7 -7
- package/src/components/Button/interface/index.ts +2 -5
- package/src/components/ConfigProvider/doc/index.mdx +1 -1
- package/src/components/ConfigProvider/hooks/themeToken/useThemeToken.ts +10 -1
- package/src/components/ConfigProvider/interface/index.ts +26 -0
- package/src/components/Popover/doc/index.mdx +15 -14
- package/src/components/Popover/interface/index.ts +16 -4
- package/src/components/Switch/doc/index.mdx +11 -11
- package/src/components/Switch/index.tsx +0 -1
- package/src/components/Switch/interface/index.ts +5 -5
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _rollupPluginBabelHelpers = require('../../_chunks/CAyGJuk1.js');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var reactNative = require('react-native');
|
|
8
|
+
var components_NNNN_interface_index = require('./interface/index.js');
|
|
9
|
+
var redsTokenNext = require('@xhs/reds-token-next');
|
|
10
|
+
|
|
11
|
+
var NNNN = function NNNN(_ref) {
|
|
12
|
+
var cValue = _ref.value,
|
|
13
|
+
defaultValue = _ref.defaultValue,
|
|
14
|
+
onChange = _ref.onChange,
|
|
15
|
+
onClick = _ref.onClick,
|
|
16
|
+
trackOnColor = _ref.trackOnColor,
|
|
17
|
+
trackOffColor = _ref.trackOffColor;
|
|
18
|
+
var isControlled = cValue !== void 0;
|
|
19
|
+
var _useState = React.useState(defaultValue),
|
|
20
|
+
_useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
|
|
21
|
+
value = _useState2[0],
|
|
22
|
+
setValue = _useState2[1];
|
|
23
|
+
var animatedValue = React.useRef(new reactNative.Animated.Value(defaultValue ? 18 : 2)).current;
|
|
24
|
+
var thumbTranslateX = React.useMemo(function () {
|
|
25
|
+
return animatedValue.interpolate({
|
|
26
|
+
inputRange: [2, 18],
|
|
27
|
+
outputRange: [2, 18]
|
|
28
|
+
});
|
|
29
|
+
}, []);
|
|
30
|
+
React.useEffect(function () {
|
|
31
|
+
isControlled && setValue(cValue);
|
|
32
|
+
onChange === null || onChange === void 0 || onChange(!!value);
|
|
33
|
+
reactNative.Animated.timing(animatedValue, {
|
|
34
|
+
toValue: value ? 18 : 2,
|
|
35
|
+
duration: 200,
|
|
36
|
+
useNativeDriver: true
|
|
37
|
+
}).start();
|
|
38
|
+
}, [value, cValue]);
|
|
39
|
+
var toggleNNNN = function toggleNNNN(e) {
|
|
40
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
41
|
+
!isControlled && setValue(function (v) {
|
|
42
|
+
return !v;
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
return /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
|
|
46
|
+
onPress: function onPress(e) {
|
|
47
|
+
return toggleNNNN(e);
|
|
48
|
+
}
|
|
49
|
+
}, /* @__PURE__ */React.createElement(reactNative.View, {
|
|
50
|
+
style: [styles.container, {
|
|
51
|
+
backgroundColor: value ? trackOnColor : trackOffColor
|
|
52
|
+
}]
|
|
53
|
+
}, /* @__PURE__ */React.createElement(reactNative.Animated.View, {
|
|
54
|
+
style: [styles.thumb, {
|
|
55
|
+
transform: [{
|
|
56
|
+
translateX: thumbTranslateX
|
|
57
|
+
}]
|
|
58
|
+
}]
|
|
59
|
+
})));
|
|
60
|
+
};
|
|
61
|
+
NNNN.defaultProps = components_NNNN_interface_index.defaultProps;
|
|
62
|
+
var styles = reactNative.StyleSheet.create({
|
|
63
|
+
container: {
|
|
64
|
+
width: 40,
|
|
65
|
+
height: 24,
|
|
66
|
+
borderRadius: 15,
|
|
67
|
+
justifyContent: "center",
|
|
68
|
+
alignItems: "center"
|
|
69
|
+
},
|
|
70
|
+
thumb: {
|
|
71
|
+
width: 20,
|
|
72
|
+
height: 20,
|
|
73
|
+
borderRadius: 10,
|
|
74
|
+
backgroundColor: redsTokenNext.alwaysColor.White,
|
|
75
|
+
justifyContent: "center",
|
|
76
|
+
alignItems: "center",
|
|
77
|
+
position: "absolute",
|
|
78
|
+
left: 0
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
exports.default = NNNN;
|
|
83
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/NNNN/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsNNNN, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst NNNN = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsNNNN) => {\n const isControlled = cValue !== undefined;\n const [value, setValue] = useState(defaultValue);\n\n const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n useEffect(() => {\n isControlled && setValue(cValue);\n onChange?.(!!value);\n Animated.timing(animatedValue, {\n toValue: value ? 18 : 2,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [value, cValue]);\n\n const toggleNNNN = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => toggleNNNN(e)}>\n <View style={[styles.container, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\nNNNN.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n container: {\n width: 40,\n height: 24,\n borderRadius: 15,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n thumb: {\n width: 20,\n height: 20,\n borderRadius: 10,\n backgroundColor: alwaysColor.White,\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"absolute\",\n left: 0,\n },\n});\n\nexport default NNNN;\n"],"names":["NNNN","_ref","cValue","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","toggleNNNN","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","container","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","alwaysColor","White","position","left"],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var redsTokenNext = require('@xhs/reds-token-next');
|
|
4
|
+
|
|
5
|
+
var defaultProps = {
|
|
6
|
+
defaultValue: false,
|
|
7
|
+
disabled: false,
|
|
8
|
+
trackOnColor: redsTokenNext.lightColor.Primary,
|
|
9
|
+
trackOffColor: redsTokenNext.lightColor.Fill2
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.defaultProps = defaultProps;
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/NNNN/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\nexport interface RedsNNNN {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n trackOnColor?: string;\n trackOffColor?: string;\n onChange?: (value: boolean) => void;\n onClick?: (value: Event) => void;\n}\n\nexport const defaultProps: RedsNNNN = {\n defaultValue: false,\n disabled: false,\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;;;AAYO,IAAMA,YAAyB,GAAA;AACpCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;EACVC,cAAcC,wBAAW,CAAAC,OAAA;EACzBC,eAAeF,wBAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _rollupPluginBabelHelpers = require('../../_chunks/CAyGJuk1.js');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var reactNative = require('react-native');
|
|
8
|
+
var components_PP_interface_index = require('./interface/index.js');
|
|
9
|
+
var redsTokenNext = require('@xhs/reds-token-next');
|
|
10
|
+
|
|
11
|
+
var PP = function PP(_ref) {
|
|
12
|
+
var cValue = _ref.value,
|
|
13
|
+
defaultValue = _ref.defaultValue,
|
|
14
|
+
onChange = _ref.onChange,
|
|
15
|
+
onClick = _ref.onClick,
|
|
16
|
+
trackOnColor = _ref.trackOnColor,
|
|
17
|
+
trackOffColor = _ref.trackOffColor;
|
|
18
|
+
var isControlled = cValue !== void 0;
|
|
19
|
+
var _useState = React.useState(defaultValue),
|
|
20
|
+
_useState2 = _rollupPluginBabelHelpers._slicedToArray(_useState, 2),
|
|
21
|
+
value = _useState2[0],
|
|
22
|
+
setValue = _useState2[1];
|
|
23
|
+
var animatedValue = React.useRef(new reactNative.Animated.Value(defaultValue ? 18 : 2)).current;
|
|
24
|
+
var thumbTranslateX = React.useMemo(function () {
|
|
25
|
+
return animatedValue.interpolate({
|
|
26
|
+
inputRange: [2, 18],
|
|
27
|
+
outputRange: [2, 18]
|
|
28
|
+
});
|
|
29
|
+
}, []);
|
|
30
|
+
React.useEffect(function () {
|
|
31
|
+
isControlled && setValue(cValue);
|
|
32
|
+
onChange === null || onChange === void 0 || onChange(!!value);
|
|
33
|
+
reactNative.Animated.timing(animatedValue, {
|
|
34
|
+
toValue: value ? 18 : 2,
|
|
35
|
+
duration: 200,
|
|
36
|
+
useNativeDriver: true
|
|
37
|
+
}).start();
|
|
38
|
+
}, [value, cValue]);
|
|
39
|
+
var togglePP = function togglePP(e) {
|
|
40
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
41
|
+
!isControlled && setValue(function (v) {
|
|
42
|
+
return !v;
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
return /* @__PURE__ */React.createElement(reactNative.TouchableWithoutFeedback, {
|
|
46
|
+
onPress: function onPress(e) {
|
|
47
|
+
return togglePP(e);
|
|
48
|
+
}
|
|
49
|
+
}, /* @__PURE__ */React.createElement(reactNative.View, {
|
|
50
|
+
style: [styles.container, {
|
|
51
|
+
backgroundColor: value ? trackOnColor : trackOffColor
|
|
52
|
+
}]
|
|
53
|
+
}, /* @__PURE__ */React.createElement(reactNative.Animated.View, {
|
|
54
|
+
style: [styles.thumb, {
|
|
55
|
+
transform: [{
|
|
56
|
+
translateX: thumbTranslateX
|
|
57
|
+
}]
|
|
58
|
+
}]
|
|
59
|
+
})));
|
|
60
|
+
};
|
|
61
|
+
PP.defaultProps = components_PP_interface_index.defaultProps;
|
|
62
|
+
var styles = reactNative.StyleSheet.create({
|
|
63
|
+
container: {
|
|
64
|
+
width: 40,
|
|
65
|
+
height: 24,
|
|
66
|
+
borderRadius: 15,
|
|
67
|
+
justifyContent: "center",
|
|
68
|
+
alignItems: "center"
|
|
69
|
+
},
|
|
70
|
+
thumb: {
|
|
71
|
+
width: 20,
|
|
72
|
+
height: 20,
|
|
73
|
+
borderRadius: 10,
|
|
74
|
+
backgroundColor: redsTokenNext.alwaysColor.White,
|
|
75
|
+
justifyContent: "center",
|
|
76
|
+
alignItems: "center",
|
|
77
|
+
position: "absolute",
|
|
78
|
+
left: 0
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
exports.default = PP;
|
|
83
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/PP/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsPP, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst PP = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsPP) => {\n const isControlled = cValue !== undefined;\n const [value, setValue] = useState(defaultValue);\n\n const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n useEffect(() => {\n isControlled && setValue(cValue);\n onChange?.(!!value);\n Animated.timing(animatedValue, {\n toValue: value ? 18 : 2,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [value, cValue]);\n\n const togglePP = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => togglePP(e)}>\n <View style={[styles.container, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\nPP.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n container: {\n width: 40,\n height: 24,\n borderRadius: 15,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n thumb: {\n width: 20,\n height: 20,\n borderRadius: 10,\n backgroundColor: alwaysColor.White,\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"absolute\",\n left: 0,\n },\n});\n\nexport default PP;\n"],"names":["PP","_ref","cValue","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","togglePP","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","container","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","alwaysColor","White","position","left"],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var redsTokenNext = require('@xhs/reds-token-next');
|
|
4
|
+
|
|
5
|
+
var defaultProps = {
|
|
6
|
+
value: void 0,
|
|
7
|
+
defaultValue: false,
|
|
8
|
+
disabled: false,
|
|
9
|
+
trackOnColor: redsTokenNext.lightColor.Primary,
|
|
10
|
+
trackOffColor: redsTokenNext.lightColor.Fill2
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
exports.defaultProps = defaultProps;
|
|
14
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/PP/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\nexport interface RedsPP {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n trackOnColor?: string;\n trackOffColor?: string;\n onChange?: (value: boolean) => void;\n onClick?: (value: GestureResponderEvent) => void;\n}\n\nexport const defaultProps: RedsPP = {\n value: undefined,\n defaultValue: false,\n disabled: false,\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","value","defaultValue","disabled","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;;;AAYO,IAAMA,YAAuB,GAAA;EAClCC,KAAO,EAAA,KAAA,CAAA;AACPC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;EACVC,cAAcC,wBAAW,CAAAC,OAAA;EACzBC,eAAeF,wBAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
|
@@ -1,3 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var defaultProps = {
|
|
4
|
+
visible: void 0,
|
|
5
|
+
placement: "top",
|
|
6
|
+
content: "",
|
|
7
|
+
opacity: 0,
|
|
8
|
+
mode: "light",
|
|
9
|
+
trigger: "click",
|
|
10
|
+
zIndex: 1e3,
|
|
11
|
+
closeOnClickAgain: true
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
exports.defaultProps = defaultProps;
|
|
3
15
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Popover/interface/index.ts"],"sourcesContent":["import { ReactNode } from \"react\";\nexport interface RedsPopover {\n visible?: boolean;\n placement?: \"top\" | \"bottom\";\n content?: string;\n opacity?: number;\n mode?: \"light\" | \"dark\";\n trigger?: \"click\" | \"touch\";\n zIndex?: number;\n closeOnClickAgain?: boolean;\n children?: ReactNode;\n onClickMask?: (evnet: Event) => void;\n onVisibleChange?: (value: boolean) => void;\n}\n\nexport interface RedsPopoverEvent {}\nexport const defaultProps: RedsPopover = {\n visible: undefined,\n placement: \"top\",\n content: \"\",\n opacity: 0,\n mode: \"light\",\n trigger: \"click\",\n zIndex: 1000,\n closeOnClickAgain: true,\n};\n"],"names":["defaultProps","visible","placement","content","opacity","mode","trigger","zIndex","closeOnClickAgain"],"mappings":";;AAgBO,IAAMA,YAA4B,GAAA;EACvCC,OAAS,EAAA,KAAA,CAAA;AACTC,EAAAA,SAAW,EAAA,KAAA;AACXC,EAAAA,OAAS,EAAA,EAAA;AACTC,EAAAA,OAAS,EAAA,CAAA;AACTC,EAAAA,IAAM,EAAA,OAAA;AACNC,EAAAA,OAAS,EAAA,OAAA;AACTC,EAAAA,MAAQ,EAAA,GAAA;AACRC,EAAAA,iBAAmB,EAAA,IAAA;AACrB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsSwitch, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst Switch = ({ value: isOn, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {\n const isControlled = isOn !== undefined;\n const [value, setValue] = useState(defaultValue);\n\n const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n useEffect(() => {\n onChange?.(!!value);\n Animated.timing(animatedValue, {\n toValue: value ? 18 : 2,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [value]);\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Switch/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsSwitch, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst Switch = ({ value: isOn, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsSwitch) => {\n const isControlled = isOn !== undefined;\n const [value, setValue] = useState(defaultValue);\n\n const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n useEffect(() => {\n onChange?.(!!value);\n Animated.timing(animatedValue, {\n toValue: value ? 18 : 2,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [value]);\n useEffect(() => {\n isControlled && setValue(isOn);\n }, [isOn]);\n\n const toggleSwitch = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => toggleSwitch(e)}>\n <View style={[styles.switchContainer, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\nSwitch.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n switchContainer: {\n width: 40,\n height: 24,\n borderRadius: 15,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n thumb: {\n width: 20,\n height: 20,\n borderRadius: 10,\n backgroundColor: alwaysColor.White,\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"absolute\",\n left: 0,\n },\n});\n\nexport default Switch;\n"],"names":["Switch","_ref","isOn","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","toggleSwitch","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","switchContainer","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","alwaysColor","White","position","left"],"mappings":"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"}
|
|
@@ -3,10 +3,9 @@
|
|
|
3
3
|
var redsTokenNext = require('@xhs/reds-token-next');
|
|
4
4
|
|
|
5
5
|
var defaultProps = {
|
|
6
|
+
value: void 0,
|
|
6
7
|
defaultValue: false,
|
|
7
8
|
disabled: false,
|
|
8
|
-
onClick: function onClick(event) {},
|
|
9
|
-
onChange: function onChange(value) {},
|
|
10
9
|
trackOnColor: redsTokenNext.lightColor.Primary,
|
|
11
10
|
trackOffColor: redsTokenNext.lightColor.Fill2
|
|
12
11
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Switch/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Switch/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\nexport interface RedsSwitch {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n trackOnColor?: string;\n trackOffColor?: string;\n onChange?: (value: boolean) => void;\n onClick?: (value: GestureResponderEvent) => void;\n}\n\nexport const defaultProps: RedsSwitch = {\n value: undefined,\n defaultValue: false,\n disabled: false,\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n\nexport interface RedsSwitchEvent {}\n"],"names":["defaultProps","value","defaultValue","disabled","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;;;AAYO,IAAMA,YAA2B,GAAA;EACtCC,KAAO,EAAA,KAAA,CAAA;AACPC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;EACVC,cAAcC,wBAAW,CAAAC,OAAA;EACzBC,eAAeF,wBAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
|
@@ -3,8 +3,6 @@ import { lightColor } from '@xhs/reds-token-next';
|
|
|
3
3
|
var defaultProps = {
|
|
4
4
|
defaultValue: false,
|
|
5
5
|
disabled: false,
|
|
6
|
-
onClick: function onClick(event) {},
|
|
7
|
-
onChange: function onChange(value) {},
|
|
8
6
|
trackOnColor: lightColor.Primary,
|
|
9
7
|
trackOffColor: lightColor.Fill2
|
|
10
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/components/Button/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Button/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\nexport interface RedsButton {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n trackOnColor?: string;\n trackOffColor?: string;\n onChange?: (value: boolean) => void;\n onClick?: (value: Event) => void;\n}\n\nexport const defaultProps: RedsButton = {\n defaultValue: false,\n disabled: false,\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;AAYO,IAAMA,YAA2B,GAAA;AACtCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;EACVC,cAAcC,UAAW,CAAAC,OAAA;EACzBC,eAAeF,UAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
|
+
import { lightColor, darkColor } from '@xhs/reds-token-next';
|
|
2
3
|
import { configCache } from '../ConfigCache/ConfigCache.js';
|
|
3
4
|
import { ConfigProviderContext } from '../ConfigContext/ConfigContext.js';
|
|
4
5
|
import '../../../../_chunks/BHmvJnIm.js';
|
|
5
|
-
import '@xhs/reds-token-next';
|
|
6
6
|
|
|
7
|
+
var staticColor = {
|
|
8
|
+
lightColor: lightColor,
|
|
9
|
+
darkColor: darkColor
|
|
10
|
+
};
|
|
7
11
|
var useThemeColor = function useThemeColor(component) {
|
|
12
|
+
var staticColorType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "lightColor";
|
|
8
13
|
var id = useContext(ConfigProviderContext).id;
|
|
9
14
|
var themeColor = new Proxy({}, {
|
|
10
15
|
get: function get(_, key) {
|
|
16
|
+
if (!id) {
|
|
17
|
+
return staticColor[staticColorType][key];
|
|
18
|
+
}
|
|
11
19
|
if (configCache.getColorModeById(id) === "dark") {
|
|
12
20
|
return component ? configCache.getDarkTokenByIdAndComponent(id, component) : configCache.getDarkTokenById(id, key);
|
|
13
21
|
} else {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useThemeToken.js","sources":["../../../../../../src/components/ConfigProvider/hooks/themeToken/useThemeToken.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { configCache } from \"../ConfigCache\";\nimport { ConfigProviderContext } from \"../ConfigContext/ConfigContext\";\nimport { ThemeColor, ColorMode, LightToken, DarkToken, Component } from \"../ConfigCache/interface\";\n\nexport interface IThemeInstance {\n colorMode: ColorMode;\n}\nexport interface MyProxyConstructor {\n new <T, H extends Record<string, unknown>>(target: T, handler: ProxyHandler<H>): H;\n}\n\nexport const useThemeColor = (component?: Component) => {\n const id = useContext(ConfigProviderContext).id;\n const themeColor: ThemeColor = new (Proxy as MyProxyConstructor)(\n {},\n {\n get(this: IThemeInstance, _, key: LightToken | DarkToken) {\n if (configCache.getColorModeById(id) === \"dark\") {\n return component\n ? configCache.getDarkTokenByIdAndComponent(id, component)\n : configCache.getDarkTokenById(id, key);\n } else {\n return component\n ? configCache.getLightTokenByIdAndComponent(id, component)\n : configCache.getLightTokenById(id, key);\n }\n },\n },\n );\n\n return themeColor;\n};\n"],"names":["useThemeColor","component","id","useContext","ConfigProviderContext","themeColor","Proxy","get","_","key","configCache","getColorModeById","getDarkTokenByIdAndComponent","getDarkTokenById","getLightTokenByIdAndComponent","getLightTokenById"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"useThemeToken.js","sources":["../../../../../../src/components/ConfigProvider/hooks/themeToken/useThemeToken.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { lightColor, darkColor } from \"@xhs/reds-token-next\";\nimport { configCache } from \"../ConfigCache\";\nimport { ConfigProviderContext } from \"../ConfigContext/ConfigContext\";\nimport { ThemeColor, ColorMode, LightToken, DarkToken, Component } from \"../ConfigCache/interface\";\n\nconst staticColor = {\n lightColor,\n darkColor,\n};\n\nexport interface IThemeInstance {\n colorMode: ColorMode;\n}\nexport interface MyProxyConstructor {\n new <T, H extends Record<string, unknown>>(target: T, handler: ProxyHandler<H>): H;\n}\n\nexport const useThemeColor = (component?: Component, staticColorType: \"lightColor\" | \"darkColor\" = \"lightColor\") => {\n const id = useContext(ConfigProviderContext).id;\n const themeColor: ThemeColor = new (Proxy as MyProxyConstructor)(\n {},\n {\n get(this: IThemeInstance, _, key: LightToken | DarkToken) {\n if (!id) {\n return staticColor[staticColorType][key];\n }\n if (configCache.getColorModeById(id) === \"dark\") {\n return component\n ? configCache.getDarkTokenByIdAndComponent(id, component)\n : configCache.getDarkTokenById(id, key);\n } else {\n return component\n ? configCache.getLightTokenByIdAndComponent(id, component)\n : configCache.getLightTokenById(id, key);\n }\n },\n },\n );\n\n return themeColor;\n};\n"],"names":["staticColor","lightColor","darkColor","useThemeColor","component","staticColorType","arguments","length","undefined","id","useContext","ConfigProviderContext","themeColor","Proxy","get","_","key","configCache","getColorModeById","getDarkTokenByIdAndComponent","getDarkTokenById","getLightTokenByIdAndComponent","getLightTokenById"],"mappings":";;;;;;AAMA,IAAMA,WAAc,GAAA;AAClBC,EAAAA,UAAA,EAAAA,UAAA;AACAC,EAAAA,SAAA,EAAAA,SAAAA;AACF,CAAA,CAAA;IASaC,aAAgB,GAAA,SAAhBA,aAAgBA,CAACC,SAAuB,EAA+D;AAAA,EAAA,IAA/DC,eAAA,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAA8C,YAAiB,CAAA;AAC5G,EAAA,IAAAG,EAAA,GAAKC,UAAW,CAAAC,qBAAqB,CAAE,CAAAF,EAAA,CAAA;AAC7C,EAAA,IAAMG,aAAyB,IAAKC,KAAA,CAClC,EAAC,EACD;AACEC,IAAAA,GAAA,EAAAA,SAAAA,GAAAA,CAA0BC,GAAGC,GAA6B,EAAA;MACxD,IAAI,CAACP,EAAI,EAAA;AACA,QAAA,OAAAT,WAAA,CAAYK,eAAe,CAAA,CAAEW,GAAG,CAAA,CAAA;AACzC,OAAA;MACA,IAAIC,WAAY,CAAAC,gBAAA,CAAiBT,EAAE,CAAA,KAAM,MAAQ,EAAA;AACxC,QAAA,OAAAL,SAAA,GACHa,YAAYE,4BAA6B,CAAAV,EAAA,EAAIL,SAAS,CACtD,GAAAa,WAAA,CAAYG,gBAAiB,CAAAX,EAAA,EAAIO,GAAG,CAAA,CAAA;AAC1C,OAAO,MAAA;AACE,QAAA,OAAAZ,SAAA,GACHa,YAAYI,6BAA8B,CAAAZ,EAAA,EAAIL,SAAS,CACvD,GAAAa,WAAA,CAAYK,iBAAkB,CAAAb,EAAA,EAAIO,GAAG,CAAA,CAAA;AAC3C,OAAA;AACF,KAAA;AACF,GACF,CAAA,CAAA;AAEO,EAAA,OAAAJ,UAAA,CAAA;AACT;;;;"}
|
|
@@ -1,2 +1,19 @@
|
|
|
1
|
+
var defaultProps = {
|
|
2
|
+
id: "root",
|
|
3
|
+
parentId: "root",
|
|
4
|
+
theme: {
|
|
5
|
+
colorMode: "light",
|
|
6
|
+
inherit: true,
|
|
7
|
+
token: {
|
|
8
|
+
lightColor: {},
|
|
9
|
+
darkColor: {},
|
|
10
|
+
alwaysColor: {}
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
colorMode: "light",
|
|
14
|
+
inherit: true,
|
|
15
|
+
token: {}
|
|
16
|
+
};
|
|
1
17
|
|
|
18
|
+
export { defaultProps };
|
|
2
19
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/ConfigProvider/interface/index.ts"],"sourcesContent":["type ColorMode = \"light\" | \"dark\";\ntype Component = \"Button\" | \"Popover\";\n\ntype ComponentsToken = {\n [K in Component]?: {\n lightColor?: Record<string, string>;\n darkColor?: Record<string, string>;\n alwaysColor?: Record<string, string>;\n };\n};\n\ninterface IThemeConfig {\n token?: {\n lightColor?: Record<string, string>;\n darkColor?: Record<string, string>;\n alwaysColor?: Record<string, string>;\n components?: ComponentsToken;\n };\n inherit?: boolean;\n colorMode?: ColorMode;\n}\n\nexport interface ConfigProviderProps {\n id?: string;\n children: React.ReactNode;\n theme?: IThemeConfig;\n parentId?: string;\n}\nexport interface RedsConfigProvider {\n id?: string;\n parentId?: string;\n theme?: IThemeConfig;\n colorMode?: string;\n inherit?: boolean;\n token: Object;\n}\n\nexport interface RedsConfigProviderEvent {}\nexport const defaultProps: RedsConfigProvider = {\n id: \"root\",\n parentId: \"root\",\n theme: {\n colorMode: \"light\",\n inherit: true,\n token: {\n lightColor: {},\n darkColor: {},\n alwaysColor: {},\n },\n },\n colorMode: \"light\",\n inherit: true,\n token: {},\n};\n"],"names":["defaultProps","id","parentId","theme","colorMode","inherit","token","lightColor","darkColor","alwaysColor"],"mappings":"AAsCO,IAAMA,YAAmC,GAAA;AAC9CC,EAAAA,EAAI,EAAA,MAAA;AACJC,EAAAA,QAAU,EAAA,MAAA;AACVC,EAAAA,KAAO,EAAA;AACLC,IAAAA,SAAW,EAAA,OAAA;AACXC,IAAAA,OAAS,EAAA,IAAA;AACTC,IAAAA,KAAO,EAAA;MACLC,YAAY,EAAC;MACbC,WAAW,EAAC;AACZC,MAAAA,aAAa,EAAC;AAChB,KAAA;GACF;AACAL,EAAAA,SAAW,EAAA,OAAA;AACXC,EAAAA,OAAS,EAAA,IAAA;AACTC,EAAAA,OAAO,EAAC;AACV;;;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { a as _slicedToArray } from '../../_chunks/BHmvJnIm.js';
|
|
2
|
+
import React, { useState, useRef, useMemo, useEffect } from 'react';
|
|
3
|
+
import { StyleSheet, Animated, TouchableWithoutFeedback, View } from 'react-native';
|
|
4
|
+
import { defaultProps } from './interface/index.js';
|
|
5
|
+
import { alwaysColor } from '@xhs/reds-token-next';
|
|
6
|
+
|
|
7
|
+
var NN = function NN(_ref) {
|
|
8
|
+
var cValue = _ref.value,
|
|
9
|
+
defaultValue = _ref.defaultValue,
|
|
10
|
+
onChange = _ref.onChange,
|
|
11
|
+
onClick = _ref.onClick,
|
|
12
|
+
trackOnColor = _ref.trackOnColor,
|
|
13
|
+
trackOffColor = _ref.trackOffColor;
|
|
14
|
+
var isControlled = cValue !== void 0;
|
|
15
|
+
var _useState = useState(defaultValue),
|
|
16
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
17
|
+
value = _useState2[0],
|
|
18
|
+
setValue = _useState2[1];
|
|
19
|
+
var animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;
|
|
20
|
+
var thumbTranslateX = useMemo(function () {
|
|
21
|
+
return animatedValue.interpolate({
|
|
22
|
+
inputRange: [2, 18],
|
|
23
|
+
outputRange: [2, 18]
|
|
24
|
+
});
|
|
25
|
+
}, []);
|
|
26
|
+
useEffect(function () {
|
|
27
|
+
isControlled && setValue(cValue);
|
|
28
|
+
onChange === null || onChange === void 0 || onChange(!!value);
|
|
29
|
+
Animated.timing(animatedValue, {
|
|
30
|
+
toValue: value ? 18 : 2,
|
|
31
|
+
duration: 200,
|
|
32
|
+
useNativeDriver: true
|
|
33
|
+
}).start();
|
|
34
|
+
}, [value, cValue]);
|
|
35
|
+
var toggleNN = function toggleNN(e) {
|
|
36
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
37
|
+
!isControlled && setValue(function (v) {
|
|
38
|
+
return !v;
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
return /* @__PURE__ */React.createElement(TouchableWithoutFeedback, {
|
|
42
|
+
onPress: function onPress(e) {
|
|
43
|
+
return toggleNN(e);
|
|
44
|
+
}
|
|
45
|
+
}, /* @__PURE__ */React.createElement(View, {
|
|
46
|
+
style: [styles.container, {
|
|
47
|
+
backgroundColor: value ? trackOnColor : trackOffColor
|
|
48
|
+
}]
|
|
49
|
+
}, /* @__PURE__ */React.createElement(Animated.View, {
|
|
50
|
+
style: [styles.thumb, {
|
|
51
|
+
transform: [{
|
|
52
|
+
translateX: thumbTranslateX
|
|
53
|
+
}]
|
|
54
|
+
}]
|
|
55
|
+
})));
|
|
56
|
+
};
|
|
57
|
+
NN.defaultProps = defaultProps;
|
|
58
|
+
var styles = StyleSheet.create({
|
|
59
|
+
container: {
|
|
60
|
+
width: 40,
|
|
61
|
+
height: 24,
|
|
62
|
+
borderRadius: 15,
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
alignItems: "center"
|
|
65
|
+
},
|
|
66
|
+
thumb: {
|
|
67
|
+
width: 20,
|
|
68
|
+
height: 20,
|
|
69
|
+
borderRadius: 10,
|
|
70
|
+
backgroundColor: alwaysColor.White,
|
|
71
|
+
justifyContent: "center",
|
|
72
|
+
alignItems: "center",
|
|
73
|
+
position: "absolute",
|
|
74
|
+
left: 0
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
export { NN as default };
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/NN/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsNN, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst NN = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsNN) => {\n const isControlled = cValue !== undefined;\n const [value, setValue] = useState(defaultValue);\n\n const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n useEffect(() => {\n isControlled && setValue(cValue);\n onChange?.(!!value);\n Animated.timing(animatedValue, {\n toValue: value ? 18 : 2,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [value, cValue]);\n\n const toggleNN = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => toggleNN(e)}>\n <View style={[styles.container, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\nNN.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n container: {\n width: 40,\n height: 24,\n borderRadius: 15,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n thumb: {\n width: 20,\n height: 20,\n borderRadius: 10,\n backgroundColor: alwaysColor.White,\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"absolute\",\n left: 0,\n },\n});\n\nexport default NN;\n"],"names":["NN","_ref","cValue","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","toggleNN","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","container","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","alwaysColor","White","position","left"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { lightColor } from '@xhs/reds-token-next';
|
|
2
|
+
|
|
3
|
+
var defaultProps = {
|
|
4
|
+
defaultValue: false,
|
|
5
|
+
disabled: false,
|
|
6
|
+
trackOnColor: lightColor.Primary,
|
|
7
|
+
trackOffColor: lightColor.Fill2
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { defaultProps };
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/NN/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\nexport interface RedsNN {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n trackOnColor?: string;\n trackOffColor?: string;\n onChange?: (value: boolean) => void;\n onClick?: (value: Event) => void;\n}\n\nexport const defaultProps: RedsNN = {\n defaultValue: false,\n disabled: false,\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;AAYO,IAAMA,YAAuB,GAAA;AAClCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;EACVC,cAAcC,UAAW,CAAAC,OAAA;EACzBC,eAAeF,UAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { a as _slicedToArray } from '../../_chunks/BHmvJnIm.js';
|
|
2
|
+
import React, { useState, useRef, useMemo, useEffect } from 'react';
|
|
3
|
+
import { StyleSheet, Animated, TouchableWithoutFeedback, View } from 'react-native';
|
|
4
|
+
import { defaultProps } from './interface/index.js';
|
|
5
|
+
import { alwaysColor } from '@xhs/reds-token-next';
|
|
6
|
+
|
|
7
|
+
var NNNN = function NNNN(_ref) {
|
|
8
|
+
var cValue = _ref.value,
|
|
9
|
+
defaultValue = _ref.defaultValue,
|
|
10
|
+
onChange = _ref.onChange,
|
|
11
|
+
onClick = _ref.onClick,
|
|
12
|
+
trackOnColor = _ref.trackOnColor,
|
|
13
|
+
trackOffColor = _ref.trackOffColor;
|
|
14
|
+
var isControlled = cValue !== void 0;
|
|
15
|
+
var _useState = useState(defaultValue),
|
|
16
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
17
|
+
value = _useState2[0],
|
|
18
|
+
setValue = _useState2[1];
|
|
19
|
+
var animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;
|
|
20
|
+
var thumbTranslateX = useMemo(function () {
|
|
21
|
+
return animatedValue.interpolate({
|
|
22
|
+
inputRange: [2, 18],
|
|
23
|
+
outputRange: [2, 18]
|
|
24
|
+
});
|
|
25
|
+
}, []);
|
|
26
|
+
useEffect(function () {
|
|
27
|
+
isControlled && setValue(cValue);
|
|
28
|
+
onChange === null || onChange === void 0 || onChange(!!value);
|
|
29
|
+
Animated.timing(animatedValue, {
|
|
30
|
+
toValue: value ? 18 : 2,
|
|
31
|
+
duration: 200,
|
|
32
|
+
useNativeDriver: true
|
|
33
|
+
}).start();
|
|
34
|
+
}, [value, cValue]);
|
|
35
|
+
var toggleNNNN = function toggleNNNN(e) {
|
|
36
|
+
onClick === null || onClick === void 0 || onClick(e);
|
|
37
|
+
!isControlled && setValue(function (v) {
|
|
38
|
+
return !v;
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
return /* @__PURE__ */React.createElement(TouchableWithoutFeedback, {
|
|
42
|
+
onPress: function onPress(e) {
|
|
43
|
+
return toggleNNNN(e);
|
|
44
|
+
}
|
|
45
|
+
}, /* @__PURE__ */React.createElement(View, {
|
|
46
|
+
style: [styles.container, {
|
|
47
|
+
backgroundColor: value ? trackOnColor : trackOffColor
|
|
48
|
+
}]
|
|
49
|
+
}, /* @__PURE__ */React.createElement(Animated.View, {
|
|
50
|
+
style: [styles.thumb, {
|
|
51
|
+
transform: [{
|
|
52
|
+
translateX: thumbTranslateX
|
|
53
|
+
}]
|
|
54
|
+
}]
|
|
55
|
+
})));
|
|
56
|
+
};
|
|
57
|
+
NNNN.defaultProps = defaultProps;
|
|
58
|
+
var styles = StyleSheet.create({
|
|
59
|
+
container: {
|
|
60
|
+
width: 40,
|
|
61
|
+
height: 24,
|
|
62
|
+
borderRadius: 15,
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
alignItems: "center"
|
|
65
|
+
},
|
|
66
|
+
thumb: {
|
|
67
|
+
width: 20,
|
|
68
|
+
height: 20,
|
|
69
|
+
borderRadius: 10,
|
|
70
|
+
backgroundColor: alwaysColor.White,
|
|
71
|
+
justifyContent: "center",
|
|
72
|
+
alignItems: "center",
|
|
73
|
+
position: "absolute",
|
|
74
|
+
left: 0
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
export { NNNN as default };
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/NNNN/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsNNNN, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst NNNN = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsNNNN) => {\n const isControlled = cValue !== undefined;\n const [value, setValue] = useState(defaultValue);\n\n const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;\n\n const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);\n\n useEffect(() => {\n isControlled && setValue(cValue);\n onChange?.(!!value);\n Animated.timing(animatedValue, {\n toValue: value ? 18 : 2,\n duration: 200,\n useNativeDriver: true,\n }).start();\n }, [value, cValue]);\n\n const toggleNNNN = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => toggleNNNN(e)}>\n <View style={[styles.container, { backgroundColor: value ? trackOnColor : trackOffColor }]}>\n <Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>\n </View>\n </TouchableWithoutFeedback>\n );\n};\n\nNNNN.defaultProps = defaultProps;\n\nconst styles = StyleSheet.create({\n container: {\n width: 40,\n height: 24,\n borderRadius: 15,\n justifyContent: \"center\",\n alignItems: \"center\",\n },\n thumb: {\n width: 20,\n height: 20,\n borderRadius: 10,\n backgroundColor: alwaysColor.White,\n justifyContent: \"center\",\n alignItems: \"center\",\n position: \"absolute\",\n left: 0,\n },\n});\n\nexport default NNNN;\n"],"names":["NNNN","_ref","cValue","value","defaultValue","onChange","onClick","trackOnColor","trackOffColor","isControlled","_useState","useState","_useState2","_slicedToArray","setValue","animatedValue","useRef","Animated","Value","current","thumbTranslateX","useMemo","interpolate","inputRange","outputRange","useEffect","timing","toValue","duration","useNativeDriver","start","toggleNNNN","e","v","TouchableWithoutFeedback","onPress","React","createElement","View","style","styles","container","backgroundColor","thumb","transform","translateX","defaultProps","StyleSheet","create","width","height","borderRadius","justifyContent","alignItems","alwaysColor","White","position","left"],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { lightColor } from '@xhs/reds-token-next';
|
|
2
|
+
|
|
3
|
+
var defaultProps = {
|
|
4
|
+
defaultValue: false,
|
|
5
|
+
disabled: false,
|
|
6
|
+
trackOnColor: lightColor.Primary,
|
|
7
|
+
trackOffColor: lightColor.Fill2
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { defaultProps };
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/NNNN/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\nexport interface RedsNNNN {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n trackOnColor?: string;\n trackOffColor?: string;\n onChange?: (value: boolean) => void;\n onClick?: (value: Event) => void;\n}\n\nexport const defaultProps: RedsNNNN = {\n defaultValue: false,\n disabled: false,\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;AAYO,IAAMA,YAAyB,GAAA;AACpCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;EACVC,cAAcC,UAAW,CAAAC,OAAA;EACzBC,eAAeF,UAAW,CAAAG,KAAAA;AAC5B;;;;"}
|