@wordpress/block-library/build/buttons/edit.native.js

Block library for the WordPress editor.

"use strict";

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

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

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

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

var _blockEditor = require("@wordpress/block-editor");

var _blocks = require("@wordpress/blocks");

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

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

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

var _button = require("../button/");

var _editor = _interopRequireDefault(require("./editor.scss"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ALLOWED_BLOCKS = [_button.name];
const layoutProp = {
  type: 'default',
  alignments: []
};

function ButtonsEdit(_ref) {
  let {
    attributes: {
      layout,
      align
    },
    clientId,
    isSelected,
    setAttributes,
    blockWidth,
    name
  } = _ref;
  const [resizeObserver, sizes] = (0, _compose.useResizeObserver)();
  const [maxWidth, setMaxWidth] = (0, _element.useState)(0);
  const {
    marginLeft: spacing
  } = _editor.default.spacing; // Extract attributes from block layout

  const layoutBlockSupport = (0, _blocks.getBlockSupport)(name, '__experimentalLayout');
  const defaultBlockLayout = layoutBlockSupport === null || layoutBlockSupport === void 0 ? void 0 : layoutBlockSupport.default;
  const usedLayout = layout || defaultBlockLayout || {};
  const {
    justifyContent
  } = usedLayout;
  const {
    isInnerButtonSelected,
    shouldDelete
  } = (0, _data.useSelect)(select => {
    const {
      getBlockCount,
      getBlockParents,
      getSelectedBlockClientId
    } = select(_blockEditor.store);
    const selectedBlockClientId = getSelectedBlockClientId();
    const selectedBlockParents = getBlockParents(selectedBlockClientId, true);
    return {
      isInnerButtonSelected: selectedBlockParents[0] === clientId,
      // The purpose of `shouldDelete` check is giving the ability to
      // pass to mobile toolbar function called `onDelete` which removes
      // the whole `Buttons` container along with the last inner button
      // when there is exactly one button.
      shouldDelete: getBlockCount(clientId) === 1
    };
  }, [clientId]);
  const preferredStyle = (0, _data.useSelect)(select => {
    var _preferredStyleVariat;

    const preferredStyleVariations = select(_blockEditor.store).getSettings().__experimentalPreferredStyleVariations;

    return preferredStyleVariations === null || preferredStyleVariations === void 0 ? void 0 : (_preferredStyleVariat = preferredStyleVariations.value) === null || _preferredStyleVariat === void 0 ? void 0 : _preferredStyleVariat[_button.name];
  }, []);
  const {
    getBlockOrder
  } = (0, _data.useSelect)(_blockEditor.store);
  const {
    insertBlock,
    removeBlock,
    selectBlock
  } = (0, _data.useDispatch)(_blockEditor.store);
  (0, _element.useEffect)(() => {
    const {
      width
    } = sizes || {};
    const {
      isFullWidth
    } = _components.alignmentHelpers;

    if (width) {
      const isFullWidthBlock = isFullWidth(align);
      setMaxWidth(isFullWidthBlock ? blockWidth : width);
    }
  }, [sizes, align]);
  const onAddNextButton = (0, _element.useCallback)((0, _compose.debounce)(selectedId => {
    const order = getBlockOrder(clientId);
    const selectedButtonIndex = order.findIndex(i => i === selectedId);
    const index = selectedButtonIndex === -1 ? order.length + 1 : selectedButtonIndex;
    const insertedBlock = (0, _blocks.createBlock)('core/button');
    insertBlock(insertedBlock, index, clientId);
    selectBlock(insertedBlock.clientId);
  }, 200), []);
  const renderFooterAppender = (0, _element.useRef)(() => (0, _element.createElement)(_reactNative.View, {
    style: _editor.default.appenderContainer
  }, (0, _element.createElement)(_blockEditor.InnerBlocks.ButtonBlockAppender, {
    isFloating: true,
    onAddBlock: onAddNextButton
  })));
  const justifyControls = ['left', 'center', 'right'];
  const remove = (0, _element.useCallback)(() => removeBlock(clientId), [clientId]);
  const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
  return (0, _element.createElement)(_element.Fragment, null, isSelected && (0, _element.createElement)(_blockEditor.BlockControls, {
    group: "block"
  }, (0, _element.createElement)(_blockEditor.JustifyContentControl, {
    allowedControls: justifyControls,
    value: justifyContent,
    onChange: value => setAttributes({
      layout: { ...usedLayout,
        justifyContent: value
      }
    }),
    popoverProps: {
      position: 'bottom right',
      isAlternate: true
    }
  })), resizeObserver, (0, _element.createElement)(_blockEditor.InnerBlocks, {
    allowedBlocks: ALLOWED_BLOCKS,
    template: [[_button.name, {
      className: preferredStyle && `is-style-${preferredStyle}`
    }]],
    renderFooterAppender: shouldRenderFooterAppender && renderFooterAppender.current,
    orientation: "horizontal",
    horizontalAlignment: justifyContent,
    onDeleteBlock: shouldDelete ? remove : undefined,
    onAddBlock: onAddNextButton,
    parentWidth: maxWidth // This value controls the width of that the buttons are able to expand to.
    ,
    marginHorizontal: spacing,
    marginVertical: spacing,
    __experimentalLayout: layoutProp,
    templateInsertUpdatesSelection: true,
    blockWidth: blockWidth
  }));
}
//# sourceMappingURL=edit.native.js.map