@blueprintjs/core
Version:
Core styles & components
61 lines • 3.03 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverArrow = exports.TOOLTIP_ARROW_SVG_SIZE = exports.POPOVER_ARROW_SVG_SIZE = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("../../common");
const popperUtils_1 = require("./popperUtils");
// these paths come from the Core Kit Sketch file
// https://github.com/palantir/blueprint/blob/50a71c9/resources/sketch/blueprint-core-kit.sketch
const SVG_SHADOW_PATH = "M8.11 6.302c1.015-.936 1.887-2.922 1.887-4.297v26c0-1.378" +
"-.868-3.357-1.888-4.297L.925 17.09c-1.237-1.14-1.233-3.034 0-4.17L8.11 6.302z";
const SVG_ARROW_PATH = "M8.787 7.036c1.22-1.125 2.21-3.376 2.21-5.03V0v30-2.005" +
"c0-1.654-.983-3.9-2.21-5.03l-7.183-6.616c-.81-.746-.802-1.96 0-2.7l7.183-6.614z";
// additional space between arrow and edge of target
const ARROW_SPACING = 4;
exports.POPOVER_ARROW_SVG_SIZE = 30;
exports.TOOLTIP_ARROW_SVG_SIZE = 22;
/* istanbul ignore next */
/** Modifier helper function to compute arrow rotate() transform */
function getArrowAngle(placement) {
if (placement == null) {
return 0;
}
// can only be top/left/bottom/right - auto is resolved internally
switch ((0, popperUtils_1.getBasePlacement)(placement)) {
case "top":
return -90;
case "left":
return 180;
case "bottom":
return 90;
default:
return 0;
}
}
/* istanbul ignore next */
/**
* Popper's builtin "arrow" modifier options.padding doesn't seem to work for us, so we
* need to compute our own offset in the direction of the popover relative to the reference.
*/
function getArrowReferenceOffsetStyle(placement) {
const offset = exports.POPOVER_ARROW_SVG_SIZE / 2 - ARROW_SPACING;
switch ((0, popperUtils_1.getBasePlacement)(placement)) {
case "top":
return { bottom: -offset };
case "left":
return { right: -offset };
case "bottom":
return { top: -offset };
default:
return { left: -offset };
}
}
const PopoverArrow = ({ arrowProps: { ref, style }, placement }) => (
// data attribute allows popper.js to position the arrow
(0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, className: common_1.Classes.POPOVER_ARROW, "data-popper-arrow": true, ref: ref, style: {
...style,
...getArrowReferenceOffsetStyle(placement),
}, children: (0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${exports.POPOVER_ARROW_SVG_SIZE} ${exports.POPOVER_ARROW_SVG_SIZE}`, style: { transform: `rotate(${getArrowAngle(placement)}deg)` }, children: [(0, jsx_runtime_1.jsx)("path", { className: common_1.Classes.POPOVER_ARROW + "-border", d: SVG_SHADOW_PATH }), (0, jsx_runtime_1.jsx)("path", { className: common_1.Classes.POPOVER_ARROW + "-fill", d: SVG_ARROW_PATH })] }) }));
exports.PopoverArrow = PopoverArrow;
exports.PopoverArrow.displayName = `${common_1.DISPLAYNAME_PREFIX}.PopoverArrow`;
//# sourceMappingURL=popoverArrow.js.map