Blame · drawerState.ts

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {AllDrawersState, DrawerState} from './Drawers';
b69ab31	9
b69ab31	10	import {localStorageBackedAtom, readAtom, writeAtom} from './jotaiUtils';
b69ab31	11	import {getWindowWidthInPixels, registerCleanup} from './utils';
b69ab31	12
b69ab31	13	const AUTO_CLOSE_MAX_SIZE = 700;
b69ab31	14	const DEFAULT_RIGHT_DRAWER_WIDTH = 500;
b69ab31	15
b69ab31	16	export const islDrawerState = localStorageBackedAtom<AllDrawersState>('isl.drawer-state', {
b69ab31	17	right: {
b69ab31	18	size: DEFAULT_RIGHT_DRAWER_WIDTH,
b69ab31	19	collapsed: false,
b69ab31	20	},
b69ab31	21	left: {size: 200, collapsed: true},
b69ab31	22	top: {size: 200, collapsed: true},
b69ab31	23	bottom: {size: 200, collapsed: true},
b69ab31	24	});
b69ab31	25
b69ab31	26	// On startup, override existing state to collapse the right sidebar if the screen is too small.
b69ab31	27	// This allows collapsing even if the size has been previous persisted.
b69ab31	28	function autoCloseBasedOnWindowWidth() {
b69ab31	29	const windowWidth = getWindowWidthInPixels();
b69ab31	30	if (windowWidth === 0) {
b69ab31	31	// window not loaded yet
b69ab31	32	return;
b69ab31	33	}
b69ab31	34
b69ab31	35	const current = readAtom(islDrawerState).right.size;
b69ab31	36	const setDrawer = (state: DrawerState) => {
b69ab31	37	const oldValue = readAtom(islDrawerState);
b69ab31	38	writeAtom(islDrawerState, {
b69ab31	39	...oldValue,
b69ab31	40	right: state,
b69ab31	41	});
b69ab31	42	};
b69ab31	43	if (windowWidth < AUTO_CLOSE_MAX_SIZE) {
b69ab31	44	setDrawer({
b69ab31	45	collapsed: true,
b69ab31	46	size: Math.min(windowWidth, current ?? DEFAULT_RIGHT_DRAWER_WIDTH),
b69ab31	47	});
b69ab31	48	}
b69ab31	49	}
b69ab31	50
b69ab31	51	const resizeFn = () => {
b69ab31	52	autoCloseBasedOnWindowWidth();
b69ab31	53	};
b69ab31	54	window.addEventListener('resize', resizeFn);
b69ab31	55
b69ab31	56	// check startup window size
b69ab31	57	window.addEventListener('load', resizeFn);
b69ab31	58
b69ab31	59	registerCleanup(
b69ab31	60	islDrawerState,
b69ab31	61	() => {
b69ab31	62	window.removeEventListener('resize', resizeFn);
b69ab31	63	window.removeEventListener('load', resizeFn);
b69ab31	64	},
b69ab31	65	import.meta.hot,
b69ab31	66	);