yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "chore: replace createRef with useRef in most of the places (#21536)"

Browse Source 
This reverts commit 908c0462d56586c28faccbce076899b652986be6.
This commit is contained in:
Pavel 2023-03-09 16:46:31 -08:00
parent 908c0462d5
commit a619ea4d68
6 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/recorder/src/callLog.tsx
View File

@ -30,7 +30,7 @@ export const CallLogView: React.FC<CallLogProps> = ({
language, language,
log, log,
}) => { }) => {
const messagesEndRef = React.useRef<HTMLDivElement>(null); const messagesEndRef = React.createRef<HTMLDivElement>();
const [expandOverrides, setExpandOverrides] = React.useState<Map<string, boolean>>(new Map()); const [expandOverrides, setExpandOverrides] = React.useState<Map<string, boolean>>(new Map());
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
if (log.find(callLog => callLog.reveal)) if (log.find(callLog => callLog.reveal))

2
packages/recorder/src/recorder.tsx
View File

@ -78,7 +78,7 @@ export const Recorder: React.FC<RecorderProps> = ({
setFileId(value); setFileId(value);
}; };
const messagesEndRef = React.useRef<HTMLDivElement>(null); const messagesEndRef = React.createRef<HTMLDivElement>();
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' }); messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
}, [messagesEndRef]); }, [messagesEndRef]);

2
packages/trace-viewer/src/ui/sourceTab.tsx
View File

@ -70,7 +70,7 @@ export const SourceTab: React.FunctionComponent<{
const targetLine = typeof stackInfo === 'string' ? 0 : stackInfo.frames[selectedFrame]?.line || 0; const targetLine = typeof stackInfo === 'string' ? 0 : stackInfo.frames[selectedFrame]?.line || 0;
const targetLineRef = React.useRef<HTMLDivElement>(null); const targetLineRef = React.createRef<HTMLDivElement>();
React.useLayoutEffect(() => { React.useLayoutEffect(() => {
if (needReveal && targetLineRef.current) { if (needReveal && targetLineRef.current) {
targetLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' }); targetLineRef.current.scrollIntoView({ block: 'center', inline: 'nearest' });

21
packages/web/src/components/codeMirrorWrapper.tsx
View File

@ -49,9 +49,9 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
wrapLines, wrapLines,
onChange, onChange,
}) => { }) => {
const codemirrorElement = React.useRef<HTMLDivElement>(null); const codemirrorElement = React.createRef<HTMLDivElement>();
const [modulePromise] = React.useState<Promise<CodeMirror>>(import('./codeMirrorModule').then(m => m.default)); const [modulePromise] = React.useState<Promise<CodeMirror>>(import('./codeMirrorModule').then(m => m.default));
const [codemirror] = React.useState<{ value?: CodeMirror.Editor }>({}); const [codemirror, setCodemirror] = React.useState<CodeMirror.Editor>();
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
@ -70,17 +70,18 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
if (language === 'csharp') if (language === 'csharp')
mode = 'text/x-csharp'; mode = 'text/x-csharp';
if (codemirror.value if (codemirror
&& mode === codemirror.value.getOption('mode') && mode === codemirror.getOption('mode')
&& readOnly === codemirror.value.getOption('readOnly') && readOnly === codemirror.getOption('readOnly')
&& lineNumbers === codemirror.value.getOption('lineNumbers') && lineNumbers === codemirror.getOption('lineNumbers')
&& wrapLines === codemirror.value.getOption('lineWrapping')) { && wrapLines === codemirror.getOption('lineWrapping')) {
updateEditor(codemirror.value, text, highlight, revealLine, focusOnChange); updateEditor(codemirror, text, highlight, revealLine, focusOnChange);
return; return;
} }
// Either configuration is different or we don't have a codemirror yet. // 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, { const cm = CodeMirror(element, {
value: '', value: '',
@ -89,7 +90,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
lineNumbers, lineNumbers,
lineWrapping: wrapLines, lineWrapping: wrapLines,
}); });
codemirror.value = cm; setCodemirror(cm);
if (onChange) if (onChange)
cm.on('change', () => onChange(cm.getValue())); cm.on('change', () => onChange(cm.getValue()));
updateEditor(cm, text, highlight, revealLine, focusOnChange); updateEditor(cm, text, highlight, revealLine, focusOnChange);

2
packages/web/src/components/listView.tsx
View File

@ -52,7 +52,7 @@ export function ListView<T>({
noItemsMessage, noItemsMessage,
dataTestId, dataTestId,
}: ListViewProps<T>) { }: ListViewProps<T>) {
const itemListRef = React.useRef<HTMLDivElement>(null); const itemListRef = React.createRef<HTMLDivElement>();
const [highlightedItem, setHighlightedItem] = React.useState<any>(); const [highlightedItem, setHighlightedItem] = React.useState<any>();
React.useEffect(() => { React.useEffect(() => {

8
packages/web/src/components/xtermWrapper.tsx
View File

@ -30,9 +30,9 @@ export type XtermDataSource = {
export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
source source
}) => { }) => {
const xtermElement = React.useRef<HTMLDivElement>(null); const xtermElement = React.createRef<HTMLDivElement>();
const [modulePromise] = React.useState<Promise<XtermModule>>(import('./xtermModule').then(m => m.default)); const [modulePromise] = React.useState<Promise<XtermModule>>(import('./xtermModule').then(m => m.default));
const [terminal] = React.useState<{ value?: Terminal }>({}); const [terminal, setTerminal] = React.useState<Terminal>();
React.useEffect(() => { React.useEffect(() => {
(async () => { (async () => {
// Always load the module first. // Always load the module first.
@ -41,7 +41,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
if (!element) if (!element)
return; return;
if (terminal.value) if (terminal)
return; return;
const newTerminal = new Terminal({ const newTerminal = new Terminal({
@ -65,7 +65,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
}; };
newTerminal.open(element); newTerminal.open(element);
fitAddon.fit(); fitAddon.fit();
terminal.value = newTerminal; setTerminal(newTerminal);
const resizeObserver = new ResizeObserver(() => { const resizeObserver = new ResizeObserver(() => {
source.resize(newTerminal.cols, newTerminal.rows); source.resize(newTerminal.cols, newTerminal.rows);
fitAddon.fit(); fitAddon.fit();