@draftbit/core 48.6.2-8db990.2 → 48.6.2-d51582.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 +3 -22
- 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 +3 -22
- package/src/components/Slider.js.map +1 -1
- package/src/components/Slider.tsx +3 -22
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@draftbit/core",
|
|
3
|
-
"version": "48.6.2-
|
|
3
|
+
"version": "48.6.2-d51582.2+d515823",
|
|
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.6.2-
|
|
44
|
+
"@draftbit/types": "^48.6.2-d51582.2+d515823",
|
|
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": "d515823d098a53f81f9b7d72bc504dfb79aa859b"
|
|
107
107
|
}
|
package/src/components/Slider.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { View, StyleSheet
|
|
2
|
+
import { View, StyleSheet } 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,24 +24,7 @@ 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
|
+
const sliderRef = React.useRef();
|
|
45
28
|
React.useEffect(() => {
|
|
46
29
|
if (value != null) {
|
|
47
30
|
setInternalValue(value);
|
|
@@ -64,9 +47,7 @@ function Slider({ Icon, leftIcon, rightIcon, leftIconColor, rightIconColor, valu
|
|
|
64
47
|
};
|
|
65
48
|
return (React.createElement(View, { style: [styles.container, style], ...rest },
|
|
66
49
|
leftIcon ? (React.createElement(Icon, { color: leftIconThemeColor, name: leftIcon, size: 24 })) : null,
|
|
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
|
+
React.createElement(NativeSlider, { ref: sliderRef, value: parsedValue, step: step, minimumValue: minimumValue, maximumValue: maximumValue, tapToSeek: tapToSeek, minimumTrackTintColor: minTrackColor, maximumTrackTintColor: maxTrackColor, thumbTintColor: thumbColor, onSlidingComplete: handleSlidingComplete, style: styles.slider }),
|
|
70
51
|
rightIcon ? (React.createElement(Icon, { color: rightIconThemeColor, name: rightIcon, size: 24 })) : null));
|
|
71
52
|
}
|
|
72
53
|
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,
|
|
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
|
|
2
|
+
import { View, StyleSheet, StyleProp, ViewStyle } 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,25 +72,7 @@ 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
|
-
}, []);
|
|
75
|
+
const sliderRef = React.useRef();
|
|
94
76
|
|
|
95
77
|
React.useEffect(() => {
|
|
96
78
|
if (value != null) {
|
|
@@ -124,6 +106,7 @@ function Slider({
|
|
|
124
106
|
<Icon color={leftIconThemeColor} name={leftIcon} size={24} />
|
|
125
107
|
) : null}
|
|
126
108
|
<NativeSlider
|
|
109
|
+
ref={sliderRef as any}
|
|
127
110
|
value={parsedValue}
|
|
128
111
|
step={step}
|
|
129
112
|
minimumValue={minimumValue}
|
|
@@ -134,8 +117,6 @@ function Slider({
|
|
|
134
117
|
thumbTintColor={thumbColor}
|
|
135
118
|
onSlidingComplete={handleSlidingComplete}
|
|
136
119
|
style={styles.slider}
|
|
137
|
-
//@ts-ignore Not registered in types
|
|
138
|
-
thumbStyle={Platform.OS === "web" ? tempThumbStyle : undefined}
|
|
139
120
|
/>
|
|
140
121
|
{rightIcon ? (
|
|
141
122
|
<Icon color={rightIconThemeColor} name={rightIcon} size={24} />
|