mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-07 04:26:32 +08:00
Rob Paveza
9e33bc96e1
QuickOpen is a highly-useful UI affordance for the DevTools. However,
the actual implementation introduces some problems with reusability;
the QuickOpen tool is a global DevTools singleton that coalesces
multiple "Providers" across DevTools to handle activities like Go To
Line, Open document, or Invoke Command. Because it is a singleton, a
developer who wanted to leverage that input modality would need to drop
to the FilteredListWidget, which is tightly coupled to the QuickOpen
implementation and also has a non-obvious implementation pattern (one
would need to implement a Provider, and there is no straightforward way
to observe when the user cancels out of it).
This change borrows a simplified version of the VS Code QuickPick and
QuickInput APIs. With this, a DevTools developer can write a single
line, using an awaitable, so that the meaning and purpose of the input
collection is straightforward:
const text = await QuickInput.show({
prompt: 'Please enter some information.',
value: 'A default value',
valueSelection: [0, 15],
});
// text will contain the entered value, or undefined
QuickPick requires a few more lines to implement, but provides a
similarly easy-to-use interface:
const demoMenu1 = [
{
label: 'Item 1',
},
{
label: 'Item 2',
},
{
label: 'Item 3',
}
];
const choice = await QuickPick.show(demoMenu1, {
placeHolder: 'Choose from these options:'
});
// choice contains one of the objects from demoMenu1, or undefined
The explainer can be found here:
https://docs.google.com/document/d/1EibIlPCeH-672wncOScGoMbSs0EzNY4SSaqJng-5-S4/edit#
... and GIFs of these in action can be found here:
https://imgur.com/a/GCfpHQ3
Bug: 1103402
Change-Id: I1ca7c7c87243553ff45d00369ce8996c2914be93
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2288530
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
Commit-Queue: Robert Paveza <Rob.Paveza@microsoft.com>
20 lines
575 B
JavaScript
20 lines
575 B
JavaScript
// Copyright 2019 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import * as CommandMenu from './CommandMenu.js';
|
|
import * as FilteredListWidget from './FilteredListWidget.js';
|
|
import * as HelpQuickOpen from './HelpQuickOpen.js';
|
|
import * as QuickInput from './QuickInput.js';
|
|
import * as QuickOpen from './QuickOpen.js';
|
|
import * as QuickPick from './QuickPick.js';
|
|
|
|
export {
|
|
CommandMenu,
|
|
FilteredListWidget,
|
|
HelpQuickOpen,
|
|
QuickInput,
|
|
QuickOpen,
|
|
QuickPick,
|
|
};
|