@draftbit/core 48.6.1 → 48.6.2-8db990.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/components/Slider.js +1 -1
- package/lib/typescript/src/components/Slider.js +22 -2
- package/lib/typescript/src/components/Slider.js.map +1 -1
- package/lib/typescript/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/Slider.js +22 -2
- package/src/components/Slider.js.map +1 -1
- package/src/components/Slider.tsx +23 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "48.6.
|
|
3
|
+
"version": "48.6.2-8db990.2+8db9901",
|
|
4
4
|
"description": "Core (non-native) Components",
|
|
5
5
|
"main": "lib/commonjs/index.js",
|
|
6
6
|
"types": "lib/typescript/src/index.d.ts",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@date-io/date-fns": "^1.3.13",
|
|
43
43
|
"@draftbit/react-theme-provider": "^2.1.1",
|
|
44
|
-
"@draftbit/types": "48.
|
|
44
|
+
"@draftbit/types": "^48.6.2-8db990.2+8db9901",
|
|
45
45
|
"@expo/vector-icons": "^13.0.0",
|
|
46
46
|
"@material-ui/core": "^4.11.0",
|
|
47
47
|
"@material-ui/pickers": "^3.2.10",
|
|
@@ -103,5 +103,5 @@
|
|
|
103
103
|
],
|
|
104
104
|
"testEnvironment": "node"
|
|
105
105
|
},
|
|
106
|
-
"gitHead": "
|
|
106
|
+
"gitHead": "8db99013c4d23d3b1458d380e9c6574b46bfc564"
|
|
107
107
|
}
|
package/src/components/Slider.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet } from "react-native";
|
|
2
|
+
import { View, StyleSheet, Platform } from "react-native";
|
|
3
3
|
import NativeSlider from "@react-native-community/slider";
|
|
4
4
|
import isNumber from "lodash.isnumber";
|
|
5
5
|
import toNumber from "lodash.tonumber";
|
|
@@ -24,6 +24,24 @@ function maybeParseValue(value) {
|
|
|
24
24
|
}
|
|
25
25
|
function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, value, defaultValue, minimumTrackTintColor, maximumTrackTintColor, thumbTintColor, minimumValue = 0, maximumValue = 100, tapToSeek, step = 1, onValueChange = () => { }, style, theme, ...rest }) {
|
|
26
26
|
const [internalValue, setInternalValue] = React.useState(value || defaultValue);
|
|
27
|
+
/**
|
|
28
|
+
* Web version of the slider relies on some logic running in the onLayout callback using a given React ref (https://github.com/callstack/react-native-slider/blob/main/package/src/RNCSliderNativeComponent.web.tsx#L320)
|
|
29
|
+
*
|
|
30
|
+
* The issue is that the onLayout callback is called before the ref is initialized, which leads to an improperly initiatilzed variable
|
|
31
|
+
* that determines the x position of the slider
|
|
32
|
+
*
|
|
33
|
+
* Similair issue: https://github.com/callstack/react-native-slider/issues/470
|
|
34
|
+
*
|
|
35
|
+
* This workaround forces onLayout to be called twice, where the 2nd time around the ref is initialized
|
|
36
|
+
* Done by updating the style of a child component which forces re layout
|
|
37
|
+
*/
|
|
38
|
+
const [tempThumbStyle, setTempThumbStyle] = React.useState({
|
|
39
|
+
width: 0,
|
|
40
|
+
height: 0,
|
|
41
|
+
});
|
|
42
|
+
React.useEffect(() => {
|
|
43
|
+
setTempThumbStyle({ width: undefined, height: undefined });
|
|
44
|
+
}, []);
|
|
27
45
|
React.useEffect(() => {
|
|
28
46
|
if (value != null) {
|
|
29
47
|
setInternalValue(value);
|
|
@@ -46,7 +64,9 @@ function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, valu
|
|
|
46
64
|
};
|
|
47
65
|
return (React.createElement(View, { style: [styles.container, style], ...rest },
|
|
48
66
|
leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
|
|
49
|
-
React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider
|
|
67
|
+
React.createElement(NativeSlider, { value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider,
|
|
68
|
+
//@ts-ignore Not registered in types
|
|
69
|
+
thumbStyle: Platform.OS === "web" ? tempThumbStyle : undefined }),
|
|
50
70
|
rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
|
|
51
71
|
}
|
|
52
72
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Slider.js","sourceRoot":"","sources":["Slider.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
|
|
2
|
+
import { View, StyleSheet, StyleProp, ViewStyle, Platform } from "react-native";
|
|
3
3
|
import NativeSlider from "@react-native-community/slider";
|
|
4
4
|
import isNumber from "lodash.isnumber";
|
|
5
5
|
import toNumber from "lodash.tonumber";
|
|
@@ -72,6 +72,26 @@ function Slider({
|
|
|
72
72
|
value || defaultValue
|
|
73
73
|
);
|
|
74
74
|
|
|
75
|
+
/**
|
|
76
|
+
* Web version of the slider relies on some logic running in the onLayout callback using a given React ref (https://github.com/callstack/react-native-slider/blob/main/package/src/RNCSliderNativeComponent.web.tsx#L320)
|
|
77
|
+
*
|
|
78
|
+
* The issue is that the onLayout callback is called before the ref is initialized, which leads to an improperly initiatilzed variable
|
|
79
|
+
* that determines the x position of the slider
|
|
80
|
+
*
|
|
81
|
+
* Similair issue: https://github.com/callstack/react-native-slider/issues/470
|
|
82
|
+
*
|
|
83
|
+
* This workaround forces onLayout to be called twice, where the 2nd time around the ref is initialized
|
|
84
|
+
* Done by updating the style of a child component which forces re layout
|
|
85
|
+
*/
|
|
86
|
+
const [tempThumbStyle, setTempThumbStyle] = React.useState<ViewStyle>({
|
|
87
|
+
width: 0,
|
|
88
|
+
height: 0,
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
React.useEffect(() => {
|
|
92
|
+
setTempThumbStyle({ width: undefined, height: undefined });
|
|
93
|
+
}, []);
|
|
94
|
+
|
|
75
95
|
React.useEffect(() => {
|
|
76
96
|
if (value != null) {
|
|
77
97
|
setInternalValue(value);
|
|
@@ -114,6 +134,8 @@ function Slider({
|
|
|
114
134
|
thumbTintColor={thumbColor}
|
|
115
135
|
onSlidingComplete={handleSlidingComplete}
|
|
116
136
|
style={styles.slider}
|
|
137
|
+
//@ts-ignore Not registered in types
|
|
138
|
+
thumbStyle={Platform.OS === "web" ? tempThumbStyle : undefined}
|
|
117
139
|
/>
|
|
118
140
|
{rightIcon ? (
|
|
119
141
|
<Icon color={rightIconThemeColor} name={rightIcon} size={24} />
|