Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

chore(ui): abstract useSetting/state combo into own hook

Browse source
This commit is contained in:
Simon Knott 2024-08-06 12:53:14 +02:00
parent bff97b4810
commit c0e528b4c1
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/web/src/components/splitView.tsx
View file

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
import { clsx, useMeasure, useSetting } from '../uiUtils'; import { clsx, useMeasure, useSettingOrState } from '../uiUtils';
import './splitView.css'; import './splitView.css';
import * as React from 'react'; import * as React from 'react';
@ -43,12 +43,8 @@ export const SplitView: React.FC<SplitViewProps> = ({
main, main,
}) => { }) => {
const defaultSize = Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio; const defaultSize = Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio;
const hSetting = useSetting<number>((settingName ?? 'unused') + '.' + orientation + ':size', defaultSize); const [hSize, setHSize] = useSettingOrState(settingName + '.' + orientation + ':size', defaultSize, undefined, !!settingName);
const vSetting = useSetting<number>((settingName ?? 'unused') + '.' + orientation + ':size', defaultSize); const [vSize, setVSize] = useSettingOrState(settingName + '.' + orientation + ':size', defaultSize, undefined, !!settingName);
const hState = React.useState(defaultSize);
const vState = React.useState(defaultSize);
const [hSize, setHSize] = settingName ? hSetting : hState;
const [vSize, setVSize] = settingName ? vSetting : vState;
const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null); const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
const [measure, ref] = useMeasure<HTMLDivElement>(); const [measure, ref] = useMeasure<HTMLDivElement>();

6
packages/web/src/uiUtils.ts
View file

@ -157,6 +157,12 @@ export function useSetting<S>(name: string, defaultValue: S, title?: string): [S
return [value, setValueWrapper, setting]; return [value, setValueWrapper, setting];
} }
export function useSettingOrState<S>(name: string | undefined, defaultValue: S, title?: string, persist?: boolean): [S, (v: S) => void, Setting<S>] {
const setting = useSetting(name ?? 'unused', defaultValue, title);
const state = React.useState(defaultValue);
return persist ? setting : [...state, [...state, title ?? '']];
}
export class Settings { export class Settings {
onChangeEmitter = new EventTarget(); onChangeEmitter = new EventTarget();