@wordpress/components
Version:
UI components for WordPress.
82 lines (78 loc) • 2.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _utils = require("./utils");
var _resizeTooltip = require("./styles/resize-tooltip.styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* 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 : undefined,
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)() ? undefined : CORNER_OFFSET,
left: (0, _i18n.isRTL)() ? CORNER_OFFSET : undefined
};
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.TooltipWrapper, {
"aria-hidden": "true",
className: "components-resizable-tooltip__tooltip-wrapper",
ref: ref,
style: style,
...props,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.Tooltip, {
className: "components-resizable-tooltip__tooltip",
style: labelStyle,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.LabelText, {
as: "span",
children: label
})
})
});
}
const ForwardedComponent = (0, _element.forwardRef)(Label);
var _default = exports.default = ForwardedComponent;
//# sourceMappingURL=label.js.map