@wordpress/block-library/build/spacer/edit.js

Block library for the WordPress 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classnames = _interopRequireDefault(require("classnames"));

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

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

var _primitives = require("@wordpress/primitives");

var _controls = _interopRequireDefault(require("./controls"));

var _constants = require("./constants");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const ResizableSpacer = _ref => {
  let {
    orientation,
    onResizeStart,
    onResize,
    onResizeStop,
    isSelected,
    isResizing,
    setIsResizing,
    ...props
  } = _ref;

  const getCurrentSize = elt => {
    return orientation === 'horizontal' ? elt.clientWidth : elt.clientHeight;
  };

  const getNextVal = elt => {
    return `${getCurrentSize(elt)}px`;
  };

  return (0, _element.createElement)(_components.ResizableBox, (0, _extends2.default)({
    className: (0, _classnames.default)('block-library-spacer__resize-container', {
      'resize-horizontal': orientation === 'horizontal',
      'is-resizing': isResizing,
      'is-selected': isSelected
    }),
    onResizeStart: (_event, _direction, elt) => {
      const nextVal = getNextVal(elt);
      onResizeStart(nextVal);
      onResize(nextVal);
    },
    onResize: (_event, _direction, elt) => {
      onResize(getNextVal(elt));

      if (!isResizing) {
        setIsResizing(true);
      }
    },
    onResizeStop: (_event, _direction, elt) => {
      const nextVal = getCurrentSize(elt);
      onResizeStop(`${nextVal}px`);
      setIsResizing(false);
    },
    __experimentalShowTooltip: true,
    __experimentalTooltipProps: {
      axis: orientation === 'horizontal' ? 'x' : 'y',
      position: 'corner',
      isVisible: isResizing
    },
    showHandle: isSelected
  }, props));
};

const SpacerEdit = _ref2 => {
  let {
    attributes,
    isSelected,
    setAttributes,
    toggleSelection,
    context
  } = _ref2;
  const {
    orientation
  } = context;
  const {
    height,
    width
  } = attributes;
  const [isResizing, setIsResizing] = (0, _element.useState)(false);
  const [temporaryHeight, setTemporaryHeight] = (0, _element.useState)(null);
  const [temporaryWidth, setTemporaryWidth] = (0, _element.useState)(null);

  const onResizeStart = () => toggleSelection(false);

  const onResizeStop = () => toggleSelection(true);

  const handleOnVerticalResizeStop = newHeight => {
    onResizeStop();
    setAttributes({
      height: newHeight
    });
    setTemporaryHeight(null);
  };

  const handleOnHorizontalResizeStop = newWidth => {
    onResizeStop();
    setAttributes({
      width: newWidth
    });
    setTemporaryWidth(null);
  };

  const style = {
    height: orientation === 'horizontal' ? 24 : temporaryHeight || height || undefined,
    width: orientation === 'horizontal' ? temporaryWidth || width || undefined : undefined
  };

  const resizableBoxWithOrientation = blockOrientation => {
    if (blockOrientation === 'horizontal') {
      return (0, _element.createElement)(ResizableSpacer, {
        minWidth: _constants.MIN_SPACER_SIZE,
        enable: {
          top: false,
          right: true,
          bottom: false,
          left: false,
          topRight: false,
          bottomRight: false,
          bottomLeft: false,
          topLeft: false
        },
        orientation: blockOrientation,
        onResizeStart: onResizeStart,
        onResize: setTemporaryWidth,
        onResizeStop: handleOnHorizontalResizeStop,
        isSelected: isSelected,
        isResizing: isResizing,
        setIsResizing: setIsResizing
      });
    }

    return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(ResizableSpacer, {
      minHeight: _constants.MIN_SPACER_SIZE,
      enable: {
        top: false,
        right: false,
        bottom: true,
        left: false,
        topRight: false,
        bottomRight: false,
        bottomLeft: false,
        topLeft: false
      },
      orientation: blockOrientation,
      onResizeStart: onResizeStart,
      onResize: setTemporaryHeight,
      onResizeStop: handleOnVerticalResizeStop,
      isSelected: isSelected,
      isResizing: isResizing,
      setIsResizing: setIsResizing
    }));
  };

  (0, _element.useEffect)(() => {
    if (orientation === 'horizontal' && !width) {
      setAttributes({
        height: '0px',
        width: '72px'
      });
    }
  }, []);
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_primitives.View, (0, _blockEditor.useBlockProps)({
    style
  }), resizableBoxWithOrientation(orientation)), (0, _element.createElement)(_controls.default, {
    setAttributes: setAttributes,
    height: temporaryHeight || height,
    width: temporaryWidth || width,
    orientation: orientation,
    isResizing: isResizing
  }));
};

var _default = SpacerEdit;
exports.default = _default;
//# sourceMappingURL=edit.js.map