From a619ea4d68e8e1537ae11adb350fce4f4fc75108 Mon Sep 17 00:00:00 2001 From: Pavel Date: Thu, 9 Mar 2023 16:46:31 -0800 Subject: [PATCH] Revert "chore: replace createRef with useRef in most of the places (#21536)" This reverts commit 908c0462d56586c28faccbce076899b652986be6. --- packages/recorder/src/callLog.tsx | 2 +- packages/recorder/src/recorder.tsx | 2 +- packages/trace-viewer/src/ui/sourceTab.tsx | 2 +- .../web/src/components/codeMirrorWrapper.tsx | 21 ++++++++++--------- packages/web/src/components/listView.tsx | 2 +- packages/web/src/components/xtermWrapper.tsx | 8 +++---- 6 files changed, 19 insertions(+), 18 deletions(-) diff --git a/packages/recorder/src/callLog.tsx b/packages/recorder/src/callLog.tsx index 022ffa75df..a40be416dc 100644 --- a/packages/recorder/src/callLog.tsx +++ b/packages/recorder/src/callLog.tsx @@ -30,7 +30,7 @@ export const CallLogView: React.FC = ({ language, log, }) => { - const messagesEndRef = React.useRef(null); + const messagesEndRef = React.createRef(); const [expandOverrides, setExpandOverrides] = React.useState>(new Map()); React.useLayoutEffect(() => { if (log.find(callLog => callLog.reveal)) diff --git a/packages/recorder/src/recorder.tsx b/packages/recorder/src/recorder.tsx index da5d628706..ec51aa5537 100644 --- a/packages/recorder/src/recorder.tsx +++ b/packages/recorder/src/recorder.tsx @@ -78,7 +78,7 @@ export const Recorder: React.FC = ({ setFileId(value); }; - const messagesEndRef = React.useRef(null); + const messagesEndRef = React.createRef(); React.useLayoutEffect(() => { messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' }); }, [messagesEndRef]); diff --git a/packages/trace-viewer/src/ui/sourceTab.tsx b/packages/trace-viewer/src/ui/sourceTab.tsx index ff81a4fb62..47e07f5758 100644 --- a/packages/trace-viewer/src/ui/sourceTab.tsx +++ b/packages/trace-viewer/src/ui/sourceTab.tsx @@ -70,7 +70,7 @@ export const SourceTab: React.FunctionComponent<{ const targetLine = typeof stackInfo === 'string' ? 0 : stackInfo.frames[selectedFrame]?.line || 0; - const targetLineRef = React.useRef(null); + const targetLineRef = React.createRef(); React.useLayoutEffect(() => { if (needReveal && targetLineRef.current) { targetLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' }); diff --git a/packages/web/src/components/codeMirrorWrapper.tsx b/packages/web/src/components/codeMirrorWrapper.tsx index 316d0e2234..38b606634f 100644 --- a/packages/web/src/components/codeMirrorWrapper.tsx +++ b/packages/web/src/components/codeMirrorWrapper.tsx @@ -49,9 +49,9 @@ export const CodeMirrorWrapper: React.FC = ({ wrapLines, onChange, }) => { - const codemirrorElement = React.useRef(null); + const codemirrorElement = React.createRef(); const [modulePromise] = React.useState>(import('./codeMirrorModule').then(m => m.default)); - const [codemirror] = React.useState<{ value?: CodeMirror.Editor }>({}); + const [codemirror, setCodemirror] = React.useState(); React.useEffect(() => { (async () => { @@ -70,17 +70,18 @@ export const CodeMirrorWrapper: React.FC = ({ if (language === 'csharp') mode = 'text/x-csharp'; - if (codemirror.value - && mode === codemirror.value.getOption('mode') - && readOnly === codemirror.value.getOption('readOnly') - && lineNumbers === codemirror.value.getOption('lineNumbers') - && wrapLines === codemirror.value.getOption('lineWrapping')) { - updateEditor(codemirror.value, text, highlight, revealLine, focusOnChange); + if (codemirror + && mode === codemirror.getOption('mode') + && readOnly === codemirror.getOption('readOnly') + && lineNumbers === codemirror.getOption('lineNumbers') + && wrapLines === codemirror.getOption('lineWrapping')) { + updateEditor(codemirror, text, highlight, revealLine, focusOnChange); return; } // Either configuration is different or we don't have a codemirror yet. - codemirror.value?.getWrapperElement().remove(); + if (codemirror) + codemirror.getWrapperElement().remove(); const cm = CodeMirror(element, { value: '', @@ -89,7 +90,7 @@ export const CodeMirrorWrapper: React.FC = ({ lineNumbers, lineWrapping: wrapLines, }); - codemirror.value = cm; + setCodemirror(cm); if (onChange) cm.on('change', () => onChange(cm.getValue())); updateEditor(cm, text, highlight, revealLine, focusOnChange); diff --git a/packages/web/src/components/listView.tsx b/packages/web/src/components/listView.tsx index fcb1333f45..6865e30dc2 100644 --- a/packages/web/src/components/listView.tsx +++ b/packages/web/src/components/listView.tsx @@ -52,7 +52,7 @@ export function ListView({ noItemsMessage, dataTestId, }: ListViewProps) { - const itemListRef = React.useRef(null); + const itemListRef = React.createRef(); const [highlightedItem, setHighlightedItem] = React.useState(); React.useEffect(() => { diff --git a/packages/web/src/components/xtermWrapper.tsx b/packages/web/src/components/xtermWrapper.tsx index a35cc424d7..1a1522199d 100644 --- a/packages/web/src/components/xtermWrapper.tsx +++ b/packages/web/src/components/xtermWrapper.tsx @@ -30,9 +30,9 @@ export type XtermDataSource = { export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({ source }) => { - const xtermElement = React.useRef(null); + const xtermElement = React.createRef(); const [modulePromise] = React.useState>(import('./xtermModule').then(m => m.default)); - const [terminal] = React.useState<{ value?: Terminal }>({}); + const [terminal, setTerminal] = React.useState(); React.useEffect(() => { (async () => { // Always load the module first. @@ -41,7 +41,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({ if (!element) return; - if (terminal.value) + if (terminal) return; const newTerminal = new Terminal({ @@ -65,7 +65,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({ }; newTerminal.open(element); fitAddon.fit(); - terminal.value = newTerminal; + setTerminal(newTerminal); const resizeObserver = new ResizeObserver(() => { source.resize(newTerminal.cols, newTerminal.rows); fitAddon.fit();