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

Generic block editor.

import { createElement } from "@wordpress/element";

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

import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { useState, useEffect } from '@wordpress/element';
/**
 * Internal dependencies
 */

import styles from './style.scss';
import BlockMover from '../block-mover';
import BlockDraggable from '../block-draggable';
import BlockActionsMenu from './block-actions-menu';
import { BlockSettingsButton } from '../block-settings';
import { store as blockEditorStore } from '../../store'; // 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] = useState(null);
  const [appenderWidth, setAppenderWidth] = useState(0);
  const spacingValue = styles.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;

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

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

export default compose(withSelect((select, {
  clientId
}) => {
  const {
    getBlockIndex
  } = select(blockEditorStore);
  return {
    order: getBlockIndex(clientId)
  };
}), withDispatch((dispatch, {
  clientId,
  rootClientId,
  onDelete
}) => {
  const {
    removeBlock
  } = dispatch(blockEditorStore);
  return {
    onDelete: onDelete || (() => removeBlock(clientId, rootClientId))
  };
}))(BlockMobileToolbar);
//# sourceMappingURL=index.native.js.map