@skbkontur/ui-kit
Version:
167 lines • 7.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var PopupHelper_1 = tslib_1.__importDefault(require("./PopupHelper"));
var borderStyles = {
position: 'absolute',
borderStyle: 'solid',
borderTopColor: 'transparent',
borderBottomColor: 'transparent',
borderLeftColor: 'transparent',
borderRightColor: 'transparent'
};
var PopupPin = /** @class */ (function (_super) {
tslib_1.__extends(PopupPin, _super);
function PopupPin() {
return _super !== null && _super.apply(this, arguments) || this;
}
PopupPin.prototype.render = function () {
if (!this.props.popupElement) {
return null;
}
var options = this.getPinOptions(PopupHelper_1.default.getElementAbsoluteRect(this.props.popupElement), PopupHelper_1.default.getPositionObject(this.props.popupPosition), this.props.size, this.props.offset, this.props.borderWidth);
var styleOuter = this.getOuterStyle(options.activeBorder, options.outerSize, this.props.borderColor);
var styleInner = this.getInnerStyle(options.activeBorder, this.props.size, this.props.backgroundColor);
var styleWrapper = this.getWrapperStyle(options.outerLeft, options.outerTop, options.outerSize);
return (React.createElement("div", { style: styleWrapper },
React.createElement("div", { style: styleOuter },
React.createElement("div", { style: styleInner }))));
};
PopupPin.prototype.getPopupOppositeDirection = function () {
var popupDirection = PopupHelper_1.default.getPositionObject(this.props.popupPosition).direction;
switch (popupDirection) {
case 'top':
return 'bottom';
case 'bottom':
return 'top';
case 'left':
return 'right';
case 'right':
return 'left';
default:
throw new TypeError('Unknown direction ' + popupDirection);
}
};
PopupPin.prototype.getWrapperStyle = function (left, top, borderWitdth) {
var direction = this.getPopupOppositeDirection();
var base = {
overflow: 'hidden',
position: 'absolute'
};
switch (direction) {
case 'top':
case 'bottom':
return tslib_1.__assign({}, base, (_a = {}, _a[direction] = -borderWitdth + 'px', _a.left = left + 'px', _a.width = borderWitdth * 2 + 'px', _a.height = borderWitdth + 'px', _a));
case 'left':
case 'right':
return tslib_1.__assign({}, base, (_b = {}, _b[direction] = -borderWitdth + 'px', _b.top = top + 'px', _b.height = borderWitdth * 2 + 'px', _b.width = borderWitdth + 'px', _b));
default:
throw new TypeError('Unknown direction ' + direction);
}
var _a, _b;
};
PopupPin.prototype.getOuterStyle = function (activeBorder, borderWitdth, borderColor) {
var direction = this.getPopupOppositeDirection();
switch (direction) {
case 'top':
case 'bottom':
return tslib_1.__assign({}, borderStyles, (_a = {}, _a[direction] = -borderWitdth + 'px', _a.left = '0px', _a.borderWidth = borderWitdth + 'px', _a['border' + activeBorder + 'Color'] = borderColor, _a));
case 'left':
case 'right':
return tslib_1.__assign({}, borderStyles, (_b = {}, _b[direction] = -borderWitdth + 'px', _b.top = '0px', _b.borderWidth = borderWitdth + 'px', _b['border' + activeBorder + 'Color'] = borderColor, _b));
default:
throw new TypeError('Unknown direction ' + direction);
}
var _a, _b;
};
PopupPin.prototype.getInnerStyle = function (activeBorder, borderWitdth, borderColor) {
var direction = this.getPopupOppositeDirection();
switch (direction) {
case 'top':
case 'bottom':
return tslib_1.__assign({}, borderStyles, (_a = {}, _a[direction] = -borderWitdth + 2 + 'px', _a.left = -borderWitdth + 'px', _a.borderWidth = borderWitdth + 'px', _a['border' + activeBorder + 'Color'] = borderColor, _a));
case 'left':
case 'right':
return tslib_1.__assign({}, borderStyles, (_b = {}, _b[direction] = -borderWitdth + 2 + 'px', _b.top = -borderWitdth + 'px', _b.borderWidth = borderWitdth + 'px', _b['border' + activeBorder + 'Color'] = borderColor, _b));
default:
throw new TypeError('Unknown direction ' + direction);
}
var _a, _b;
};
PopupPin.prototype.getPinOptions = function (popupRect, popupPosition, pinSize, pinOffset, borderWidth) {
var bordersDelta = 2 * borderWidth;
var outerSize = pinSize + bordersDelta;
switch (popupPosition.direction) {
case 'top':
return {
outerTop: popupRect.height,
outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) -
bordersDelta,
innerTop: -outerSize,
innerLeft: -outerSize + bordersDelta,
activeBorder: 'Top',
outerSize: outerSize
};
case 'bottom':
return {
outerTop: -2 * outerSize,
outerLeft: this.getPinLeftCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) -
bordersDelta,
innerTop: -outerSize + 2 * bordersDelta,
innerLeft: -outerSize + bordersDelta,
activeBorder: 'Bottom',
outerSize: outerSize
};
case 'left':
return {
outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) -
bordersDelta,
outerLeft: popupRect.width,
innerTop: -outerSize + bordersDelta,
innerLeft: -outerSize,
activeBorder: 'Left',
outerSize: outerSize
};
case 'right':
return {
outerTop: this.getPinTopCoordinate(popupRect, popupPosition.align, pinSize, pinOffset) -
bordersDelta,
outerLeft: -2 * outerSize,
innerTop: -outerSize + bordersDelta,
innerLeft: -outerSize + 2 * bordersDelta,
activeBorder: 'Right',
outerSize: outerSize
};
default:
throw new Error('Direction must be one of top, right, bottom, left');
}
};
PopupPin.prototype.getPinTopCoordinate = function (popupRect, align, pinHeight, pinOffset) {
switch (align) {
case 'top':
return pinOffset;
case 'middle':
return popupRect.height / 2 - pinHeight;
case 'bottom':
return popupRect.height - pinOffset - 2 * pinHeight;
default:
throw new Error("Unxpected align '" + align + "'");
}
};
PopupPin.prototype.getPinLeftCoordinate = function (popupRect, align, pinHeight, pinOffset) {
switch (align) {
case 'left':
return pinOffset;
case 'center':
return popupRect.width / 2 - pinHeight;
case 'right':
return popupRect.width - pinOffset - 2 * pinHeight;
default:
throw new Error("Unxpected align '" + align + "'");
}
};
return PopupPin;
}(React.Component));
exports.default = PopupPin;
//# sourceMappingURL=PopupPin.js.map