@wener/ui
Version:
138 lines • 5.04 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useLayoutFrame = exports.LayoutFrameProvider = exports.useLayoutFrameOptions = exports.useLayoutFrameSelector = void 0;
const react_1 = __importStar(require("react"));
const rxjs_1 = require("rxjs");
const immer_1 = __importDefault(require("immer"));
const LayoutFrameContext = react_1.default.createContext(null);
exports.useLayoutFrameSelector = (selector, eq) => {
const layout = useLayoutFrame();
const ref = react_1.useRef();
const [state, setState] = react_1.useState(() => (ref.current = selector(layout.getState())));
react_1.useEffect(() => {
return layout.subscribe((s) => {
const next = selector(s);
if ((eq && !eq(next, ref.current)) || next !== ref.current) {
setState((ref.current = next));
}
});
}, []);
return state;
};
function useLayoutFrameOptions() {
return react_1.useContext(LayoutFrameContext).options;
}
exports.useLayoutFrameOptions = useLayoutFrameOptions;
// class LayoutFrameStore implements LayoutFrameInstance {
// name = 'default';
// context = LayoutStoreContext;
// store: Store<LayoutFrameState>;
// useSelector: TypedUseSelectorHook<LayoutFrameState>;
// dispatch;
// forceRootUpdate: () => void;
//
// constructor({ forceRootUpdate, name = 'default' }) {
// this.forceRootUpdate = forceRootUpdate;
// this.name = name;
//
// const slice = createLayoutFrameSlice();
// this.store = configureStore(slice);
// this.dispatch = this.store.dispatch;
// this.useSelector = createSelectorHook(this.context);
// }
//
// selector = (s) => s;
//
// getLayout(): LayoutFrameInstance {
// // const {name, store, context} = this;
// // return {
// // name,
// // dispatch: store.dispatch,
// // selector: s => s,
// // useSelector: createSelectorHook(context),
// // }
// return this;
// }
// }
exports.LayoutFrameProvider = ({ layout, options, children }) => {
return react_1.default.createElement(LayoutFrameContext.Provider, { value: { layout, options } }, children);
};
function createLayoutFrame(options = {}) {
const { initialState, name = 'default', current } = options;
const state = new rxjs_1.BehaviorSubject({
...(typeof initialState === 'function' ? initialState() : initialState ?? {}),
});
const layout = {
get name() {
return name;
},
subscribe(consumer) {
const s = state.subscribe(consumer);
return s.unsubscribe.bind(s);
},
getState() {
return state.value;
},
update(update) {
if (typeof update !== 'function') {
layout.update((s) => {
Object.assign(s, update);
});
return;
}
const current = state.value;
const next = immer_1.default(current, update);
if (current !== next) {
state.next(next);
console.debug(`next layout state`, next, current);
}
},
dispose() {
//
},
};
return layout;
}
function useLayoutFrame(options) {
const { layout, name = 'default', initialState } = options || {};
const instanceRef = react_1.default.useRef();
const [, forceRootUpdate] = react_1.useReducer((a) => a + 1, 0);
const current = react_1.useContext(LayoutFrameContext)?.layout;
if (!instanceRef.current) {
if (current && current.name === name) {
instanceRef.current = current;
}
else if (layout) {
instanceRef.current = layout;
}
else {
// const layoutStore = new LayoutFrameStore({ forceRootUpdate, name });
instanceRef.current = createLayoutFrame({ name, initialState, current });
}
}
return instanceRef.current;
}
exports.useLayoutFrame = useLayoutFrame;
//# sourceMappingURL=layout.js.map