@wordpress/components/build/box-control/unit-control.js

UI components for WordPress.

"use strict";

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

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

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

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

var _react = require("@use-gesture/react");

var _tooltip = _interopRequireDefault(require("../tooltip"));

var _boxControlStyles = require("./styles/box-control-styles");

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {};

function BoxUnitControl(_ref) {
  let {
    isFirst,
    isLast,
    isOnly,
    onHoverOn = noop,
    onHoverOff = noop,
    label,
    value,
    ...props
  } = _ref;
  const bindHoverGesture = (0, _react.useHover)(_ref2 => {
    let {
      event,
      ...state
    } = _ref2;

    if (state.hovering) {
      onHoverOn(event, state);
    } else {
      onHoverOff(event, state);
    }
  });
  return (0, _element.createElement)(_boxControlStyles.UnitControlWrapper, bindHoverGesture(), (0, _element.createElement)(Tooltip, {
    text: label
  }, (0, _element.createElement)(_boxControlStyles.UnitControl, (0, _extends2.default)({
    "aria-label": label,
    className: "component-box-control__unit-control",
    isFirst: isFirst,
    isLast: isLast,
    isOnly: isOnly,
    isPressEnterToChange: true,
    isResetValueOnUnitChange: false,
    value: value
  }, props))));
}

function Tooltip(_ref3) {
  let {
    children,
    text
  } = _ref3;
  if (!text) return children;
  /**
   * Wrapping the children in a `<div />` as Tooltip as it attempts
   * to render the <UnitControl />. Using a plain `<div />` appears to
   * resolve this issue.
   *
   * Originally discovered and referenced here:
   * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
   */

  return (0, _element.createElement)(_tooltip.default, {
    text: text,
    position: "top"
  }, (0, _element.createElement)("div", null, children));
}
//# sourceMappingURL=unit-control.js.map