@wordpress/block-editor 8.5.7 → 9.1.0

package/build-module/components/block-draggable/index.native.js

@@ -0,0 +1,449 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { AccessibilityInfo } from 'react-native';
+import { useSafeAreaInsets, useSafeAreaFrame } from 'react-native-safe-area-context';
+import Animated, { runOnJS, runOnUI, useAnimatedRef, useAnimatedStyle, useSharedValue, withDelay, withTiming, ZoomInEasyDown } from 'react-native-reanimated';
+/**
+ * WordPress dependencies
+ */
+
+import { Draggable, DraggableTrigger } from '@wordpress/components';
+import { select, useSelect, useDispatch } from '@wordpress/data';
+import { useCallback, useEffect, useRef, useState, Platform } from '@wordpress/element';
+import { getBlockType } from '@wordpress/blocks';
+import { generateHapticFeedback } from '@wordpress/react-native-bridge';
+import RCTAztecView from '@wordpress/react-native-aztec';
+/**
+ * Internal dependencies
+ */
+
+import useScrollWhenDragging from './use-scroll-when-dragging';
+import DraggableChip from './draggable-chip';
+import { store as blockEditorStore } from '../../store';
+import { useBlockListContext } from '../block-list/block-list-context';
+import DroppingInsertionPoint from './dropping-insertion-point';
+import useBlockDropZone from '../use-block-drop-zone';
+import styles from './style.scss';
+const CHIP_OFFSET_TO_TOUCH_POSITION = 32;
+const BLOCK_OPACITY_ANIMATION_CONFIG = {
+  duration: 350
+};
+const BLOCK_OPACITY_ANIMATION_DELAY = 250;
+const DEFAULT_LONG_PRESS_MIN_DURATION = 500;
+const DEFAULT_IOS_LONG_PRESS_MIN_DURATION = DEFAULT_LONG_PRESS_MIN_DURATION - 50;
+/**
+ * Block draggable wrapper component
+ *
+ * This component handles all the interactions for dragging blocks.
+ * It relies on the block list and its context for dragging, hence it
+ * should be rendered between the `BlockListProvider` component and the
+ * block list rendering. It also requires listening to scroll events,
+ * therefore for this purpose, it returns the `onScroll` event handler
+ * that should be attached to the list that renders the blocks.
+ *
+ *
+ * @param {Object}      props          Component props.
+ * @param {JSX.Element} props.children Children to be rendered.
+ * @param {boolean}     props.isRTL    Check if current locale is RTL.
+ *
+ * @return {Function} Render function that passes `onScroll` event handler.
+ */
+
+const BlockDraggableWrapper = _ref => {
+  let {
+    children,
+    isRTL
+  } = _ref;
+  const [draggedBlockIcon, setDraggedBlockIcon] = useState();
+  const {
+    selectBlock,
+    startDraggingBlocks,
+    stopDraggingBlocks
+  } = useDispatch(blockEditorStore);
+  const {
+    scrollRef
+  } = useBlockListContext();
+  const animatedScrollRef = useAnimatedRef();
+  const {
+    left,
+    right
+  } = useSafeAreaInsets();
+  const {
+    width
+  } = useSafeAreaFrame();
+  const safeAreaOffset = left + right;
+  const contentWidth = width - safeAreaOffset;
+  animatedScrollRef(scrollRef);
+  const scroll = {
+    offsetY: useSharedValue(0)
+  };
+  const chip = {
+    x: useSharedValue(0),
+    y: useSharedValue(0),
+    width: useSharedValue(0),
+    height: useSharedValue(0)
+  };
+  const currentYPosition = useSharedValue(0);
+  const isDragging = useSharedValue(false);
+  const [startScrolling, scrollOnDragOver, stopScrolling, draggingScrollHandler] = useScrollWhenDragging();
+
+  const scrollHandler = event => {
+    'worklet';
+
+    const {
+      contentOffset
+    } = event;
+    scroll.offsetY.value = contentOffset.y;
+    draggingScrollHandler(event);
+  };
+
+  const {
+    onBlockDragOver,
+    onBlockDragEnd,
+    onBlockDrop,
+    targetBlockIndex
+  } = useBlockDropZone(); // Stop dragging blocks if the block draggable is unmounted.
+
+  useEffect(() => {
+    return () => {
+      if (isDragging.value) {
+        stopDraggingBlocks();
+      }
+    };
+  }, []);
+
+  const setDraggedBlockIconByClientId = clientId => {
+    var _getBlockType;
+
+    const blockName = select(blockEditorStore).getBlockName(clientId);
+    const blockIcon = (_getBlockType = getBlockType(blockName)) === null || _getBlockType === void 0 ? void 0 : _getBlockType.icon;
+
+    if (blockIcon) {
+      setDraggedBlockIcon(blockIcon);
+    }
+  };
+
+  const onStartDragging = _ref2 => {
+    let {
+      clientId,
+      position
+    } = _ref2;
+
+    if (clientId) {
+      startDraggingBlocks([clientId]);
+      setDraggedBlockIconByClientId(clientId);
+      runOnUI(startScrolling)(position.y);
+      generateHapticFeedback();
+    } else {
+      // We stop dragging if no block is found.
+      runOnUI(stopDragging)();
+    }
+  };
+
+  const onStopDragging = _ref3 => {
+    let {
+      clientId
+    } = _ref3;
+
+    if (clientId) {
+      onBlockDrop({
+        // Dropping is only allowed at root level
+        srcRootClientId: '',
+        srcClientIds: [clientId],
+        type: 'block'
+      });
+      selectBlock(clientId);
+      setDraggedBlockIcon(undefined);
+    }
+
+    onBlockDragEnd();
+    stopDraggingBlocks();
+  };
+
+  const onChipLayout = _ref4 => {
+    let {
+      nativeEvent: {
+        layout
+      }
+    } = _ref4;
+
+    if (layout.width > 0) {
+      chip.width.value = layout.width;
+    }
+
+    if (layout.height > 0) {
+      chip.height.value = layout.height;
+    }
+  };
+
+  const startDragging = _ref5 => {
+    'worklet';
+
+    let {
+      x,
+      y,
+      id
+    } = _ref5;
+    const dragPosition = {
+      x,
+      y
+    };
+    chip.x.value = dragPosition.x;
+    chip.y.value = dragPosition.y;
+    currentYPosition.value = dragPosition.y;
+    isDragging.value = true;
+    runOnJS(onStartDragging)({
+      clientId: id,
+      position: dragPosition
+    });
+  };
+
+  const updateDragging = _ref6 => {
+    'worklet';
+
+    let {
+      x,
+      y
+    } = _ref6;
+    const dragPosition = {
+      x,
+      y
+    };
+    chip.x.value = dragPosition.x;
+    chip.y.value = dragPosition.y;
+    currentYPosition.value = dragPosition.y;
+    runOnJS(onBlockDragOver)({
+      x,
+      y: y + scroll.offsetY.value
+    }); // Update scrolling velocity
+
+    scrollOnDragOver(dragPosition.y);
+  };
+
+  const stopDragging = _ref7 => {
+    'worklet';
+
+    let {
+      id
+    } = _ref7;
+    isDragging.value = false;
+    stopScrolling();
+    runOnJS(onStopDragging)({
+      clientId: id
+    });
+  };
+
+  const chipDynamicStyles = useAnimatedStyle(() => {
+    const chipOffset = chip.width.value / 2;
+    const translateX = !isRTL ? chip.x.value - chipOffset : -(contentWidth - (chip.x.value + chipOffset));
+    return {
+      transform: [{
+        translateX
+      }, {
+        translateY: chip.y.value - chip.height.value - CHIP_OFFSET_TO_TOUCH_POSITION
+      }]
+    };
+  });
+  const chipStyles = [chipDynamicStyles, styles['draggable-chip__wrapper']];
+
+  const exitingAnimation = _ref8 => {
+    'worklet';
+
+    let {
+      currentHeight,
+      currentWidth
+    } = _ref8;
+    const translateX = !isRTL ? 0 : currentWidth * -1;
+    const duration = 150;
+    const animations = {
+      transform: [{
+        translateY: withTiming(currentHeight, {
+          duration
+        })
+      }, {
+        translateX: withTiming(translateX, {
+          duration
+        })
+      }, {
+        scale: withTiming(0, {
+          duration
+        })
+      }]
+    };
+    const initialValues = {
+      transform: [{
+        translateY: 0
+      }, {
+        translateX
+      }, {
+        scale: 1
+      }]
+    };
+    return {
+      initialValues,
+      animations
+    };
+  };
+
+  return createElement(Fragment, null, createElement(DroppingInsertionPoint, {
+    scroll: scroll,
+    currentYPosition: currentYPosition,
+    isDragging: isDragging,
+    targetBlockIndex: targetBlockIndex
+  }), createElement(Draggable, {
+    onDragStart: startDragging,
+    onDragOver: updateDragging,
+    onDragEnd: stopDragging
+  }, children({
+    onScroll: scrollHandler
+  })), createElement(Animated.View, {
+    onLayout: onChipLayout,
+    style: chipStyles,
+    pointerEvents: "none"
+  }, draggedBlockIcon && createElement(Animated.View, {
+    entering: ZoomInEasyDown.duration(200),
+    exiting: exitingAnimation
+  }, createElement(DraggableChip, {
+    icon: draggedBlockIcon
+  }))));
+};
+/**
+ * Block draggable component
+ *
+ * This component serves for animating the block when it is being dragged.
+ * Hence, it should be wrapped around the rendering of a block.
+ *
+ * @param {Object}      props                    Component props.
+ * @param {JSX.Element} props.children           Children to be rendered.
+ * @param {string}      props.clientId           Client id of the block.
+ * @param {string}      [props.draggingClientId] Client id to use for dragging. If not defined, the value from `clientId` will be used.
+ * @param {boolean}     [props.enabled]          Enables the draggable trigger.
+ *
+ * @return {Function} Render function which includes the parameter `isDraggable` to determine if the block can be dragged.
+ */
+
+
+const BlockDraggable = _ref9 => {
+  let {
+    clientId,
+    children,
+    draggingClientId,
+    enabled = true
+  } = _ref9;
+  const wasBeingDragged = useRef(false);
+  const [isEditingText, setIsEditingText] = useState(false);
+  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = useState(false);
+  const draggingAnimation = {
+    opacity: useSharedValue(1)
+  };
+
+  const startDraggingBlock = () => {
+    draggingAnimation.opacity.value = withTiming(0.4, BLOCK_OPACITY_ANIMATION_CONFIG);
+  };
+
+  const stopDraggingBlock = () => {
+    draggingAnimation.opacity.value = withDelay(BLOCK_OPACITY_ANIMATION_DELAY, withTiming(1, BLOCK_OPACITY_ANIMATION_CONFIG));
+  };
+
+  const {
+    isDraggable,
+    isBeingDragged,
+    isBlockSelected
+  } = useSelect(_select => {
+    const {
+      getBlockRootClientId,
+      getTemplateLock,
+      isBlockBeingDragged,
+      getSelectedBlockClientId
+    } = _select(blockEditorStore);
+
+    const rootClientId = getBlockRootClientId(clientId);
+    const templateLock = rootClientId ? getTemplateLock(rootClientId) : null;
+    const selectedBlockClientId = getSelectedBlockClientId();
+    return {
+      isBeingDragged: isBlockBeingDragged(clientId),
+      isDraggable: 'all' !== templateLock,
+      isBlockSelected: selectedBlockClientId && selectedBlockClientId === clientId
+    };
+  }, [clientId]);
+  useEffect(() => {
+    if (isBeingDragged !== wasBeingDragged.current) {
+      if (isBeingDragged) {
+        startDraggingBlock();
+      } else {
+        stopDraggingBlock();
+      }
+    }
+
+    wasBeingDragged.current = isBeingDragged;
+  }, [isBeingDragged]);
+  const onFocusChangeAztec = useCallback(_ref10 => {
+    let {
+      isFocused
+    } = _ref10;
+    setIsEditingText(isFocused);
+  }, []);
+  useEffect(() => {
+    let mounted = true;
+    const isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();
+
+    if (isAnyAztecInputFocused) {
+      setIsEditingText(isAnyAztecInputFocused);
+    }
+
+    RCTAztecView.InputState.addFocusChangeListener(onFocusChangeAztec);
+    const screenReaderChangedListener = AccessibilityInfo.addEventListener('screenReaderChanged', setIsScreenReaderEnabled);
+    AccessibilityInfo.isScreenReaderEnabled().then(screenReaderEnabled => {
+      if (mounted) {
+        setIsScreenReaderEnabled(screenReaderEnabled);
+      }
+    });
+    return () => {
+      mounted = false;
+      RCTAztecView.InputState.removeFocusChangeListener(onFocusChangeAztec);
+      screenReaderChangedListener.remove();
+    };
+  }, []);
+  const onLongPressDraggable = useCallback(() => {
+    // Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
+    RCTAztecView.InputState.blurCurrentFocusedElement();
+  }, []);
+  const animatedWrapperStyles = useAnimatedStyle(() => {
+    return {
+      opacity: draggingAnimation.opacity.value
+    };
+  });
+  const wrapperStyles = [animatedWrapperStyles, styles['draggable-wrapper__container']];
+  const canDragBlock = enabled && !isScreenReaderEnabled && (!isBlockSelected || !isEditingText);
+
+  if (!isDraggable) {
+    return children({
+      isDraggable: false
+    });
+  }
+
+  return createElement(DraggableTrigger, {
+    id: draggingClientId || clientId,
+    enabled: enabled && canDragBlock,
+    minDuration: Platform.select({
+      // On iOS, using a lower min duration than the default
+      // value prevents the long-press gesture from being
+      // triggered in underneath elements. This is required to
+      // prevent enabling text editing when dragging is available.
+      ios: canDragBlock ? DEFAULT_IOS_LONG_PRESS_MIN_DURATION : DEFAULT_LONG_PRESS_MIN_DURATION,
+      android: DEFAULT_LONG_PRESS_MIN_DURATION
+    }),
+    onLongPress: onLongPressDraggable
+  }, createElement(Animated.View, {
+    style: wrapperStyles
+  }, children({
+    isDraggable: true
+  })));
+};
+
+export { BlockDraggableWrapper };
+export default BlockDraggable;
+//# sourceMappingURL=index.native.js.map

package/build-module/components/block-draggable/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/index.native.js"],"names":["AccessibilityInfo","useSafeAreaInsets","useSafeAreaFrame","Animated","runOnJS","runOnUI","useAnimatedRef","useAnimatedStyle","useSharedValue","withDelay","withTiming","ZoomInEasyDown","Draggable","DraggableTrigger","select","useSelect","useDispatch","useCallback","useEffect","useRef","useState","Platform","getBlockType","generateHapticFeedback","RCTAztecView","useScrollWhenDragging","DraggableChip","store","blockEditorStore","useBlockListContext","DroppingInsertionPoint","useBlockDropZone","styles","CHIP_OFFSET_TO_TOUCH_POSITION","BLOCK_OPACITY_ANIMATION_CONFIG","duration","BLOCK_OPACITY_ANIMATION_DELAY","DEFAULT_LONG_PRESS_MIN_DURATION","DEFAULT_IOS_LONG_PRESS_MIN_DURATION","BlockDraggableWrapper","children","isRTL","draggedBlockIcon","setDraggedBlockIcon","selectBlock","startDraggingBlocks","stopDraggingBlocks","scrollRef","animatedScrollRef","left","right","width","safeAreaOffset","contentWidth","scroll","offsetY","chip","x","y","height","currentYPosition","isDragging","startScrolling","scrollOnDragOver","stopScrolling","draggingScrollHandler","scrollHandler","event","contentOffset","value","onBlockDragOver","onBlockDragEnd","onBlockDrop","targetBlockIndex","setDraggedBlockIconByClientId","clientId","blockName","getBlockName","blockIcon","icon","onStartDragging","position","stopDragging","onStopDragging","srcRootClientId","srcClientIds","type","undefined","onChipLayout","nativeEvent","layout","startDragging","id","dragPosition","updateDragging","chipDynamicStyles","chipOffset","translateX","transform","translateY","chipStyles","exitingAnimation","currentHeight","currentWidth","animations","scale","initialValues","onScroll","BlockDraggable","draggingClientId","enabled","wasBeingDragged","isEditingText","setIsEditingText","isScreenReaderEnabled","setIsScreenReaderEnabled","draggingAnimation","opacity","startDraggingBlock","stopDraggingBlock","isDraggable","isBeingDragged","isBlockSelected","_select","getBlockRootClientId","getTemplateLock","isBlockBeingDragged","getSelectedBlockClientId","rootClientId","templateLock","selectedBlockClientId","current","onFocusChangeAztec","isFocused","mounted","isAnyAztecInputFocused","InputState","addFocusChangeListener","screenReaderChangedListener","addEventListener","then","screenReaderEnabled","removeFocusChangeListener","remove","onLongPressDraggable","blurCurrentFocusedElement","animatedWrapperStyles","wrapperStyles","canDragBlock","ios","android"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { AccessibilityInfo } from 'react-native';\nimport {\n\tuseSafeAreaInsets,\n\tuseSafeAreaFrame,\n} from 'react-native-safe-area-context';\nimport Animated, {\n\trunOnJS,\n\trunOnUI,\n\tuseAnimatedRef,\n\tuseAnimatedStyle,\n\tuseSharedValue,\n\twithDelay,\n\twithTiming,\n\tZoomInEasyDown,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { Draggable, DraggableTrigger } from '@wordpress/components';\nimport { select, useSelect, useDispatch } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tPlatform,\n} from '@wordpress/element';\nimport { getBlockType } from '@wordpress/blocks';\nimport { generateHapticFeedback } from '@wordpress/react-native-bridge';\nimport RCTAztecView from '@wordpress/react-native-aztec';\n\n/**\n * Internal dependencies\n */\nimport useScrollWhenDragging from './use-scroll-when-dragging';\nimport DraggableChip from './draggable-chip';\nimport { store as blockEditorStore } from '../../store';\nimport { useBlockListContext } from '../block-list/block-list-context';\nimport DroppingInsertionPoint from './dropping-insertion-point';\nimport useBlockDropZone from '../use-block-drop-zone';\nimport styles from './style.scss';\n\nconst CHIP_OFFSET_TO_TOUCH_POSITION = 32;\nconst BLOCK_OPACITY_ANIMATION_CONFIG = { duration: 350 };\nconst BLOCK_OPACITY_ANIMATION_DELAY = 250;\nconst DEFAULT_LONG_PRESS_MIN_DURATION = 500;\nconst DEFAULT_IOS_LONG_PRESS_MIN_DURATION =\n\tDEFAULT_LONG_PRESS_MIN_DURATION - 50;\n\n/**\n * Block draggable wrapper component\n *\n * This component handles all the interactions for dragging blocks.\n * It relies on the block list and its context for dragging, hence it\n * should be rendered between the `BlockListProvider` component and the\n * block list rendering. It also requires listening to scroll events,\n * therefore for this purpose, it returns the `onScroll` event handler\n * that should be attached to the list that renders the blocks.\n *\n *\n * @param {Object}      props          Component props.\n * @param {JSX.Element} props.children Children to be rendered.\n * @param {boolean}     props.isRTL    Check if current locale is RTL.\n *\n * @return {Function} Render function that passes `onScroll` event handler.\n */\nconst BlockDraggableWrapper = ( { children, isRTL } ) => {\n\tconst [ draggedBlockIcon, setDraggedBlockIcon ] = useState();\n\n\tconst {\n\t\tselectBlock,\n\t\tstartDraggingBlocks,\n\t\tstopDraggingBlocks,\n\t} = useDispatch( blockEditorStore );\n\n\tconst { scrollRef } = useBlockListContext();\n\tconst animatedScrollRef = useAnimatedRef();\n\tconst { left, right } = useSafeAreaInsets();\n\tconst { width } = useSafeAreaFrame();\n\tconst safeAreaOffset = left + right;\n\tconst contentWidth = width - safeAreaOffset;\n\tanimatedScrollRef( scrollRef );\n\n\tconst scroll = {\n\t\toffsetY: useSharedValue( 0 ),\n\t};\n\tconst chip = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t\twidth: useSharedValue( 0 ),\n\t\theight: useSharedValue( 0 ),\n\t};\n\tconst currentYPosition = useSharedValue( 0 );\n\tconst isDragging = useSharedValue( false );\n\n\tconst [\n\t\tstartScrolling,\n\t\tscrollOnDragOver,\n\t\tstopScrolling,\n\t\tdraggingScrollHandler,\n\t] = useScrollWhenDragging();\n\n\tconst scrollHandler = ( event ) => {\n\t\t'worklet';\n\t\tconst { contentOffset } = event;\n\t\tscroll.offsetY.value = contentOffset.y;\n\n\t\tdraggingScrollHandler( event );\n\t};\n\n\tconst {\n\t\tonBlockDragOver,\n\t\tonBlockDragEnd,\n\t\tonBlockDrop,\n\t\ttargetBlockIndex,\n\t} = useBlockDropZone();\n\n\t// Stop dragging blocks if the block draggable is unmounted.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging.value ) {\n\t\t\t\tstopDraggingBlocks();\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst setDraggedBlockIconByClientId = ( clientId ) => {\n\t\tconst blockName = select( blockEditorStore ).getBlockName( clientId );\n\t\tconst blockIcon = getBlockType( blockName )?.icon;\n\t\tif ( blockIcon ) {\n\t\t\tsetDraggedBlockIcon( blockIcon );\n\t\t}\n\t};\n\n\tconst onStartDragging = ( { clientId, position } ) => {\n\t\tif ( clientId ) {\n\t\t\tstartDraggingBlocks( [ clientId ] );\n\t\t\tsetDraggedBlockIconByClientId( clientId );\n\t\t\trunOnUI( startScrolling )( position.y );\n\t\t\tgenerateHapticFeedback();\n\t\t} else {\n\t\t\t// We stop dragging if no block is found.\n\t\t\trunOnUI( stopDragging )();\n\t\t}\n\t};\n\n\tconst onStopDragging = ( { clientId } ) => {\n\t\tif ( clientId ) {\n\t\t\tonBlockDrop( {\n\t\t\t\t// Dropping is only allowed at root level\n\t\t\t\tsrcRootClientId: '',\n\t\t\t\tsrcClientIds: [ clientId ],\n\t\t\t\ttype: 'block',\n\t\t\t} );\n\t\t\tselectBlock( clientId );\n\t\t\tsetDraggedBlockIcon( undefined );\n\t\t}\n\t\tonBlockDragEnd();\n\t\tstopDraggingBlocks();\n\t};\n\n\tconst onChipLayout = ( { nativeEvent: { layout } } ) => {\n\t\tif ( layout.width > 0 ) {\n\t\t\tchip.width.value = layout.width;\n\t\t}\n\t\tif ( layout.height > 0 ) {\n\t\t\tchip.height.value = layout.height;\n\t\t}\n\t};\n\n\tconst startDragging = ( { x, y, id } ) => {\n\t\t'worklet';\n\t\tconst dragPosition = { x, y };\n\t\tchip.x.value = dragPosition.x;\n\t\tchip.y.value = dragPosition.y;\n\t\tcurrentYPosition.value = dragPosition.y;\n\n\t\tisDragging.value = true;\n\n\t\trunOnJS( onStartDragging )( { clientId: id, position: dragPosition } );\n\t};\n\n\tconst updateDragging = ( { x, y } ) => {\n\t\t'worklet';\n\t\tconst dragPosition = { x, y };\n\t\tchip.x.value = dragPosition.x;\n\t\tchip.y.value = dragPosition.y;\n\t\tcurrentYPosition.value = dragPosition.y;\n\n\t\trunOnJS( onBlockDragOver )( { x, y: y + scroll.offsetY.value } );\n\n\t\t// Update scrolling velocity\n\t\tscrollOnDragOver( dragPosition.y );\n\t};\n\n\tconst stopDragging = ( { id } ) => {\n\t\t'worklet';\n\t\tisDragging.value = false;\n\n\t\tstopScrolling();\n\t\trunOnJS( onStopDragging )( { clientId: id } );\n\t};\n\n\tconst chipDynamicStyles = useAnimatedStyle( () => {\n\t\tconst chipOffset = chip.width.value / 2;\n\t\tconst translateX = ! isRTL\n\t\t\t? chip.x.value - chipOffset\n\t\t\t: -( contentWidth - ( chip.x.value + chipOffset ) );\n\n\t\treturn {\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateX,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateY:\n\t\t\t\t\t\tchip.y.value -\n\t\t\t\t\t\tchip.height.value -\n\t\t\t\t\t\tCHIP_OFFSET_TO_TOUCH_POSITION,\n\t\t\t\t},\n\t\t\t],\n\t\t};\n\t} );\n\tconst chipStyles = [\n\t\tchipDynamicStyles,\n\t\tstyles[ 'draggable-chip__wrapper' ],\n\t];\n\n\tconst exitingAnimation = ( { currentHeight, currentWidth } ) => {\n\t\t'worklet';\n\t\tconst translateX = ! isRTL ? 0 : currentWidth * -1;\n\t\tconst duration = 150;\n\t\tconst animations = {\n\t\t\ttransform: [\n\t\t\t\t{\n\t\t\t\t\ttranslateY: withTiming( currentHeight, {\n\t\t\t\t\t\tduration,\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttranslateX: withTiming( translateX, {\n\t\t\t\t\t\tduration,\n\t\t\t\t\t} ),\n\t\t\t\t},\n\t\t\t\t{ scale: withTiming( 0, { duration } ) },\n\t\t\t],\n\t\t};\n\t\tconst initialValues = {\n\t\t\ttransform: [ { translateY: 0 }, { translateX }, { scale: 1 } ],\n\t\t};\n\t\treturn {\n\t\t\tinitialValues,\n\t\t\tanimations,\n\t\t};\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<DroppingInsertionPoint\n\t\t\t\tscroll={ scroll }\n\t\t\t\tcurrentYPosition={ currentYPosition }\n\t\t\t\tisDragging={ isDragging }\n\t\t\t\ttargetBlockIndex={ targetBlockIndex }\n\t\t\t/>\n\t\t\t<Draggable\n\t\t\t\tonDragStart={ startDragging }\n\t\t\t\tonDragOver={ updateDragging }\n\t\t\t\tonDragEnd={ stopDragging }\n\t\t\t>\n\t\t\t\t{ children( { onScroll: scrollHandler } ) }\n\t\t\t</Draggable>\n\t\t\t<Animated.View\n\t\t\t\tonLayout={ onChipLayout }\n\t\t\t\tstyle={ chipStyles }\n\t\t\t\tpointerEvents=\"none\"\n\t\t\t>\n\t\t\t\t{ draggedBlockIcon && (\n\t\t\t\t\t<Animated.View\n\t\t\t\t\t\tentering={ ZoomInEasyDown.duration( 200 ) }\n\t\t\t\t\t\texiting={ exitingAnimation }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DraggableChip icon={ draggedBlockIcon } />\n\t\t\t\t\t</Animated.View>\n\t\t\t\t) }\n\t\t\t</Animated.View>\n\t\t</>\n\t);\n};\n\n/**\n * Block draggable component\n *\n * This component serves for animating the block when it is being dragged.\n * Hence, it should be wrapped around the rendering of a block.\n *\n * @param {Object}      props                    Component props.\n * @param {JSX.Element} props.children           Children to be rendered.\n * @param {string}      props.clientId           Client id of the block.\n * @param {string}      [props.draggingClientId] Client id to use for dragging. If not defined, the value from `clientId` will be used.\n * @param {boolean}     [props.enabled]          Enables the draggable trigger.\n *\n * @return {Function} Render function which includes the parameter `isDraggable` to determine if the block can be dragged.\n */\nconst BlockDraggable = ( {\n\tclientId,\n\tchildren,\n\tdraggingClientId,\n\tenabled = true,\n} ) => {\n\tconst wasBeingDragged = useRef( false );\n\tconst [ isEditingText, setIsEditingText ] = useState( false );\n\tconst [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(\n\t\tfalse\n\t);\n\n\tconst draggingAnimation = {\n\t\topacity: useSharedValue( 1 ),\n\t};\n\n\tconst startDraggingBlock = () => {\n\t\tdraggingAnimation.opacity.value = withTiming(\n\t\t\t0.4,\n\t\t\tBLOCK_OPACITY_ANIMATION_CONFIG\n\t\t);\n\t};\n\n\tconst stopDraggingBlock = () => {\n\t\tdraggingAnimation.opacity.value = withDelay(\n\t\t\tBLOCK_OPACITY_ANIMATION_DELAY,\n\t\t\twithTiming( 1, BLOCK_OPACITY_ANIMATION_CONFIG )\n\t\t);\n\t};\n\n\tconst { isDraggable, isBeingDragged, isBlockSelected } = useSelect(\n\t\t( _select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockRootClientId,\n\t\t\t\tgetTemplateLock,\n\t\t\t\tisBlockBeingDragged,\n\t\t\t\tgetSelectedBlockClientId,\n\t\t\t} = _select( blockEditorStore );\n\t\t\tconst rootClientId = getBlockRootClientId( clientId );\n\t\t\tconst templateLock = rootClientId\n\t\t\t\t? getTemplateLock( rootClientId )\n\t\t\t\t: null;\n\t\t\tconst selectedBlockClientId = getSelectedBlockClientId();\n\n\t\t\treturn {\n\t\t\t\tisBeingDragged: isBlockBeingDragged( clientId ),\n\t\t\t\tisDraggable: 'all' !== templateLock,\n\t\t\t\tisBlockSelected:\n\t\t\t\t\tselectedBlockClientId && selectedBlockClientId === clientId,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tuseEffect( () => {\n\t\tif ( isBeingDragged !== wasBeingDragged.current ) {\n\t\t\tif ( isBeingDragged ) {\n\t\t\t\tstartDraggingBlock();\n\t\t\t} else {\n\t\t\t\tstopDraggingBlock();\n\t\t\t}\n\t\t}\n\t\twasBeingDragged.current = isBeingDragged;\n\t}, [ isBeingDragged ] );\n\n\tconst onFocusChangeAztec = useCallback( ( { isFocused } ) => {\n\t\tsetIsEditingText( isFocused );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tlet mounted = true;\n\n\t\tconst isAnyAztecInputFocused = RCTAztecView.InputState.isFocused();\n\t\tif ( isAnyAztecInputFocused ) {\n\t\t\tsetIsEditingText( isAnyAztecInputFocused );\n\t\t}\n\n\t\tRCTAztecView.InputState.addFocusChangeListener( onFocusChangeAztec );\n\n\t\tconst screenReaderChangedListener = AccessibilityInfo.addEventListener(\n\t\t\t'screenReaderChanged',\n\t\t\tsetIsScreenReaderEnabled\n\t\t);\n\t\tAccessibilityInfo.isScreenReaderEnabled().then(\n\t\t\t( screenReaderEnabled ) => {\n\t\t\t\tif ( mounted ) {\n\t\t\t\t\tsetIsScreenReaderEnabled( screenReaderEnabled );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\n\t\treturn () => {\n\t\t\tmounted = false;\n\n\t\t\tRCTAztecView.InputState.removeFocusChangeListener(\n\t\t\t\tonFocusChangeAztec\n\t\t\t);\n\n\t\t\tscreenReaderChangedListener.remove();\n\t\t};\n\t}, [] );\n\n\tconst onLongPressDraggable = useCallback( () => {\n\t\t// Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.\n\t\tRCTAztecView.InputState.blurCurrentFocusedElement();\n\t}, [] );\n\n\tconst animatedWrapperStyles = useAnimatedStyle( () => {\n\t\treturn {\n\t\t\topacity: draggingAnimation.opacity.value,\n\t\t};\n\t} );\n\tconst wrapperStyles = [\n\t\tanimatedWrapperStyles,\n\t\tstyles[ 'draggable-wrapper__container' ],\n\t];\n\n\tconst canDragBlock =\n\t\tenabled &&\n\t\t! isScreenReaderEnabled &&\n\t\t( ! isBlockSelected || ! isEditingText );\n\n\tif ( ! isDraggable ) {\n\t\treturn children( { isDraggable: false } );\n\t}\n\n\treturn (\n\t\t<DraggableTrigger\n\t\t\tid={ draggingClientId || clientId }\n\t\t\tenabled={ enabled && canDragBlock }\n\t\t\tminDuration={ Platform.select( {\n\t\t\t\t// On iOS, using a lower min duration than the default\n\t\t\t\t// value prevents the long-press gesture from being\n\t\t\t\t// triggered in underneath elements. This is required to\n\t\t\t\t// prevent enabling text editing when dragging is available.\n\t\t\t\tios: canDragBlock\n\t\t\t\t\t? DEFAULT_IOS_LONG_PRESS_MIN_DURATION\n\t\t\t\t\t: DEFAULT_LONG_PRESS_MIN_DURATION,\n\t\t\t\tandroid: DEFAULT_LONG_PRESS_MIN_DURATION,\n\t\t\t} ) }\n\t\t\tonLongPress={ onLongPressDraggable }\n\t\t>\n\t\t\t<Animated.View style={ wrapperStyles }>\n\t\t\t\t{ children( { isDraggable: true } ) }\n\t\t\t</Animated.View>\n\t\t</DraggableTrigger>\n\t);\n};\n\nexport { BlockDraggableWrapper };\nexport default BlockDraggable;\n"]}

package/build-module/components/block-draggable/use-scroll-when-dragging.native.js

@@ -0,0 +1,120 @@
+/**
+ * External dependencies
+ */
+import { useWindowDimensions } from 'react-native';
+import { useSharedValue, useAnimatedRef, scrollTo, useAnimatedReaction, withTiming, withRepeat, cancelAnimation, Easing } from 'react-native-reanimated';
+/**
+ * Internal dependencies
+ */
+
+import { useBlockListContext } from '../block-list/block-list-context';
+const SCROLL_INACTIVE_DISTANCE_PX = 50;
+const SCROLL_INTERVAL_MS = 1000;
+const VELOCITY_MULTIPLIER = 5000;
+/**
+ * React hook that scrolls the scroll container when a block is being dragged.
+ *
+ * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`
+ *                      functions to be called in `onDragStart`, `onDragOver`
+ *                      and `onDragEnd` events respectively. Additionally,
+ * 						`scrollHandler` function is returned which should be
+ * 						called in the `onScroll` event of the block list.
+ */
+
+export default function useScrollWhenDragging() {
+  const {
+    scrollRef
+  } = useBlockListContext();
+  const animatedScrollRef = useAnimatedRef();
+  animatedScrollRef(scrollRef);
+  const {
+    height: windowHeight
+  } = useWindowDimensions();
+  const velocityY = useSharedValue(0);
+  const offsetY = useSharedValue(0);
+  const dragStartY = useSharedValue(0);
+  const animationTimer = useSharedValue(0);
+  const isAnimationTimerActive = useSharedValue(false);
+  const isScrollActive = useSharedValue(false);
+  const scroll = {
+    offsetY: useSharedValue(0),
+    maxOffsetY: useSharedValue(0)
+  };
+
+  const scrollHandler = event => {
+    'worklet';
+
+    const {
+      contentSize,
+      contentOffset,
+      layoutMeasurement
+    } = event;
+    scroll.offsetY.value = contentOffset.y;
+    scroll.maxOffsetY.value = contentSize.height - layoutMeasurement.height;
+  };
+
+  const stopScrolling = () => {
+    'worklet';
+
+    cancelAnimation(animationTimer);
+    isAnimationTimerActive.value = false;
+    isScrollActive.value = false;
+    velocityY.value = 0;
+  };
+
+  const startScrolling = y => {
+    'worklet';
+
+    stopScrolling();
+    offsetY.value = scroll.offsetY.value;
+    dragStartY.value = y;
+    animationTimer.value = 0;
+    animationTimer.value = withRepeat(withTiming(1, {
+      duration: SCROLL_INTERVAL_MS,
+      easing: Easing.linear
+    }), -1, true);
+    isAnimationTimerActive.value = true;
+  };
+
+  const scrollOnDragOver = y => {
+    'worklet';
+
+    const dragDistance = Math.max(Math.abs(y - dragStartY.value) - SCROLL_INACTIVE_DISTANCE_PX, 0);
+    const distancePercentage = dragDistance / windowHeight;
+
+    if (!isScrollActive.value) {
+      isScrollActive.value = dragDistance > 0;
+    } else if (y > dragStartY.value) {
+      // User is dragging downwards.
+      velocityY.value = VELOCITY_MULTIPLIER * distancePercentage;
+    } else if (y < dragStartY.value) {
+      // User is dragging upwards.
+      velocityY.value = -VELOCITY_MULTIPLIER * distancePercentage;
+    } else {
+      velocityY.value = 0;
+    }
+  };
+
+  useAnimatedReaction(() => animationTimer.value, (value, previous) => {
+    if (velocityY.value === 0) {
+      return;
+    }
+
+    const delta = Math.abs(value - previous);
+    let newOffset = offsetY.value + delta * velocityY.value;
+
+    if (scroll.maxOffsetY.value !== 0) {
+      newOffset = Math.max(0, Math.min(scroll.maxOffsetY.value, newOffset));
+    } else {
+      // Scroll values are empty until receiving the first scroll event.
+      // In that case, the max offset is unknown and we can't clamp the
+      // new offset value.
+      newOffset = Math.max(0, newOffset);
+    }
+
+    offsetY.value = newOffset;
+    scrollTo(animatedScrollRef, 0, offsetY.value, false);
+  });
+  return [startScrolling, scrollOnDragOver, stopScrolling, scrollHandler];
+}
+//# sourceMappingURL=use-scroll-when-dragging.native.js.map

package/build-module/components/block-draggable/use-scroll-when-dragging.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/use-scroll-when-dragging.native.js"],"names":["useWindowDimensions","useSharedValue","useAnimatedRef","scrollTo","useAnimatedReaction","withTiming","withRepeat","cancelAnimation","Easing","useBlockListContext","SCROLL_INACTIVE_DISTANCE_PX","SCROLL_INTERVAL_MS","VELOCITY_MULTIPLIER","useScrollWhenDragging","scrollRef","animatedScrollRef","height","windowHeight","velocityY","offsetY","dragStartY","animationTimer","isAnimationTimerActive","isScrollActive","scroll","maxOffsetY","scrollHandler","event","contentSize","contentOffset","layoutMeasurement","value","y","stopScrolling","startScrolling","duration","easing","linear","scrollOnDragOver","dragDistance","Math","max","abs","distancePercentage","previous","delta","newOffset","min"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { useWindowDimensions } from 'react-native';\nimport {\n\tuseSharedValue,\n\tuseAnimatedRef,\n\tscrollTo,\n\tuseAnimatedReaction,\n\twithTiming,\n\twithRepeat,\n\tcancelAnimation,\n\tEasing,\n} from 'react-native-reanimated';\n\n/**\n * Internal dependencies\n */\nimport { useBlockListContext } from '../block-list/block-list-context';\n\nconst SCROLL_INACTIVE_DISTANCE_PX = 50;\nconst SCROLL_INTERVAL_MS = 1000;\nconst VELOCITY_MULTIPLIER = 5000;\n\n/**\n * React hook that scrolls the scroll container when a block is being dragged.\n *\n * @return {Function[]} `startScrolling`, `scrollOnDragOver`, `stopScrolling`\n *                      functions to be called in `onDragStart`, `onDragOver`\n *                      and `onDragEnd` events respectively. Additionally,\n * \t\t\t\t\t\t`scrollHandler` function is returned which should be\n * \t\t\t\t\t\tcalled in the `onScroll` event of the block list.\n */\nexport default function useScrollWhenDragging() {\n\tconst { scrollRef } = useBlockListContext();\n\tconst animatedScrollRef = useAnimatedRef();\n\tanimatedScrollRef( scrollRef );\n\n\tconst { height: windowHeight } = useWindowDimensions();\n\n\tconst velocityY = useSharedValue( 0 );\n\tconst offsetY = useSharedValue( 0 );\n\tconst dragStartY = useSharedValue( 0 );\n\tconst animationTimer = useSharedValue( 0 );\n\tconst isAnimationTimerActive = useSharedValue( false );\n\tconst isScrollActive = useSharedValue( false );\n\n\tconst scroll = {\n\t\toffsetY: useSharedValue( 0 ),\n\t\tmaxOffsetY: useSharedValue( 0 ),\n\t};\n\tconst scrollHandler = ( event ) => {\n\t\t'worklet';\n\t\tconst { contentSize, contentOffset, layoutMeasurement } = event;\n\t\tscroll.offsetY.value = contentOffset.y;\n\t\tscroll.maxOffsetY.value = contentSize.height - layoutMeasurement.height;\n\t};\n\n\tconst stopScrolling = () => {\n\t\t'worklet';\n\t\tcancelAnimation( animationTimer );\n\n\t\tisAnimationTimerActive.value = false;\n\t\tisScrollActive.value = false;\n\t\tvelocityY.value = 0;\n\t};\n\n\tconst startScrolling = ( y ) => {\n\t\t'worklet';\n\t\tstopScrolling();\n\t\toffsetY.value = scroll.offsetY.value;\n\t\tdragStartY.value = y;\n\n\t\tanimationTimer.value = 0;\n\t\tanimationTimer.value = withRepeat(\n\t\t\twithTiming( 1, {\n\t\t\t\tduration: SCROLL_INTERVAL_MS,\n\t\t\t\teasing: Easing.linear,\n\t\t\t} ),\n\t\t\t-1,\n\t\t\ttrue\n\t\t);\n\t\tisAnimationTimerActive.value = true;\n\t};\n\n\tconst scrollOnDragOver = ( y ) => {\n\t\t'worklet';\n\t\tconst dragDistance = Math.max(\n\t\t\tMath.abs( y - dragStartY.value ) - SCROLL_INACTIVE_DISTANCE_PX,\n\t\t\t0\n\t\t);\n\t\tconst distancePercentage = dragDistance / windowHeight;\n\n\t\tif ( ! isScrollActive.value ) {\n\t\t\tisScrollActive.value = dragDistance > 0;\n\t\t} else if ( y > dragStartY.value ) {\n\t\t\t// User is dragging downwards.\n\t\t\tvelocityY.value = VELOCITY_MULTIPLIER * distancePercentage;\n\t\t} else if ( y < dragStartY.value ) {\n\t\t\t// User is dragging upwards.\n\t\t\tvelocityY.value = -VELOCITY_MULTIPLIER * distancePercentage;\n\t\t} else {\n\t\t\tvelocityY.value = 0;\n\t\t}\n\t};\n\n\tuseAnimatedReaction(\n\t\t() => animationTimer.value,\n\t\t( value, previous ) => {\n\t\t\tif ( velocityY.value === 0 ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst delta = Math.abs( value - previous );\n\t\t\tlet newOffset = offsetY.value + delta * velocityY.value;\n\n\t\t\tif ( scroll.maxOffsetY.value !== 0 ) {\n\t\t\t\tnewOffset = Math.max(\n\t\t\t\t\t0,\n\t\t\t\t\tMath.min( scroll.maxOffsetY.value, newOffset )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\t// Scroll values are empty until receiving the first scroll event.\n\t\t\t\t// In that case, the max offset is unknown and we can't clamp the\n\t\t\t\t// new offset value.\n\t\t\t\tnewOffset = Math.max( 0, newOffset );\n\t\t\t}\n\n\t\t\toffsetY.value = newOffset;\n\t\t\tscrollTo( animatedScrollRef, 0, offsetY.value, false );\n\t\t}\n\t);\n\n\treturn [ startScrolling, scrollOnDragOver, stopScrolling, scrollHandler ];\n}\n"]}