From 9bdc1bfab26655d19af946a04447a508a6298d42 Mon Sep 17 00:00:00 2001 From: Brian Lambert Date: Thu, 13 Apr 2023 21:19:11 -0500 Subject: [PATCH] Add web loading of react-window UMD (Universal Module Definition) file. Add click to select Environment item --- remote/web/package.json | 3 ++- src/vs/loader.js | 14 ++++++++++--- .../components/environmentInstance.tsx | 18 +++++++++------- .../components/environmentVariableGroup.tsx | 14 +++++++++---- .../components/environmentVariableItem.tsx | 21 ++++++++++++------- 5 files changed, 46 insertions(+), 24 deletions(-) diff --git a/remote/web/package.json b/remote/web/package.json index 7c2cf9a50a2..87a6c3a7138 100644 --- a/remote/web/package.json +++ b/remote/web/package.json @@ -21,6 +21,7 @@ }, "customEntryPoints": { "react": "umd/react.production.min.js", - "react-dom": "umd/react-dom.production.min.js" + "react-dom": "umd/react-dom.production.min.js", + "react-window": "dist/index-prod.umd.js" } } diff --git a/src/vs/loader.js b/src/vs/loader.js index bfc43dbddb4..14455aca819 100644 --- a/src/vs/loader.js +++ b/src/vs/loader.js @@ -1594,9 +1594,17 @@ var AMDLoader; let strModuleId = this._moduleIdProvider.getStrModuleId(moduleId); let paths = this._config.moduleIdToPaths(strModuleId); // --- Start Positron --- - const reactDomClient = 'remote/web/node_modules/react-dom/umd/react-dom.production.min.js/client.js'; - if (paths[0].endsWith(reactDomClient)) { - paths[0] = `${paths[0].substr(0, paths[0].length - reactDomClient.length)}out/react-dom/client.js`; + { + const reactDomClient = 'static/sources/node_modules/react-dom/umd/react-dom.production.min.js/client.js'; + if (paths[0].endsWith(reactDomClient)) { + paths[0] = `${paths[0].substr(0, paths[0].length - reactDomClient.length)}static/sources/out/react-dom/client.js`; + } + } + { + const reactDomClient = 'remote/web/node_modules/react-dom/umd/react-dom.production.min.js/client.js'; + if (paths[0].endsWith(reactDomClient)) { + paths[0] = `${paths[0].substr(0, paths[0].length - reactDomClient.length)}out/react-dom/client.js`; + } } // --- End Positron --- let scopedPackageRegex = /^@[^\/]+\/[^\/]+$/; // matches @scope/package-name diff --git a/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentInstance.tsx b/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentInstance.tsx index 9022152a92e..1721e3c8d71 100644 --- a/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentInstance.tsx +++ b/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentInstance.tsx @@ -57,6 +57,7 @@ interface EnvironmentInstanceProps { */ export const EnvironmentInstance = (props: EnvironmentInstanceProps) => { // Reference hooks. + const instanceRef = useRef(undefined!); const listRef = useRef(undefined!); // State hooks. @@ -309,6 +310,11 @@ export const EnvironmentInstance = (props: EnvironmentInstanceProps) => { setTypeVisible(newDetailsColumnWidth > TYPE_VISIBILITY_THRESHOLD); }; + const onEntrySelected = (index: number) => { + setSelectedId(entries[index].id); + instanceRef.current.focus(); + }; + /** * EnvironmentEntry component. * @param index The index of the environment entry. @@ -316,10 +322,6 @@ export const EnvironmentInstance = (props: EnvironmentInstanceProps) => { * @returns The rendered environment entry. */ const EnvironmentEntry = ({ index, style }: ListChildComponentProps) => { - // return ( - //
Item
- // ); - // Get the entry being rendered. const entry = entries[index]; if (isEnvironmentVariableGroup(entry)) { @@ -330,6 +332,7 @@ export const EnvironmentInstance = (props: EnvironmentInstanceProps) => { style={style} focused={focused} selected={selectedId === entry.id} + onSelected={() => onEntrySelected(index)} positronEnvironmentInstance={props.positronEnvironmentInstance} /> ); @@ -343,6 +346,7 @@ export const EnvironmentInstance = (props: EnvironmentInstanceProps) => { style={style} focused={focused} selected={selectedId === entry.id} + onSelected={() => onEntrySelected(index)} onStartResizeNameColumn={startResizeNameColumnHandler} onResizeNameColumn={resizeNameColumnHandler} onStopResizeNameColumn={stopResizeNameColumnHandler} @@ -364,6 +368,7 @@ export const EnvironmentInstance = (props: EnvironmentInstanceProps) => { // Render. return (
{ height={props.height} itemSize={LINE_HEIGHT} overscanCount={10} - onScroll={({ scrollOffset }) => { - console.log(`scrollOffset is ${scrollOffset}`); - setScrollOffset(scrollOffset); - }} + onScroll={({ scrollOffset }) => setScrollOffset(scrollOffset)} > {EnvironmentEntry} diff --git a/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableGroup.tsx b/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableGroup.tsx index 0fec196490c..affbbbdc062 100644 --- a/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableGroup.tsx +++ b/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableGroup.tsx @@ -4,7 +4,7 @@ import 'vs/css!./environmentVariableGroup'; import * as React from 'react'; -import { CSSProperties, useRef } from 'react'; // eslint-disable-line no-duplicate-imports +import { CSSProperties, MouseEvent, useRef } from 'react'; // eslint-disable-line no-duplicate-imports import { positronClassNames } from 'vs/base/common/positronUtilities'; import { IEnvironmentVariableGroup } from 'vs/workbench/services/positronEnvironment/common/interfaces/environmentVariableGroup'; import { IPositronEnvironmentInstance } from 'vs/workbench/services/positronEnvironment/common/interfaces/positronEnvironmentService'; @@ -17,6 +17,7 @@ interface EnvironmentVariableGroupProps { selected: boolean; focused: boolean; style: CSSProperties; + onSelected: () => void; positronEnvironmentInstance: IPositronEnvironmentInstance; } @@ -30,11 +31,16 @@ export const EnvironmentVariableGroup = (props: EnvironmentVariableGroupProps) = const ref = useRef(undefined!); /** - * Handles onClick events. + * MouseDown handler. + * @param e A MouseEvent that describes a user interaction with the mouse. */ - const handleClick = () => { + const mouseDownHandler = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + props.onSelected(); }; + // Create the class names. const classNames = positronClassNames( 'environment-variable-group', @@ -48,7 +54,7 @@ export const EnvironmentVariableGroup = (props: EnvironmentVariableGroupProps) = // Render. return ( -
+
{props.environmentVariableGroup.expanded ?
:
diff --git a/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableItem.tsx b/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableItem.tsx index c6d68fd52ad..22360e36bb1 100644 --- a/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableItem.tsx +++ b/src/vs/workbench/contrib/positronEnvironment/browser/components/environmentVariableItem.tsx @@ -4,7 +4,7 @@ import 'vs/css!./environmentVariableItem'; import * as React from 'react'; -import { CSSProperties, useRef } from 'react'; // eslint-disable-line no-duplicate-imports +import { CSSProperties, MouseEvent, useRef } from 'react'; // eslint-disable-line no-duplicate-imports import { positronClassNames } from 'vs/base/common/positronUtilities'; import { ColumnSplitter } from 'vs/workbench/contrib/positronEnvironment/browser/components/columnSplitter'; import { IEnvironmentVariableItem } from 'vs/workbench/services/positronEnvironment/common/interfaces/environmentVariableItem'; @@ -21,6 +21,7 @@ export interface EnvironmentVariableItemProps { selected: boolean; focused: boolean; style: CSSProperties; + onSelected: () => void; onStartResizeNameColumn: () => void; onResizeNameColumn: (x: number, y: number) => void; onStopResizeNameColumn: (x: number, y: number) => void; @@ -36,12 +37,6 @@ export const EnvironmentVariableItem = (props: EnvironmentVariableItemProps) => // Reference hooks. const ref = useRef(undefined!); - /** - * Handles onClick events. - */ - const handleClick = () => { - }; - // Create the class names. const classNames = positronClassNames( 'environment-variable', @@ -53,9 +48,19 @@ export const EnvironmentVariableItem = (props: EnvironmentVariableItemProps) => } ); + /** + * MouseDown handler. + * @param e A MouseEvent that describes a user interaction with the mouse. + */ + const mouseDownHandler = (e: MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + props.onSelected(); + }; + // Render. return ( -
+