@xhsreds/reds-rn-next 0.0.2 → 0.0.3
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 +3 -1
- package/lib/cjs/components/Bu/index.js +83 -0
- package/lib/cjs/components/Bu/index.js.map +1 -0
- package/lib/cjs/components/Bu/interface/index.js +15 -0
- package/lib/cjs/components/Bu/interface/index.js.map +1 -0
- package/lib/cjs/index.js +4 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/esm/_chunks/{BHmvJnIm.js → Djn5ftvm.js} +2 -2
- package/lib/esm/_chunks/{BHmvJnIm.js.map → Djn5ftvm.js.map} +1 -1
- package/lib/esm/_chunks/{Br6Ked0G.js → npmn1D5V.js} +2 -2
- package/lib/esm/_chunks/{Br6Ked0G.js.map → npmn1D5V.js.map} +1 -1
- package/lib/esm/components/Bu/index.js +79 -0
- package/lib/esm/components/Bu/index.js.map +1 -0
- package/lib/esm/components/Bu/interface/index.js +13 -0
- package/lib/esm/components/Bu/interface/index.js.map +1 -0
- package/lib/esm/components/Button/index.js +1 -1
- package/lib/esm/components/ConfigProvider/ConfigProvider.js +2 -2
- package/lib/esm/components/ConfigProvider/hooks/ConfigCache/ConfigCache.js +1 -1
- package/lib/esm/components/ConfigProvider/hooks/ConfigCache/index.js +1 -1
- package/lib/esm/components/ConfigProvider/hooks/themeToken/useThemeToken.js +1 -1
- package/lib/esm/components/ConfigProvider/index.js +2 -2
- package/lib/esm/components/Popover/component.js +1 -1
- package/lib/esm/components/Popover/hook.js +1 -1
- package/lib/esm/components/Popover/index.js +1 -1
- package/lib/esm/components/Switch/index.js +1 -1
- package/lib/esm/index.js +5 -3
- package/lib/esm/index.js.map +1 -1
- package/lib/types/src/components/Bu/index.d.ts +7 -0
- package/lib/types/src/components/Bu/interface/index.d.ts +11 -0
- package/lib/types/src/index.d.ts +2 -1
- package/package.json +1 -1
- package/src/components/Bu/demo/index.tsx +50 -0
- package/src/components/Bu/doc/index.mdx +26 -0
- package/src/components/Bu/index.tsx +60 -0
- package/src/components/Bu/interface/index.ts +21 -0
- package/src/components/Bu/test/index.bench.tsx +12 -0
- package/src/components/Bu/test/index.test.tsx +18 -0
- package/src/index.ts +2 -1
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
{"/builds/fe/infra/reds/packages/reds-rn/src/components/
|
|
1
|
+
{"/builds/fe/infra/reds/packages/reds-rn/src/components/Bu/index.tsx": {"path":"/builds/fe/infra/reds/packages/reds-rn/src/components/Bu/index.tsx","statementMap":{"0":{"start":{"line":6,"column":11},"end":{"line":36,"column":null}},"1":{"start":{"line":7,"column":23},"end":{"line":7,"column":null}},"2":{"start":{"line":8,"column":28},"end":{"line":8,"column":null}},"3":{"start":{"line":10,"column":24},"end":{"line":10,"column":null}},"4":{"start":{"line":12,"column":26},"end":{"line":12,"column":null}},"5":{"start":{"line":12,"column":40},"end":{"line":12,"column":114}},"6":{"start":{"line":14,"column":2},"end":{"line":22,"column":null}},"7":{"start":{"line":15,"column":4},"end":{"line":15,"column":null}},"8":{"start":{"line":16,"column":4},"end":{"line":16,"column":null}},"9":{"start":{"line":17,"column":4},"end":{"line":21,"column":null}},"10":{"start":{"line":24,"column":19},"end":{"line":27,"column":null}},"11":{"start":{"line":25,"column":4},"end":{"line":25,"column":null}},"12":{"start":{"line":26,"column":4},"end":{"line":26,"column":null}},"13":{"start":{"line":26,"column":37},"end":{"line":26,"column":39}},"14":{"start":{"line":29,"column":2},"end":{"line":34,"column":null}},"15":{"start":{"line":30,"column":46},"end":{"line":30,"column":null}},"16":{"start":{"line":38,"column":0},"end":{"line":38,"column":null}},"17":{"start":{"line":40,"column":15},"end":{"line":58,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":6,"column":11},"end":{"line":6,"column":12}},"loc":{"start":{"line":6,"column":104},"end":{"line":36,"column":null}}},"1":{"name":"(anonymous_1)","decl":{"start":{"line":12,"column":34},"end":{"line":12,"column":40}},"loc":{"start":{"line":12,"column":40},"end":{"line":12,"column":114}}},"2":{"name":"(anonymous_2)","decl":{"start":{"line":14,"column":12},"end":{"line":14,"column":18}},"loc":{"start":{"line":14,"column":18},"end":{"line":22,"column":5}}},"3":{"name":"(anonymous_3)","decl":{"start":{"line":24,"column":19},"end":{"line":24,"column":20}},"loc":{"start":{"line":24,"column":49},"end":{"line":27,"column":null}}},"4":{"name":"(anonymous_4)","decl":{"start":{"line":26,"column":30},"end":{"line":26,"column":31}},"loc":{"start":{"line":26,"column":37},"end":{"line":26,"column":39}}},"5":{"name":"(anonymous_5)","decl":{"start":{"line":30,"column":39},"end":{"line":30,"column":40}},"loc":{"start":{"line":30,"column":46},"end":{"line":30,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":10,"column":50},"end":{"line":10,"column":71}},"type":"cond-expr","locations":[{"start":{"line":10,"column":65},"end":{"line":10,"column":70}},{"start":{"line":10,"column":70},"end":{"line":10,"column":71}}]},"1":{"loc":{"start":{"line":15,"column":4},"end":{"line":15,"column":null}},"type":"binary-expr","locations":[{"start":{"line":15,"column":4},"end":{"line":15,"column":20}},{"start":{"line":15,"column":20},"end":{"line":15,"column":null}}]},"2":{"loc":{"start":{"line":18,"column":15},"end":{"line":18,"column":null}},"type":"cond-expr","locations":[{"start":{"line":18,"column":23},"end":{"line":18,"column":28}},{"start":{"line":18,"column":28},"end":{"line":18,"column":null}}]},"3":{"loc":{"start":{"line":26,"column":4},"end":{"line":26,"column":null}},"type":"binary-expr","locations":[{"start":{"line":26,"column":4},"end":{"line":26,"column":21}},{"start":{"line":26,"column":21},"end":{"line":26,"column":null}}]},"4":{"loc":{"start":{"line":31,"column":57},"end":{"line":31,"column":94}},"type":"cond-expr","locations":[{"start":{"line":31,"column":65},"end":{"line":31,"column":80}},{"start":{"line":31,"column":80},"end":{"line":31,"column":94}}]}},"s":{"0":1,"1":3,"2":3,"3":3,"4":3,"5":1,"6":3,"7":3,"8":3,"9":3,"10":3,"11":2,"12":2,"13":2,"14":3,"15":2,"16":1,"17":1},"f":{"0":3,"1":1,"2":3,"3":2,"4":2,"5":2},"b":{"0":[0,3],"1":[3,0],"2":[1,2],"3":[2,2],"4":[1,2]}}
|
|
2
|
+
,"/builds/fe/infra/reds/packages/reds-rn/src/components/Bu/interface/index.ts": {"path":"/builds/fe/infra/reds/packages/reds-rn/src/components/Bu/interface/index.ts","statementMap":{"0":{"start":{"line":14,"column":36},"end":{"line":21,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":17,"column":11},"end":{"line":17,"column":12}},"loc":{"start":{"line":17,"column":45},"end":{"line":17,"column":null}}},"1":{"name":"(anonymous_1)","decl":{"start":{"line":18,"column":12},"end":{"line":18,"column":13}},"loc":{"start":{"line":18,"column":32},"end":{"line":18,"column":null}}}},"branchMap":{},"s":{"0":1},"f":{"0":2,"1":0},"b":{}}
|
|
3
|
+
,"/builds/fe/infra/reds/packages/reds-rn/src/components/Button/index.tsx": {"path":"/builds/fe/infra/reds/packages/reds-rn/src/components/Button/index.tsx","statementMap":{"0":{"start":{"line":5,"column":2},"end":{"line":21,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":4,"column":32},"end":{"line":4,"column":33}},"loc":{"start":{"line":4,"column":53},"end":{"line":23,"column":1}}}},"branchMap":{},"s":{"0":0},"f":{"0":0},"b":{}}
|
|
2
4
|
,"/builds/fe/infra/reds/packages/reds-rn/src/components/Button/interface/index.ts": {"path":"/builds/fe/infra/reds/packages/reds-rn/src/components/Button/interface/index.ts","statementMap":{"0":{"start":{"line":14,"column":40},"end":{"line":21,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":17,"column":11},"end":{"line":17,"column":12}},"loc":{"start":{"line":17,"column":45},"end":{"line":17,"column":null}}},"1":{"name":"(anonymous_1)","decl":{"start":{"line":18,"column":12},"end":{"line":18,"column":13}},"loc":{"start":{"line":18,"column":32},"end":{"line":18,"column":null}}}},"branchMap":{},"s":{"0":0},"f":{"0":0,"1":0},"b":{}}
|
|
3
5
|
,"/builds/fe/infra/reds/packages/reds-rn/src/components/ConfigProvider/ConfigProvider.tsx": {"path":"/builds/fe/infra/reds/packages/reds-rn/src/components/ConfigProvider/ConfigProvider.tsx","statementMap":{"0":{"start":{"line":5,"column":23},"end":{"line":46,"column":null}},"1":{"start":{"line":14,"column":6},"end":{"line":14,"column":null}},"2":{"start":{"line":16,"column":21},"end":{"line":33,"column":null}},"3":{"start":{"line":35,"column":2},"end":{"line":39,"column":null}},"4":{"start":{"line":41,"column":61},"end":{"line":43,"column":null}},"5":{"start":{"line":45,"column":2},"end":{"line":45,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":5,"column":23},"end":{"line":5,"column":24}},"loc":{"start":{"line":5,"column":55},"end":{"line":46,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":7,"column":4},"end":{"line":7,"column":null}},"type":"default-arg","locations":[{"start":{"line":7,"column":9},"end":{"line":7,"column":null}}]},"1":{"loc":{"start":{"line":8,"column":4},"end":{"line":11,"column":null}},"type":"default-arg","locations":[{"start":{"line":8,"column":12},"end":{"line":11,"column":null}}]},"2":{"loc":{"start":{"line":12,"column":4},"end":{"line":12,"column":null}},"type":"default-arg","locations":[{"start":{"line":12,"column":15},"end":{"line":12,"column":null}}]},"3":{"loc":{"start":{"line":17,"column":15},"end":{"line":17,"column":null}},"type":"binary-expr","locations":[{"start":{"line":17,"column":15},"end":{"line":17,"column":34}},{"start":{"line":17,"column":34},"end":{"line":17,"column":null}}]}},"s":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0},"f":{"0":0},"b":{"0":[0],"1":[0],"2":[0],"3":[0,0]}}
|
|
4
6
|
,"/builds/fe/infra/reds/packages/reds-rn/src/components/ConfigProvider/hooks/ConfigCache/ConfigCache.ts": {"path":"/builds/fe/infra/reds/packages/reds-rn/src/components/ConfigProvider/hooks/ConfigCache/ConfigCache.ts","statementMap":{"0":{"start":{"line":5,"column":53},"end":{"line":5,"column":null}},"1":{"start":{"line":6,"column":43},"end":{"line":6,"column":null}},"2":{"start":{"line":9,"column":27},"end":{"line":22,"column":null}},"3":{"start":{"line":23,"column":4},"end":{"line":23,"column":null}},"4":{"start":{"line":27,"column":4},"end":{"line":55,"column":null}},"5":{"start":{"line":28,"column":6},"end":{"line":28,"column":null}},"6":{"start":{"line":29,"column":6},"end":{"line":49,"column":null}},"7":{"start":{"line":51,"column":6},"end":{"line":51,"column":null}},"8":{"start":{"line":52,"column":6},"end":{"line":54,"column":null}},"9":{"start":{"line":53,"column":8},"end":{"line":53,"column":null}},"10":{"start":{"line":59,"column":4},"end":{"line":59,"column":null}},"11":{"start":{"line":63,"column":4},"end":{"line":63,"column":null}},"12":{"start":{"line":67,"column":4},"end":{"line":71,"column":null}},"13":{"start":{"line":68,"column":6},"end":{"line":68,"column":null}},"14":{"start":{"line":70,"column":6},"end":{"line":70,"column":null}},"15":{"start":{"line":75,"column":4},"end":{"line":75,"column":null}},"16":{"start":{"line":79,"column":4},"end":{"line":79,"column":null}},"17":{"start":{"line":83,"column":4},"end":{"line":83,"column":null}},"18":{"start":{"line":91,"column":4},"end":{"line":99,"column":null}},"19":{"start":{"line":92,"column":29},"end":{"line":95,"column":null}},"20":{"start":{"line":96,"column":6},"end":{"line":96,"column":null}},"21":{"start":{"line":98,"column":6},"end":{"line":98,"column":null}},"22":{"start":{"line":103,"column":4},"end":{"line":103,"column":null}},"23":{"start":{"line":107,"column":4},"end":{"line":107,"column":null}},"24":{"start":{"line":111,"column":4},"end":{"line":111,"column":null}},"25":{"start":{"line":115,"column":27},"end":{"line":115,"column":null}}},"fnMap":{"0":{"name":"(anonymous_0)","decl":{"start":{"line":8,"column":2},"end":{"line":8,"column":14}},"loc":{"start":{"line":8,"column":48},"end":{"line":24,"column":null}}},"1":{"name":"(anonymous_1)","decl":{"start":{"line":26,"column":2},"end":{"line":26,"column":20}},"loc":{"start":{"line":26,"column":64},"end":{"line":56,"column":null}}},"2":{"name":"(anonymous_2)","decl":{"start":{"line":58,"column":2},"end":{"line":58,"column":18}},"loc":{"start":{"line":58,"column":82},"end":{"line":60,"column":null}}},"3":{"name":"(anonymous_3)","decl":{"start":{"line":62,"column":2},"end":{"line":62,"column":19}},"loc":{"start":{"line":62,"column":31},"end":{"line":64,"column":null}}},"4":{"name":"(anonymous_4)","decl":{"start":{"line":66,"column":2},"end":{"line":66,"column":15}},"loc":{"start":{"line":66,"column":116},"end":{"line":72,"column":null}}},"5":{"name":"(anonymous_5)","decl":{"start":{"line":74,"column":2},"end":{"line":74,"column":20}},"loc":{"start":{"line":74,"column":61},"end":{"line":76,"column":null}}},"6":{"name":"(anonymous_6)","decl":{"start":{"line":78,"column":2},"end":{"line":78,"column":19}},"loc":{"start":{"line":78,"column":60},"end":{"line":80,"column":null}}},"7":{"name":"(anonymous_7)","decl":{"start":{"line":82,"column":2},"end":{"line":82,"column":21}},"loc":{"start":{"line":82,"column":62},"end":{"line":84,"column":null}}},"8":{"name":"(anonymous_8)","decl":{"start":{"line":86,"column":2},"end":{"line":86,"column":null}},"loc":{"start":{"line":90,"column":9},"end":{"line":100,"column":null}}},"9":{"name":"(anonymous_9)","decl":{"start":{"line":102,"column":2},"end":{"line":102,"column":32}},"loc":{"start":{"line":102,"column":66},"end":{"line":104,"column":null}}},"10":{"name":"(anonymous_10)","decl":{"start":{"line":106,"column":2},"end":{"line":106,"column":31}},"loc":{"start":{"line":106,"column":65},"end":{"line":108,"column":null}}},"11":{"name":"(anonymous_11)","decl":{"start":{"line":110,"column":2},"end":{"line":110,"column":33}},"loc":{"start":{"line":110,"column":67},"end":{"line":112,"column":null}}}},"branchMap":{"0":{"loc":{"start":{"line":27,"column":4},"end":{"line":55,"column":null}},"type":"if","locations":[{"start":{"line":27,"column":4},"end":{"line":55,"column":null}},{"start":{"line":50,"column":11},"end":{"line":55,"column":null}}]},"1":{"loc":{"start":{"line":52,"column":6},"end":{"line":54,"column":null}},"type":"if","locations":[{"start":{"line":52,"column":6},"end":{"line":54,"column":null}},{"start":{"line":52,"column":6},"end":{"line":54,"column":null}}]},"2":{"loc":{"start":{"line":67,"column":4},"end":{"line":71,"column":null}},"type":"if","locations":[{"start":{"line":67,"column":4},"end":{"line":71,"column":null}},{"start":{"line":69,"column":11},"end":{"line":71,"column":null}}]},"3":{"loc":{"start":{"line":70,"column":31},"end":{"line":70,"column":73}},"type":"binary-expr","locations":[{"start":{"line":70,"column":31},"end":{"line":70,"column":65}},{"start":{"line":70,"column":65},"end":{"line":70,"column":73}}]},"4":{"loc":{"start":{"line":91,"column":4},"end":{"line":99,"column":null}},"type":"if","locations":[{"start":{"line":91,"column":4},"end":{"line":99,"column":null}},{"start":{"line":97,"column":11},"end":{"line":99,"column":null}}]},"5":{"loc":{"start":{"line":98,"column":43},"end":{"line":98,"column":85}},"type":"binary-expr","locations":[{"start":{"line":98,"column":43},"end":{"line":98,"column":77}},{"start":{"line":98,"column":77},"end":{"line":98,"column":85}}]}},"s":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0,"12":0,"13":0,"14":0,"15":0,"16":0,"17":0,"18":0,"19":0,"20":0,"21":0,"22":0,"23":0,"24":0,"25":0},"f":{"0":0,"1":0,"2":0,"3":0,"4":0,"5":0,"6":0,"7":0,"8":0,"9":0,"10":0,"11":0},"b":{"0":[0,0],"1":[0,0],"2":[0,0],"3":[0,0],"4":[0,0],"5":[0,0]}}
|
|
@@ -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_Bu_interface_index = require('./interface/index.js');
|
|
9
|
+
var redsTokenNext = require('@xhs/reds-token-next');
|
|
10
|
+
|
|
11
|
+
var Bu = function Bu(_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 toggleBu = function toggleBu(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 toggleBu(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
|
+
Bu.defaultProps = components_Bu_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 = Bu;
|
|
83
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Bu/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsBu, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst Bu = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsBu) => {\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 toggleBu = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => toggleBu(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\nBu.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 Bu;\n"],"names":["Bu","_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","toggleBu","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,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var redsTokenNext = require('@xhs/reds-token-next');
|
|
4
|
+
|
|
5
|
+
var defaultProps = {
|
|
6
|
+
defaultValue: false,
|
|
7
|
+
disabled: false,
|
|
8
|
+
onClick: function onClick(event) {},
|
|
9
|
+
onChange: function onChange(value) {},
|
|
10
|
+
trackOnColor: redsTokenNext.lightColor.Primary,
|
|
11
|
+
trackOffColor: redsTokenNext.lightColor.Fill2
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
exports.defaultProps = defaultProps;
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Bu/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\n\nexport interface RedsBu {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n onClick?: (event: GestureResponderEvent) => void;\n onChange?: (value: boolean) => void;\n trackOnColor?: string;\n trackOffColor?: string;\n}\n\nexport const defaultProps: RedsBu = {\n defaultValue: false,\n disabled: false,\n onClick: (event: GestureResponderEvent) => {},\n onChange: (value: boolean) => {},\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","onClick","event","onChange","value","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;;;AAaO,IAAMA,YAAuB,GAAA;AAClCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;AACVC,EAAAA,OAAA,EAAS,SAAAA,OAAAA,CAACC,KAAiC,EAAA,EAAC;AAC5CC,EAAAA,QAAA,EAAU,SAAAA,QAAAA,CAACC,KAAmB,EAAA,EAAC;EAC/BC,cAAcC,wBAAW,CAAAC,OAAA;EACzBC,eAAeF,wBAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var components_Bu_index = require('./components/Bu/index.js');
|
|
3
4
|
var components_Button_index = require('./components/Button/index.js');
|
|
4
5
|
var components_Popover_index = require('./components/Popover/index.js');
|
|
5
6
|
var components_Switch_index = require('./components/Switch/index.js');
|
|
@@ -8,16 +9,18 @@ var components_ConfigProvider_hooks_themeToken_useThemeToken = require('./compon
|
|
|
8
9
|
require('./_chunks/CAyGJuk1.js');
|
|
9
10
|
require('react');
|
|
10
11
|
require('react-native');
|
|
12
|
+
require('./components/Bu/interface/index.js');
|
|
13
|
+
require('@xhs/reds-token-next');
|
|
11
14
|
require('./components/Popover/component.js');
|
|
12
15
|
require('./components/Popover/hook.js');
|
|
13
16
|
require('@floating-ui/react-native');
|
|
14
|
-
require('@xhs/reds-token-next');
|
|
15
17
|
require('./components/Switch/interface/index.js');
|
|
16
18
|
require('./components/ConfigProvider/hooks/ConfigCache/ConfigCache.js');
|
|
17
19
|
require('./components/ConfigProvider/hooks/ConfigContext/ConfigContext.js');
|
|
18
20
|
|
|
19
21
|
|
|
20
22
|
|
|
23
|
+
exports.Bu = components_Bu_index.default;
|
|
21
24
|
exports.Button = components_Button_index.default;
|
|
22
25
|
exports.Popover = components_Popover_index.default;
|
|
23
26
|
exports.Switch = components_Switch_index.default;
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -130,5 +130,5 @@ function _unsupportedIterableToArray(r, a) {
|
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
132
|
|
|
133
|
-
export {
|
|
134
|
-
//# sourceMappingURL=
|
|
133
|
+
export { _slicedToArray as _, _objectSpread2 as a, _objectWithoutProperties as b, _createClass as c, _classCallCheck as d, _typeof as e };
|
|
134
|
+
//# sourceMappingURL=Djn5ftvm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"Djn5ftvm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a as _objectSpread2 } from './Djn5ftvm.js';
|
|
2
2
|
import { configCache } from '../components/ConfigProvider/hooks/ConfigCache/ConfigCache.js';
|
|
3
3
|
import { ConfigProviderContext } from '../components/ConfigProvider/hooks/ConfigContext/ConfigContext.js';
|
|
4
4
|
|
|
@@ -43,4 +43,4 @@ var ConfigProvider$1 = /*#__PURE__*/Object.freeze({
|
|
|
43
43
|
});
|
|
44
44
|
|
|
45
45
|
export { ConfigProvider$1 as C, ConfigProvider as a };
|
|
46
|
-
//# sourceMappingURL=
|
|
46
|
+
//# sourceMappingURL=npmn1D5V.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
1
|
+
{"version":3,"file":"npmn1D5V.js","sources":["../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import { ConfigProviderProps } from \"./interface\";\nimport { configCache } from \"./hooks/ConfigCache/ConfigCache\";\nimport { ConfigProviderContext, IConfigProviderContext } from \"./hooks/ConfigContext/ConfigContext\";\n\nconst ConfigProvider = (props: ConfigProviderProps) => {\n const {\n id = \"root\",\n theme = {\n colorMode: \"light\",\n inherit: true,\n },\n parentId = \"root\",\n children,\n } = props;\n\n const themeCache = {\n colorMode: theme.colorMode || \"light\",\n token: {\n lightColor: {\n ...theme.token?.lightColor,\n },\n darkColor: {\n ...theme.token?.darkColor,\n },\n alwaysColor: {\n ...theme.token?.alwaysColor,\n },\n components: {\n ...theme.token?.components,\n },\n },\n inherit: theme.inherit,\n };\n\n configCache.addNewConfigCache({\n id,\n themeCache,\n parentId,\n });\n\n const configProviderContextValue: IConfigProviderContext = {\n id: id,\n };\n\n return <ConfigProviderContext.Provider value={configProviderContextValue}>{children}</ConfigProviderContext.Provider>;\n};\n\nexport default ConfigProvider;\n"],"names":["ConfigProvider","props","_theme$token","_theme$token2","_theme$token3","_theme$token4","_props$id","id","_props$theme","theme","colorMode","inherit","_props$parentId","parentId","children","themeCache","token","lightColor","_objectSpread","darkColor","alwaysColor","components","configCache","addNewConfigCache","configProviderContextValue","ConfigProviderContext","Provider","value"],"mappings":";;;;AAIA,IAAMA,cAAA,GAAiB,SAAjBA,cAAAA,CAAkBC,KAA+B,EAAA;AAAA,EAAA,IAAAC,YAAA,EAAAC,aAAA,EAAAC,aAAA,EAAAC,aAAA,CAAA;AAC/C,EAAA,IAAAC,SAAA,GAQFL,KAAA,CAPFM,EAAK;AAALA,IAAAA,EAAK,GAAAD,SAAA,KAAA,KAAA,CAAA,GAAA,MAAA,GAAAA,SAAA;IAAAE,YAAA,GAOHP,KAAA,CANFQ,KAAQ;IAARA,KAAQ,GAAAD,YAAA,KAAA,KAAA,CAAA,GAAA;AACNE,MAAAA,SAAW,EAAA,OAAA;AACXC,MAAAA,OAAS,EAAA,IAAA;AACX,KAAA,GAAAH,YAAA;IAAAI,eAAA,GAGEX,KAAA,CAFFY,QAAW;AAAXA,IAAAA,QAAW,GAAAD,eAAA,KAAA,KAAA,CAAA,GAAA,MAAA,GAAAA,eAAA;IACXE,QAAA,GACEb,KAAA,CADFa,QAAA,CAAA;AAGF,EAAA,IAAMC,UAAa,GAAA;AACjBL,IAAAA,SAAA,EAAWD,MAAMC,SAAa,IAAA,OAAA;AAC9BM,IAAAA,KAAO,EAAA;AACLC,MAAAA,UAAY,EAAAC,cAAA,CAAAhB,EAAAA,EAAAA,CAAAA,YAAA,GACPO,MAAMO,KAAO,MAAA,IAAA,IAAAd,YAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,YAAA,CAAae,UAAA,CAClB;AACAE,MAAAA,SAAW,EAAAD,cAAA,CAAAf,EAAAA,EAAAA,CAAAA,aAAA,GACNM,MAAMO,KAAO,MAAA,IAAA,IAAAb,aAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,aAAA,CAAagB,SAAA,CAClB;AACAC,MAAAA,WAAa,EAAAF,cAAA,CAAAd,EAAAA,EAAAA,CAAAA,aAAA,GACRK,MAAMO,KAAO,MAAA,IAAA,IAAAZ,aAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAbA,aAAA,CAAagB,WAAA,CAClB;AACAC,MAAAA,UAAY,EAAAH,cAAA,CAAAb,EAAAA,EAAAA,CAAAA,aAAA,GACPI,MAAMO,KAAO,MAAAX,IAAAA,IAAAA,aAAA,KAAbA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,aAAA,CAAagB,UAAA,CAAA;KAEpB;IACAV,SAASF,KAAM,CAAAE,OAAAA;GACjB,CAAA;EAEAW,WAAA,CAAYC,iBAAkB,CAAA;AAC5BhB,IAAAA,EAAA,EAAAA,EAAA;AACAQ,IAAAA,UAAA,EAAAA,UAAA;AACAF,IAAAA,QAAA,EAAAA,QAAAA;AACF,GAAC,CAAA,CAAA;AAED,EAAA,IAAMW,0BAAqD,GAAA;AACzDjB,IAAAA,EAAA,EAAAA,EAAAA;GACF,CAAA;EAEA,0CAAQkB,qBAAsB,CAAAC,QAAA,EAAtB;AAA+BC,IAAAA,KAAA,EAAOH,0BAAAA;KAA6BV,QAAS,CAAA,CAAA;AACtF;;;;;;;;;"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { _ as _slicedToArray } from '../../_chunks/Djn5ftvm.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 Bu = function Bu(_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 toggleBu = function toggleBu(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 toggleBu(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
|
+
Bu.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 { Bu as default };
|
|
79
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/Bu/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useMemo } from \"react\";\nimport { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from \"react-native\";\nimport { RedsBu, defaultProps } from \"./interface/index\";\nimport { alwaysColor } from \"@xhs/reds-token-next\";\n\nconst Bu = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsBu) => {\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 toggleBu = (e: GestureResponderEvent) => {\n onClick?.(e);\n !isControlled && setValue((v) => !v);\n };\n\n return (\n <TouchableWithoutFeedback onPress={(e) => toggleBu(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\nBu.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 Bu;\n"],"names":["Bu","_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","toggleBu","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
|
+
import { lightColor } from '@xhs/reds-token-next';
|
|
2
|
+
|
|
3
|
+
var defaultProps = {
|
|
4
|
+
defaultValue: false,
|
|
5
|
+
disabled: false,
|
|
6
|
+
onClick: function onClick(event) {},
|
|
7
|
+
onChange: function onChange(value) {},
|
|
8
|
+
trackOnColor: lightColor.Primary,
|
|
9
|
+
trackOffColor: lightColor.Fill2
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { defaultProps };
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/components/Bu/interface/index.ts"],"sourcesContent":["import { GestureResponderEvent } from \"react-native\";\nimport { lightColor } from \"@xhs/reds-token-next\";\n\nexport interface RedsBu {\n value?: boolean;\n defaultValue?: boolean;\n disabled?: boolean;\n onClick?: (event: GestureResponderEvent) => void;\n onChange?: (value: boolean) => void;\n trackOnColor?: string;\n trackOffColor?: string;\n}\n\nexport const defaultProps: RedsBu = {\n defaultValue: false,\n disabled: false,\n onClick: (event: GestureResponderEvent) => {},\n onChange: (value: boolean) => {},\n trackOnColor: lightColor.Primary,\n trackOffColor: lightColor.Fill2,\n};\n"],"names":["defaultProps","defaultValue","disabled","onClick","event","onChange","value","trackOnColor","lightColor","Primary","trackOffColor","Fill2"],"mappings":";;AAaO,IAAMA,YAAuB,GAAA;AAClCC,EAAAA,YAAc,EAAA,KAAA;AACdC,EAAAA,QAAU,EAAA,KAAA;AACVC,EAAAA,OAAA,EAAS,SAAAA,OAAAA,CAACC,KAAiC,EAAA,EAAC;AAC5CC,EAAAA,QAAA,EAAU,SAAAA,QAAAA,CAACC,KAAmB,EAAA,EAAC;EAC/BC,cAAcC,UAAW,CAAAC,OAAA;EACzBC,eAAeF,UAAW,CAAAG,KAAAA;AAC5B;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import '../../_chunks/
|
|
1
|
+
import '../../_chunks/Djn5ftvm.js';
|
|
2
2
|
import './hooks/ConfigCache/ConfigCache.js';
|
|
3
3
|
import './hooks/ConfigContext/ConfigContext.js';
|
|
4
|
-
export { a as default } from '../../_chunks/
|
|
4
|
+
export { a as default } from '../../_chunks/npmn1D5V.js';
|
|
5
5
|
import '@xhs/reds-token-next';
|
|
6
6
|
import 'react';
|
|
7
7
|
//# sourceMappingURL=ConfigProvider.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { c as _createClass,
|
|
1
|
+
import { c as _createClass, a as _objectSpread2, d as _classCallCheck, e as _typeof } from '../../../../_chunks/Djn5ftvm.js';
|
|
2
2
|
import { lightColor, darkColor, alwaysColor } from '@xhs/reds-token-next';
|
|
3
3
|
|
|
4
4
|
var __defProp = Object.defineProperty;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
2
|
import { configCache } from '../ConfigCache/ConfigCache.js';
|
|
3
3
|
import { ConfigProviderContext } from '../ConfigContext/ConfigContext.js';
|
|
4
|
-
import '../../../../_chunks/
|
|
4
|
+
import '../../../../_chunks/Djn5ftvm.js';
|
|
5
5
|
import '@xhs/reds-token-next';
|
|
6
6
|
|
|
7
7
|
var useThemeColor = function useThemeColor(component) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { C as ConfigProvider } from '../../_chunks/
|
|
1
|
+
import { C as ConfigProvider } from '../../_chunks/npmn1D5V.js';
|
|
2
2
|
export { useThemeColor } from './hooks/themeToken/useThemeToken.js';
|
|
3
|
-
import '../../_chunks/
|
|
3
|
+
import '../../_chunks/Djn5ftvm.js';
|
|
4
4
|
import './hooks/ConfigCache/ConfigCache.js';
|
|
5
5
|
import '@xhs/reds-token-next';
|
|
6
6
|
import './hooks/ConfigContext/ConfigContext.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { b as _objectWithoutProperties,
|
|
1
|
+
import { b as _objectWithoutProperties, a as _objectSpread2 } from '../../_chunks/Djn5ftvm.js';
|
|
2
2
|
import { useRef } from 'react';
|
|
3
3
|
import { Platform } from 'react-native';
|
|
4
4
|
import { useFloating as useFloating$1, shift, limitShift, flip, offset, arrow } from '@floating-ui/react-native';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as _slicedToArray, a as _objectSpread2 } from '../../_chunks/Djn5ftvm.js';
|
|
2
2
|
import React, { useState, useMemo, useEffect, isValidElement, cloneElement } from 'react';
|
|
3
3
|
import { TouchableWithoutFeedback, View, Text } from 'react-native';
|
|
4
4
|
import { ModalWrapper, Arrow } from './component.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { _ as _slicedToArray } from '../../_chunks/Djn5ftvm.js';
|
|
2
2
|
import React, { useState, useRef, useMemo, useEffect } from 'react';
|
|
3
3
|
import { StyleSheet, Animated, TouchableWithoutFeedback, View } from 'react-native';
|
|
4
4
|
import { defaultProps } from './interface/index.js';
|
package/lib/esm/index.js
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
+
export { default as Bu } from './components/Bu/index.js';
|
|
1
2
|
export { default as Button } from './components/Button/index.js';
|
|
2
3
|
export { default as Popover } from './components/Popover/index.js';
|
|
3
4
|
export { default as Switch } from './components/Switch/index.js';
|
|
4
|
-
export { C as ConfigProvider } from './_chunks/
|
|
5
|
+
export { C as ConfigProvider } from './_chunks/npmn1D5V.js';
|
|
5
6
|
export { useThemeColor } from './components/ConfigProvider/hooks/themeToken/useThemeToken.js';
|
|
6
|
-
import './_chunks/
|
|
7
|
+
import './_chunks/Djn5ftvm.js';
|
|
7
8
|
import 'react';
|
|
8
9
|
import 'react-native';
|
|
10
|
+
import './components/Bu/interface/index.js';
|
|
11
|
+
import '@xhs/reds-token-next';
|
|
9
12
|
import './components/Popover/component.js';
|
|
10
13
|
import './components/Popover/hook.js';
|
|
11
14
|
import '@floating-ui/react-native';
|
|
12
|
-
import '@xhs/reds-token-next';
|
|
13
15
|
import './components/Switch/interface/index.js';
|
|
14
16
|
import './components/ConfigProvider/hooks/ConfigCache/ConfigCache.js';
|
|
15
17
|
import './components/ConfigProvider/hooks/ConfigContext/ConfigContext.js';
|
package/lib/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { GestureResponderEvent } from "react-native";
|
|
2
|
+
export interface RedsBu {
|
|
3
|
+
value?: boolean;
|
|
4
|
+
defaultValue?: boolean;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
onClick?: (event: GestureResponderEvent) => void;
|
|
7
|
+
onChange?: (value: boolean) => void;
|
|
8
|
+
trackOnColor?: string;
|
|
9
|
+
trackOffColor?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const defaultProps: RedsBu;
|
package/lib/types/src/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import Bu from "./components/Bu";
|
|
1
2
|
import Button from "./components/Button";
|
|
2
3
|
import Popover from "./components/Popover";
|
|
3
4
|
import Switch from "./components/Switch";
|
|
4
5
|
import ConfigProvider, { useThemeColor } from "./components/ConfigProvider";
|
|
5
|
-
export { Button, Popover, Switch, ConfigProvider, useThemeColor };
|
|
6
|
+
export { Button, Popover, Switch, ConfigProvider, useThemeColor, Bu };
|
package/package.json
CHANGED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React, { useRef, useEffect, useState } from "react";
|
|
2
|
+
import { View, Text, StyleSheet, FlatList, ScrollView } from "react-native";
|
|
3
|
+
import { Bu } from "@xhs/reds-rn-next";
|
|
4
|
+
|
|
5
|
+
const styles = StyleSheet.create({
|
|
6
|
+
container: {
|
|
7
|
+
flex: 1,
|
|
8
|
+
justifyContent: "center",
|
|
9
|
+
paddingTop: 100,
|
|
10
|
+
paddingBottom: 100,
|
|
11
|
+
},
|
|
12
|
+
scrollView: {
|
|
13
|
+
backgroundColor: "pink",
|
|
14
|
+
},
|
|
15
|
+
root: {
|
|
16
|
+
flex: 1,
|
|
17
|
+
backgroundColor: "blue",
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
const Desc = ({ children = "" }) => {
|
|
21
|
+
return <Text>{children}</Text>;
|
|
22
|
+
};
|
|
23
|
+
const Br = (props: { height?: any }) => <View style={{ height: props.height || 20 }}></View>;
|
|
24
|
+
|
|
25
|
+
export default function App() {
|
|
26
|
+
const [value, setValue] = useState(false);
|
|
27
|
+
const [valueStr, setValueStr] = useState(value.toString());
|
|
28
|
+
const onClick = (e) => setValue((v) => !v);
|
|
29
|
+
const onChange = (v) => setValueStr(v.toString());
|
|
30
|
+
return (
|
|
31
|
+
<View style={styles.container}>
|
|
32
|
+
<Desc>默认用法</Desc>
|
|
33
|
+
<Bu></Bu>
|
|
34
|
+
<Br />
|
|
35
|
+
|
|
36
|
+
<Desc>设置默认值</Desc>
|
|
37
|
+
<Bu defaultValue={true}></Bu>
|
|
38
|
+
<Br />
|
|
39
|
+
|
|
40
|
+
<Desc>修改开关颜色</Desc>
|
|
41
|
+
<Bu trackOnColor={"#1b8bcd"} trackOffColor={"#da36c9"}></Bu>
|
|
42
|
+
<Br />
|
|
43
|
+
|
|
44
|
+
<Desc>受控用法</Desc>
|
|
45
|
+
<Text>当前值:{valueStr}</Text>
|
|
46
|
+
<Bu value={value} onClick={onClick} onChange={onChange}></Bu>
|
|
47
|
+
<Br />
|
|
48
|
+
</View>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import BaseDemo from "!!raw-loader!../demo/index.tsx";
|
|
2
|
+
|
|
3
|
+
## 演示
|
|
4
|
+
|
|
5
|
+
### 基础用法
|
|
6
|
+
|
|
7
|
+
::BaseDemo::
|
|
8
|
+
|
|
9
|
+
## API
|
|
10
|
+
|
|
11
|
+
### Props
|
|
12
|
+
|
|
13
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
14
|
+
| --------------- | ---------------- | ------- | --------------------- |
|
|
15
|
+
| value | 当前的状态 | boolean | |
|
|
16
|
+
| default-value | 默认状态 | boolean | false |
|
|
17
|
+
| disabled | 是否显示气泡 | boolean | false |
|
|
18
|
+
| track-on-color | 开关开启时的颜色 | string | rgba(255, 36, 66, 1) |
|
|
19
|
+
| track-off-color | 开关关闭时的颜色 | string | rgba(48, 48, 52, 0.1) |
|
|
20
|
+
|
|
21
|
+
### Events
|
|
22
|
+
|
|
23
|
+
| 事件 | 描述 | 类型 | 默认值 |
|
|
24
|
+
| ------ | ------------------ | ------------------------ | ------ |
|
|
25
|
+
| change | 当值发生变化时触发 | (value: boolean) => void | |
|
|
26
|
+
| click | 被点击时触发 | (value: Event) => void | |
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect, useMemo } from "react";
|
|
2
|
+
import { View, TouchableWithoutFeedback, StyleSheet, Animated, GestureResponderEvent } from "react-native";
|
|
3
|
+
import { RedsBu, defaultProps } from "./interface/index";
|
|
4
|
+
import { alwaysColor } from "@xhs/reds-token-next";
|
|
5
|
+
|
|
6
|
+
const Bu = ({ value: cValue, defaultValue, onChange, onClick, trackOnColor, trackOffColor }: RedsBu) => {
|
|
7
|
+
const isControlled = cValue !== undefined;
|
|
8
|
+
const [value, setValue] = useState(defaultValue);
|
|
9
|
+
|
|
10
|
+
const animatedValue = useRef(new Animated.Value(defaultValue ? 18 : 2)).current;
|
|
11
|
+
|
|
12
|
+
const thumbTranslateX = useMemo(() => animatedValue.interpolate({ inputRange: [2, 18], outputRange: [2, 18] }), []);
|
|
13
|
+
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
isControlled && setValue(cValue);
|
|
16
|
+
onChange?.(!!value);
|
|
17
|
+
Animated.timing(animatedValue, {
|
|
18
|
+
toValue: value ? 18 : 2,
|
|
19
|
+
duration: 200,
|
|
20
|
+
useNativeDriver: true,
|
|
21
|
+
}).start();
|
|
22
|
+
}, [value, cValue]);
|
|
23
|
+
|
|
24
|
+
const toggleBu = (e: GestureResponderEvent) => {
|
|
25
|
+
onClick?.(e);
|
|
26
|
+
!isControlled && setValue((v) => !v);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<TouchableWithoutFeedback onPress={(e) => toggleBu(e)}>
|
|
31
|
+
<View style={[styles.container, { backgroundColor: value ? trackOnColor : trackOffColor }]}>
|
|
32
|
+
<Animated.View style={[styles.thumb, { transform: [{ translateX: thumbTranslateX }] }]}></Animated.View>
|
|
33
|
+
</View>
|
|
34
|
+
</TouchableWithoutFeedback>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
Bu.defaultProps = defaultProps;
|
|
39
|
+
|
|
40
|
+
const styles = StyleSheet.create({
|
|
41
|
+
container: {
|
|
42
|
+
width: 40,
|
|
43
|
+
height: 24,
|
|
44
|
+
borderRadius: 15,
|
|
45
|
+
justifyContent: "center",
|
|
46
|
+
alignItems: "center",
|
|
47
|
+
},
|
|
48
|
+
thumb: {
|
|
49
|
+
width: 20,
|
|
50
|
+
height: 20,
|
|
51
|
+
borderRadius: 10,
|
|
52
|
+
backgroundColor: alwaysColor.White,
|
|
53
|
+
justifyContent: "center",
|
|
54
|
+
alignItems: "center",
|
|
55
|
+
position: "absolute",
|
|
56
|
+
left: 0,
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
export default Bu;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { GestureResponderEvent } from "react-native";
|
|
2
|
+
import { lightColor } from "@xhs/reds-token-next";
|
|
3
|
+
|
|
4
|
+
export interface RedsBu {
|
|
5
|
+
value?: boolean;
|
|
6
|
+
defaultValue?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
onClick?: (event: GestureResponderEvent) => void;
|
|
9
|
+
onChange?: (value: boolean) => void;
|
|
10
|
+
trackOnColor?: string;
|
|
11
|
+
trackOffColor?: string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const defaultProps: RedsBu = {
|
|
15
|
+
defaultValue: false,
|
|
16
|
+
disabled: false,
|
|
17
|
+
onClick: (event: GestureResponderEvent) => {},
|
|
18
|
+
onChange: (value: boolean) => {},
|
|
19
|
+
trackOnColor: lightColor.Primary,
|
|
20
|
+
trackOffColor: lightColor.Fill2,
|
|
21
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { describe } from "vitest";
|
|
3
|
+
import { redsBench } from "~root/utils/redsBench";
|
|
4
|
+
import { Bu } from "@xhs/reds-rn-next";
|
|
5
|
+
import { render, fireEvent } from "@testing-library/react-native";
|
|
6
|
+
import { Text } from "react-native";
|
|
7
|
+
|
|
8
|
+
describe("render", () => {
|
|
9
|
+
redsBench("base", async () => {
|
|
10
|
+
render(<Bu></Bu>);
|
|
11
|
+
});
|
|
12
|
+
});
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { describe, it, expect } from "vitest";
|
|
2
|
+
import { render, fireEvent, userEvent } from "@testing-library/react-native";
|
|
3
|
+
import "@testing-library/react-native/extend-expect";
|
|
4
|
+
import { Pressable, Text, View } from "react-native";
|
|
5
|
+
import Bu from "../index";
|
|
6
|
+
|
|
7
|
+
describe("Bu", () => {
|
|
8
|
+
it(":base", async () => {
|
|
9
|
+
let isOn = false;
|
|
10
|
+
const wrapper = render(<Bu onChange={(v) => (isOn = v)}></Bu>);
|
|
11
|
+
expect(wrapper.UNSAFE_root.props.defaultValue).toBe(false);
|
|
12
|
+
await fireEvent(wrapper.UNSAFE_root.children[0], "press");
|
|
13
|
+
expect(isOn).toBe(true);
|
|
14
|
+
|
|
15
|
+
await fireEvent(wrapper.UNSAFE_root.children[0], "press");
|
|
16
|
+
expect(isOn).toBe(false);
|
|
17
|
+
});
|
|
18
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import Bu from "./components/Bu";
|
|
1
2
|
import Button from "./components/Button";
|
|
2
3
|
import Popover from "./components/Popover";
|
|
3
4
|
import Switch from "./components/Switch";
|
|
4
5
|
import ConfigProvider, { useThemeColor } from "./components/ConfigProvider";
|
|
5
|
-
export { Button, Popover, Switch, ConfigProvider, useThemeColor };
|
|
6
|
+
export { Button, Popover, Switch, ConfigProvider, useThemeColor, Bu };
|