yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: simplify useSetting to not rely on useSyncExternalStore (#32018)

Browse Source
This commit is contained in:
Pavel Feldman 2024-08-06 14:30:15 -07:00 committed by GitHub
parent 7f60f284c6
commit 79ca3f28c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/components/splitView.tsx
View File

@ -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] = useSetting<number>(settingName ? settingName + '.' + orientation + ':size' : undefined, defaultSize);
const vSetting = useSetting<number>((settingName ?? 'unused') + '.' + orientation + ':size', defaultSize); const [vSize, setVSize] = useSetting<number>(settingName ? settingName + '.' + orientation + ':size' : undefined, defaultSize);
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>();

26
packages/web/src/uiUtils.ts
View File

@ -141,17 +141,25 @@ export function copy(text: string) {
export type Setting<T> = readonly [T, (value: T) => void, string]; export type Setting<T> = readonly [T, (value: T) => void, string];
export function useSetting<S>(name: string, defaultValue: S, title?: string): [S, (v: S) => void, Setting<S>] {
const subscribe = React.useCallback((onStoreChange: () => void) => { export function useSetting<S>(name: string | undefined, defaultValue: S, title?: string): [S, React.Dispatch<React.SetStateAction<S>>, Setting<S>] {
if (name)
defaultValue = settings.getObject(name, defaultValue);
const [value, setValue] = React.useState<S>(defaultValue);
const setValueWrapper = React.useCallback((value: React.SetStateAction<S>) => {
if (name)
settings.setObject(name, value);
else
setValue(value);
}, [name, setValue]);
React.useEffect(() => {
if (name) {
const onStoreChange = () => setValue(settings.getObject(name, defaultValue));
settings.onChangeEmitter.addEventListener(name, onStoreChange); settings.onChangeEmitter.addEventListener(name, onStoreChange);
return () => settings.onChangeEmitter.removeEventListener(name, onStoreChange); return () => settings.onChangeEmitter.removeEventListener(name, onStoreChange);
}, [name]); }
}, [defaultValue, name]);
const value = React.useSyncExternalStore(subscribe, () => settings.getObject(name, defaultValue));
const setValueWrapper = React.useCallback((value: S) => {
settings.setObject(name, value);
}, [name]);
const setting = [value, setValueWrapper, title || name || ''] as Setting<S>; const setting = [value, setValueWrapper, title || name || ''] as Setting<S>;
return [value, setValueWrapper, setting]; return [value, setValueWrapper, setting];