react-quick-reactions
Version:
A popup emoji-reaction component for React.
80 lines (79 loc) • 2.69 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.calculatePopupTranslate = exports.calcHeight = exports.calcWidth = void 0;
// Calculate width of `wide` popup.
const calcWidth = (arrayLength) => {
if (arrayLength > 8)
arrayLength = 8;
if (arrayLength === 0)
arrayLength = 1;
// (34px per item) + 17px
return 34 * arrayLength + 17;
};
exports.calcWidth = calcWidth;
// Calculates height according to `wide`, `header`, and reactionArray.length.
const calcHeight = (arrayLength, hideHeader, wide) => {
if (hideHeader) {
if (wide || arrayLength < 5)
return 35;
return 64;
}
if (wide || arrayLength < 5)
return 54;
// Default popup height is 90.
return 90;
};
exports.calcHeight = calcHeight;
const calculatePopupTranslate = (triggerTransformValues, popupWidth, popupHeight, placement) => {
let x = 0;
let y = 0;
const margin = 10;
if (placement === "top-start") {
y = triggerTransformValues.height * -1 - popupHeight - margin;
}
if (placement === "top") {
x = (triggerTransformValues.width - popupWidth) / 2;
y = triggerTransformValues.height * -1 - popupHeight - margin;
}
if (placement === "top-end") {
x = triggerTransformValues.width - popupWidth;
y = triggerTransformValues.height * -1 - popupHeight - margin;
}
if (placement === "left-start") {
x -= popupWidth + margin;
y = triggerTransformValues.height * -1;
}
if (placement === "left") {
x -= popupWidth + margin;
y = (popupHeight / 2 + triggerTransformValues.height / 2) * -1;
}
if (placement === "left-end") {
x -= popupWidth + margin;
y = popupHeight * -1;
}
if (placement === "right-start") {
x = triggerTransformValues.width + margin;
y = triggerTransformValues.height * -1;
}
if (placement === "right") {
x = triggerTransformValues.width + margin;
y = (popupHeight / 2 + triggerTransformValues.height / 2) * -1;
}
if (placement === "right-end") {
x = triggerTransformValues.width + margin;
y = popupHeight * -1;
}
if (placement === "bottom-start") {
y = margin;
}
if (placement === "bottom") {
x = (triggerTransformValues.width - popupWidth) / 2;
y = margin;
}
if (placement === "bottom-end") {
x = triggerTransformValues.width - popupWidth;
y = margin;
}
return `${x}px, ${y}px`;
};
exports.calculatePopupTranslate = calculatePopupTranslate;