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

Generic block editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.BlockMover = exports.BLOCK_MOVER_DIRECTION_TOP = exports.BLOCK_MOVER_DIRECTION_BOTTOM = void 0;
var _reactNative = require("react-native");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _moverDescription = require("./mover-description");
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const BLOCK_MOVER_DIRECTION_TOP = exports.BLOCK_MOVER_DIRECTION_TOP = 'blockPageMoverOptions-moveToTop';
const BLOCK_MOVER_DIRECTION_BOTTOM = exports.BLOCK_MOVER_DIRECTION_BOTTOM = 'blockPageMoverOptions-moveToBottom';
const BlockMover = ({
  isFirst,
  isLast,
  canMove,
  onMoveDown,
  onMoveUp,
  onLongMove,
  firstIndex,
  numberOfBlocks,
  rootClientId,
  isStackedHorizontally
}) => {
  const pickerRef = (0, _element.useRef)();
  const [shouldPresentPicker, setShouldPresentPicker] = (0, _element.useState)(false);
  const [blockPageMoverState, setBlockPageMoverState] = (0, _element.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.
  (0, _element.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
    }
  } = (0, _moverDescription.getMoversSetup)(isStackedHorizontally, {
    firstIndex
  });
  const blockPageMoverOptions = [{
    icon: backwardButtonIcon,
    label: (0, _i18n.__)('Move to top'),
    value: BLOCK_MOVER_DIRECTION_TOP,
    onSelect: () => {
      onLongMove()(0);
    }
  }, {
    icon: forwardButtonIcon,
    label: (0, _i18n.__)('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 = (0, _element.useCallback)(showBlockPageMover(BLOCK_MOVER_DIRECTION_TOP), []);
  const onLongPressMoveDown = (0, _element.useCallback)(showBlockPageMover(BLOCK_MOVER_DIRECTION_BOTTOM), []);
  if (!canMove || isFirst && isLast && !rootClientId) {
    return null;
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.ToolbarGroup, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      title: !isFirst ? backwardButtonTitle : firstBlockTitle,
      isDisabled: isFirst,
      onClick: onMoveUp,
      onLongPress: onLongPressMoveUp,
      icon: backwardButtonIcon,
      extraProps: {
        hint: backwardButtonHint
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
      title: !isLast ? forwardButtonTitle : lastBlockTitle,
      isDisabled: isLast,
      onClick: onMoveDown,
      onLongPress: onLongPressMoveDown,
      icon: forwardButtonIcon,
      extraProps: {
        hint: forwardButtonHint
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Picker, {
      ref: pickerRef,
      options: blockPageMoverOptions,
      onChange: onPickerSelect,
      title: (0, _i18n.__)('Change block position'),
      leftAlign: true,
      hideCancelButton: _reactNative.Platform.OS !== 'ios'
    })]
  });
};
exports.BlockMover = BlockMover;
var _default = exports.default = (0, _compose.compose)((0, _data.withSelect)((select, {
  clientIds
}) => {
  const {
    getBlockIndex,
    canMoveBlocks,
    getBlockRootClientId,
    getBlockOrder
  } = select(_store.store);
  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
  };
}), (0, _data.withDispatch)((dispatch, {
  clientIds,
  rootClientId
}) => {
  const {
    moveBlocksDown,
    moveBlocksUp,
    moveBlocksToPosition
  } = dispatch(_store.store);
  return {
    onMoveDown: (...args) => moveBlocksDown(clientIds, rootClientId, ...args),
    onMoveUp: (...args) => moveBlocksUp(clientIds, rootClientId, ...args),
    onLongMove: targetIndex => (...args) => moveBlocksToPosition(clientIds, rootClientId, targetIndex, ...args)
  };
}), _compose.withInstanceId)(BlockMover);
//# sourceMappingURL=index.native.js.map