1 | // *****************************************************************************
|
2 | // Copyright (C) 2018 TypeFox and others.
|
3 | //
|
4 | // This program and the accompanying materials are made available under the
|
5 | // terms of the Eclipse Public License v. 2.0 which is available at
|
6 | // http://www.eclipse.org/legal/epl-2.0.
|
7 | //
|
8 | // This Source Code may also be made available under the following Secondary
|
9 | // Licenses when the conditions for such availability set forth in the Eclipse
|
10 | // Public License v. 2.0 are satisfied: GNU General Public License, version 2
|
11 | // with the GNU Classpath Exception which is available at
|
12 | // https://www.gnu.org/software/classpath/license.html.
|
13 | //
|
14 | // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
|
15 | // *****************************************************************************
|
16 |
|
17 | import * as React from 'react';
|
18 | import { injectable, unmanaged } from 'inversify';
|
19 | import { Disposable } from '../../common';
|
20 | import { BaseWidget, Message } from './widget';
|
21 | import { Widget } from '@phosphor/widgets';
|
22 | import { createRoot, Root } from 'react-dom/client';
|
23 |
|
24 | ()
|
25 | export abstract class ReactWidget extends BaseWidget {
|
26 |
|
27 | protected nodeRoot: Root;
|
28 |
|
29 | constructor() {
() options?: Widget.IOptions |
30 | super(options);
|
31 | this.scrollOptions = {
|
32 | suppressScrollX: true,
|
33 | minScrollbarLength: 35,
|
34 | };
|
35 | this.nodeRoot = createRoot(this.node);
|
36 | this.toDispose.push(Disposable.create(() => this.nodeRoot.unmount()));
|
37 | }
|
38 |
|
39 | protected override onUpdateRequest(msg: Message): void {
|
40 | super.onUpdateRequest(msg);
|
41 | this.nodeRoot.render(<React.Fragment>{this.render()}</React.Fragment>);
|
42 | }
|
43 |
|
44 | /**
|
45 | * Render the React widget in the DOM.
|
46 | * - If the widget has been previously rendered,
|
47 | * any subsequent calls will perform an update and only
|
48 | * change the DOM if absolutely necessary.
|
49 | */
|
50 | protected abstract render(): React.ReactNode;
|
51 | }
|