@wordpress/components 30.5.1-next.233ccab9b.0 → 30.6.0

package/build/focal-point-picker/index.native.js

@@ -1,264 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _reactNativeVideo = _interopRequireDefault(require("react-native-video"));
-var _reactNativeBridge = require("@wordpress/react-native-bridge");
-var _i18n = require("@wordpress/i18n");
-var _element = require("@wordpress/element");
-var _compose = require("@wordpress/compose");
-var _focalPoint = _interopRequireDefault(require("./focal-point"));
-var _tooltip = _interopRequireDefault(require("./tooltip"));
-var _style = _interopRequireDefault(require("./style.scss"));
-var _utils = require("./utils");
-var _math = require("../utils/math");
-var _image = _interopRequireDefault(require("../mobile/image"));
-var _unitControl = _interopRequireDefault(require("../unit-control"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const MIN_POSITION_VALUE = 0;
-const MAX_POSITION_VALUE = 100;
-const FOCAL_POINT_UNITS = [{
-  default: 50,
-  label: '%',
-  value: '%'
-}];
-function FocalPointPicker(props) {
-  const {
-    focalPoint,
-    onChange,
-    shouldEnableBottomSheetScroll,
-    url
-  } = props;
-  const isVideo = (0, _utils.isVideoType)(url);
-  const [containerSize, setContainerSize] = (0, _element.useState)(null);
-  const [sliderKey, setSliderKey] = (0, _element.useState)(0);
-  const [displayPlaceholder, setDisplayPlaceholder] = (0, _element.useState)(true);
-  const [videoNaturalSize, setVideoNaturalSize] = (0, _element.useState)(null);
-  const [tooltipVisible, setTooltipVisible] = (0, _element.useState)(false);
-  const locationPageOffsetX = (0, _element.useRef)();
-  const locationPageOffsetY = (0, _element.useRef)();
-  const videoRef = (0, _element.useRef)(null);
-  (0, _element.useEffect)(() => {
-    (0, _reactNativeBridge.requestFocalPointPickerTooltipShown)(tooltipShown => {
-      if (!tooltipShown) {
-        setTooltipVisible(true);
-        (0, _reactNativeBridge.setFocalPointPickerTooltipShown)(true);
-      }
-    });
-  }, []);
-
-  // Animated coordinates for drag handle.
-  const pan = (0, _element.useRef)(new _reactNative.Animated.ValueXY()).current;
-
-  /**
-   * Set drag handle position anytime focal point coordinates change.
-   * E.g. initial render, dragging range sliders.
-   */
-  (0, _element.useEffect)(() => {
-    if (containerSize) {
-      pan.setValue({
-        x: focalPoint.x * containerSize.width,
-        y: focalPoint.y * containerSize.height
-      });
-    }
-  }, [focalPoint, containerSize, pan]);
-
-  // Pan responder to manage drag handle interactivity.
-  const panResponder = (0, _element.useMemo)(() => _reactNative.PanResponder.create({
-    onStartShouldSetPanResponder: () => true,
-    onStartShouldSetPanResponderCapture: () => true,
-    onMoveShouldSetPanResponder: () => true,
-    onMoveShouldSetPanResponderCapture: () => true,
-    onPanResponderGrant: event => {
-      shouldEnableBottomSheetScroll(false);
-      const {
-        locationX: x,
-        locationY: y,
-        pageX,
-        pageY
-      } = event.nativeEvent;
-      locationPageOffsetX.current = pageX - x;
-      locationPageOffsetY.current = pageY - y;
-      pan.setValue({
-        x,
-        y
-      }); // Set cursor to tap location.
-      pan.extractOffset(); // Set offset to current value.
-    },
-    // Move cursor to match delta drag.
-    onPanResponderMove: _reactNative.Animated.event([null, {
-      dx: pan.x,
-      dy: pan.y
-    }], {
-      useNativeDriver: false
-    }),
-    onPanResponderRelease: event => {
-      shouldEnableBottomSheetScroll(true);
-      pan.flattenOffset(); // Flatten offset into value.
-      const {
-        pageX,
-        pageY
-      } = event.nativeEvent;
-      // Ideally, x and y below are merely locationX and locationY from the
-      // nativeEvent. However, we are required to compute these relative
-      // coordinates to workaround a bug affecting Android's PanResponder.
-      // Specifically, dragging the handle outside the bounds of the image
-      // results in inaccurate locationX and locationY coordinates to be
-      // reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944
-      const x = pageX - locationPageOffsetX.current;
-      const y = pageY - locationPageOffsetY.current;
-      onChange({
-        x: (0, _math.clamp)(x / containerSize?.width, 0, 1).toFixed(2),
-        y: (0, _math.clamp)(y / containerSize?.height, 0, 1).toFixed(2)
-      });
-      // Slider (child of RangeCell) is uncontrolled, so we must increment a
-      // key to re-mount and sync the pan gesture values to the sliders
-      // https://github.com/callstack/react-native-slider/tree/v3.0.3#value
-      setSliderKey(prevState => prevState + 1);
-    }
-  }), [containerSize, pan, onChange, shouldEnableBottomSheetScroll]);
-  const mediaBackground = (0, _compose.usePreferredColorSchemeStyle)(_style.default.mediaBackground, _style.default.mediaBackgroundDark);
-  const imagePreviewStyles = [displayPlaceholder && _style.default.mediaPlaceholder, _style.default.image];
-  const videoPreviewStyles = [{
-    aspectRatio: videoNaturalSize && videoNaturalSize.width / videoNaturalSize.height,
-    // Hide Video component since it has black background while loading the source
-    opacity: displayPlaceholder ? 0 : 1
-  }, _style.default.video, displayPlaceholder && _style.default.mediaPlaceholder];
-  const focalPointGroupStyles = [_style.default.focalPointGroup, {
-    transform: [{
-      translateX: pan.x.interpolate({
-        inputRange: [0, containerSize?.width || 0],
-        outputRange: [0, containerSize?.width || 0],
-        extrapolate: 'clamp'
-      })
-    }, {
-      translateY: pan.y.interpolate({
-        inputRange: [0, containerSize?.height || 0],
-        outputRange: [0, containerSize?.height || 0],
-        extrapolate: 'clamp'
-      })
-    }]
-  }];
-  const FOCAL_POINT_SIZE = 50;
-  const focalPointStyles = _reactNative.StyleSheet.flatten([_style.default.focalPoint, {
-    height: FOCAL_POINT_SIZE,
-    marginLeft: -(FOCAL_POINT_SIZE / 2),
-    marginTop: -(FOCAL_POINT_SIZE / 2),
-    width: FOCAL_POINT_SIZE
-  }]);
-  const onTooltipPress = () => setTooltipVisible(false);
-  const onMediaLayout = event => {
-    const {
-      height,
-      width
-    } = event.nativeEvent.layout;
-    if (width !== 0 && height !== 0 && (containerSize?.width !== width || containerSize?.height !== height)) {
-      setContainerSize({
-        width,
-        height
-      });
-    }
-  };
-  const onImageDataLoad = () => setDisplayPlaceholder(false);
-  const onVideoLoad = event => {
-    const {
-      height,
-      width
-    } = event.naturalSize;
-    setVideoNaturalSize({
-      height,
-      width
-    });
-    setDisplayPlaceholder(false);
-    // Avoid invisible, paused video on Android, presumably related to
-    // https://github.com/react-native-video/react-native-video/issues/1979
-    videoRef?.current.seek(0);
-  };
-  const onXCoordinateChange = x => onChange({
-    x: (x / 100).toFixed(2)
-  });
-  const onYCoordinateChange = y => onChange({
-    y: (y / 100).toFixed(2)
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: _style.default.container,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_tooltip.default, {
-      onPress: onTooltipPress,
-      visible: tooltipVisible,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [_style.default.media, mediaBackground],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          ...panResponder.panHandlers,
-          onLayout: onMediaLayout,
-          style: _style.default.mediaContainer,
-          children: [!isVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.default, {
-            editButton: false,
-            highlightSelected: false,
-            isSelected: !displayPlaceholder,
-            height: "100%",
-            url: url,
-            style: imagePreviewStyles,
-            onImageDataLoad: onImageDataLoad
-          }), isVideo && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeVideo.default, {
-            muted: true,
-            paused: true,
-            disableFocus: true,
-            onLoad: onVideoLoad,
-            ref: videoRef,
-            resizeMode: "contain",
-            source: {
-              uri: url
-            },
-            style: videoPreviewStyles
-          }), !displayPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Animated.View, {
-            pointerEvents: "none",
-            style: focalPointGroupStyles,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default.Label, {
-              text: (0, _i18n.__)('Drag to adjust focal point'),
-              yOffset: -(FOCAL_POINT_SIZE / 2)
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_focalPoint.default, {
-              height: focalPointStyles.height,
-              style: focalPointStyles,
-              testID: "focal-point-picker-handle",
-              width: focalPointStyles.width
-            })]
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
-        label: (0, _i18n.__)('X-Axis Position'),
-        max: MAX_POSITION_VALUE,
-        min: MIN_POSITION_VALUE,
-        onChange: onXCoordinateChange,
-        unit: "%",
-        units: FOCAL_POINT_UNITS,
-        value: Math.round(focalPoint.x * 100)
-      }, `xAxis-${sliderKey}`), /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
-        label: (0, _i18n.__)('Y-Axis Position'),
-        max: MAX_POSITION_VALUE,
-        min: MIN_POSITION_VALUE,
-        onChange: onYCoordinateChange,
-        unit: "%",
-        units: FOCAL_POINT_UNITS,
-        value: Math.round(focalPoint.y * 100)
-      }, `yAxis-${sliderKey}`)]
-    })
-  });
-}
-var _default = exports.default = FocalPointPicker;
-//# sourceMappingURL=index.native.js.map

package/build/focal-point-picker/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_reactNativeVideo","_interopRequireDefault","_reactNativeBridge","_i18n","_element","_compose","_focalPoint","_tooltip","_style","_utils","_math","_image","_unitControl","_jsxRuntime","MIN_POSITION_VALUE","MAX_POSITION_VALUE","FOCAL_POINT_UNITS","default","label","value","FocalPointPicker","props","focalPoint","onChange","shouldEnableBottomSheetScroll","url","isVideo","isVideoType","containerSize","setContainerSize","useState","sliderKey","setSliderKey","displayPlaceholder","setDisplayPlaceholder","videoNaturalSize","setVideoNaturalSize","tooltipVisible","setTooltipVisible","locationPageOffsetX","useRef","locationPageOffsetY","videoRef","useEffect","requestFocalPointPickerTooltipShown","tooltipShown","setFocalPointPickerTooltipShown","pan","Animated","ValueXY","current","setValue","x","width","y","height","panResponder","useMemo","PanResponder","create","onStartShouldSetPanResponder","onStartShouldSetPanResponderCapture","onMoveShouldSetPanResponder","onMoveShouldSetPanResponderCapture","onPanResponderGrant","event","locationX","locationY","pageX","pageY","nativeEvent","extractOffset","onPanResponderMove","dx","dy","useNativeDriver","onPanResponderRelease","flattenOffset","clamp","toFixed","prevState","mediaBackground","usePreferredColorSchemeStyle","styles","mediaBackgroundDark","imagePreviewStyles","mediaPlaceholder","image","videoPreviewStyles","aspectRatio","opacity","video","focalPointGroupStyles","focalPointGroup","transform","translateX","interpolate","inputRange","outputRange","extrapolate","translateY","FOCAL_POINT_SIZE","focalPointStyles","StyleSheet","flatten","marginLeft","marginTop","onTooltipPress","onMediaLayout","layout","onImageDataLoad","onVideoLoad","naturalSize","seek","onXCoordinateChange","onYCoordinateChange","jsx","View","style","container","children","jsxs","onPress","visible","media","panHandlers","onLayout","mediaContainer","editButton","highlightSelected","isSelected","muted","paused","disableFocus","onLoad","ref","resizeMode","source","uri","pointerEvents","Label","text","__","yOffset","testID","max","min","unit","units","Math","round","_default","exports"],"sources":["@wordpress/components/src/focal-point-picker/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, PanResponder, StyleSheet, View } from 'react-native';\nimport Video from 'react-native-video';\n\n/**\n * WordPress dependencies\n */\nimport {\n\trequestFocalPointPickerTooltipShown,\n\tsetFocalPointPickerTooltipShown,\n} from '@wordpress/react-native-bridge';\nimport { __ } from '@wordpress/i18n';\nimport { useRef, useState, useMemo, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport FocalPoint from './focal-point';\nimport Tooltip from './tooltip';\nimport styles from './style.scss';\nimport { isVideoType } from './utils';\nimport { clamp } from '../utils/math';\nimport Image from '../mobile/image';\nimport UnitControl from '../unit-control';\n\nconst MIN_POSITION_VALUE = 0;\nconst MAX_POSITION_VALUE = 100;\nconst FOCAL_POINT_UNITS = [ { default: 50, label: '%', value: '%' } ];\n\nfunction FocalPointPicker( props ) {\n\tconst { focalPoint, onChange, shouldEnableBottomSheetScroll, url } = props;\n\n\tconst isVideo = isVideoType( url );\n\n\tconst [ containerSize, setContainerSize ] = useState( null );\n\tconst [ sliderKey, setSliderKey ] = useState( 0 );\n\tconst [ displayPlaceholder, setDisplayPlaceholder ] = useState( true );\n\tconst [ videoNaturalSize, setVideoNaturalSize ] = useState( null );\n\tconst [ tooltipVisible, setTooltipVisible ] = useState( false );\n\n\tconst locationPageOffsetX = useRef();\n\tconst locationPageOffsetY = useRef();\n\tconst videoRef = useRef( null );\n\n\tuseEffect( () => {\n\t\trequestFocalPointPickerTooltipShown( ( tooltipShown ) => {\n\t\t\tif ( ! tooltipShown ) {\n\t\t\t\tsetTooltipVisible( true );\n\t\t\t\tsetFocalPointPickerTooltipShown( true );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\t// Animated coordinates for drag handle.\n\tconst pan = useRef( new Animated.ValueXY() ).current;\n\n\t/**\n\t * Set drag handle position anytime focal point coordinates change.\n\t * E.g. initial render, dragging range sliders.\n\t */\n\tuseEffect( () => {\n\t\tif ( containerSize ) {\n\t\t\tpan.setValue( {\n\t\t\t\tx: focalPoint.x * containerSize.width,\n\t\t\t\ty: focalPoint.y * containerSize.height,\n\t\t\t} );\n\t\t}\n\t}, [ focalPoint, containerSize, pan ] );\n\n\t// Pan responder to manage drag handle interactivity.\n\tconst panResponder = useMemo(\n\t\t() =>\n\t\t\tPanResponder.create( {\n\t\t\t\tonStartShouldSetPanResponder: () => true,\n\t\t\t\tonStartShouldSetPanResponderCapture: () => true,\n\t\t\t\tonMoveShouldSetPanResponder: () => true,\n\t\t\t\tonMoveShouldSetPanResponderCapture: () => true,\n\n\t\t\t\tonPanResponderGrant: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( false );\n\t\t\t\t\tconst {\n\t\t\t\t\t\tlocationX: x,\n\t\t\t\t\t\tlocationY: y,\n\t\t\t\t\t\tpageX,\n\t\t\t\t\t\tpageY,\n\t\t\t\t\t} = event.nativeEvent;\n\t\t\t\t\tlocationPageOffsetX.current = pageX - x;\n\t\t\t\t\tlocationPageOffsetY.current = pageY - y;\n\t\t\t\t\tpan.setValue( { x, y } ); // Set cursor to tap location.\n\t\t\t\t\tpan.extractOffset(); // Set offset to current value.\n\t\t\t\t},\n\t\t\t\t// Move cursor to match delta drag.\n\t\t\t\tonPanResponderMove: Animated.event(\n\t\t\t\t\t[ null, { dx: pan.x, dy: pan.y } ],\n\t\t\t\t\t{ useNativeDriver: false }\n\t\t\t\t),\n\t\t\t\tonPanResponderRelease: ( event ) => {\n\t\t\t\t\tshouldEnableBottomSheetScroll( true );\n\t\t\t\t\tpan.flattenOffset(); // Flatten offset into value.\n\t\t\t\t\tconst { pageX, pageY } = event.nativeEvent;\n\t\t\t\t\t// Ideally, x and y below are merely locationX and locationY from the\n\t\t\t\t\t// nativeEvent. However, we are required to compute these relative\n\t\t\t\t\t// coordinates to workaround a bug affecting Android's PanResponder.\n\t\t\t\t\t// Specifically, dragging the handle outside the bounds of the image\n\t\t\t\t\t// results in inaccurate locationX and locationY coordinates to be\n\t\t\t\t\t// reported. https://github.com/facebook/react-native/issues/15290#issuecomment-435494944\n\t\t\t\t\tconst x = pageX - locationPageOffsetX.current;\n\t\t\t\t\tconst y = pageY - locationPageOffsetY.current;\n\t\t\t\t\tonChange( {\n\t\t\t\t\t\tx: clamp( x / containerSize?.width, 0, 1 ).toFixed( 2 ),\n\t\t\t\t\t\ty: clamp( y / containerSize?.height, 0, 1 ).toFixed(\n\t\t\t\t\t\t\t2\n\t\t\t\t\t\t),\n\t\t\t\t\t} );\n\t\t\t\t\t// Slider (child of RangeCell) is uncontrolled, so we must increment a\n\t\t\t\t\t// key to re-mount and sync the pan gesture values to the sliders\n\t\t\t\t\t// https://github.com/callstack/react-native-slider/tree/v3.0.3#value\n\t\t\t\t\tsetSliderKey( ( prevState ) => prevState + 1 );\n\t\t\t\t},\n\t\t\t} ),\n\t\t[ containerSize, pan, onChange, shouldEnableBottomSheetScroll ]\n\t);\n\n\tconst mediaBackground = usePreferredColorSchemeStyle(\n\t\tstyles.mediaBackground,\n\t\tstyles.mediaBackgroundDark\n\t);\n\tconst imagePreviewStyles = [\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t\tstyles.image,\n\t];\n\tconst videoPreviewStyles = [\n\t\t{\n\t\t\taspectRatio:\n\t\t\t\tvideoNaturalSize &&\n\t\t\t\tvideoNaturalSize.width / videoNaturalSize.height,\n\t\t\t// Hide Video component since it has black background while loading the source\n\t\t\topacity: displayPlaceholder ? 0 : 1,\n\t\t},\n\t\tstyles.video,\n\t\tdisplayPlaceholder && styles.mediaPlaceholder,\n\t];\n\tconst focalPointGroupStyles = [\n\t\tstyles.focalPointGroup,\n\t\t{\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX: pan.x.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.width || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY: pan.y.interpolate( {\n\t\t\t\t\t\tinputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\toutputRange: [ 0, containerSize?.height || 0 ],\n\t\t\t\t\t\textrapolate: 'clamp',\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t];\n\tconst FOCAL_POINT_SIZE = 50;\n\tconst focalPointStyles = StyleSheet.flatten( [\n\t\tstyles.focalPoint,\n\t\t{\n\t\t\theight: FOCAL_POINT_SIZE,\n\t\t\tmarginLeft: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\tmarginTop: -( FOCAL_POINT_SIZE / 2 ),\n\t\t\twidth: FOCAL_POINT_SIZE,\n\t\t},\n\t] );\n\n\tconst onTooltipPress = () => setTooltipVisible( false );\n\tconst onMediaLayout = ( event ) => {\n\t\tconst { height, width } = event.nativeEvent.layout;\n\n\t\tif (\n\t\t\twidth !== 0 &&\n\t\t\theight !== 0 &&\n\t\t\t( containerSize?.width !== width ||\n\t\t\t\tcontainerSize?.height !== height )\n\t\t) {\n\t\t\tsetContainerSize( { width, height } );\n\t\t}\n\t};\n\tconst onImageDataLoad = () => setDisplayPlaceholder( false );\n\tconst onVideoLoad = ( event ) => {\n\t\tconst { height, width } = event.naturalSize;\n\t\tsetVideoNaturalSize( { height, width } );\n\t\tsetDisplayPlaceholder( false );\n\t\t// Avoid invisible, paused video on Android, presumably related to\n\t\t// https://github.com/react-native-video/react-native-video/issues/1979\n\t\tvideoRef?.current.seek( 0 );\n\t};\n\tconst onXCoordinateChange = ( x ) =>\n\t\tonChange( { x: ( x / 100 ).toFixed( 2 ) } );\n\tconst onYCoordinateChange = ( y ) =>\n\t\tonChange( { y: ( y / 100 ).toFixed( 2 ) } );\n\n\treturn (\n\t\t<View style={ styles.container }>\n\t\t\t<Tooltip onPress={ onTooltipPress } visible={ tooltipVisible }>\n\t\t\t\t<View style={ [ styles.media, mediaBackground ] }>\n\t\t\t\t\t<View\n\t\t\t\t\t\t{ ...panResponder.panHandlers }\n\t\t\t\t\t\tonLayout={ onMediaLayout }\n\t\t\t\t\t\tstyle={ styles.mediaContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isVideo && (\n\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\teditButton={ false }\n\t\t\t\t\t\t\t\thighlightSelected={ false }\n\t\t\t\t\t\t\t\tisSelected={ ! displayPlaceholder }\n\t\t\t\t\t\t\t\theight=\"100%\"\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t\tstyle={ imagePreviewStyles }\n\t\t\t\t\t\t\t\tonImageDataLoad={ onImageDataLoad }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isVideo && (\n\t\t\t\t\t\t\t<Video\n\t\t\t\t\t\t\t\tmuted\n\t\t\t\t\t\t\t\tpaused\n\t\t\t\t\t\t\t\tdisableFocus\n\t\t\t\t\t\t\t\tonLoad={ onVideoLoad }\n\t\t\t\t\t\t\t\tref={ videoRef }\n\t\t\t\t\t\t\t\tresizeMode=\"contain\"\n\t\t\t\t\t\t\t\tsource={ { uri: url } }\n\t\t\t\t\t\t\t\tstyle={ videoPreviewStyles }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! displayPlaceholder && (\n\t\t\t\t\t\t\t<Animated.View\n\t\t\t\t\t\t\t\tpointerEvents=\"none\"\n\t\t\t\t\t\t\t\tstyle={ focalPointGroupStyles }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Tooltip.Label\n\t\t\t\t\t\t\t\t\ttext={ __( 'Drag to adjust focal point' ) }\n\t\t\t\t\t\t\t\t\tyOffset={ -( FOCAL_POINT_SIZE / 2 ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<FocalPoint\n\t\t\t\t\t\t\t\t\theight={ focalPointStyles.height }\n\t\t\t\t\t\t\t\t\tstyle={ focalPointStyles }\n\t\t\t\t\t\t\t\t\ttestID=\"focal-point-picker-handle\"\n\t\t\t\t\t\t\t\t\twidth={ focalPointStyles.width }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Animated.View>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</View>\n\t\t\t\t</View>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `xAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'X-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onXCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.x * 100 ) }\n\t\t\t\t/>\n\t\t\t\t<UnitControl\n\t\t\t\t\tkey={ `yAxis-${ sliderKey }` }\n\t\t\t\t\tlabel={ __( 'Y-Axis Position' ) }\n\t\t\t\t\tmax={ MAX_POSITION_VALUE }\n\t\t\t\t\tmin={ MIN_POSITION_VALUE }\n\t\t\t\t\tonChange={ onYCoordinateChange }\n\t\t\t\t\tunit=\"%\"\n\t\t\t\t\tunits={ FOCAL_POINT_UNITS }\n\t\t\t\t\tvalue={ Math.round( focalPoint.y * 100 ) }\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t</View>\n\t);\n}\n\nexport default FocalPointPicker;\n"],"mappings":";;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,kBAAA,GAAAH,OAAA;AAIA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AACA,IAAAM,QAAA,GAAAN,OAAA;AAKA,IAAAO,WAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,QAAA,GAAAN,sBAAA,CAAAF,OAAA;AACA,IAAAS,MAAA,GAAAP,sBAAA,CAAAF,OAAA;AACA,IAAAU,MAAA,GAAAV,OAAA;AACA,IAAAW,KAAA,GAAAX,OAAA;AACA,IAAAY,MAAA,GAAAV,sBAAA,CAAAF,OAAA;AACA,IAAAa,YAAA,GAAAX,sBAAA,CAAAF,OAAA;AAA0C,IAAAc,WAAA,GAAAd,OAAA;AA1B1C;AACA;AACA;;AAIA;AACA;AACA;;AASA;AACA;AACA;;AASA,MAAMe,kBAAkB,GAAG,CAAC;AAC5B,MAAMC,kBAAkB,GAAG,GAAG;AAC9B,MAAMC,iBAAiB,GAAG,CAAE;EAAEC,OAAO,EAAE,EAAE;EAAEC,KAAK,EAAE,GAAG;EAAEC,KAAK,EAAE;AAAI,CAAC,CAAE;AAErE,SAASC,gBAAgBA,CAAEC,KAAK,EAAG;EAClC,MAAM;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,6BAA6B;IAAEC;EAAI,CAAC,GAAGJ,KAAK;EAE1E,MAAMK,OAAO,GAAG,IAAAC,kBAAW,EAAEF,GAAI,CAAC;EAElC,MAAM,CAAEG,aAAa,EAAEC,gBAAgB,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAC5D,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAF,iBAAQ,EAAE,CAAE,CAAC;EACjD,MAAM,CAAEG,kBAAkB,EAAEC,qBAAqB,CAAE,GAAG,IAAAJ,iBAAQ,EAAE,IAAK,CAAC;EACtE,MAAM,CAAEK,gBAAgB,EAAEC,mBAAmB,CAAE,GAAG,IAAAN,iBAAQ,EAAE,IAAK,CAAC;EAClE,MAAM,CAAEO,cAAc,EAAEC,iBAAiB,CAAE,GAAG,IAAAR,iBAAQ,EAAE,KAAM,CAAC;EAE/D,MAAMS,mBAAmB,GAAG,IAAAC,eAAM,EAAC,CAAC;EACpC,MAAMC,mBAAmB,GAAG,IAAAD,eAAM,EAAC,CAAC;EACpC,MAAME,QAAQ,GAAG,IAAAF,eAAM,EAAE,IAAK,CAAC;EAE/B,IAAAG,kBAAS,EAAE,MAAM;IAChB,IAAAC,sDAAmC,EAAIC,YAAY,IAAM;MACxD,IAAK,CAAEA,YAAY,EAAG;QACrBP,iBAAiB,CAAE,IAAK,CAAC;QACzB,IAAAQ,kDAA+B,EAAE,IAAK,CAAC;MACxC;IACD,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,MAAMC,GAAG,GAAG,IAAAP,eAAM,EAAE,IAAIQ,qBAAQ,CAACC,OAAO,CAAC,CAAE,CAAC,CAACC,OAAO;;EAEpD;AACD;AACA;AACA;EACC,IAAAP,kBAAS,EAAE,MAAM;IAChB,IAAKf,aAAa,EAAG;MACpBmB,GAAG,CAACI,QAAQ,CAAE;QACbC,CAAC,EAAE9B,UAAU,CAAC8B,CAAC,GAAGxB,aAAa,CAACyB,KAAK;QACrCC,CAAC,EAAEhC,UAAU,CAACgC,CAAC,GAAG1B,aAAa,CAAC2B;MACjC,CAAE,CAAC;IACJ;EACD,CAAC,EAAE,CAAEjC,UAAU,EAAEM,aAAa,EAAEmB,GAAG,CAAG,CAAC;;EAEvC;EACA,MAAMS,YAAY,GAAG,IAAAC,gBAAO,EAC3B,MACCC,yBAAY,CAACC,MAAM,CAAE;IACpBC,4BAA4B,EAAEA,CAAA,KAAM,IAAI;IACxCC,mCAAmC,EAAEA,CAAA,KAAM,IAAI;IAC/CC,2BAA2B,EAAEA,CAAA,KAAM,IAAI;IACvCC,kCAAkC,EAAEA,CAAA,KAAM,IAAI;IAE9CC,mBAAmB,EAAIC,KAAK,IAAM;MACjCzC,6BAA6B,CAAE,KAAM,CAAC;MACtC,MAAM;QACL0C,SAAS,EAAEd,CAAC;QACZe,SAAS,EAAEb,CAAC;QACZc,KAAK;QACLC;MACD,CAAC,GAAGJ,KAAK,CAACK,WAAW;MACrB/B,mBAAmB,CAACW,OAAO,GAAGkB,KAAK,GAAGhB,CAAC;MACvCX,mBAAmB,CAACS,OAAO,GAAGmB,KAAK,GAAGf,CAAC;MACvCP,GAAG,CAACI,QAAQ,CAAE;QAAEC,CAAC;QAAEE;MAAE,CAAE,CAAC,CAAC,CAAC;MAC1BP,GAAG,CAACwB,aAAa,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC;IACD;IACAC,kBAAkB,EAAExB,qBAAQ,CAACiB,KAAK,CACjC,CAAE,IAAI,EAAE;MAAEQ,EAAE,EAAE1B,GAAG,CAACK,CAAC;MAAEsB,EAAE,EAAE3B,GAAG,CAACO;IAAE,CAAC,CAAE,EAClC;MAAEqB,eAAe,EAAE;IAAM,CAC1B,CAAC;IACDC,qBAAqB,EAAIX,KAAK,IAAM;MACnCzC,6BAA6B,CAAE,IAAK,CAAC;MACrCuB,GAAG,CAAC8B,aAAa,CAAC,CAAC,CAAC,CAAC;MACrB,MAAM;QAAET,KAAK;QAAEC;MAAM,CAAC,GAAGJ,KAAK,CAACK,WAAW;MAC1C;MACA;MACA;MACA;MACA;MACA;MACA,MAAMlB,CAAC,GAAGgB,KAAK,GAAG7B,mBAAmB,CAACW,OAAO;MAC7C,MAAMI,CAAC,GAAGe,KAAK,GAAG5B,mBAAmB,CAACS,OAAO;MAC7C3B,QAAQ,CAAE;QACT6B,CAAC,EAAE,IAAA0B,WAAK,EAAE1B,CAAC,GAAGxB,aAAa,EAAEyB,KAAK,EAAE,CAAC,EAAE,CAAE,CAAC,CAAC0B,OAAO,CAAE,CAAE,CAAC;QACvDzB,CAAC,EAAE,IAAAwB,WAAK,EAAExB,CAAC,GAAG1B,aAAa,EAAE2B,MAAM,EAAE,CAAC,EAAE,CAAE,CAAC,CAACwB,OAAO,CAClD,CACD;MACD,CAAE,CAAC;MACH;MACA;MACA;MACA/C,YAAY,CAAIgD,SAAS,IAAMA,SAAS,GAAG,CAAE,CAAC;IAC/C;EACD,CAAE,CAAC,EACJ,CAAEpD,aAAa,EAAEmB,GAAG,EAAExB,QAAQ,EAAEC,6BAA6B,CAC9D,CAAC;EAED,MAAMyD,eAAe,GAAG,IAAAC,qCAA4B,EACnDC,cAAM,CAACF,eAAe,EACtBE,cAAM,CAACC,mBACR,CAAC;EACD,MAAMC,kBAAkB,GAAG,CAC1BpD,kBAAkB,IAAIkD,cAAM,CAACG,gBAAgB,EAC7CH,cAAM,CAACI,KAAK,CACZ;EACD,MAAMC,kBAAkB,GAAG,CAC1B;IACCC,WAAW,EACVtD,gBAAgB,IAChBA,gBAAgB,CAACkB,KAAK,GAAGlB,gBAAgB,CAACoB,MAAM;IACjD;IACAmC,OAAO,EAAEzD,kBAAkB,GAAG,CAAC,GAAG;EACnC,CAAC,EACDkD,cAAM,CAACQ,KAAK,EACZ1D,kBAAkB,IAAIkD,cAAM,CAACG,gBAAgB,CAC7C;EACD,MAAMM,qBAAqB,GAAG,CAC7BT,cAAM,CAACU,eAAe,EACtB;IACCC,SAAS,EAAE,CACV;MACCC,UAAU,EAAEhD,GAAG,CAACK,CAAC,CAAC4C,WAAW,CAAE;QAC9BC,UAAU,EAAE,CAAE,CAAC,EAAErE,aAAa,EAAEyB,KAAK,IAAI,CAAC,CAAE;QAC5C6C,WAAW,EAAE,CAAE,CAAC,EAAEtE,aAAa,EAAEyB,KAAK,IAAI,CAAC,CAAE;QAC7C8C,WAAW,EAAE;MACd,CAAE;IACH,CAAC,EACD;MACCC,UAAU,EAAErD,GAAG,CAACO,CAAC,CAAC0C,WAAW,CAAE;QAC9BC,UAAU,EAAE,CAAE,CAAC,EAAErE,aAAa,EAAE2B,MAAM,IAAI,CAAC,CAAE;QAC7C2C,WAAW,EAAE,CAAE,CAAC,EAAEtE,aAAa,EAAE2B,MAAM,IAAI,CAAC,CAAE;QAC9C4C,WAAW,EAAE;MACd,CAAE;IACH,CAAC;EAEH,CAAC,CACD;EACD,MAAME,gBAAgB,GAAG,EAAE;EAC3B,MAAMC,gBAAgB,GAAGC,uBAAU,CAACC,OAAO,CAAE,CAC5CrB,cAAM,CAAC7D,UAAU,EACjB;IACCiC,MAAM,EAAE8C,gBAAgB;IACxBI,UAAU,EAAE,EAAGJ,gBAAgB,GAAG,CAAC,CAAE;IACrCK,SAAS,EAAE,EAAGL,gBAAgB,GAAG,CAAC,CAAE;IACpChD,KAAK,EAAEgD;EACR,CAAC,CACA,CAAC;EAEH,MAAMM,cAAc,GAAGA,CAAA,KAAMrE,iBAAiB,CAAE,KAAM,CAAC;EACvD,MAAMsE,aAAa,GAAK3C,KAAK,IAAM;IAClC,MAAM;MAAEV,MAAM;MAAEF;IAAM,CAAC,GAAGY,KAAK,CAACK,WAAW,CAACuC,MAAM;IAElD,IACCxD,KAAK,KAAK,CAAC,IACXE,MAAM,KAAK,CAAC,KACV3B,aAAa,EAAEyB,KAAK,KAAKA,KAAK,IAC/BzB,aAAa,EAAE2B,MAAM,KAAKA,MAAM,CAAE,EAClC;MACD1B,gBAAgB,CAAE;QAAEwB,KAAK;QAAEE;MAAO,CAAE,CAAC;IACtC;EACD,CAAC;EACD,MAAMuD,eAAe,GAAGA,CAAA,KAAM5E,qBAAqB,CAAE,KAAM,CAAC;EAC5D,MAAM6E,WAAW,GAAK9C,KAAK,IAAM;IAChC,MAAM;MAAEV,MAAM;MAAEF;IAAM,CAAC,GAAGY,KAAK,CAAC+C,WAAW;IAC3C5E,mBAAmB,CAAE;MAAEmB,MAAM;MAAEF;IAAM,CAAE,CAAC;IACxCnB,qBAAqB,CAAE,KAAM,CAAC;IAC9B;IACA;IACAQ,QAAQ,EAAEQ,OAAO,CAAC+D,IAAI,CAAE,CAAE,CAAC;EAC5B,CAAC;EACD,MAAMC,mBAAmB,GAAK9D,CAAC,IAC9B7B,QAAQ,CAAE;IAAE6B,CAAC,EAAE,CAAEA,CAAC,GAAG,GAAG,EAAG2B,OAAO,CAAE,CAAE;EAAE,CAAE,CAAC;EAC5C,MAAMoC,mBAAmB,GAAK7D,CAAC,IAC9B/B,QAAQ,CAAE;IAAE+B,CAAC,EAAE,CAAEA,CAAC,GAAG,GAAG,EAAGyB,OAAO,CAAE,CAAE;EAAE,CAAE,CAAC;EAE5C,oBACC,IAAAlE,WAAA,CAAAuG,GAAA,EAACtH,YAAA,CAAAuH,IAAI;IAACC,KAAK,EAAGnC,cAAM,CAACoC,SAAW;IAAAC,QAAA,eAC/B,IAAA3G,WAAA,CAAA4G,IAAA,EAAClH,QAAA,CAAAU,OAAO;MAACyG,OAAO,EAAGf,cAAgB;MAACgB,OAAO,EAAGtF,cAAgB;MAAAmF,QAAA,gBAC7D,IAAA3G,WAAA,CAAAuG,GAAA,EAACtH,YAAA,CAAAuH,IAAI;QAACC,KAAK,EAAG,CAAEnC,cAAM,CAACyC,KAAK,EAAE3C,eAAe,CAAI;QAAAuC,QAAA,eAChD,IAAA3G,WAAA,CAAA4G,IAAA,EAAC3H,YAAA,CAAAuH,IAAI;UAAA,GACC7D,YAAY,CAACqE,WAAW;UAC7BC,QAAQ,EAAGlB,aAAe;UAC1BU,KAAK,EAAGnC,cAAM,CAAC4C,cAAgB;UAAAP,QAAA,GAE7B,CAAE9F,OAAO,iBACV,IAAAb,WAAA,CAAAuG,GAAA,EAACzG,MAAA,CAAAM,OAAK;YACL+G,UAAU,EAAG,KAAO;YACpBC,iBAAiB,EAAG,KAAO;YAC3BC,UAAU,EAAG,CAAEjG,kBAAoB;YACnCsB,MAAM,EAAC,MAAM;YACb9B,GAAG,EAAGA,GAAK;YACX6F,KAAK,EAAGjC,kBAAoB;YAC5ByB,eAAe,EAAGA;UAAiB,CACnC,CACD,EACCpF,OAAO,iBACR,IAAAb,WAAA,CAAAuG,GAAA,EAACpH,iBAAA,CAAAiB,OAAK;YACLkH,KAAK;YACLC,MAAM;YACNC,YAAY;YACZC,MAAM,EAAGvB,WAAa;YACtBwB,GAAG,EAAG7F,QAAU;YAChB8F,UAAU,EAAC,SAAS;YACpBC,MAAM,EAAG;cAAEC,GAAG,EAAEjH;YAAI,CAAG;YACvB6F,KAAK,EAAG9B;UAAoB,CAC5B,CACD,EACC,CAAEvD,kBAAkB,iBACrB,IAAApB,WAAA,CAAA4G,IAAA,EAAC3H,YAAA,CAAAkD,QAAQ,CAACqE,IAAI;YACbsB,aAAa,EAAC,MAAM;YACpBrB,KAAK,EAAG1B,qBAAuB;YAAA4B,QAAA,gBAE/B,IAAA3G,WAAA,CAAAuG,GAAA,EAAC7G,QAAA,CAAAU,OAAO,CAAC2H,KAAK;cACbC,IAAI,EAAG,IAAAC,QAAE,EAAE,4BAA6B,CAAG;cAC3CC,OAAO,EAAG,EAAG1C,gBAAgB,GAAG,CAAC;YAAI,CACrC,CAAC,eACF,IAAAxF,WAAA,CAAAuG,GAAA,EAAC9G,WAAA,CAAAW,OAAU;cACVsC,MAAM,EAAG+C,gBAAgB,CAAC/C,MAAQ;cAClC+D,KAAK,EAAGhB,gBAAkB;cAC1B0C,MAAM,EAAC,2BAA2B;cAClC3F,KAAK,EAAGiD,gBAAgB,CAACjD;YAAO,CAChC,CAAC;UAAA,CACY,CACf;QAAA,CACI;MAAC,CACF,CAAC,eACP,IAAAxC,WAAA,CAAAuG,GAAA,EAACxG,YAAA,CAAAK,OAAW;QAEXC,KAAK,EAAG,IAAA4H,QAAE,EAAE,iBAAkB,CAAG;QACjCG,GAAG,EAAGlI,kBAAoB;QAC1BmI,GAAG,EAAGpI,kBAAoB;QAC1BS,QAAQ,EAAG2F,mBAAqB;QAChCiC,IAAI,EAAC,GAAG;QACRC,KAAK,EAAGpI,iBAAmB;QAC3BG,KAAK,EAAGkI,IAAI,CAACC,KAAK,CAAEhI,UAAU,CAAC8B,CAAC,GAAG,GAAI;MAAG,GAPpC,SAAUrB,SAAS,EAQzB,CAAC,eACF,IAAAlB,WAAA,CAAAuG,GAAA,EAACxG,YAAA,CAAAK,OAAW;QAEXC,KAAK,EAAG,IAAA4H,QAAE,EAAE,iBAAkB,CAAG;QACjCG,GAAG,EAAGlI,kBAAoB;QAC1BmI,GAAG,EAAGpI,kBAAoB;QAC1BS,QAAQ,EAAG4F,mBAAqB;QAChCgC,IAAI,EAAC,GAAG;QACRC,KAAK,EAAGpI,iBAAmB;QAC3BG,KAAK,EAAGkI,IAAI,CAACC,KAAK,CAAEhI,UAAU,CAACgC,CAAC,GAAG,GAAI;MAAG,GAPpC,SAAUvB,SAAS,EAQzB,CAAC;IAAA,CACM;EAAC,CACL,CAAC;AAET;AAAC,IAAAwH,QAAA,GAAAC,OAAA,CAAAvI,OAAA,GAEcG,gBAAgB","ignoreList":[]}

package/build/focal-point-picker/tooltip/index.native.js

@@ -1,138 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _element = require("@wordpress/element");
-var _style = _interopRequireDefault(require("./style.scss"));
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const TooltipContext = (0, _element.createContext)();
-function Tooltip({
-  children,
-  onPress,
-  style,
-  visible
-}) {
-  const panResponder = (0, _element.useRef)(_reactNative.PanResponder.create({
-    /**
-     * To allow dimissing the tooltip on press while also avoiding blocking
-     * interactivity within the child context, we place this `onPress` side
-     * effect within the `onStartShouldSetPanResponderCapture` callback.
-     *
-     * This is a bit unorthodox, but may be the simplest approach to achieving
-     * this outcome. This is effectively a gesture responder that never
-     * becomes the controlling responder. https://bit.ly/2J3ugKF
-     */
-    onStartShouldSetPanResponderCapture: () => {
-      if (onPress) {
-        onPress();
-      }
-      return false;
-    }
-  })).current;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipContext.Provider, {
-    value: visible,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      ...(visible ? panResponder.panHandlers : {}),
-      style: style,
-      children: children
-    })
-  });
-}
-function Label({
-  align = 'center',
-  text,
-  xOffset = 0,
-  yOffset = 0
-}) {
-  const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
-  const [dimensions, setDimensions] = (0, _element.useState)(null);
-  const visible = (0, _element.useContext)(TooltipContext);
-  if (typeof visible === 'undefined') {
-    throw new Error('Tooltip.Label cannot be rendered outside of the Tooltip component');
-  }
-  (0, _element.useEffect)(() => {
-    const startAnimation = () => {
-      _reactNative.Animated.timing(animationValue, {
-        toValue: visible ? 1 : 0,
-        duration: visible ? 300 : 150,
-        useNativeDriver: true,
-        delay: visible ? 500 : 0,
-        easing: _reactNative.Easing.out(_reactNative.Easing.quad)
-      }).start();
-    };
-    startAnimation();
-  }, [animationValue, visible]);
-
-  // Transforms rely upon onLayout to enable custom offsets additions.
-  let tooltipTransforms;
-  if (dimensions) {
-    tooltipTransforms = [{
-      translateX: (align === 'center' ? -dimensions.width / 2 : 0) + xOffset
-    }, {
-      translateY: -dimensions.height + yOffset
-    }];
-  }
-  const tooltipStyles = [_style.default.tooltip, {
-    shadowColor: _style.default.tooltipShadow?.color,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 2,
-    elevation: 2,
-    transform: tooltipTransforms
-  }, align === 'left' && _style.default.tooltipLeftAlign];
-  const arrowStyles = [_style.default.arrow, align === 'left' && _style.default.arrowLeftAlign];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: {
-      opacity: animationValue,
-      transform: [{
-        translateY: animationValue.interpolate({
-          inputRange: [0, 1],
-          outputRange: [visible ? 4 : -8, -8]
-        })
-      }]
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      onLayout: ({
-        nativeEvent
-      }) => {
-        const {
-          height,
-          width
-        } = nativeEvent.layout;
-        setDimensions({
-          height,
-          width
-        });
-      },
-      style: tooltipStyles,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: _style.default.text,
-        children: text
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: arrowStyles
-      })]
-    })
-  });
-}
-Tooltip.Label = Label;
-var _default = exports.default = Tooltip;
-//# sourceMappingURL=index.native.js.map

package/build/focal-point-picker/tooltip/index.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_element","_style","_interopRequireDefault","_jsxRuntime","TooltipContext","createContext","Tooltip","children","onPress","style","visible","panResponder","useRef","PanResponder","create","onStartShouldSetPanResponderCapture","current","jsx","Provider","value","View","panHandlers","Label","align","text","xOffset","yOffset","animationValue","Animated","Value","dimensions","setDimensions","useState","useContext","Error","useEffect","startAnimation","timing","toValue","duration","useNativeDriver","delay","easing","Easing","out","quad","start","tooltipTransforms","translateX","width","translateY","height","tooltipStyles","styles","tooltip","shadowColor","tooltipShadow","color","shadowOffset","shadowOpacity","shadowRadius","elevation","transform","tooltipLeftAlign","arrowStyles","arrow","arrowLeftAlign","opacity","interpolate","inputRange","outputRange","jsxs","onLayout","nativeEvent","layout","Text","_default","exports","default"],"sources":["@wordpress/components/src/focal-point-picker/tooltip/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Animated, Easing, PanResponder, Text, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst TooltipContext = createContext();\n\nfunction Tooltip( { children, onPress, style, visible } ) {\n\tconst panResponder = useRef(\n\t\tPanResponder.create( {\n\t\t\t/**\n\t\t\t * To allow dimissing the tooltip on press while also avoiding blocking\n\t\t\t * interactivity within the child context, we place this `onPress` side\n\t\t\t * effect within the `onStartShouldSetPanResponderCapture` callback.\n\t\t\t *\n\t\t\t * This is a bit unorthodox, but may be the simplest approach to achieving\n\t\t\t * this outcome. This is effectively a gesture responder that never\n\t\t\t * becomes the controlling responder. https://bit.ly/2J3ugKF\n\t\t\t */\n\t\t\tonStartShouldSetPanResponderCapture: () => {\n\t\t\t\tif ( onPress ) {\n\t\t\t\t\tonPress();\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t} )\n\t).current;\n\n\treturn (\n\t\t<TooltipContext.Provider value={ visible }>\n\t\t\t<View\n\t\t\t\t{ ...( visible ? panResponder.panHandlers : {} ) }\n\t\t\t\tstyle={ style }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t</TooltipContext.Provider>\n\t);\n}\n\nfunction Label( { align = 'center', text, xOffset = 0, yOffset = 0 } ) {\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst [ dimensions, setDimensions ] = useState( null );\n\tconst visible = useContext( TooltipContext );\n\n\tif ( typeof visible === 'undefined' ) {\n\t\tthrow new Error(\n\t\t\t'Tooltip.Label cannot be rendered outside of the Tooltip component'\n\t\t);\n\t}\n\n\tuseEffect( () => {\n\t\tconst startAnimation = () => {\n\t\t\tAnimated.timing( animationValue, {\n\t\t\t\ttoValue: visible ? 1 : 0,\n\t\t\t\tduration: visible ? 300 : 150,\n\t\t\t\tuseNativeDriver: true,\n\t\t\t\tdelay: visible ? 500 : 0,\n\t\t\t\teasing: Easing.out( Easing.quad ),\n\t\t\t} ).start();\n\t\t};\n\t\tstartAnimation();\n\t}, [ animationValue, visible ] );\n\n\t// Transforms rely upon onLayout to enable custom offsets additions.\n\tlet tooltipTransforms;\n\tif ( dimensions ) {\n\t\ttooltipTransforms = [\n\t\t\t{\n\t\t\t\ttranslateX:\n\t\t\t\t\t( align === 'center' ? -dimensions.width / 2 : 0 ) +\n\t\t\t\t\txOffset,\n\t\t\t},\n\t\t\t{ translateY: -dimensions.height + yOffset },\n\t\t];\n\t}\n\n\tconst tooltipStyles = [\n\t\tstyles.tooltip,\n\t\t{\n\t\t\tshadowColor: styles.tooltipShadow?.color,\n\t\t\tshadowOffset: {\n\t\t\t\twidth: 0,\n\t\t\t\theight: 2,\n\t\t\t},\n\t\t\tshadowOpacity: 0.25,\n\t\t\tshadowRadius: 2,\n\t\t\televation: 2,\n\t\t\ttransform: tooltipTransforms,\n\t\t},\n\t\talign === 'left' && styles.tooltipLeftAlign,\n\t];\n\tconst arrowStyles = [\n\t\tstyles.arrow,\n\t\talign === 'left' && styles.arrowLeftAlign,\n\t];\n\n\treturn (\n\t\t<Animated.View\n\t\t\tstyle={ {\n\t\t\t\topacity: animationValue,\n\t\t\t\ttransform: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\toutputRange: [ visible ? 4 : -8, -8 ],\n\t\t\t\t\t\t} ),\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t} }\n\t\t>\n\t\t\t<View\n\t\t\t\tonLayout={ ( { nativeEvent } ) => {\n\t\t\t\t\tconst { height, width } = nativeEvent.layout;\n\t\t\t\t\tsetDimensions( { height, width } );\n\t\t\t\t} }\n\t\t\t\tstyle={ tooltipStyles }\n\t\t\t>\n\t\t\t\t<Text style={ styles.text }>{ text }</Text>\n\t\t\t\t<View style={ arrowStyles } />\n\t\t\t</View>\n\t\t</Animated.View>\n\t);\n}\n\nTooltip.Label = Label;\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

package/build/font-size-picker/index.native.js

@@ -1,162 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _native = require("@react-navigation/native");
-var _element = require("@wordpress/element");
-var _icons = require("@wordpress/icons");
-var _i18n = require("@wordpress/i18n");
-var _getPxFromCssUnit = _interopRequireDefault(require("../mobile/utils/get-px-from-css-unit"));
-var _unitControl = _interopRequireWildcard(require("../unit-control"));
-var _style = _interopRequireDefault(require("./style.scss"));
-var _bottomSheet = _interopRequireDefault(require("../mobile/bottom-sheet"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const DEFAULT_FONT_SIZE = 16;
-function FontSizePicker({
-  fontSizes = [],
-  disableCustomFontSizes = false,
-  onChange,
-  value: selectedValue
-}) {
-  var _fontSizes$find;
-  const [showSubSheet, setShowSubSheet] = (0, _element.useState)(false);
-  const navigation = (0, _native.useNavigation)();
-  const {
-    height,
-    width
-  } = (0, _reactNative.useWindowDimensions)();
-  const cssUnitOptions = {
-    height,
-    width,
-    fontSize: DEFAULT_FONT_SIZE
-  };
-  // We need to always convert to px units because the selected value
-  // could be coming from the web where it could be stored as a different unit.
-  const selectedPxValue = (0, _getPxFromCssUnit.default)(selectedValue, cssUnitOptions);
-  const onChangeValue = value => {
-    return () => {
-      goBack();
-      onChange(value);
-    };
-  };
-  const selectedOption = (_fontSizes$find = fontSizes.find(option => option.sizePx === selectedPxValue)) !== null && _fontSizes$find !== void 0 ? _fontSizes$find : {
-    name: 'Custom'
-  };
-  const goBack = () => {
-    setShowSubSheet(false);
-    navigation.goBack();
-  };
-  const openSubSheet = () => {
-    navigation.navigate(_bottomSheet.default.SubSheet.screenName);
-    setShowSubSheet(true);
-  };
-  const label = (0, _i18n.__)('Font Size');
-  const units = (0, _unitControl.useCustomUnits)({
-    availableUnits: ['px', 'em', 'rem', 'vw', 'vh']
-  });
-  const accessibilityLabel = (0, _i18n.sprintf)(
-  // translators: %s: Font size name e.g. Small
-  (0, _i18n.__)('Font Size, %s'), selectedOption.name);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.SubSheet, {
-    navigationButton: /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
-      label: label,
-      separatorType: "none",
-      value: selectedValue ? (0, _i18n.sprintf)(
-      // translators: 1: Select control font size name e.g. Small. 2: Select control font size e.g. 12px
-      (0, _i18n._x)('%1$s (%2$s)', 'font size'), selectedOption.name, selectedPxValue) : (0, _i18n.__)('Default'),
-      onPress: openSubSheet,
-      accessibilityRole: "button",
-      accessibilityLabel: accessibilityLabel,
-      accessibilityHint: (0, _i18n.sprintf)(
-      // translators: %s: Select control button label e.g. "Button width"
-      (0, _i18n.__)('Navigates to select %s'), selectedOption.name),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-        icon: _icons.chevronRight
-      })
-    }),
-    showSheet: showSubSheet,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_bottomSheet.default.NavBar, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.NavBar.BackButton, {
-          onPress: goBack
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.NavBar.Heading, {
-          children: label
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: _style.default['components-font-size-picker'],
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
-          customActionButton: true,
-          separatorType: "none",
-          label: (0, _i18n.__)('Default'),
-          onPress: onChangeValue(undefined),
-          leftAlign: true,
-          accessibilityRole: "button",
-          accessibilityLabel: (0, _i18n.__)('Selected: Default'),
-          accessibilityHint: (0, _i18n.__)('Double tap to select default font size'),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            children: selectedValue === undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-              icon: _icons.check
-            })
-          })
-        }, "default"), fontSizes.map((item, index) => {
-          // Only display a choice that we can currently select.
-          if (!parseFloat(item.sizePx)) {
-            return null;
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.default.Cell, {
-            customActionButton: true,
-            separatorType: "none",
-            label: item.name,
-            subLabel: item.sizePx,
-            onPress: onChangeValue(item.sizePx),
-            leftAlign: true,
-            accessibilityRole: "button",
-            accessibilityLabel: item.sizePx === selectedValue ? (0, _i18n.sprintf)(
-            // translators: %s: The selected option.
-            (0, _i18n.__)('Selected: %s'), item.name) : item.name,
-            accessibilityHint: (0, _i18n.__)('Double tap to select font size'),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              children: item.sizePx === selectedPxValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                icon: _icons.check
-              })
-            })
-          }, index);
-        }), !disableCustomFontSizes && /*#__PURE__*/(0, _jsxRuntime.jsx)(_unitControl.default, {
-          label: (0, _i18n.__)('Custom'),
-          min: 0,
-          max: 200,
-          step: 1,
-          value: selectedValue,
-          onChange: nextSize => {
-            if (0 === parseFloat(nextSize) || !nextSize) {
-              onChange(undefined);
-            } else {
-              onChange(nextSize);
-            }
-          },
-          units: units
-        })]
-      })]
-    })
-  });
-}
-var _default = exports.default = FontSizePicker;
-//# sourceMappingURL=index.native.js.map