@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 _lodash = require("lodash");

var _reactUseGesture = require("react-use-gesture");

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

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

/**
 * External dependencies
 */

/**
 * Internal dependencies
 */
function BoxUnitControl({
  isFirst,
  isLast,
  isOnly,
  onHoverOn = _lodash.noop,
  onHoverOff = _lodash.noop,
  label,
  value,
  ...props
}) {
  const bindHoverGesture = (0, _reactUseGesture.useHover)(({
    event,
    ...state
  }) => {
    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",
    hideHTMLArrows: true,
    isFirst: isFirst,
    isLast: isLast,
    isOnly: isOnly,
    isPressEnterToChange: true,
    isResetValueOnUnitChange: false,
    value: value
  }, props))));
}

function Tooltip({
  children,
  text
}) {
  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