react-toggleable-context/lib/Toggleable.js

React components to make anything expandable

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var utils_1 = require("./utils");
var ToggleableContext = react_1.createContext({
    toggled: [],
    handleSectionClick: function () { },
    handleOpen: function () { },
    handleClose: function () { }
});
function useToggleable(id) {
    var value = react_1.useContext(ToggleableContext);
    return {
        toggled: value.toggled.includes(id),
        handleClick: value.handleSectionClick(id),
        handleClose: value.handleClose(id),
        handleOpen: value.handleOpen(id)
    };
}
exports.useToggleable = useToggleable;
function ToggleableSection(_a) {
    var id = _a.id, children = _a.children, props = __rest(_a, ["id", "children"]);
    var value = react_1.useContext(ToggleableContext);
    return children(__assign({}, props, { toggled: value.toggled.includes(id), handleClick: value.handleSectionClick(id), handleClose: value.handleClose(id), handleOpen: value.handleOpen(id) }));
}
function Toggleable(_a) {
    var _b = _a.initialToggled, initialToggled = _b === void 0 ? [] : _b, _c = _a.collapse, collapse = _c === void 0 ? false : _c, children = _a.children;
    var _d = react_1.useState({ toggled: initialToggled }), toggled = _d[0].toggled, setToggled = _d[1];
    var handleLocationChange = function () {
        var hash = window.location.hash;
        var ids = hash.split('#');
        setToggled({ toggled: toggled.concat(ids) });
    };
    react_1.useEffect(function () {
        handleLocationChange();
        window.addEventListener('hashchange', handleLocationChange);
        return function () {
            window.removeEventListener('hashchange', handleLocationChange);
        };
    }, []);
    react_1.useEffect(function () {
        var loc = window.location;
        var hashId = utils_1.normalizeId(loc.hash);
        if (toggled.includes(hashId)) {
            if ('replaceState' in window.history) {
                window.history.replaceState('', document.title, loc.pathname + loc.search);
            }
            else {
                var scrollV = document.body.scrollTop;
                var scrollH = document.body.scrollLeft;
                loc.hash = '';
                document.documentElement.scrollTop = scrollV;
                document.documentElement.scrollLeft = scrollH;
            }
        }
    });
    var handleSectionClick = function (id) { return function () {
        var list = collapse ? [id] : toggled.includes(id) ? utils_1.without(toggled, id) : toggled.concat(id);
        setToggled({ toggled: list });
    }; };
    var handleClose = function (id) { return function () {
        var list = utils_1.without(toggled, id);
        setToggled({ toggled: list });
    }; };
    var handleOpen = function (id) { return function () {
        var list = toggled.concat(id);
        setToggled({ toggled: list });
    }; };
    return (react_1.default.createElement(ToggleableContext.Provider, { value: {
            toggled: toggled,
            handleSectionClick: handleSectionClick,
            handleOpen: handleOpen,
            handleClose: handleClose
        } }, children));
}
Toggleable.Section = ToggleableSection;
exports.default = Toggleable;
//# sourceMappingURL=Toggleable.js.map