@storybook/addon-ondevice-controls 10.4.3 → 10.4.4

package/dist/components/color-picker/HoloColorPicker.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { I18nManager, Image, StyleSheet, Text, View, } from 'react-native';
 import tinycolor from 'tinycolor2';
 import SliderWrapper from '../SliderWrapper';
@@ -8,27 +8,46 @@ const getHsv = (color) => tinycolor(color).toHsv();
 export function HoloColorPicker({ defaultColor, oldColor, onColorChange, style, }) {
     const [color, setColor] = useState(() => getHsv(defaultColor));
     const [pickerSize, setPickerSize] = useState(0);
+    const colorRef = useRef(color);
+    const pickerSizeRef = useRef(pickerSize);
+    const pickerRef = useRef(null);
+    const pickerPageOffsetRef = useRef({ x: 0, y: 0 });
     useEffect(() => {
-        setColor(getHsv(defaultColor));
+        const nextColor = getHsv(defaultColor);
+        colorRef.current = nextColor;
+        setColor(nextColor);
     }, [defaultColor]);
     const updateColor = useCallback((nextColor) => {
+        colorRef.current = nextColor;
         setColor(nextColor);
         onColorChange(nextColor);
     }, [onColorChange]);
     const handleHueChange = useCallback(({ x, y }) => {
-        if (!pickerSize) {
+        const currentPickerSize = pickerSizeRef.current;
+        if (!currentPickerSize) {
             return;
         }
-        const h = computeHue(x, y, pickerSize);
-        updateColor({ ...color, h });
-    }, [color, pickerSize, updateColor]);
+        const relativeX = x - pickerPageOffsetRef.current.x;
+        const relativeY = y - pickerPageOffsetRef.current.y;
+        const h = computeHue(relativeX, relativeY, currentPickerSize);
+        updateColor({ ...colorRef.current, h });
+    }, [updateColor]);
     const pickerResponder = useMemo(() => createPanResponder({
         onStart: handleHueChange,
         onMove: handleHueChange,
     }), [handleHueChange]);
     const onLayout = (event) => {
         const { width, height } = event.nativeEvent.layout;
-        setPickerSize(Math.min(width, height));
+        const nextPickerSize = Math.min(width, height);
+        pickerSizeRef.current = nextPickerSize;
+        setPickerSize(nextPickerSize);
+    };
+    const onPickerLayout = () => {
+        requestAnimationFrame(() => {
+            pickerRef.current?.measure((_x, _y, _width, _height, pageX, pageY) => {
+                pickerPageOffsetRef.current = { x: pageX, y: pageY };
+            });
+        });
     };
     const selectedColor = tinycolor(color).toHexString();
     const indicatorColor = tinycolor({ h: color.h, s: 1, v: 1 }).toHexString();
@@ -40,7 +59,7 @@ export function HoloColorPicker({ defaultColor, oldColor, onColorChange, style,
         angle: hueToRad(color.h),
         isRTL: I18nManager.isRTL,
     });
-    return (_jsxs(View, { style: style, children: [_jsx(View, { onLayout: onLayout, style: styles.pickerContainer, children: !pickerSize ? null : (_jsxs(View, { children: [_jsxs(View, { ...pickerResponder.panHandlers, style: computed.picker, collapsable: false, children: [_jsx(Image, { source: require('./resources/color-circle.png'), resizeMode: "contain", style: styles.pickerImage }), _jsx(View, { style: [styles.pickerIndicator, computed.pickerIndicator] })] }), oldColor ? (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.selectedPreview, computed.selectedPreview] }), _jsx(View, { style: [styles.originalPreview, computed.originalPreview] })] })) : (_jsx(View, { style: [styles.selectedFullPreview, computed.selectedFullPreview] }))] })) }), _jsxs(View, { children: [_jsx(Text, { style: styles.sliderLabel, children: "Saturation" }), _jsx(SliderWrapper, { value: color.s, onValueChange: (s) => updateColor({ ...color, s }) }), _jsx(Text, { style: styles.sliderLabel, children: "Lightness" }), _jsx(SliderWrapper, { value: color.v, onValueChange: (v) => updateColor({ ...color, v }) })] })] }));
+    return (_jsxs(View, { style: style, children: [_jsx(View, { onLayout: onLayout, style: styles.pickerContainer, children: !pickerSize ? null : (_jsxs(View, { children: [_jsxs(View, { ref: pickerRef, onLayout: onPickerLayout, ...pickerResponder.panHandlers, style: computed.picker, collapsable: false, children: [_jsx(Image, { source: require('./resources/color-circle.png'), resizeMode: "contain", style: styles.pickerImage }), _jsx(View, { style: [styles.pickerIndicator, computed.pickerIndicator], pointerEvents: "none" })] }), oldColor ? (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.selectedPreview, computed.selectedPreview], pointerEvents: "none" }), _jsx(View, { style: [styles.originalPreview, computed.originalPreview], pointerEvents: "none" })] })) : (_jsx(View, { style: [styles.selectedFullPreview, computed.selectedFullPreview], pointerEvents: "none" }))] })) }), _jsxs(View, { children: [_jsx(Text, { style: styles.sliderLabel, children: "Saturation" }), _jsx(SliderWrapper, { value: color.s, onValueChange: (s) => updateColor({ ...colorRef.current, s }) }), _jsx(Text, { style: styles.sliderLabel, children: "Lightness" }), _jsx(SliderWrapper, { value: color.v, onValueChange: (v) => updateColor({ ...colorRef.current, v }) })] })] }));
 }
 const computeHue = (x, y, pickerSize) => {
     const center = pickerSize / 2;

package/dist/components/color-picker/utils.js

@@ -28,13 +28,13 @@ export function createPanResponder({ onStart = fn, onMove = fn, onEnd = fn, }) {
         onMoveShouldSetPanResponderCapture: fn,
         onPanResponderTerminationRequest: fn,
         onPanResponderGrant: (evt, state) => {
-            return onStart({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY }, evt, state);
+            return onStart({ x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY }, evt, state);
         },
         onPanResponderMove: (evt, state) => {
-            return onMove({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY }, evt, state);
+            return onMove({ x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY }, evt, state);
         },
         onPanResponderRelease: (evt, state) => {
-            return onEnd({ x: evt.nativeEvent.locationX, y: evt.nativeEvent.locationY }, evt, state);
+            return onEnd({ x: evt.nativeEvent.pageX, y: evt.nativeEvent.pageY }, evt, state);
         },
     });
 }

package/dist/types/Color.js

@@ -71,7 +71,7 @@ const ColorType = ({ arg, onChange = (value) => value }) => {
                 backgroundColor: theme.background.content,
             } }));
     }
-    return (_jsxs(View, { children: [_jsx(TouchableContainer, { onPress: openColorPicker, hitSlop: controlHitSlop, activeOpacity: 0.7, children: _jsx(Touchable, { color: arg.value }) }), _jsxs(ModalPortal, { supportedOrientations: ['portrait', 'landscape'], transparent: true, visible: displayColorPicker, onRequestClose: closeColorPicker, animationType: "fade", children: [_jsx(TouchableWithoutFeedback, { onPress: closeColorPicker, children: _jsx(View, { style: styles.modalOverlay }) }), _jsx(View, { style: styles.centerContainer, children: _jsxs(InnerContainer, { pointerEvents: "box-none", children: [_jsx(ColorPicker, { onColorChange: (color) => setCurrentColor(color), defaultColor: arg.value, oldColor: arg.value, style: styles.picker }), _jsxs(View, { style: styles.actionContainer, children: [_jsx(ButtonTouchable, { onPress: closeColorPicker, hitSlop: buttonHitSlop, children: _jsx(ButtonText, { children: "Cancel" }) }), _jsx(View, { style: { width: 12 } }), _jsx(ButtonTouchable, { primary: true, hitSlop: buttonHitSlop, onPress: () => {
+    return (_jsxs(View, { children: [_jsx(TouchableContainer, { onPress: openColorPicker, hitSlop: controlHitSlop, activeOpacity: 0.7, children: _jsx(Touchable, { color: arg.value }) }), _jsxs(ModalPortal, { supportedOrientations: ['portrait', 'landscape'], transparent: true, visible: displayColorPicker, onRequestClose: closeColorPicker, animationType: "fade", children: [_jsx(TouchableWithoutFeedback, { onPress: closeColorPicker, children: _jsx(View, { style: styles.modalOverlay }) }), _jsx(View, { style: styles.centerContainer, children: _jsxs(InnerContainer, { children: [_jsx(ColorPicker, { onColorChange: (color) => setCurrentColor(color), defaultColor: arg.value, oldColor: arg.value, style: styles.picker }), _jsxs(View, { style: styles.actionContainer, children: [_jsx(ButtonTouchable, { onPress: closeColorPicker, hitSlop: buttonHitSlop, children: _jsx(ButtonText, { children: "Cancel" }) }), _jsx(View, { style: { width: 12 } }), _jsx(ButtonTouchable, { primary: true, hitSlop: buttonHitSlop, onPress: () => {
                                                 onChangeColor(currentColor);
                                                 closeColorPicker();
                                             }, children: _jsx(ButtonText, { primary: true, children: "Select" }) })] })] }) })] })] }));
@@ -104,7 +104,11 @@ const styles = StyleSheet.create({
         alignItems: 'center',
     },
     modalOverlay: {
-        ...StyleSheet.absoluteFillObject,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
         backgroundColor: 'rgba(0,0,0,0.3)',
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "10.4.3",
+  "version": "10.4.4",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -25,8 +25,8 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@storybook/react-native-theming": "^10.4.3",
-    "@storybook/react-native-ui-common": "^10.4.3",
+    "@storybook/react-native-theming": "^10.4.4",
+    "@storybook/react-native-ui-common": "^10.4.4",
     "polished": "^4.3.1",
     "react-native-modal-datetime-picker": "^18.0.0",
     "tinycolor2": "^1.6.0"
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@gorhom/bottom-sheet": "*",
     "cross-env": "^10.1.0",
-    "storybook": "^10.3.2",
+    "storybook": "^10.4.0",
     "typescript": "~6.0.3"
   },
   "peerDependencies": {