@yandex/ui/lib/createGlobalState.js

Yandex UI components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.createGlobalState = void 0;
var tslib_1 = require("tslib");
var react_1 = require("react");
var useIsomorphicLayoutEffect_1 = require("../useIsomorphicLayoutEffect");
/**
 * Фабрика, для создания реакт-хука с глобальным состоянием.
 *
 * Используется, когда необходимо использовать общее состояние в нескольких компонентах.
 *
 * @example
 * const useSharedState = createGlobalState()
 *
 * function ComponentA() {
 *   const [value, setValue] = useSharedState()
 *   return <div>{value}</div>
 * }
 *
  * function ComponentB() {
 *   const [value, setValue] = useSharedState()
 *   return <div>{value}</div>
 * }
 */
function createGlobalState(initialState) {
    var store = {
        state: initialState,
        setState: function (state) {
            store.state = state;
            store.setters.forEach(function (setter) { return setter(store.state); });
        },
        setters: [],
    };
    return function () {
        var _a = tslib_1.__read(react_1.useState(store.state), 2), globalState = _a[0], stateSetter = _a[1];
        // prettier-ignore
        react_1.useEffect(function () { return function () {
            store.setters = store.setters.filter(function (setter) { return setter !== stateSetter; });
        }; }, []);
        useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect(function () {
            if (store.setters.indexOf(stateSetter) === -1) {
                store.setters.push(stateSetter);
            }
        });
        return [globalState, store.setState];
    };
}
exports.createGlobalState = createGlobalState;