react-simple-wheel-picker/dist/hooks/useObserver.js

<div align="center"> <h1>react-simple-wheel-picker</h1> <img src="https://raw.githubusercontent.com/keiya01/react-simple-wheel-picker/master/demo.gif" alt="demo"> <br> <p>You can set up simple and flexible wheel picker</p> <br> </div> <hr/>

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const useScrollAnimation_1 = __importDefault(require("../hooks/useScrollAnimation"));
const setRefs = (data) => {
    return () => data.reduce((result, value) => {
        result[value.id] = react_1.createRef();
        return result;
    }, {});
};
const calculatePercentageOfRootWithoutItem = (rootHeight, itemHeight) => {
    return 100 - (itemHeight / rootHeight) * 100;
};
const calculateMarginVertical = (rootHeight, itemHeight) => {
    return calculatePercentageOfRootWithoutItem(rootHeight, itemHeight) / 2;
};
const calculateRootMargin = (rootHeight, itemHeight) => {
    return `-${calculateMarginVertical(rootHeight, itemHeight)}% 0px`;
};
const useObserver = (data, selectedID, itemHeight, onChange) => {
    const root = react_1.useRef(null);
    const refs = react_1.useMemo(setRefs(data), [data]);
    const observer = react_1.useRef(null);
    const [activeID, setActiveID] = react_1.useState(selectedID);
    const onScroll = useScrollAnimation_1.default(root, refs);
    const handleOnFocus = react_1.useCallback((e) => {
        const target = e.target;
        const id = target.getAttribute("data-itemid");
        const value = target.getAttribute("data-itemvalue");
        if (!id || !value) {
            throw new Error("Can not found id or value");
        }
        onScroll(data, id);
        setActiveID(id);
        onChange({ id, value });
    }, [data, onChange, onScroll]);
    react_1.useEffect(() => {
        const observerCallback = (entries) => {
            entries.forEach(entry => {
                if (!entry.isIntersecting) {
                    return;
                }
                const itemID = entry.target.getAttribute("data-itemid");
                const itemValue = entry.target.getAttribute("data-itemvalue");
                if (!itemID || !itemValue) {
                    throw new Error("Can not found id or value");
                }
                onScroll(data, itemID, true);
                setActiveID(itemID);
                onChange({ id: itemID, value: itemValue });
            });
        };
        if (!observer.current && root.current) {
            observer.current = new IntersectionObserver(observerCallback, {
                root: root.current,
                rootMargin: calculateRootMargin(root.current.clientHeight, itemHeight),
                threshold: [0.3, 0.79]
            });
            data.map(item => {
                const elm = refs[item.id].current;
                if (elm && observer.current) {
                    observer.current.observe(elm);
                }
            });
            const firstItem = refs[data[0].id].current;
            const item = refs[selectedID].current;
            if (firstItem && item) {
                root.current.scrollTo(0, item.offsetTop - firstItem.offsetTop);
            }
        }
        return () => {
            if (observer.current) {
                observer.current.disconnect();
                observer.current = null;
            }
        };
    }, [data, refs, root, itemHeight]); // eslint-disable-line
    return {
        root,
        refs,
        activeID,
        onFocus: handleOnFocus
    };
};
exports.default = useObserver;
//# sourceMappingURL=useObserver.js.map