Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

Improve input team member (#268)

Browse Source 
* Autocomplete for email
* Remove old MemberEmail input and styled correctly the new autocomplete one
* Add validation on autocomplete input
* fix selected item styling
* Add prompt feature on ACUserManager
* Add sort for result in autocomplete
* Add attach option to autocomplete

Co-authored-by: Ronan Amicel <ronan.amicel.prestataire@anct.gouv.fr>
This commit is contained in:
Louis Delbosc
2022-09-21 16:30:54 +02:00
committed by GitHub
parent d55b5110ac
commit 1bff046a3b
5 changed files with 272 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/client/lib/autocomplete.ts
View File

@@ -32,6 +32,10 @@ export interface IAutocompleteOptions<Item extends ACItem> {
// A callback triggered when user clicks one of the choices.
onClick?(): void;
// To which element to append the popup content. Null means triggerElem.parentNode and is the
// default; string is a selector for the closest matching ancestor of triggerElem, e.g. 'body'.
attach?: Element|string|null;
}
/**
@@ -86,8 +90,10 @@ export class Autocomplete<Item extends ACItem> extends Disposable {
this.search();
this.autoDispose(dom.onElem(_triggerElem, 'input', () => this.search()));
// Attach the content to the page.
document.body.appendChild(content);
const attachElem = _options.attach === undefined ? document.body : _options.attach;
const containerElem = getContainer(_triggerElem, attachElem) ?? document.body;
containerElem.appendChild(content);
this.onDispose(() => { dom.domDispose(content); content.remove(); });
// Prepare and create the Popper instance, which places the content according to the options.
@@ -198,6 +204,15 @@ export const defaultPopperOptions: Partial<PopperOptions> = {
};
/**
* Helper that finds the container according to attachElem. Null means
* elem.parentNode; string is a selector for the closest matching ancestor, e.g. 'body'.
*/
function getContainer(elem: Element, attachElem: Element|string|null): Node|null {
return (typeof attachElem === 'string') ? elem.closest(attachElem) :
(attachElem || elem.parentNode);
}
/**
* Helper function which returns the direct child of ancestor which is an ancestor of elem, or
* null if elem is not a descendant of ancestor.