@wordpress/components/build/resizable-box/resize-tooltip/label.js

UI components for WordPress.

"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 _i18n = require("@wordpress/i18n");

var _utils = require("./utils");

var _resizeTooltip = require("./styles/resize-tooltip.styles");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const CORNER_OFFSET = 4;
const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;

function Label({
  label,
  position = _utils.POSITIONS.corner,
  zIndex = 1000,
  ...props
}, ref) {
  const showLabel = !!label;
  const isBottom = position === _utils.POSITIONS.bottom;
  const isCorner = position === _utils.POSITIONS.corner;
  if (!showLabel) return null;
  let style = {
    opacity: showLabel ? 1 : null,
    zIndex
  };
  let labelStyle = {};

  if (isBottom) {
    style = { ...style,
      position: 'absolute',
      bottom: CURSOR_OFFSET_TOP * -1,
      left: '50%',
      transform: 'translate(-50%, 0)'
    };
    labelStyle = {
      transform: `translate(0, 100%)`
    };
  }

  if (isCorner) {
    style = { ...style,
      position: 'absolute',
      top: CORNER_OFFSET,
      right: (0, _i18n.isRTL)() ? null : CORNER_OFFSET,
      left: (0, _i18n.isRTL)() ? CORNER_OFFSET : null
    };
  }

  return (0, _element.createElement)(_resizeTooltip.TooltipWrapper, (0, _extends2.default)({
    "aria-hidden": "true",
    className: "components-resizable-tooltip__tooltip-wrapper",
    isActive: showLabel,
    ref: ref,
    style: style
  }, props), (0, _element.createElement)(_resizeTooltip.Tooltip, {
    className: "components-resizable-tooltip__tooltip",
    style: labelStyle
  }, (0, _element.createElement)(_resizeTooltip.LabelText, {
    as: "span"
  }, label)));
}

const ForwardedComponent = (0, _element.forwardRef)(Label);
var _default = ForwardedComponent;
exports.default = _default;
//# sourceMappingURL=label.js.map