@wener/ui/lib/src/hooks/substated.stories.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CounterDemo = void 0;
const react_1 = __importDefault(require("react"));
const substated_1 = require("./substated");
const useRenderCount_1 = require("./useRenderCount");
const useForceRender_1 = require("./useForceRender");
exports.default = {
    title: 'hooks/substated',
};
function useCounter({ setState, getState, updateState, subscribe, }) {
    console.log(`Call useCounter`, getState());
    const decrement = () => updateState((s) => s.count--);
    const increment = () => updateState((s) => s.count++);
    const onExtraChange = () => updateState((s) => (s.extra = Math.random()));
    subscribe((v) => {
        if (v.count === 5) {
            updateState((s) => (s.count = 0));
        }
    });
    subscribe((v) => {
        console.log(`State`, v);
    });
    return { decrement, increment, onExtraChange };
}
const Counter = substated_1.createSubscriptionContainer(useCounter);
function CounterValue() {
    const count = Counter.useSelector((v) => v.count);
    const rc = useRenderCount_1.useRenderCount();
    return (react_1.default.createElement("span", null,
        count,
        " - Render: ",
        react_1.default.createElement("small", null, rc)));
}
function CounterDisplay() {
    const counter = Counter.useContainer();
    const rc = useRenderCount_1.useRenderCount();
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("button", { onClick: counter.decrement }, "-"),
        react_1.default.createElement(CounterValue, null),
        react_1.default.createElement("button", { onClick: counter.increment }, "+"),
        react_1.default.createElement("small", null,
            "Render:",
            rc)));
}
function Actions() {
    const { onExtraChange } = Counter.useContainer();
    const extra = Counter.useSelector((v) => v.extra);
    return react_1.default.createElement("button", { onClick: onExtraChange },
        "Extra Change - ",
        extra || '');
}
exports.CounterDemo = () => {
    const forceUpdate = useForceRender_1.useForceRender();
    return (react_1.default.createElement(Counter.Provider, { initialState: { count: 0 } },
        react_1.default.createElement("button", { onClick: forceUpdate }, "ReRender"),
        react_1.default.createElement(Actions, null),
        react_1.default.createElement(CounterDisplay, null),
        react_1.default.createElement(CounterDisplay, null),
        react_1.default.createElement(Counter.Provider, { initialState: { count: 2 } },
            react_1.default.createElement("div", null,
                react_1.default.createElement("div", null,
                    react_1.default.createElement(CounterDisplay, null))))));
};
//# sourceMappingURL=substated.stories.js.map