microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-12 00:52:05 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pavel Feldman 2023-03-09 13:31:21 -08:00 committed by GitHub
parent e7b21425f7
commit 908c0462d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 19 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,
log,
}) => {
const messagesEndRef = React.createRef<HTMLDivElement>();
const messagesEndRef = React.useRef<HTMLDivElement>(null);
const [expandOverrides, setExpandOverrides] = React.useState<Map<string, boolean>>(new Map());
React.useLayoutEffect(() => {
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);
};
const messagesEndRef = React.createRef<HTMLDivElement>();
const messagesEndRef = React.useRef<HTMLDivElement>(null);
React.useLayoutEffect(() => {
messagesEndRef.current?.scrollIntoView({ block: 'center', inline: 'nearest' });
}, [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 targetLineRef = React.createRef<HTMLDivElement>();
const targetLineRef = React.useRef<HTMLDivElement>(null);
React.useLayoutEffect(() => {
if (needReveal && targetLineRef.current) {
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,
onChange,
}) => {
const codemirrorElement = React.createRef<HTMLDivElement>();
const codemirrorElement = React.useRef<HTMLDivElement>(null);
const [modulePromise] = React.useState<Promise<CodeMirror>>(import('./codeMirrorModule').then(m => m.default));
const [codemirror, setCodemirror] = React.useState<CodeMirror.Editor>();
const [codemirror] = React.useState<{ value?: CodeMirror.Editor }>({});
React.useEffect(() => {
(async () => {
@ -70,18 +70,17 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
if (language === 'csharp')
mode = 'text/x-csharp';
if (codemirror
&& mode === codemirror.getOption('mode')
&& readOnly === codemirror.getOption('readOnly')
&& lineNumbers === codemirror.getOption('lineNumbers')
&& wrapLines === codemirror.getOption('lineWrapping')) {
updateEditor(codemirror, text, highlight, revealLine, focusOnChange);
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);
return;
}
// Either configuration is different or we don't have a codemirror yet.
if (codemirror)
codemirror.getWrapperElement().remove();
codemirror.value?.getWrapperElement().remove();
const cm = CodeMirror(element, {
value: '',
@ -90,7 +89,7 @@ export const CodeMirrorWrapper: React.FC<SourceProps> = ({
lineNumbers,
lineWrapping: wrapLines,
});
setCodemirror(cm);
codemirror.value = cm;
if (onChange)
cm.on('change', () => onChange(cm.getValue()));
updateEditor(cm, text, highlight, revealLine, focusOnChange);

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

@ -52,7 +52,7 @@ export function ListView<T>({
noItemsMessage,
dataTestId,
}: ListViewProps<T>) {
const itemListRef = React.createRef<HTMLDivElement>();
const itemListRef = React.useRef<HTMLDivElement>(null);
const [highlightedItem, setHighlightedItem] = React.useState<any>();
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 }> = ({
source
}) => {
const xtermElement = React.createRef<HTMLDivElement>();
const xtermElement = React.useRef<HTMLDivElement>(null);
const [modulePromise] = React.useState<Promise<XtermModule>>(import('./xtermModule').then(m => m.default));
const [terminal, setTerminal] = React.useState<Terminal>();
const [terminal] = React.useState<{ value?: Terminal }>({});
React.useEffect(() => {
(async () => {
// Always load the module first.
@ -41,7 +41,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
if (!element)
return;
if (terminal)
if (terminal.value)
return;
const newTerminal = new Terminal({
@ -65,7 +65,7 @@ export const XtermWrapper: React.FC<{ source: XtermDataSource }> = ({
};
newTerminal.open(element);
fitAddon.fit();
setTerminal(newTerminal);
terminal.value = newTerminal;
const resizeObserver = new ResizeObserver(() => {
source.resize(newTerminal.cols, newTerminal.rows);
fitAddon.fit();