mirror of
https://github.com/facebook/sapling.git
synced 2024-10-06 06:47:41 +03:00
Rename autocomplete to typeahead
Summary: "autocomplete" means a single *inline* suggestion, like ios / github copilot / gmail "typeahead" means a dropdown list with several results as you type, which is what we want Reviewed By: quark-zju Differential Revision: D45627729 fbshipit-source-id: 76ac37116db7ccf3d0e584861163ab9d9e6e25d5
This commit is contained in:
parent
14b78706b2
commit
44eba5acdf
@ -263,7 +263,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.commit-info-field-with-autocomplete {
|
||||
.commit-info-field-with-typeahead {
|
||||
flex-grow: 1;
|
||||
min-width: 30px;
|
||||
position: relative;
|
||||
@ -282,7 +282,7 @@
|
||||
min-height: calc(var(--token-height) - 2px);
|
||||
}
|
||||
|
||||
.commit-info-tokenized-field .autocomplete-suggestions {
|
||||
.commit-info-tokenized-field .typeahead-suggestions {
|
||||
position: absolute;
|
||||
top: calc(100% + var(--halfpad));
|
||||
max-width: 200px;
|
||||
@ -295,7 +295,7 @@
|
||||
gap: var(--halfpad);
|
||||
}
|
||||
|
||||
.commit-info-tokenized-field .autocomplete-suggestions .suggestion {
|
||||
.commit-info-tokenized-field .typeahead-suggestions .suggestion {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--pad);
|
||||
|
@ -44,15 +44,14 @@ export function CommitInfoTextField({
|
||||
|
||||
const [tokens, remaining] = extractTokens(editedMessage);
|
||||
|
||||
const [autocompleteSuggestions, setAutocompleteSuggestions] =
|
||||
useState<AutocompleteSuggestions>(undefined);
|
||||
const [typeaheadSuggestions, setTypeaheadSuggestions] = useState<TypeaheadSuggestions>(undefined);
|
||||
|
||||
const onInput = (event: {target: EventTarget | null}) => {
|
||||
const newValue = (event?.target as HTMLInputElement)?.value;
|
||||
setEditedCommitMessage(tokensToString(tokens, newValue));
|
||||
setAutocompleteSuggestions({type: 'loading'});
|
||||
setTypeaheadSuggestions({type: 'loading'});
|
||||
fetchNewSuggestions(newValue).then(values =>
|
||||
setAutocompleteSuggestions({type: 'success', values}),
|
||||
setTypeaheadSuggestions({type: 'success', values}),
|
||||
);
|
||||
};
|
||||
|
||||
@ -70,20 +69,20 @@ export function CommitInfoTextField({
|
||||
</VSCodeButton>
|
||||
</span>
|
||||
))}
|
||||
<div className="commit-info-field-with-autocomplete">
|
||||
<div className="commit-info-field-with-typeahead">
|
||||
<VSCodeTextField
|
||||
ref={ref}
|
||||
value={remaining}
|
||||
data-testid={`commit-info-${fieldKey}-field`}
|
||||
onInput={onInput}
|
||||
/>
|
||||
{autocompleteSuggestions?.type === 'loading' ||
|
||||
(autocompleteSuggestions?.values?.length ?? 0) > 0 ? (
|
||||
<div className="autocomplete-suggestions">
|
||||
{autocompleteSuggestions?.type === 'loading' ? (
|
||||
{typeaheadSuggestions?.type === 'loading' ||
|
||||
(typeaheadSuggestions?.values?.length ?? 0) > 0 ? (
|
||||
<div className="typeahead-suggestions">
|
||||
{typeaheadSuggestions?.type === 'loading' ? (
|
||||
<Icon icon="loading" />
|
||||
) : (
|
||||
autocompleteSuggestions?.values.map(suggestion => (
|
||||
typeaheadSuggestions?.values.map(suggestion => (
|
||||
<span key={suggestion.value} className="suggestion">
|
||||
<span>{suggestion.display}</span>
|
||||
<Subtle>{suggestion.value}</Subtle>
|
||||
@ -97,13 +96,13 @@ export function CommitInfoTextField({
|
||||
);
|
||||
}
|
||||
|
||||
type AutocompleteSuggestions =
|
||||
type TypeaheadSuggestions =
|
||||
| {
|
||||
type: 'loading';
|
||||
}
|
||||
| {type: 'success'; values: Array<AutocompleteSuggestion>}
|
||||
| {type: 'success'; values: Array<TypeaheadSuggestion>}
|
||||
| undefined;
|
||||
type AutocompleteSuggestion = {
|
||||
type TypeaheadSuggestion = {
|
||||
/** The display text of the suggestion */
|
||||
display: string;
|
||||
/**
|
||||
@ -115,6 +114,6 @@ type AutocompleteSuggestion = {
|
||||
};
|
||||
|
||||
// eslint-disable-next-line require-await
|
||||
async function fetchNewSuggestions(_text: string): Promise<Array<AutocompleteSuggestion>> {
|
||||
async function fetchNewSuggestions(_text: string): Promise<Array<TypeaheadSuggestion>> {
|
||||
return [];
|
||||
}
|
||||
|
@ -50,6 +50,6 @@ export type FieldConfig = {
|
||||
}
|
||||
| {
|
||||
type: 'field';
|
||||
autocompleteType: 'user' | 'task' | 'tag' | 'diff';
|
||||
typeaheadType: 'user' | 'task' | 'tag' | 'diff';
|
||||
}
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user