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

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

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

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

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

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

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

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

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

/**
 * External dependencies
 */

/**
 * GeChiUI 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 = _ref => {
  let {
    clientId,
    onDelete,
    isStackedHorizontally,
    blockWidth,
    anchorNodeRef,
    isFullWidth
  } = _ref;
  const [fillsLength, setFillsLength] = (0, _element.useState)(null);
  const [appenderWidth, setAppenderWidth] = (0, _element.useState)(0);
  const spacingValue = _style.default.toolbar.marginLeft * 2;

  function onLayout(_ref2) {
    let {
      nativeEvent
    } = _ref2;
    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)(_reactNative.View, {
    style: _style.default.spacer
  }), (0, _element.createElement)(_blockSettings.BlockSettingsButton.Slot, null, function () {
    let fills = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [null];
    return (// 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, {
    clientIds: [clientId],
    wrapBlockMover: wrapBlockMover,
    wrapBlockSettings: wrapBlockSettings && fillsLength,
    isStackedHorizontally: isStackedHorizontally,
    onDelete: onDelete,
    anchorNodeRef: anchorNodeRef
  }));
};

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

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