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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

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

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

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

var _style = _interopRequireDefault(require("./style.scss"));

var _blockMover = _interopRequireDefault(require("../block-mover"));

var _blockDraggable = _interopRequireDefault(require("../block-draggable"));

var _blockActionsMenu = _interopRequireDefault(require("./block-actions-menu"));

var _blockSettings = require("../block-settings");

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// Defined breakpoints are used to get a point when
// `settings` and `mover` controls should be wrapped into `BlockActionsMenu`
// and accessed through `BottomSheet`(Android)/`ActionSheet`(iOS).
const BREAKPOINTS = {
  wrapSettings: 65,
  wrapMover: 150
};

const BlockMobileToolbar = ({
  clientId,
  onDelete,
  isStackedHorizontally,
  blockWidth,
  anchorNodeRef,
  isFullWidth,
  draggingClientId
}) => {
  const [fillsLength, setFillsLength] = (0, _element.useState)(null);
  const [appenderWidth, setAppenderWidth] = (0, _element.useState)(0);
  const spacingValue = _style.default.toolbar.marginLeft * 2;

  function onLayout({
    nativeEvent
  }) {
    const {
      layout
    } = nativeEvent;
    const layoutWidth = Math.floor(layout.width);

    if (layoutWidth !== appenderWidth) {
      setAppenderWidth(nativeEvent.layout.width);
    }
  }

  const wrapBlockSettings = blockWidth < BREAKPOINTS.wrapSettings || appenderWidth - spacingValue < BREAKPOINTS.wrapSettings;
  const wrapBlockMover = blockWidth <= BREAKPOINTS.wrapMover || appenderWidth - spacingValue <= BREAKPOINTS.wrapMover;

  const BlockSettingsButtonFill = fillProps => {
    var _fillProps$children;

    (0, _element.useEffect)(() => fillProps.onChangeFillsLength(fillProps.fillsLength), [fillProps.fillsLength]);
    return (_fillProps$children = fillProps.children) !== null && _fillProps$children !== void 0 ? _fillProps$children : null;
  };

  return (0, _element.createElement)(_reactNative.View, {
    style: [_style.default.toolbar, isFullWidth && _style.default.toolbarFullWidth],
    onLayout: onLayout
  }, !wrapBlockMover && (0, _element.createElement)(_blockMover.default, {
    clientIds: [clientId],
    isStackedHorizontally: isStackedHorizontally
  }), (0, _element.createElement)(_blockDraggable.default, {
    clientId: clientId,
    draggingClientId: draggingClientId,
    testID: "draggable-trigger-mobile-toolbar"
  }, () => (0, _element.createElement)(_reactNative.View, {
    style: _style.default.spacer
  })), (0, _element.createElement)(_blockSettings.BlockSettingsButton.Slot, null, (fills = [null]) => // The purpose of BlockSettingsButtonFill component is only to provide a way
  // to pass data upstream from the slot rendering.
  (0, _element.createElement)(BlockSettingsButtonFill, {
    fillsLength: fills.length,
    onChangeFillsLength: setFillsLength
  }, wrapBlockSettings ? null : fills[0])), (0, _element.createElement)(_blockActionsMenu.default, {
    clientId: clientId,
    wrapBlockMover: wrapBlockMover,
    wrapBlockSettings: wrapBlockSettings && fillsLength,
    isStackedHorizontally: isStackedHorizontally,
    onDelete: onDelete,
    anchorNodeRef: anchorNodeRef
  }));
};

var _default = (0, _compose.compose)((0, _data.withSelect)((select, {
  clientId
}) => {
  const {
    getBlockIndex
  } = select(_store.store);
  return {
    order: getBlockIndex(clientId)
  };
}), (0, _data.withDispatch)((dispatch, {
  clientId,
  rootClientId,
  onDelete
}) => {
  const {
    removeBlock
  } = dispatch(_store.store);
  return {
    onDelete: onDelete || (() => removeBlock(clientId, rootClientId))
  };
}))(BlockMobileToolbar);

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