refactor: Find In Page

This commit is contained in:
tiddlygit-test 2021-02-05 00:57:34 +08:00
parent 102b63f09f
commit d7221d79bc
5 changed files with 54 additions and 47 deletions

View file

@ -4,7 +4,7 @@ import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import connectComponent from '../../helpers/connect-component';
import { closeFindInPage, updateFindInPageText } from '../../state/find-in-page/actions';
import { requestFindInPage, requestStopFindInPage } from '../../senders';
const styles = (theme: any) => ({
root: {
background: theme.palette.background.default,
@ -37,9 +37,7 @@ const FindInPage = (props: FindInPageProps) => {
// Event handler utilizing useCallback ...
// ... so that reference never changes.
const handleOpenFindInPage = useCallback(() => {
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
inputReference.current.focus();
// @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
inputReference.current.select();
}, [inputReference]);
useEffect(() => {
@ -74,20 +72,18 @@ const FindInPage = (props: FindInPageProps) => {
const value = e.target.value;
onUpdateFindInPageText(value);
if (value.length > 0) {
requestFindInPage(value, true);
void window.service.window.findInPage(value, true);
} else {
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
requestStopFindInPage();
void window.service.window.stopFindInPage();
}
}}
onInput={(e) => {
const value = (e.target as any).value;
onUpdateFindInPageText(value);
if (value.length > 0) {
requestFindInPage(value, true);
void window.service.window.findInPage(value, true);
} else {
// @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
requestStopFindInPage();
void window.service.window.stopFindInPage();
}
}}
onKeyDown={(e) => {
@ -95,12 +91,12 @@ const FindInPage = (props: FindInPageProps) => {
// Enter
const value = (e.target as any).value;
if (value.length > 0) {
requestFindInPage(value, true);
void window.service.window.findInPage(value, true);
}
}
if ((e.keyCode || e.which) === 27) {
// Escape
requestStopFindInPage(true);
void window.service.window.stopFindInPage(true);
onCloseFindInPage();
}
}}
@ -111,7 +107,7 @@ const FindInPage = (props: FindInPageProps) => {
disabled={text.length < 1 || matches < 1}
onClick={() => {
if (text.length > 0) {
requestFindInPage(text, false);
void window.service.window.findInPage(text, false);
}
}}>
Previous
@ -121,7 +117,7 @@ const FindInPage = (props: FindInPageProps) => {
disabled={text.length < 1 || matches < 1}
onClick={() => {
if (text.length > 0) {
requestFindInPage(text, true);
void window.service.window.findInPage(text, true);
}
}}>
Next
@ -131,7 +127,7 @@ const FindInPage = (props: FindInPageProps) => {
disabled={text.length < 1}
onClick={() => {
if (text.length > 0) {
requestFindInPage(text, true);
void window.service.window.findInPage(text, true);
}
}}>
Find
@ -139,7 +135,7 @@ const FindInPage = (props: FindInPageProps) => {
<Button
size="small"
onClick={() => {
requestStopFindInPage(true);
void window.service.window.stopFindInPage(true);
onCloseFindInPage();
}}>
Close

View file

@ -1,9 +1,9 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import Badge from '@material-ui/core/Badge';
import connectComponent from '../../helpers/connect-component';
import { getBaseName } from '../../senders';
import { getBaseName } from '@/senders';
// @ts-expect-error ts-migrate(2307) FIXME: Cannot find module '../../images/default-icon.png'... Remove this comment to see the full error message
import defaultIcon from '../../images/default-icon.png';
const styles = (theme: any) => ({
@ -113,7 +113,13 @@ function WorkspaceSelector({
workspaceName,
}: Props) {
const { t } = useTranslation();
const shortWorkspaceName = workspaceName ? getBaseName(workspaceName) : t('WorkspaceSelector.BadWorkspacePath');
const [shortWorkspaceName, shortWorkspaceNameSetter] = useState<string>(t('Loading'));
useEffect(() => {
void (async () => {
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
shortWorkspaceNameSetter(workspaceName ? await getBaseName(workspaceName) : t('WorkspaceSelector.BadWorkspacePath'));
});
}, []);
return (
<div
role="button"

View file

@ -15,7 +15,7 @@ import {
import { closeFindInPage, openFindInPage, updateFindInPageMatches } from '../state/find-in-page/actions';
import { updatePauseNotificationsInfo } from '../state/notifications/actions';
import { updateUpdater } from '../state/updater/actions';
import { getShouldUseDarkColors, requestFindInPage, signalOnlineStatusChanged } from '../senders';
import { getShouldUseDarkColors, signalOnlineStatusChanged } from '../senders';
const loadListeners = (store: any) => {
const { ipcRenderer } = window.remote;
@ -93,7 +93,7 @@ const loadListeners = (store: any) => {
ipcRenderer.on('request-back-find-in-page', (_event: Electron.IpcRendererEvent, forward: any) => {
const { open, text } = store.getState().findInPage;
if (!open) return;
requestFindInPage(text, forward);
void window.service.window.findInPage(text, forward);
});
ipcRenderer.on('should-pause-notifications-changed', (_event: Electron.IpcRendererEvent, value: any) => {

View file

@ -39,33 +39,6 @@ export class Window implements IWindowService {
}
initIPCHandlers(): void {
ipcMain.handle('request-find-in-page', (_event, text: string, forward?: boolean, windowName: WindowNames = WindowNames.main) => {
const mainWindow = this.get(windowName);
const contents = mainWindow?.getBrowserView()?.webContents;
if (contents !== undefined) {
contents.findInPage(text, {
forward,
});
}
});
ipcMain.handle('request-stop-find-in-page', (_event, close?: boolean, windowName: WindowNames = WindowNames.main) => {
const mainWindow = this.get(windowName);
const view = mainWindow?.getBrowserView();
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (view) {
const contents = view.webContents;
if (contents !== undefined) {
contents.stopFindInPage('clearSelection');
contents.send('update-find-in-page-matches', 0, 0);
// adjust bounds to hide the gap for find in page
if (close === true && mainWindow !== undefined) {
const contentSize = mainWindow.getContentSize();
view.setBounds(getViewBounds(contentSize as [number, number]));
}
}
}
});
ipcMain.handle('request-show-display-media-window', (_event: Electron.IpcMainInvokeEvent) => {
const viewID = BrowserWindow.fromWebContents(_event.sender)?.id;
if (viewID !== undefined) {
@ -76,6 +49,34 @@ export class Window implements IWindowService {
});
}
public findInPage(text: string, forward?: boolean, windowName: WindowNames = WindowNames.main): void {
const mainWindow = this.get(windowName);
const contents = mainWindow?.getBrowserView()?.webContents;
if (contents !== undefined) {
contents.findInPage(text, {
forward,
});
}
}
public stopFindInPage(close?: boolean, windowName: WindowNames = WindowNames.main): void {
const mainWindow = this.get(windowName);
const view = mainWindow?.getBrowserView();
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (view) {
const contents = view.webContents;
if (contents !== undefined) {
contents.stopFindInPage('clearSelection');
contents.send('update-find-in-page-matches', 0, 0);
// adjust bounds to hide the gap for find in page
if (close === true && mainWindow !== undefined) {
const contentSize = mainWindow.getContentSize();
view.setBounds(getViewBounds(contentSize as [number, number]));
}
}
}
}
public async requestShowRequireRestartDialog(): Promise<void> {
const availableWindowToShowDialog = this.get(WindowNames.preferences) ?? this.get(WindowNames.main);
if (availableWindowToShowDialog !== undefined) {

View file

@ -20,6 +20,8 @@ export interface IWindowService {
goForward(windowName: WindowNames): void;
reload(windowName: WindowNames): void;
showMessageBox(message: Electron.MessageBoxOptions['message'], type?: Electron.MessageBoxOptions['type']): void;
findInPage(text: string, forward?: boolean | undefined, windowName?: WindowNames): void;
stopFindInPage(close?: boolean | undefined, windowName?: WindowNames): void;
}
export const WindowServiceIPCDescriptor = {
channel: WindowChannel.name,
@ -37,5 +39,7 @@ export const WindowServiceIPCDescriptor = {
goForward: ProxyPropertyType.Function,
reload: ProxyPropertyType.Function,
showMessageBox: ProxyPropertyType.Function,
findInPage: ProxyPropertyType.Function,
stopFindInPage: ProxyPropertyType.Function,
},
};