infinity-forge
Version:
66 lines • 2.79 kB
JavaScript
;
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FadeIn = FadeIn;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var styled_components_1 = __importDefault(require("styled-components"));
var FadeInWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n opacity: 0;\n transform: ", ";\n transition: all ", "ms ease-out;\n transition-delay: ", "ms;\n\n ", "\n"], ["\n opacity: 0;\n transform: ", ";\n transition: all ", "ms ease-out;\n transition-delay: ", "ms;\n\n ", "\n"])), function (_a) {
var $direction = _a.$direction;
switch ($direction) {
case 'up':
return 'translateY(20px)';
case 'down':
return 'translateY(-20px)';
case 'left':
return 'translateX(20px)';
case 'right':
return 'translateX(-20px)';
default:
return 'translateY(20px)';
}
}, function (_a) {
var $duration = _a.$duration;
return $duration;
}, function (_a) {
var $delay = _a.$delay;
return $delay;
}, function (_a) {
var $isVisible = _a.$isVisible;
return $isVisible &&
"\n opacity: 1;\n transform: translate(0);\n ";
});
function FadeIn(_a) {
var children = _a.children, _b = _a.direction, direction = _b === void 0 ? 'up' : _b, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.duration, duration = _d === void 0 ? 800 : _d;
var ref = (0, react_1.useRef)(null);
var _e = (0, react_1.useState)(false), isVisible = _e[0], setIsVisible = _e[1];
(0, react_1.useEffect)(function () {
var observer = new IntersectionObserver(function (_a) {
var entry = _a[0];
if (entry.isIntersecting) {
setIsVisible(true);
observer.disconnect();
}
}, {
threshold: 0.1,
rootMargin: '0px',
});
if (ref.current) {
observer.observe(ref.current);
}
return function () {
if (ref.current) {
observer.unobserve(ref.current);
}
};
}, []);
return ((0, jsx_runtime_1.jsx)(FadeInWrapper, { ref: ref, "$isVisible": isVisible, "$direction": direction, "$delay": delay, "$duration": duration, children: children }));
}
var templateObject_1;
//# sourceMappingURL=index.js.map