@gechiui/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 _element = require("@gechiui/element");

var _lodash = require("lodash");

var _reactNative = require("react-native");

var _i18n = require("@gechiui/i18n");

var _components = require("@gechiui/components");

var _compose = require("@gechiui/compose");

var _data = require("@gechiui/data");

var _moverDescription = require("./mover-description");

var _store = require("../../store");

/**
 * External dependencies
 */

/**
 * GeChiUI dependencies
 */

/**
 * Internal dependencies
 */
const BLOCK_MOVER_DIRECTION_TOP = 'blockPageMoverOptions-moveToTop';
exports.BLOCK_MOVER_DIRECTION_TOP = BLOCK_MOVER_DIRECTION_TOP;
const BLOCK_MOVER_DIRECTION_BOTTOM = 'blockPageMoverOptions-moveToBottom';
exports.BLOCK_MOVER_DIRECTION_BOTTOM = BLOCK_MOVER_DIRECTION_BOTTOM;

const BlockMover = _ref => {
  let {
    isFirst,
    isLast,
    canMove,
    onMoveDown,
    onMoveUp,
    onLongMove,
    firstIndex,
    numberOfBlocks,
    rootClientId,
    isStackedHorizontally
  } = _ref;
  const pickerRef = (0, _element.useRef)();
  const [blockPageMoverState, setBlockPageMoverState] = (0, _element.useState)(undefined);

  const showBlockPageMover = direction => () => {
    if (!pickerRef.current) {
      setBlockPageMoverState(undefined);
      return;
    }

    setBlockPageMoverState(direction);
    pickerRef.current.presentPicker();
  };

  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();
  };

  if (!canMove || isFirst && isLast && !rootClientId) {
    return null;
  }

  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarButton, {
    title: !isFirst ? backwardButtonTitle : firstBlockTitle,
    isDisabled: isFirst,
    onClick: onMoveUp,
    onLongPress: showBlockPageMover(BLOCK_MOVER_DIRECTION_TOP),
    icon: backwardButtonIcon,
    extraProps: {
      hint: backwardButtonHint
    }
  }), (0, _element.createElement)(_components.ToolbarButton, {
    title: !isLast ? forwardButtonTitle : lastBlockTitle,
    isDisabled: isLast,
    onClick: onMoveDown,
    onLongPress: showBlockPageMover(BLOCK_MOVER_DIRECTION_BOTTOM),
    icon: forwardButtonIcon,
    extraProps: {
      hint: forwardButtonHint
    }
  }), (0, _element.createElement)(_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 = (0, _compose.compose)((0, _data.withSelect)((select, _ref2) => {
  let {
    clientIds
  } = _ref2;
  const {
    getBlockIndex,
    canMoveBlocks,
    getBlockRootClientId,
    getBlockOrder
  } = select(_store.store);
  const normalizedClientIds = (0, _lodash.castArray)(clientIds);
  const firstClientId = (0, _lodash.first)(normalizedClientIds);
  const rootClientId = getBlockRootClientId(firstClientId);
  const blockOrder = getBlockOrder(rootClientId);
  const firstIndex = getBlockIndex(firstClientId);
  const lastIndex = getBlockIndex((0, _lodash.last)(normalizedClientIds));
  return {
    firstIndex,
    numberOfBlocks: blockOrder.length - 1,
    isFirst: firstIndex === 0,
    isLast: lastIndex === blockOrder.length - 1,
    canMove: canMoveBlocks(clientIds, rootClientId),
    rootClientId
  };
}), (0, _data.withDispatch)((dispatch, _ref3) => {
  let {
    clientIds,
    rootClientId
  } = _ref3;
  const {
    moveBlocksDown,
    moveBlocksUp,
    moveBlocksToPosition
  } = dispatch(_store.store);
  return {
    onMoveDown: (0, _lodash.partial)(moveBlocksDown, clientIds, rootClientId),
    onMoveUp: (0, _lodash.partial)(moveBlocksUp, clientIds, rootClientId),
    onLongMove: targetIndex => (0, _lodash.partial)(moveBlocksToPosition, clientIds, rootClientId, targetIndex)
  };
}), _compose.withInstanceId)(BlockMover);

exports.default = _default;
//# sourceMappingURL=index.native.js.map