@theia/notebook 1.53.0-next.5 → 1.53.0-next.55

package/src/browser/view/notebook-find-widget.tsx

@@ -1,335 +1,335 @@
-// *****************************************************************************
-// Copyright (C) 2024 TypeFox and others.
-//
-// This program and the accompanying materials are made available under the
-// terms of the Eclipse Public License v. 2.0 which is available at
-// http://www.eclipse.org/legal/epl-2.0.
-//
-// This Source Code may also be made available under the following Secondary
-// Licenses when the conditions for such availability set forth in the Eclipse
-// Public License v. 2.0 are satisfied: GNU General Public License, version 2
-// with the GNU Classpath Exception which is available at
-// https://www.gnu.org/software/classpath/license.html.
-//
-// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
-// *****************************************************************************
-
-import { nls } from '@theia/core';
-import * as React from '@theia/core/shared/react';
-import { codicon } from '@theia/core/lib/browser';
-import debounce = require('lodash/debounce');
-
-export interface NotebookEditorFindMatch {
-    selected: boolean;
-    show(): void;
-    replace?(value: string): void;
-}
-
-export interface NotebookEditorFindMatchOptions {
-    search: string;
-    matchCase: boolean;
-    wholeWord: boolean;
-    regex: boolean;
-    activeFilters: string[];
-}
-
-export interface NotebookEditorFindFilter {
-    id: string;
-    label: string;
-    active: boolean;
-}
-
-export interface NotebookEditorFindOptions {
-    search?: string;
-    jumpToMatch?: boolean;
-    matchCase?: boolean;
-    wholeWord?: boolean;
-    regex?: boolean;
-    modifyIndex?: (matches: NotebookEditorFindMatch[], index: number) => number;
-}
-
-export interface NotebookFindWidgetProps {
-    hidden?: boolean;
-    filters?: NotebookEditorFindFilter[];
-    onClose(): void;
-    onSearch(options: NotebookEditorFindMatchOptions): NotebookEditorFindMatch[];
-    onReplace(matches: NotebookEditorFindMatch[], value: string): void;
-}
-
-export interface NotebookFindWidgetState {
-    search: string;
-    replace: string;
-    expanded: boolean;
-    matchCase: boolean;
-    wholeWord: boolean;
-    regex: boolean;
-    activeFilters: string[];
-    currentMatch: number;
-    matches: NotebookEditorFindMatch[];
-}
-
-export class NotebookFindWidget extends React.Component<NotebookFindWidgetProps, NotebookFindWidgetState> {
-
-    private searchRef = React.createRef<HTMLInputElement>();
-    private debounceSearch = debounce(this.search.bind(this), 50);
-
-    constructor(props: NotebookFindWidgetProps) {
-        super(props);
-        this.state = {
-            search: '',
-            replace: '',
-            currentMatch: 0,
-            matches: [],
-            expanded: false,
-            matchCase: false,
-            regex: false,
-            wholeWord: false,
-            activeFilters: props.filters?.filter(filter => filter.active).map(filter => filter.id) || []
-        };
-    }
-
-    override render(): React.ReactNode {
-        const hasMatches = this.hasMatches();
-        const canReplace = this.canReplace();
-        const canReplaceAll = this.canReplaceAll();
-        return (
-            <div onKeyUp={event => {
-                if (event.key === 'Escape') {
-                    this.props.onClose();
-                }
-            }} className={`theia-notebook-find-widget ${!this.state.expanded ? 'search-mode' : ''} ${this.props.hidden ? 'hidden' : ''}`}>
-                <div className='theia-notebook-find-widget-expand' title={nls.localizeByDefault('Toggle Replace')} onClick={() => {
-                    this.setState({
-                        expanded: !this.state.expanded
-                    });
-                }}>
-                    <div className={codicon(`chevron-${this.state.expanded ? 'down' : 'right'}`)}></div>
-                </div>
-                <div className='theia-notebook-find-widget-inputs'>
-                    <div className='theia-notebook-find-widget-input-wrapper'>
-                        <input
-                            ref={this.searchRef}
-                            type='text'
-                            className='theia-input theia-notebook-find-widget-input'
-                            placeholder={nls.localizeByDefault('Find')}
-                            value={this.state.search}
-                            onChange={event => {
-                                this.setState({
-                                    search: event.target.value
-                                });
-                                this.debounceSearch({});
-                            }}
-                            onKeyDown={event => {
-                                if (event.key === 'Enter') {
-                                    if (event.shiftKey) {
-                                        this.gotoPreviousMatch();
-                                    } else {
-                                        this.gotoNextMatch();
-                                    }
-                                    event.preventDefault();
-                                }
-                            }}
-                        />
-                        <div
-                            className={`${codicon('case-sensitive', true)} option ${this.state.matchCase ? 'enabled' : ''}`}
-                            title={nls.localizeByDefault('Match Case')}
-                            onClick={() => {
-                                this.search({
-                                    matchCase: !this.state.matchCase
-                                });
-                            }}></div>
-                        <div
-                            className={`${codicon('whole-word', true)} option ${this.state.wholeWord ? 'enabled' : ''}`}
-                            title={nls.localizeByDefault('Match Whole Word')}
-                            onClick={() => {
-                                this.search({
-                                    wholeWord: !this.state.wholeWord
-                                });
-                            }}></div>
-                        <div
-                            className={`${codicon('regex', true)} option ${this.state.regex ? 'enabled' : ''}`}
-                            title={nls.localizeByDefault('Use Regular Expression')}
-                            onClick={() => {
-                                this.search({
-                                    regex: !this.state.regex
-                                });
-                            }}></div>
-                        {/* <div
-                            className={`${codicon('filter', true)} option ${this.state.wholeWord ? 'enabled' : ''}`}
-                            title={nls.localizeByDefault('Find Filters')}></div> */}
-                    </div>
-                    <input
-                        type='text'
-                        className='theia-input theia-notebook-find-widget-replace'
-                        placeholder={nls.localizeByDefault('Replace')}
-                        value={this.state.replace}
-                        onChange={event => {
-                            this.setState({
-                                replace: event.target.value
-                            });
-                        }}
-                        onKeyDown={event => {
-                            if (event.key === 'Enter') {
-                                this.replaceOne();
-                                event.preventDefault();
-                            }
-                        }}
-                    />
-                </div>
-                <div className='theia-notebook-find-widget-buttons'>
-                    <div className='theia-notebook-find-widget-buttons-first'>
-                        <div className='theia-notebook-find-widget-matches-count'>
-                            {this.getMatchesCount()}
-                        </div>
-                        <div
-                            className={`${codicon('arrow-up', hasMatches)} ${hasMatches ? '' : 'disabled'}`}
-                            title={nls.localizeByDefault('Previous Match')}
-                            onClick={() => {
-                                this.gotoPreviousMatch();
-                            }}
-                        ></div>
-                        <div
-                            className={`${codicon('arrow-down', hasMatches)} ${hasMatches ? '' : 'disabled'}`}
-                            title={nls.localizeByDefault('Next Match')}
-                            onClick={() => {
-                                this.gotoNextMatch();
-                            }}
-                        ></div>
-                        <div
-                            className={codicon('close', true)}
-                            title={nls.localizeByDefault('Close')}
-                            onClick={() => {
-                                this.props.onClose();
-                            }}
-                        ></div>
-                    </div>
-                    <div className='theia-notebook-find-widget-buttons-second'>
-                        <div
-                            className={`${codicon('replace', canReplace)} ${canReplace ? '' : 'disabled'}`}
-                            title={nls.localizeByDefault('Replace')}
-                            onClick={() => {
-                                this.replaceOne();
-                            }}
-                        ></div>
-                        <div
-                            className={`${codicon('replace-all', canReplaceAll)} ${canReplaceAll ? '' : 'disabled'}`}
-                            title={nls.localizeByDefault('Replace All')}
-                            onClick={() => {
-                                this.replaceAll();
-                            }}
-                        ></div>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    private hasMatches(): boolean {
-        return this.state.matches.length > 0;
-    }
-
-    private canReplace(): boolean {
-        return Boolean(this.state.matches[this.state.currentMatch]?.replace);
-    }
-
-    private canReplaceAll(): boolean {
-        return this.state.matches.some(match => Boolean(match.replace));
-    }
-
-    private getMatchesCount(): string {
-        if (this.hasMatches()) {
-            return nls.localizeByDefault('{0} of {1}', this.state.currentMatch + 1, this.state.matches.length);
-        } else {
-            return nls.localizeByDefault('No results');
-        }
-    }
-
-    private gotoNextMatch(): void {
-        this.search({
-            modifyIndex: (matches, index) => (index + 1) % matches.length,
-            jumpToMatch: true
-        });
-    }
-
-    private gotoPreviousMatch(): void {
-        this.search({
-            modifyIndex: (matches, index) => (index === 0 ? matches.length : index) - 1,
-            jumpToMatch: true
-        });
-    }
-
-    private replaceOne(): void {
-        const existingMatches = this.state.matches;
-        const match = existingMatches[this.state.currentMatch];
-        if (match) {
-            match.replace?.(this.state.replace);
-            this.search({
-                jumpToMatch: true,
-                modifyIndex: (matches, index) => {
-                    if (matches.length < existingMatches.length) {
-                        return index % matches.length;
-                    } else {
-                        const diff = matches.length - existingMatches.length;
-                        return (index + diff + 1) % matches.length;
-                    }
-                }
-            });
-        }
-    }
-
-    private replaceAll(): void {
-        this.props.onReplace(this.state.matches, this.state.replace);
-        this.search({});
-    }
-
-    override componentDidUpdate(prevProps: Readonly<NotebookFindWidgetProps>, prevState: Readonly<NotebookFindWidgetState>): void {
-        if (!this.props.hidden && prevProps.hidden) {
-            // Focus the search input when the widget switches from hidden to visible.
-            this.searchRef.current?.focus();
-        }
-    }
-
-    focusSearch(content?: string): void {
-        this.searchRef.current?.focus();
-        if (content) {
-            this.search({
-                search: content,
-                jumpToMatch: false
-            });
-        }
-    }
-
-    search(options: NotebookEditorFindOptions): void {
-        const matchCase = options.matchCase ?? this.state.matchCase;
-        const wholeWord = options.wholeWord ?? this.state.wholeWord;
-        const regex = options.regex ?? this.state.regex;
-        const search = options.search ?? this.state.search;
-        const matches = this.props.onSearch({
-            search,
-            matchCase,
-            wholeWord,
-            regex,
-            activeFilters: this.state.activeFilters
-        });
-        let currentMatch = Math.max(0, Math.min(this.state.currentMatch, matches.length - 1));
-        if (options.modifyIndex && matches.length > 0) {
-            currentMatch = options.modifyIndex(matches, currentMatch);
-        }
-        const selectedMatch = matches[currentMatch];
-        if (selectedMatch) {
-            selectedMatch.selected = true;
-            if (options.jumpToMatch) {
-                selectedMatch.show();
-            }
-        }
-        this.setState({
-            search,
-            matches,
-            currentMatch,
-            matchCase,
-            wholeWord,
-            regex
-        });
-    }
-
-}
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { nls } from '@theia/core';
+import * as React from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
+import debounce = require('lodash/debounce');
+
+export interface NotebookEditorFindMatch {
+    selected: boolean;
+    show(): void;
+    replace?(value: string): void;
+}
+
+export interface NotebookEditorFindMatchOptions {
+    search: string;
+    matchCase: boolean;
+    wholeWord: boolean;
+    regex: boolean;
+    activeFilters: string[];
+}
+
+export interface NotebookEditorFindFilter {
+    id: string;
+    label: string;
+    active: boolean;
+}
+
+export interface NotebookEditorFindOptions {
+    search?: string;
+    jumpToMatch?: boolean;
+    matchCase?: boolean;
+    wholeWord?: boolean;
+    regex?: boolean;
+    modifyIndex?: (matches: NotebookEditorFindMatch[], index: number) => number;
+}
+
+export interface NotebookFindWidgetProps {
+    hidden?: boolean;
+    filters?: NotebookEditorFindFilter[];
+    onClose(): void;
+    onSearch(options: NotebookEditorFindMatchOptions): NotebookEditorFindMatch[];
+    onReplace(matches: NotebookEditorFindMatch[], value: string): void;
+}
+
+export interface NotebookFindWidgetState {
+    search: string;
+    replace: string;
+    expanded: boolean;
+    matchCase: boolean;
+    wholeWord: boolean;
+    regex: boolean;
+    activeFilters: string[];
+    currentMatch: number;
+    matches: NotebookEditorFindMatch[];
+}
+
+export class NotebookFindWidget extends React.Component<NotebookFindWidgetProps, NotebookFindWidgetState> {
+
+    private searchRef = React.createRef<HTMLInputElement>();
+    private debounceSearch = debounce(this.search.bind(this), 50);
+
+    constructor(props: NotebookFindWidgetProps) {
+        super(props);
+        this.state = {
+            search: '',
+            replace: '',
+            currentMatch: 0,
+            matches: [],
+            expanded: false,
+            matchCase: false,
+            regex: false,
+            wholeWord: false,
+            activeFilters: props.filters?.filter(filter => filter.active).map(filter => filter.id) || []
+        };
+    }
+
+    override render(): React.ReactNode {
+        const hasMatches = this.hasMatches();
+        const canReplace = this.canReplace();
+        const canReplaceAll = this.canReplaceAll();
+        return (
+            <div onKeyUp={event => {
+                if (event.key === 'Escape') {
+                    this.props.onClose();
+                }
+            }} className={`theia-notebook-find-widget ${!this.state.expanded ? 'search-mode' : ''} ${this.props.hidden ? 'hidden' : ''}`}>
+                <div className='theia-notebook-find-widget-expand' title={nls.localizeByDefault('Toggle Replace')} onClick={() => {
+                    this.setState({
+                        expanded: !this.state.expanded
+                    });
+                }}>
+                    <div className={codicon(`chevron-${this.state.expanded ? 'down' : 'right'}`)}></div>
+                </div>
+                <div className='theia-notebook-find-widget-inputs'>
+                    <div className='theia-notebook-find-widget-input-wrapper'>
+                        <input
+                            ref={this.searchRef}
+                            type='text'
+                            className='theia-input theia-notebook-find-widget-input'
+                            placeholder={nls.localizeByDefault('Find')}
+                            value={this.state.search}
+                            onChange={event => {
+                                this.setState({
+                                    search: event.target.value
+                                });
+                                this.debounceSearch({});
+                            }}
+                            onKeyDown={event => {
+                                if (event.key === 'Enter') {
+                                    if (event.shiftKey) {
+                                        this.gotoPreviousMatch();
+                                    } else {
+                                        this.gotoNextMatch();
+                                    }
+                                    event.preventDefault();
+                                }
+                            }}
+                        />
+                        <div
+                            className={`${codicon('case-sensitive', true)} option ${this.state.matchCase ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Match Case')}
+                            onClick={() => {
+                                this.search({
+                                    matchCase: !this.state.matchCase
+                                });
+                            }}></div>
+                        <div
+                            className={`${codicon('whole-word', true)} option ${this.state.wholeWord ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Match Whole Word')}
+                            onClick={() => {
+                                this.search({
+                                    wholeWord: !this.state.wholeWord
+                                });
+                            }}></div>
+                        <div
+                            className={`${codicon('regex', true)} option ${this.state.regex ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Use Regular Expression')}
+                            onClick={() => {
+                                this.search({
+                                    regex: !this.state.regex
+                                });
+                            }}></div>
+                        {/* <div
+                            className={`${codicon('filter', true)} option ${this.state.wholeWord ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Find Filters')}></div> */}
+                    </div>
+                    <input
+                        type='text'
+                        className='theia-input theia-notebook-find-widget-replace'
+                        placeholder={nls.localizeByDefault('Replace')}
+                        value={this.state.replace}
+                        onChange={event => {
+                            this.setState({
+                                replace: event.target.value
+                            });
+                        }}
+                        onKeyDown={event => {
+                            if (event.key === 'Enter') {
+                                this.replaceOne();
+                                event.preventDefault();
+                            }
+                        }}
+                    />
+                </div>
+                <div className='theia-notebook-find-widget-buttons'>
+                    <div className='theia-notebook-find-widget-buttons-first'>
+                        <div className='theia-notebook-find-widget-matches-count'>
+                            {this.getMatchesCount()}
+                        </div>
+                        <div
+                            className={`${codicon('arrow-up', hasMatches)} ${hasMatches ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Previous Match')}
+                            onClick={() => {
+                                this.gotoPreviousMatch();
+                            }}
+                        ></div>
+                        <div
+                            className={`${codicon('arrow-down', hasMatches)} ${hasMatches ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Next Match')}
+                            onClick={() => {
+                                this.gotoNextMatch();
+                            }}
+                        ></div>
+                        <div
+                            className={codicon('close', true)}
+                            title={nls.localizeByDefault('Close')}
+                            onClick={() => {
+                                this.props.onClose();
+                            }}
+                        ></div>
+                    </div>
+                    <div className='theia-notebook-find-widget-buttons-second'>
+                        <div
+                            className={`${codicon('replace', canReplace)} ${canReplace ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Replace')}
+                            onClick={() => {
+                                this.replaceOne();
+                            }}
+                        ></div>
+                        <div
+                            className={`${codicon('replace-all', canReplaceAll)} ${canReplaceAll ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Replace All')}
+                            onClick={() => {
+                                this.replaceAll();
+                            }}
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    private hasMatches(): boolean {
+        return this.state.matches.length > 0;
+    }
+
+    private canReplace(): boolean {
+        return Boolean(this.state.matches[this.state.currentMatch]?.replace);
+    }
+
+    private canReplaceAll(): boolean {
+        return this.state.matches.some(match => Boolean(match.replace));
+    }
+
+    private getMatchesCount(): string {
+        if (this.hasMatches()) {
+            return nls.localizeByDefault('{0} of {1}', this.state.currentMatch + 1, this.state.matches.length);
+        } else {
+            return nls.localizeByDefault('No results');
+        }
+    }
+
+    private gotoNextMatch(): void {
+        this.search({
+            modifyIndex: (matches, index) => (index + 1) % matches.length,
+            jumpToMatch: true
+        });
+    }
+
+    private gotoPreviousMatch(): void {
+        this.search({
+            modifyIndex: (matches, index) => (index === 0 ? matches.length : index) - 1,
+            jumpToMatch: true
+        });
+    }
+
+    private replaceOne(): void {
+        const existingMatches = this.state.matches;
+        const match = existingMatches[this.state.currentMatch];
+        if (match) {
+            match.replace?.(this.state.replace);
+            this.search({
+                jumpToMatch: true,
+                modifyIndex: (matches, index) => {
+                    if (matches.length < existingMatches.length) {
+                        return index % matches.length;
+                    } else {
+                        const diff = matches.length - existingMatches.length;
+                        return (index + diff + 1) % matches.length;
+                    }
+                }
+            });
+        }
+    }
+
+    private replaceAll(): void {
+        this.props.onReplace(this.state.matches, this.state.replace);
+        this.search({});
+    }
+
+    override componentDidUpdate(prevProps: Readonly<NotebookFindWidgetProps>, prevState: Readonly<NotebookFindWidgetState>): void {
+        if (!this.props.hidden && prevProps.hidden) {
+            // Focus the search input when the widget switches from hidden to visible.
+            this.searchRef.current?.focus();
+        }
+    }
+
+    focusSearch(content?: string): void {
+        this.searchRef.current?.focus();
+        if (content) {
+            this.search({
+                search: content,
+                jumpToMatch: false
+            });
+        }
+    }
+
+    search(options: NotebookEditorFindOptions): void {
+        const matchCase = options.matchCase ?? this.state.matchCase;
+        const wholeWord = options.wholeWord ?? this.state.wholeWord;
+        const regex = options.regex ?? this.state.regex;
+        const search = options.search ?? this.state.search;
+        const matches = this.props.onSearch({
+            search,
+            matchCase,
+            wholeWord,
+            regex,
+            activeFilters: this.state.activeFilters
+        });
+        let currentMatch = Math.max(0, Math.min(this.state.currentMatch, matches.length - 1));
+        if (options.modifyIndex && matches.length > 0) {
+            currentMatch = options.modifyIndex(matches, currentMatch);
+        }
+        const selectedMatch = matches[currentMatch];
+        if (selectedMatch) {
+            selectedMatch.selected = true;
+            if (options.jumpToMatch) {
+                selectedMatch.show();
+            }
+        }
+        this.setState({
+            search,
+            matches,
+            currentMatch,
+            matchCase,
+            wholeWord,
+            regex
+        });
+    }
+
+}