@fluentui/react
Version:
Reusable React components for building web experiences.
66 lines • 2.66 kB
JavaScript
import * as React from 'react';
import { classNamesFunction } from '../../../Utilities';
import { getStyles } from './Beak.styles';
import { RectangleEdge } from '../../../Positioning';
export var BEAK_HEIGHT = 10;
export var BEAK_WIDTH = 18;
export var Beak = React.forwardRef(function (props, forwardedRef) {
var left = props.left, top = props.top, bottom = props.bottom, right = props.right, color = props.color, _a = props.direction, direction = _a === void 0 ? RectangleEdge.top : _a;
var svgHeight;
var svgWidth;
if (direction === RectangleEdge.top || direction === RectangleEdge.bottom) {
svgHeight = BEAK_HEIGHT;
svgWidth = BEAK_WIDTH;
}
else {
svgHeight = BEAK_WIDTH;
svgWidth = BEAK_HEIGHT;
}
var pointOne;
var pointTwo;
var pointThree;
var transform;
switch (direction) {
case RectangleEdge.top:
default:
pointOne = "".concat(BEAK_WIDTH / 2, ", 0");
pointTwo = "".concat(BEAK_WIDTH, ", ").concat(BEAK_HEIGHT);
pointThree = "0, ".concat(BEAK_HEIGHT);
transform = 'translateY(-100%)';
break;
case RectangleEdge.right:
pointOne = "0, 0";
pointTwo = "".concat(BEAK_HEIGHT, ", ").concat(BEAK_HEIGHT);
pointThree = "0, ".concat(BEAK_WIDTH);
transform = 'translateX(100%)';
break;
case RectangleEdge.bottom:
pointOne = "0, 0";
pointTwo = "".concat(BEAK_WIDTH, ", 0");
pointThree = "".concat(BEAK_WIDTH / 2, ", ").concat(BEAK_HEIGHT);
transform = 'translateY(100%)';
break;
case RectangleEdge.left:
pointOne = "".concat(BEAK_HEIGHT, ", 0");
pointTwo = "0, ".concat(BEAK_HEIGHT);
pointThree = "".concat(BEAK_HEIGHT, ", ").concat(BEAK_WIDTH);
transform = 'translateX(-100%)';
break;
}
var getClassNames = classNamesFunction();
var classNames = getClassNames(getStyles, {
left: left,
top: top,
bottom: bottom,
right: right,
height: "".concat(svgHeight, "px"),
width: "".concat(svgWidth, "px"),
transform: transform,
color: color,
});
return (React.createElement("div", { className: classNames.root, role: "presentation", ref: forwardedRef },
React.createElement("svg", { height: svgHeight, width: svgWidth, className: classNames.beak },
React.createElement("polygon", { points: pointOne + ' ' + pointTwo + ' ' + pointThree }))));
});
Beak.displayName = 'Beak';
//# sourceMappingURL=Beak.js.map