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

Generic block editor.

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

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

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

import styles from './style.scss';
import BlockMover from '../block-mover';
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 = _ref => {
  let {
    clientId,
    onDelete,
    isStackedHorizontally,
    blockWidth,
    anchorNodeRef,
    isFullWidth
  } = _ref;
  const [fillsLength, setFillsLength] = useState(null);
  const [appenderWidth, setAppenderWidth] = useState(0);
  const spacingValue = styles.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;

    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(View, {
    style: styles.spacer
  }), createElement(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
      createElement(BlockSettingsButtonFill, {
        fillsLength: fills.length,
        onChangeFillsLength: setFillsLength
      }, wrapBlockSettings ? null : fills[0])
    );
  }), createElement(BlockActionsMenu, {
    clientIds: [clientId],
    wrapBlockMover: wrapBlockMover,
    wrapBlockSettings: wrapBlockSettings && fillsLength,
    isStackedHorizontally: isStackedHorizontally,
    onDelete: onDelete,
    anchorNodeRef: anchorNodeRef
  }));
};

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