chore: resolve some dev warnings (6750bbc3) · Commits · e / tools / webadb

apps/demo/components/log-view.tsx

+16 −1

Original line number	Diff line number	Diff line
		@@ -2,7 +2,7 @@ import { IconButton, IListProps, List, mergeStyles, mergeStyleSets, Stack } from
		import { AdbPacketInit, decodeUtf8 } from '@yume-chan/adb';
		import { DisposableList } from '@yume-chan/event';
		import { observer } from "mobx-react-lite";
		import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
		import { PropsWithChildren, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
		import { globalState, logger } from "../state";
		import { Icons, withDisplayName } from '../utils';
		import { CommandBar } from './command-bar';
		@@ -162,3 +162,18 @@ export const LogView = observer(({
		</Stack>
		);
		});

		export function NoSsr({ children }: PropsWithChildren<{}>) {
		const [showChild, setShowChild] = useState(false);

		// Wait until after client-side hydration to show
		useEffect(() => {
		setShowChild(true);
		}, []);

		if (!showChild) {
		return null;
		}

		return <>{children}</>;
		}

apps/demo/next.config.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -6,6 +6,8 @@ const withMDX = require('@next/mdx')({
		renderer: `
		import React from 'react';
		const mdx = (name, props, ...children) => {
		if (name === 'inlineCode') { name = 'code'; }
		delete props?.parentName;
		return React.createElement(name, props, ...children);
		}
		`,

apps/demo/pages/_app.tsx

+4 −2

Original line number	Diff line number	Diff line
		@@ -3,7 +3,7 @@ import type { AppProps } from 'next/app';
		import Link from 'next/link';
		import { useRouter } from 'next/router';
		import React, { useCallback, useEffect, useState } from "react";
		import { Connect, ErrorDialogProvider, LogView, ToggleLogView } from "../components";
		import { Connect, ErrorDialogProvider, LogView, NoSsr, ToggleLogView } from "../components";
		import '../styles/globals.css';
		import { Icons } from "../utils";
		import { register as registerIcons } from '../utils/icons';
		@@ -147,7 +147,9 @@ function MyApp({ Component, pageProps }: AppProps) {
		<Component {...pageProps} />
		</StackItem>

		<NoSsr>
		<LogView className={classNames['right-column']} />
		</NoSsr>
		</Stack>
		</Stack>
		</ErrorDialogProvider >

apps/demo/pages/file-manager.tsx

+13 −29

Original line number	Diff line number	Diff line
		import { Breadcrumb, concatStyleSets, ContextualMenu, ContextualMenuItem, DetailsListLayoutMode, Dialog, DirectionalHint, IBreadcrumbItem, IColumn, Icon, IContextualMenuItem, IDetailsHeaderProps, IDetailsList, IRenderFunction, Layer, MarqueeSelection, mergeStyleSets, Overlay, ProgressIndicator, ScrollToMode, Selection, ShimmeredDetailsList, Stack, StackItem } from '@fluentui/react';
		import { Breadcrumb, concatStyleSets, ContextualMenu, ContextualMenuItem, DetailsListLayoutMode, Dialog, DirectionalHint, IBreadcrumbItem, IColumn, Icon, IContextualMenuItem, IDetailsHeaderProps, IRenderFunction, Layer, MarqueeSelection, mergeStyleSets, Overlay, ProgressIndicator, Selection, ShimmeredDetailsList, Stack, StackItem } from '@fluentui/react';
		import { FileIconType } from "@fluentui/react-file-type-icons";
		import { getFileTypeIconNameFromExtensionOrType } from '@fluentui/react-file-type-icons/lib-commonjs/getFileTypeIconProps';
		import { DEFAULT_BASE_URL as FILE_TYPE_ICONS_BASE_URL } from '@fluentui/react-file-type-icons/lib-commonjs/initializeFileTypeIcons';
		@@ -10,8 +10,8 @@ import { NextPage } from "next";
		import Head from "next/head";
		import Router, { useRouter } from "next/router";
		import path from 'path';
		import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
		import { CommandBar } from '../components';
		import React, { useCallback, useEffect, useState } from 'react';
		import { CommandBar, NoSsr } from '../components';
		import { globalState } from '../state';
		import { asyncEffect, chunkFile, formatSize, formatSpeed, Icons, pickFile, RouteStackProps } from '../utils';

		@@ -91,7 +91,6 @@ class FileManagerState {
		items: ListItem[] = [];
		sortKey: keyof ListItem = 'name';
		sortDescending = false;
		startItemIndexInView = 0;

		uploading = false;
		uploadPath: string \| undefined = undefined;
		@@ -549,21 +548,6 @@ const FileManager: NextPage = (): JSX.Element \| null => {
		state.changeDirectory(pathQuery);
		}, [router]);

		const listRef = useRef<IDetailsList \| null>(null);
		useLayoutEffect(() => {
		const list = listRef.current;
		return () => {
		state.startItemIndexInView = list?.getStartItemIndexInView() ?? 0;
		};
		}, []);
		const scrolledRef = useRef(false);
		const handleListUpdate = useCallback((list?: IDetailsList) => {
		if (!scrolledRef.current) {
		list?.scrollToIndex(state.startItemIndexInView, undefined, ScrollToMode.top);
		scrolledRef.current = true;
		}
		}, []);

		const [previewUrl, setPreviewUrl] = useState<string \| undefined>();
		const previewImage = useCallback(async (path: string) => {
		const sync = await globalState.device!.sync();
		@@ -649,7 +633,6 @@ const FileManager: NextPage = (): JSX.Element \| null => {
		<Breadcrumb items={state.breadcrumbItems} />

		<ShimmeredDetailsList
		componentRef={listRef}
		items={state.sortedList}
		columns={state.columns}
		setKey={state.path}
		@@ -659,7 +642,6 @@ const FileManager: NextPage = (): JSX.Element \| null => {
		onItemInvoked={handleItemInvoked}
		onItemContextMenu={showContextMenu}
		onRenderDetailsHeader={renderDetailsHeader}
		onDidUpdate={handleListUpdate}
		usePageCache
		useReducedRowRenderer
		/>
		@@ -676,6 +658,7 @@ const FileManager: NextPage = (): JSX.Element \| null => {
		</Layer>
		)}

		<NoSsr>
		<ContextualMenu
		items={state.menuItems}
		hidden={!state.contextMenuTarget}
		@@ -684,6 +667,7 @@ const FileManager: NextPage = (): JSX.Element \| null => {
		onDismiss={hideContextMenu}
		contextualMenuItemAs={props => <ContextualMenuItem {...props} hasIcons={false} />}
		/>
		</NoSsr>

		<UploadDialog />
		</StackItem>