starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-22 17:39:12 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Global layout component

Browse Source
This commit is contained in:
Gregory Schier
2023-03-25 13:26:31 -07:00
parent 8929d736d9
commit 700c589ae2
13 changed files with 366 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src-web/hooks/useSidebarDisplay.ts Normal file
View File

@@ -0,0 +1,27 @@
import { useCallback } from 'react';
import { clamp } from '../lib/clamp';
import { useKeyValue } from './useKeyValue';
const START_WIDTH = 200;
const MIN_WIDTH = 110;
const MAX_WIDTH = 500;
export enum SidebarDisplayKeys {
width = 'sidebar_width',
hidden = 'sidebar_hidden',
}
export function useSidebarDisplay() {
const hiddenKv = useKeyValue<boolean>({ key: SidebarDisplayKeys.hidden, defaultValue: false });
const widthKv = useKeyValue<number>({ key: SidebarDisplayKeys.width, defaultValue: START_WIDTH });
const hidden = hiddenKv.value;
const width = widthKv.value ?? START_WIDTH;
const set = useCallback((v: number) => widthKv.set(clamp(v, MIN_WIDTH, MAX_WIDTH)), []);
const reset = useCallback(() => widthKv.set(START_WIDTH), []);
const hide = useCallback(() => hiddenKv.set(true), []);
const show = useCallback(() => hiddenKv.set(false), []);
const toggle = useCallback(() => hiddenKv.set(!hiddenKv.value), [hiddenKv.value]);
return { width, hidden, set, reset, hide, show, toggle };
}

22
src-web/hooks/useSidebarWidth.ts
View File

@@ -1,22 +0,0 @@
import { useCallback } from 'react';
import { clamp } from '../lib/clamp';
import { useKeyValue } from './useKeyValue';
const INITIAL_WIDTH = 200;
const MIN_WIDTH = 110;
const MAX_WIDTH = 500;
export function useSidebarWidth() {
const width = useKeyValue<number>({ key: 'sidebar_width', defaultValue: INITIAL_WIDTH });
const setWidth = useCallback((v: number) => {
width.set(clamp(v, MIN_WIDTH, MAX_WIDTH));
}, []);
const resetWidth = useCallback(() => {
width.set(INITIAL_WIDTH);
}, []);
return { value: width.value ?? INITIAL_WIDTH, set: setWidth, reset: resetWidth };
}