react-quick-reactions
Version:
A popup emoji-reaction component for React.
74 lines (73 loc) • 2.43 kB
JavaScript
// Calculate width of `wide` popup.
export const calcWidth = (arrayLength) => {
if (arrayLength > 8)
arrayLength = 8;
if (arrayLength === 0)
arrayLength = 1;
// (34px per item) + 17px
return 34 * arrayLength + 17;
};
// Calculates height according to `wide`, `header`, and reactionArray.length.
export 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;
};
export 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`;
};