@wordpress/block-editor/build-module/components/block-mover/index.native.js

Generic block editor.

/**
 * External dependencies
 */
import { Platform } from 'react-native';

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { Picker, ToolbarButton, ToolbarGroup } from '@wordpress/components';
import { withInstanceId, compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { useCallback, useEffect, useRef, useState } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { getMoversSetup } from './mover-description';
import { store as blockEditorStore } from '../../store';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const BLOCK_MOVER_DIRECTION_TOP = 'blockPageMoverOptions-moveToTop';
export const BLOCK_MOVER_DIRECTION_BOTTOM = 'blockPageMoverOptions-moveToBottom';
export const BlockMover = ({
  isFirst,
  isLast,
  canMove,
  onMoveDown,
  onMoveUp,
  onLongMove,
  firstIndex,
  numberOfBlocks,
  rootClientId,
  isStackedHorizontally
}) => {
  const pickerRef = useRef();
  const [shouldPresentPicker, setShouldPresentPicker] = useState(false);
  const [blockPageMoverState, setBlockPageMoverState] = useState(undefined);
  const showBlockPageMover = direction => () => {
    if (!pickerRef.current) {
      setBlockPageMoverState(undefined);
      return;
    }
    setBlockPageMoverState(direction);
    setShouldPresentPicker(true);
  };

  // Ensure that the picker is only presented after state updates.
  useEffect(() => {
    if (shouldPresentPicker) {
      pickerRef.current?.presentPicker();
      setShouldPresentPicker(false);
    }
  }, [shouldPresentPicker]);
  const {
    description: {
      backwardButtonHint,
      forwardButtonHint,
      firstBlockTitle,
      lastBlockTitle
    },
    icon: {
      backward: backwardButtonIcon,
      forward: forwardButtonIcon
    },
    title: {
      backward: backwardButtonTitle,
      forward: forwardButtonTitle
    }
  } = getMoversSetup(isStackedHorizontally, {
    firstIndex
  });
  const blockPageMoverOptions = [{
    icon: backwardButtonIcon,
    label: __('Move to top'),
    value: BLOCK_MOVER_DIRECTION_TOP,
    onSelect: () => {
      onLongMove()(0);
    }
  }, {
    icon: forwardButtonIcon,
    label: __('Move to bottom'),
    value: BLOCK_MOVER_DIRECTION_BOTTOM,
    onSelect: () => {
      onLongMove()(numberOfBlocks);
    }
  }].filter(el => el.value === blockPageMoverState);
  const onPickerSelect = value => {
    const option = blockPageMoverOptions.find(el => el.value === value);
    if (option && option.onSelect) {
      option.onSelect();
    }
  };
  const onLongPressMoveUp = useCallback(showBlockPageMover(BLOCK_MOVER_DIRECTION_TOP), []);
  const onLongPressMoveDown = useCallback(showBlockPageMover(BLOCK_MOVER_DIRECTION_BOTTOM), []);
  if (!canMove || isFirst && isLast && !rootClientId) {
    return null;
  }
  return /*#__PURE__*/_jsxs(ToolbarGroup, {
    children: [/*#__PURE__*/_jsx(ToolbarButton, {
      title: !isFirst ? backwardButtonTitle : firstBlockTitle,
      isDisabled: isFirst,
      onClick: onMoveUp,
      onLongPress: onLongPressMoveUp,
      icon: backwardButtonIcon,
      extraProps: {
        hint: backwardButtonHint
      }
    }), /*#__PURE__*/_jsx(ToolbarButton, {
      title: !isLast ? forwardButtonTitle : lastBlockTitle,
      isDisabled: isLast,
      onClick: onMoveDown,
      onLongPress: onLongPressMoveDown,
      icon: forwardButtonIcon,
      extraProps: {
        hint: forwardButtonHint
      }
    }), /*#__PURE__*/_jsx(Picker, {
      ref: pickerRef,
      options: blockPageMoverOptions,
      onChange: onPickerSelect,
      title: __('Change block position'),
      leftAlign: true,
      hideCancelButton: Platform.OS !== 'ios'
    })]
  });
};
export default compose(withSelect((select, {
  clientIds
}) => {
  const {
    getBlockIndex,
    canMoveBlocks,
    getBlockRootClientId,
    getBlockOrder
  } = select(blockEditorStore);
  const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds];
  const firstClientId = normalizedClientIds[0];
  const rootClientId = getBlockRootClientId(firstClientId);
  const blockOrder = getBlockOrder(rootClientId);
  const firstIndex = getBlockIndex(firstClientId);
  const lastIndex = getBlockIndex(normalizedClientIds[normalizedClientIds.length - 1]);
  return {
    firstIndex,
    numberOfBlocks: blockOrder.length - 1,
    isFirst: firstIndex === 0,
    isLast: lastIndex === blockOrder.length - 1,
    canMove: canMoveBlocks(clientIds),
    rootClientId
  };
}), withDispatch((dispatch, {
  clientIds,
  rootClientId
}) => {
  const {
    moveBlocksDown,
    moveBlocksUp,
    moveBlocksToPosition
  } = dispatch(blockEditorStore);
  return {
    onMoveDown: (...args) => moveBlocksDown(clientIds, rootClientId, ...args),
    onMoveUp: (...args) => moveBlocksUp(clientIds, rootClientId, ...args),
    onLongMove: targetIndex => (...args) => moveBlocksToPosition(clientIds, rootClientId, targetIndex, ...args)
  };
}), withInstanceId)(BlockMover);
//# sourceMappingURL=index.native.js.map