Skip to content

Commit

Permalink
DevTools: Make the selected commit label editable
Browse files Browse the repository at this point in the history
  • Loading branch information
zhusiyi committed Jun 12, 2021
1 parent 1a106bd commit 020a6f9
Showing 1 changed file with 61 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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<number> = [];
const commitTimes: Array<number> = [];
Expand Down Expand Up @@ -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 = (
<>
<span
contentEditable={true}
suppressContentEditableWarning={true}
ref={selectedCommitInputRef}
onKeyDown={handleSelectedInputKeyDown}
onBlur={handleSelectedInputBlur}>
{formatSelectedIndex(
selectedFilteredCommitIndex,
`${numFilteredCommits}`.length,
)}
</span>
{' / '}
{numFilteredCommits}
</>
);
}

const viewNextCommit = useCallback(() => {
Expand Down

0 comments on commit 020a6f9

Please sign in to comment.