@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
68 lines • 2.89 kB
JavaScript
import React from 'react';
import classnames from 'classnames';
import { DEFAULTS, PLACEMENTS, STYLE } from './ModalArrow.constants';
import './ModalArrow.style.scss';
/**
* The ModalArrow component. This is designed to be strictly consumed by the ModalContainer component.
*/
var ModalArrow = function (props) {
var className = props.className, color = props.color, id = props.id, _a = props.placement, placement = _a === void 0 ? DEFAULTS.PLACEMENT : _a, style = props.style;
// Point Reference.
var pr = {
end: '',
start: '',
tipEnd: '',
tipPeak: '',
tipStart: '',
};
var isVertical = placement.startsWith(PLACEMENTS.TOP) || placement.startsWith(PLACEMENTS.BOTTOM);
switch (placement) {
case PLACEMENTS.BOTTOM:
case PLACEMENTS.BOTTOM_START:
case PLACEMENTS.BOTTOM_END:
pr.start = '0 12';
pr.tipStart = '10 -10';
pr.tipPeak = '2 -2';
pr.tipEnd = '4 0';
pr.end = '10 10';
break;
case PLACEMENTS.LEFT:
case PLACEMENTS.LEFT_START:
case PLACEMENTS.LEFT_END:
pr.start = '0 0';
pr.tipStart = '10 10';
pr.tipPeak = '2 2';
pr.tipEnd = '0 4';
pr.end = '-10 10';
break;
case PLACEMENTS.RIGHT:
case PLACEMENTS.RIGHT_START:
case PLACEMENTS.RIGHT_END:
pr.start = '12 24';
pr.tipStart = '-10 -10';
pr.tipPeak = '-2 -2';
pr.tipEnd = '0 -4';
pr.end = '10 -10';
break;
case PLACEMENTS.TOP:
case PLACEMENTS.TOP_START:
case PLACEMENTS.TOP_END:
pr.start = '24 0';
pr.tipStart = '-10 10';
pr.tipPeak = '-2 2';
pr.tipEnd = '-4 0';
pr.end = '-10 -10';
break;
}
var pathData = "m ".concat(pr.start, " l ").concat(pr.tipStart, " q ").concat(pr.tipPeak, " ").concat(pr.tipEnd, " l ").concat(pr.end);
var viewBoxHeight = isVertical ? 12 : 24;
var viewBoxWidth = isVertical ? 24 : 12;
var viewBox = "0 0 ".concat(viewBoxWidth, " ").concat(viewBoxHeight);
return (React.createElement("svg", { id: id, className: classnames(STYLE.svg, className), style: style, "aria-hidden": "true", xmlns: "http://www.w3.org/svg/2000", width: viewBoxWidth, height: viewBoxHeight, viewBox: viewBox, "data-placement": placement },
React.createElement("defs", null,
React.createElement("clipPath", { id: "modal-arrow-cut-stroke-".concat(placement) },
React.createElement("path", { d: pathData }))),
React.createElement("path", { "data-color": color || DEFAULTS.COLOR, clipPath: "url(#modal-arrow-cut-stroke-".concat(placement, ")"), d: pathData })));
};
export default ModalArrow;
//# sourceMappingURL=ModalArrow.js.map