From 020a6f9cecdb173808f298eac7138b3f4bd261af Mon Sep 17 00:00:00 2001 From: zhusiyi Date: Sat, 12 Jun 2021 18:45:32 +0800 Subject: [PATCH] DevTools: Make the selected commit label editable --- .../views/Profiler/SnapshotSelector.js | 69 ++++++++++++++++--- 1 file changed, 61 insertions(+), 8 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js index b79569df1e48f..ce42bef6ce385 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js @@ -8,7 +8,7 @@ */ import * as React from 'react'; -import {Fragment, useCallback, useContext, useMemo} from 'react'; +import {Fragment, useCallback, useContext, useMemo, useRef} from 'react'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; import {ProfilerContext} from './ProfilerContext'; @@ -31,6 +31,7 @@ export default function SnapshotSelector(_: Props) { const {profilerStore} = useContext(StoreContext); const {commitData} = profilerStore.getDataForRoot(((rootID: any): number)); + const selectedCommitInputRef = useRef(); const totalDurations: Array = []; const commitTimes: Array = []; @@ -85,14 +86,66 @@ export default function SnapshotSelector(_: Props) { } let label = null; + + const formatSelectedIndex = useCallback((seletedIndex, digits) => { + return `${seletedIndex + 1}`.padStart(digits, '0'); + }, []); + + const handleSelectedInputKeyDown = useCallback(event => { + const {target, key} = event; + if (key === 'Enter') { + target.blur(); + } + }, []); + + const handleSelectedInputBlur = useCallback( + event => { + let {innerHTML: value} = event.target; + value = value.trim(); + if (/^\d+$/.test(value)) { + const num = +value; + if (num > 0 && num <= filteredCommitIndices.length) { + selectCommitIndex(num - 1); + return; + } + } + // If the value is illegal, revert it. + selectCommitIndex(selectedCommitIndex); + const el = selectedCommitInputRef.current; + if (el) { + el.innerHTML = formatSelectedIndex( + selectedFilteredCommitIndex, + `${numFilteredCommits}`.length, + ); + } + }, + [ + filteredCommitIndices, + selectCommitIndex, + selectedCommitIndex, + selectedFilteredCommitIndex, + numFilteredCommits, + ], + ); + if (numFilteredCommits > 0) { - label = - `${selectedFilteredCommitIndex + 1}`.padStart( - `${numFilteredCommits}`.length, - '0', - ) + - ' / ' + - numFilteredCommits; + label = ( + <> + + {formatSelectedIndex( + selectedFilteredCommitIndex, + `${numFilteredCommits}`.length, + )} + + {' / '} + {numFilteredCommits} + + ); } const viewNextCommit = useCallback(() => {