react-errorr
Version:
A react popup error fully customizable
268 lines (260 loc) • 9.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ErrorrContext_contectCreatior_1 = tslib_1.__importDefault(require("../contexts/ErrorrContext.contectCreatior"));
const useEffectOnce_1 = tslib_1.__importDefault(require("../hooks/useEffectOnce"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Holder = styled_components_1.default.div `
${(props) => props.grow && "width: 100%;"}
position: relative;
`;
const Content = styled_components_1.default.div `
position: absolute;
top: ${(props) => props.top}px;
left: ${(props) => props.left}px;
pointer-events: none;
opacity: 0;
z-index: 10;
${(props) => "animation: " + props.animation + "ms forwards" ?? ""};
@keyframes out {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
`;
const DefaultErrorHolder = styled_components_1.default.div `
position: relative;
`;
const DefaultErrorContainer = styled_components_1.default.div `
padding: 10px 30px;
background-color: white;
border-radius: 15px;
box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.2), -6px -6px 25px rgba(0, 0, 0, 0.2);
height: ${(props) => props.styleData?.height
? typeof props.styleData?.height === "string"
? props.styleData?.height
: props.styleData?.height + "px"
: "fit-content"};
width: ${(props) => props.styleData?.width
? typeof props.styleData?.width === "string"
? props.styleData?.width
: props.styleData?.width + "px"
: "fit-content"};
`;
const Shape = styled_components_1.default.div `
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
top: ${(props) => props.top}px;
left: ${(props) => props.left}px;
transform: rotate(${(props) => props.rotation}deg);
`;
const DefaultErrorMessage = styled_components_1.default.p `
font-size: ${(props) => props.styleData?.fontSize
? typeof props.styleData?.fontSize === "string"
? props.styleData?.fontSize
: props.styleData?.fontSize + "px"
: "14px"};
color: ${(props) => props.styleData?.color ?? "red"};
font-weight: ${(props) => props.styleData?.fontWeight ?? "500"};
white-space: nowrap;
margin: 0;
`;
const Errorr = ({ name, message, content, styleData, options, children, }) => {
const { loadErrorr, getOptions, updateErrorr } = (0, react_1.useContext)(ErrorrContext_contectCreatior_1.default);
const timerRef = (0, react_1.useRef)({ value: null });
const errorHolderRef = (0, react_1.useRef)(null);
const contentRef = (0, react_1.useRef)(null);
const [isShowing, setIsShowing] = (0, react_1.useState)(false);
const [hasBeenShowed, setHasBeenShowed] = (0, react_1.useState)(false);
const [dimention, setDimention] = (0, react_1.useState)({ height: 10, width: 10 });
const [position, setPosition] = (0, react_1.useState)({
left: 0,
top: 0,
});
const [fullOptions, setFullOptions] = (0, react_1.useState)(null);
const [shapePosition, setShapePosition] = (0, react_1.useState)({
top: -10,
left: 20,
rotation: 0,
});
const [animation, setAnimation] = (0, react_1.useState)("");
const activate = (0, react_1.useCallback)(() => {
if (timerRef.current.value) {
clearTimeout(timerRef.current.value);
}
setIsShowing(true);
if (!options?.debug) {
timerRef.current.value = setTimeout(() => {
setIsShowing(false);
}, fullOptions?.activeTime);
}
}, [options?.debug, fullOptions?.activeTime]);
const forceRemove = (0, react_1.useCallback)(() => {
if (timerRef.current.value) {
clearTimeout(timerRef.current.value);
}
setIsShowing(false);
}, []);
(0, react_1.useEffect)(() => {
const duration = fullOptions?.animation.durationInMs ?? 200;
switch (fullOptions?.animation.type) {
case "fadeIn":
setAnimation(isShowing ? `in ${duration}` : "");
break;
case "fadeOut":
setAnimation(hasBeenShowed ? (!isShowing ? `out ${duration}` : "in 1") : "");
break;
case "fadeInOut":
setAnimation(hasBeenShowed
? isShowing
? `in ${duration}`
: `out ${duration}`
: "");
break;
case "instant":
setAnimation(isShowing ? `in 1` : "");
break;
}
}, [
fullOptions?.animation.durationInMs,
fullOptions?.animation.type,
isShowing,
hasBeenShowed,
]);
(0, useEffectOnce_1.default)(() => {
loadErrorr({
name,
options,
activate,
forceRemove,
});
});
(0, react_1.useEffect)(() => {
updateErrorr({
name,
options,
activate,
forceRemove,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [activate, name]);
(0, react_1.useEffect)(() => {
setFullOptions(getOptions(options || {}));
}, [getOptions, options]);
(0, react_1.useEffect)(() => {
setDimention({
height: errorHolderRef.current?.clientHeight || 10,
width: errorHolderRef.current?.clientWidth || 10,
});
}, [
errorHolderRef.current?.clientWidth,
errorHolderRef.current?.clientHeight,
]);
(0, react_1.useEffect)(() => {
if (isShowing && !hasBeenShowed) {
setHasBeenShowed(true);
}
}, [isShowing, hasBeenShowed]);
(0, react_1.useEffect)(() => {
let baseTop = 0;
let top = 0;
let baseLeft = 0;
let left = 0;
let shapeTop = -10;
let shapeLeft = 20;
let shapeRot = 0;
switch (fullOptions?.positioning.block) {
case "before":
baseTop =
-(contentRef.current?.clientHeight ?? 10) - (content ? 0 : 15);
shapeRot = 180;
shapeTop = contentRef.current?.clientHeight ?? 10;
break;
case "start":
baseTop = 0;
shapeTop = dimention.height / 2 + 3;
break;
case "end":
baseTop = dimention.height - (contentRef.current?.clientHeight ?? 10);
break;
case "center":
baseTop =
dimention.height / 2 - (contentRef.current?.clientHeight ?? 10) / 2;
break;
case "centered":
baseTop =
dimention.height / 2 - (contentRef.current?.clientHeight ?? 10) / 2;
break;
case "after":
baseTop = dimention.height + (content ? 0 : 15);
break;
}
switch (fullOptions?.positioning.inline) {
case "before":
baseLeft =
-(contentRef.current?.clientWidth ?? 10) - (content ? 0 : 15);
shapeLeft = (contentRef.current?.clientWidth ?? 10) - 5;
shapeTop = (contentRef.current?.clientHeight ?? 10) / 2 - 5;
shapeRot = 90;
break;
case "start":
baseLeft = 0;
break;
case "center":
baseLeft = dimention.width / 2 - 30;
shapeLeft = 20;
break;
case "centered":
baseLeft =
dimention.width / 2 - (contentRef.current?.clientWidth ?? 10) / 2;
shapeLeft = (contentRef.current?.clientWidth ?? 10) / 2 - 10;
break;
case "end":
baseLeft = dimention.width - (contentRef.current?.clientWidth ?? 10);
shapeLeft = (contentRef.current?.clientWidth ?? 10) - 40;
break;
case "after":
baseLeft = dimention.width + (content ? 0 : 15);
shapeLeft = -15;
shapeTop = (contentRef.current?.clientHeight ?? 10) / 2 - 5;
shapeRot = -90;
break;
}
top = baseTop + (fullOptions?.offsets.offsetY ?? 0);
left = baseLeft + (fullOptions?.offsets.offsetX ?? 0);
setPosition({
top,
left,
});
setShapePosition({
top: shapeTop,
left: shapeLeft,
rotation: shapeRot,
});
}, [
dimention,
fullOptions,
contentRef.current?.clientWidth,
contentRef.current?.clientHeight,
content,
]);
return ((0, jsx_runtime_1.jsxs)(Holder, { ref: errorHolderRef, grow: styleData?.grow ?? false, children: [(0, jsx_runtime_1.jsx)(Content, { top: position.top, left: position.left, ref: contentRef, animation: animation, children: content ? (content) : ((0, jsx_runtime_1.jsx)("div", { style: { position: "relative" }, children: (0, jsx_runtime_1.jsx)(DefaultErrorHolder, { children: (0, jsx_runtime_1.jsxs)(DefaultErrorContainer, { styleData: styleData, children: [(0, jsx_runtime_1.jsx)(DefaultErrorMessage, { styleData: styleData, children: message ? message : "Default message" }), (0, jsx_runtime_1.jsx)(Shape, { top: shapePosition.top, left: shapePosition.left, rotation: shapePosition.rotation })] }) }) })) }), children] }));
};
exports.default = Errorr;