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

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { forwardRef } from '@wordpress/element';
import { isRTL } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import { POSITIONS } from './utils';
import { TooltipWrapper, Tooltip, LabelText } from './styles/resize-tooltip.styles';
const CORNER_OFFSET = 4;
const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;

function Label({
  label,
  position = POSITIONS.corner,
  zIndex = 1000,
  ...props
}, ref) {
  const showLabel = !!label;
  const isBottom = position === POSITIONS.bottom;
  const isCorner = position === 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: isRTL() ? null : CORNER_OFFSET,
      left: isRTL() ? CORNER_OFFSET : null
    };
  }

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

const ForwardedComponent = forwardRef(Label);
export default ForwardedComponent;
//# sourceMappingURL=label.js.map