@wordpress/block-editor 9.0.0 → 9.3.0

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

@@ -0,0 +1,488 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.BlockDraggableWrapper = void 0;
+
+var _element = require("@wordpress/element");
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _components = require("@wordpress/components");
+
+var _data = require("@wordpress/data");
+
+var _blocks = require("@wordpress/blocks");
+
+var _reactNativeBridge = require("@wordpress/react-native-bridge");
+
+var _reactNativeAztec = _interopRequireDefault(require("@wordpress/react-native-aztec"));
+
+var _useScrollWhenDragging = _interopRequireDefault(require("./use-scroll-when-dragging"));
+
+var _draggableChip = _interopRequireDefault(require("./draggable-chip"));
+
+var _store = require("../../store");
+
+var _blockListContext = require("../block-list/block-list-context");
+
+var _droppingInsertionPoint = _interopRequireDefault(require("./dropping-insertion-point"));
+
+var _useBlockDropZone = _interopRequireDefault(require("../use-block-drop-zone"));
+
+var _style = _interopRequireDefault(require("./style.scss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+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] = (0, _element.useState)();
+  const {
+    selectBlock,
+    startDraggingBlocks,
+    stopDraggingBlocks
+  } = (0, _data.useDispatch)(_store.store);
+  const {
+    scrollRef
+  } = (0, _blockListContext.useBlockListContext)();
+  const animatedScrollRef = (0, _reactNativeReanimated.useAnimatedRef)();
+  const {
+    left,
+    right
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const {
+    width
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaFrame)();
+  const safeAreaOffset = left + right;
+  const contentWidth = width - safeAreaOffset;
+  animatedScrollRef(scrollRef);
+  const scroll = {
+    offsetY: (0, _reactNativeReanimated.useSharedValue)(0)
+  };
+  const chip = {
+    x: (0, _reactNativeReanimated.useSharedValue)(0),
+    y: (0, _reactNativeReanimated.useSharedValue)(0),
+    width: (0, _reactNativeReanimated.useSharedValue)(0),
+    height: (0, _reactNativeReanimated.useSharedValue)(0)
+  };
+  const currentYPosition = (0, _reactNativeReanimated.useSharedValue)(0);
+  const isDragging = (0, _reactNativeReanimated.useSharedValue)(false);
+  const [startScrolling, scrollOnDragOver, stopScrolling, draggingScrollHandler] = (0, _useScrollWhenDragging.default)();
+
+  const scrollHandler = event => {
+    'worklet';
+
+    const {
+      contentOffset
+    } = event;
+    scroll.offsetY.value = contentOffset.y;
+    draggingScrollHandler(event);
+  };
+
+  const {
+    onBlockDragOver,
+    onBlockDragEnd,
+    onBlockDrop,
+    targetBlockIndex
+  } = (0, _useBlockDropZone.default)(); // Stop dragging blocks if the block draggable is unmounted.
+
+  (0, _element.useEffect)(() => {
+    return () => {
+      if (isDragging.value) {
+        stopDraggingBlocks();
+      }
+    };
+  }, []);
+
+  const setDraggedBlockIconByClientId = clientId => {
+    var _getBlockType;
+
+    const blockName = (0, _data.select)(_store.store).getBlockName(clientId);
+    const blockIcon = (_getBlockType = (0, _blocks.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);
+      (0, _reactNativeReanimated.runOnUI)(startScrolling)(position.y);
+      (0, _reactNativeBridge.generateHapticFeedback)();
+    } else {
+      // We stop dragging if no block is found.
+      (0, _reactNativeReanimated.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;
+    (0, _reactNativeReanimated.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;
+    (0, _reactNativeReanimated.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();
+    (0, _reactNativeReanimated.runOnJS)(onStopDragging)({
+      clientId: id
+    });
+  };
+
+  const chipDynamicStyles = (0, _reactNativeReanimated.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, _style.default['draggable-chip__wrapper']];
+
+  const exitingAnimation = _ref8 => {
+    'worklet';
+
+    let {
+      currentHeight,
+      currentWidth
+    } = _ref8;
+    const translateX = !isRTL ? 0 : currentWidth * -1;
+    const duration = 150;
+    const animations = {
+      transform: [{
+        translateY: (0, _reactNativeReanimated.withTiming)(currentHeight, {
+          duration
+        })
+      }, {
+        translateX: (0, _reactNativeReanimated.withTiming)(translateX, {
+          duration
+        })
+      }, {
+        scale: (0, _reactNativeReanimated.withTiming)(0, {
+          duration
+        })
+      }]
+    };
+    const initialValues = {
+      transform: [{
+        translateY: 0
+      }, {
+        translateX
+      }, {
+        scale: 1
+      }]
+    };
+    return {
+      initialValues,
+      animations
+    };
+  };
+
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_droppingInsertionPoint.default, {
+    scroll: scroll,
+    currentYPosition: currentYPosition,
+    isDragging: isDragging,
+    targetBlockIndex: targetBlockIndex
+  }), (0, _element.createElement)(_components.Draggable, {
+    onDragStart: startDragging,
+    onDragOver: updateDragging,
+    onDragEnd: stopDragging,
+    testID: "block-draggable-wrapper"
+  }, children({
+    onScroll: scrollHandler
+  })), (0, _element.createElement)(_reactNativeReanimated.default.View, {
+    onLayout: onChipLayout,
+    style: chipStyles,
+    pointerEvents: "none"
+  }, draggedBlockIcon && (0, _element.createElement)(_reactNativeReanimated.default.View, {
+    entering: _reactNativeReanimated.ZoomInEasyDown.duration(200),
+    exiting: exitingAnimation
+  }, (0, _element.createElement)(_draggableChip.default, {
+    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.
+ * @param {string}      [props.testID]           Id used for querying the long-press gesture handler in tests.
+ *
+ * @return {Function} Render function which includes the parameter `isDraggable` to determine if the block can be dragged.
+ */
+
+
+exports.BlockDraggableWrapper = BlockDraggableWrapper;
+
+const BlockDraggable = _ref9 => {
+  let {
+    clientId,
+    children,
+    draggingClientId,
+    enabled = true,
+    testID
+  } = _ref9;
+  const wasBeingDragged = (0, _element.useRef)(false);
+  const [isEditingText, setIsEditingText] = (0, _element.useState)(false);
+  const [isScreenReaderEnabled, setIsScreenReaderEnabled] = (0, _element.useState)(false);
+  const draggingAnimation = {
+    opacity: (0, _reactNativeReanimated.useSharedValue)(1)
+  };
+
+  const startDraggingBlock = () => {
+    draggingAnimation.opacity.value = (0, _reactNativeReanimated.withTiming)(0.4, BLOCK_OPACITY_ANIMATION_CONFIG);
+  };
+
+  const stopDraggingBlock = () => {
+    draggingAnimation.opacity.value = (0, _reactNativeReanimated.withDelay)(BLOCK_OPACITY_ANIMATION_DELAY, (0, _reactNativeReanimated.withTiming)(1, BLOCK_OPACITY_ANIMATION_CONFIG));
+  };
+
+  const {
+    isDraggable,
+    isBeingDragged,
+    isBlockSelected
+  } = (0, _data.useSelect)(_select => {
+    const {
+      getBlockRootClientId,
+      getTemplateLock,
+      isBlockBeingDragged,
+      getSelectedBlockClientId
+    } = _select(_store.store);
+
+    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]);
+  (0, _element.useEffect)(() => {
+    if (isBeingDragged !== wasBeingDragged.current) {
+      if (isBeingDragged) {
+        startDraggingBlock();
+      } else {
+        stopDraggingBlock();
+      }
+    }
+
+    wasBeingDragged.current = isBeingDragged;
+  }, [isBeingDragged]);
+  const onFocusChangeAztec = (0, _element.useCallback)(_ref10 => {
+    let {
+      isFocused
+    } = _ref10;
+    setIsEditingText(isFocused);
+  }, []);
+  (0, _element.useEffect)(() => {
+    let mounted = true;
+
+    const isAnyAztecInputFocused = _reactNativeAztec.default.InputState.isFocused();
+
+    if (isAnyAztecInputFocused) {
+      setIsEditingText(isAnyAztecInputFocused);
+    }
+
+    _reactNativeAztec.default.InputState.addFocusChangeListener(onFocusChangeAztec);
+
+    const screenReaderChangedListener = _reactNative.AccessibilityInfo.addEventListener('screenReaderChanged', setIsScreenReaderEnabled);
+
+    _reactNative.AccessibilityInfo.isScreenReaderEnabled().then(screenReaderEnabled => {
+      if (mounted) {
+        setIsScreenReaderEnabled(screenReaderEnabled);
+      }
+    });
+
+    return () => {
+      mounted = false;
+
+      _reactNativeAztec.default.InputState.removeFocusChangeListener(onFocusChangeAztec);
+
+      screenReaderChangedListener.remove();
+    };
+  }, []);
+  const onLongPressDraggable = (0, _element.useCallback)(() => {
+    // Ensure that no text input is focused when starting the dragging gesture in order to prevent conflicts with text editing.
+    _reactNativeAztec.default.InputState.blurCurrentFocusedElement();
+  }, []);
+  const animatedWrapperStyles = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    return {
+      opacity: draggingAnimation.opacity.value
+    };
+  });
+  const wrapperStyles = [animatedWrapperStyles, _style.default['draggable-wrapper__container']];
+  const canDragBlock = enabled && !isScreenReaderEnabled && (!isBlockSelected || !isEditingText);
+
+  if (!isDraggable) {
+    return children({
+      isDraggable: false
+    });
+  }
+
+  return (0, _element.createElement)(_components.DraggableTrigger, {
+    id: draggingClientId || clientId,
+    enabled: enabled && canDragBlock,
+    minDuration: _element.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,
+    testID: testID
+  }, (0, _element.createElement)(_reactNativeReanimated.default.View, {
+    style: wrapperStyles
+  }, children({
+    isDraggable: true
+  })));
+};
+
+var _default = BlockDraggable;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-draggable/index.native.js"],"names":["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","blockEditorStore","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","styles","exitingAnimation","currentHeight","currentWidth","animations","scale","initialValues","onScroll","ZoomInEasyDown","BlockDraggable","draggingClientId","enabled","testID","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","RCTAztecView","InputState","addFocusChangeListener","screenReaderChangedListener","AccessibilityInfo","addEventListener","then","screenReaderEnabled","removeFocusChangeListener","remove","onLongPressDraggable","blurCurrentFocusedElement","animatedWrapperStyles","wrapperStyles","canDragBlock","Platform","select","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 { selectBlock, startDraggingBlocks, stopDraggingBlocks } =\n\t\tuseDispatch( 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 { onBlockDragOver, onBlockDragEnd, onBlockDrop, targetBlockIndex } =\n\t\tuseBlockDropZone();\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\ttestID=\"block-draggable-wrapper\"\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 * @param {string}      [props.testID]           Id used for querying the long-press gesture handler in tests.\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\ttestID,\n} ) => {\n\tconst wasBeingDragged = useRef( false );\n\tconst [ isEditingText, setIsEditingText ] = useState( false );\n\tconst [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =\n\t\tuseState( false );\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\ttestID={ testID }\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/components/block-draggable/use-scroll-when-dragging.native.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useScrollWhenDragging;
+
+var _reactNative = require("react-native");
+
+var _reactNativeReanimated = require("react-native-reanimated");
+
+var _blockListContext = require("../block-list/block-list-context");
+
+/**
+ * External dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+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.
+ */
+
+function useScrollWhenDragging() {
+  const {
+    scrollRef
+  } = (0, _blockListContext.useBlockListContext)();
+  const animatedScrollRef = (0, _reactNativeReanimated.useAnimatedRef)();
+  animatedScrollRef(scrollRef);
+  const {
+    height: windowHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const velocityY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const offsetY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const dragStartY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const animationTimer = (0, _reactNativeReanimated.useSharedValue)(0);
+  const isAnimationTimerActive = (0, _reactNativeReanimated.useSharedValue)(false);
+  const isScrollActive = (0, _reactNativeReanimated.useSharedValue)(false);
+  const scroll = {
+    offsetY: (0, _reactNativeReanimated.useSharedValue)(0),
+    maxOffsetY: (0, _reactNativeReanimated.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';
+
+    (0, _reactNativeReanimated.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 = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: SCROLL_INTERVAL_MS,
+      easing: _reactNativeReanimated.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;
+    }
+  };
+
+  (0, _reactNativeReanimated.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;
+    (0, _reactNativeReanimated.scrollTo)(animatedScrollRef, 0, offsetY.value, false);
+  });
+  return [startScrolling, scrollOnDragOver, stopScrolling, scrollHandler];
+}
+//# sourceMappingURL=use-scroll-when-dragging.native.js.map