ui: domain_group management

packages/ui-default/components/autocomplete/UserSelectAutoComplete.tsx

@@ -3,31 +3,31 @@ import ReactDOM from 'react-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
-import AutoComplete from '.';
+import AutoComplete, { AutoCompleteOptions } from '.';
 import UserSelectAutoCompleteFC from './components/UserSelectAutoComplete';
 
-export default class UserSelectAutoComplete extends AutoComplete {
+export default class UserSelectAutoComplete<Multi extends boolean> extends AutoComplete {
   static DOMAttachKey = 'ucwUserSelectAutoCompleteInstance';
+  client = new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        refetchOnMount: false,
+        refetchOnReconnect: false,
+        retry: false,
+        staleTime: Infinity,
+      },
+    },
+  });
 
-  constructor($dom, options) {
+  constructor($dom, options: AutoCompleteOptions<Multi>) {
     super($dom, {
       classes: 'user-select',
       ...options,
     });
-    this.client = new QueryClient({
-      defaultOptions: {
-        queries: {
-          refetchOnWindowFocus: false,
-          refetchOnMount: false,
-          refetchOnReconnect: false,
-          retry: false,
-          staleTime: Infinity,
-        },
-      },
-    });
   }
 
-  value() {
+  value(): Multi extends true ? number[] : string {
     if (this.options.multi) return this.ref?.getSelectedItems().map((item) => item._id) ?? this.$dom.val();
     return this.ref?.getSelectedItems()[0] ?? null;
   }

packages/ui-default/components/autocomplete/components/UserSelectAutoComplete.tsx

@@ -5,30 +5,18 @@ import { useQuery } from 'react-query';
 import PropTypes from 'prop-types';
 import api, { gql } from 'vj/utils/api';
 import AutoComplete from './AutoComplete';
-
-interface UserSelectAutoCompleteProps {
-  multi?: boolean;
-  defaultItems?: string;
-  width: string,
-  height: string,
-  listStyle: any,
-  onChange: (value) => any,
-  allowEmptyQuery: boolean,
-  freeSolo: boolean,
-  freeSoloConverter: any,
-}
+import type { AutoCompleteOptions } from '..';
 
 // eslint-disable-next-line prefer-arrow-callback
 const UserSelectAutoComplete = forwardRef(function UserSelectAutoComplete(
-  props: UserSelectAutoCompleteProps, ref: React.ForwardedRef<AutoComplete>,
+  props: AutoCompleteOptions, ref: React.ForwardedRef<AutoComplete>,
 ) {
   const multi = props.multi ?? false;
   const rawDefaultItems = props.defaultItems ?? '';
   const defaultItems = multi ? rawDefaultItems
     .split(',')
-    .map((i) => i.trim())
-    .filter((i) => i.length)
-    .map((i) => +i) : rawDefaultItems;
+    .map((i) => +i.trim())
+    .filter((i) => i) : rawDefaultItems;
 
   const comRef = useRef<AutoComplete>();
   const itemsBox = useRef([]);

packages/ui-default/components/autocomplete/index.tsx

@@ -4,8 +4,29 @@ import { assign } from 'lodash';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 import AutoCompleteFC from './components/AutoComplete';
 
+export interface AutoCompleteOptions<Multi extends boolean = boolean> {
+  multi?: Multi;
+  defaultItems?: string;
+  width?: string;
+  height?: string;
+  listStyle?: any;
+  allowEmptyQuery?: boolean;
+  freeSolo?: boolean;
+  freeSoloConverter?: any;
+  onChange?: (value) => any;
+  items?: () => Promise<any[]>;
+  render?: () => string;
+  text?: () => string;
+}
+
 export default class AutoComplete extends DOMAttachedObject {
   static DOMAttachKey = 'ucwAutoCompleteInstance';
+  ref = null;
+  container = document.createElement('div');
+  options: AutoCompleteOptions;
+  changeListener = [
+    (val) => this.$dom.val(val),
+  ];
 
   constructor($dom, options = {}) {
     super($dom);
@@ -16,7 +37,6 @@ export default class AutoComplete extends DOMAttachedObject {
       multi: false,
       ...options,
     };
-    this.ref = null;
     this.clear = this.clear.bind(this);
     this.onChange = this.onChange.bind(this);
     this.attach = this.attach.bind(this);
@@ -25,7 +45,6 @@ export default class AutoComplete extends DOMAttachedObject {
     this.value = this.value.bind(this);
     this.detach = this.detach.bind(this);
     this.focus = this.focus.bind(this);
-    this.container = document.createElement('div');
     this.$dom.addClass('autocomplete-dummy').after(this.container);
     // Note: use `setTimeout(fn, 0)` to ensure that code is executed after browser autofill
     // also see https://stackoverflow.com/a/779785/13553984
@@ -38,8 +57,9 @@ export default class AutoComplete extends DOMAttachedObject {
     else this.ref.closeList();
   }
 
-  onChange(val) {
-    this.$dom.val(val);
+  onChange(val: string | ((v: string) => any)) {
+    if (typeof val === 'string') this.changeListener.forEach((f) => f(val));
+    else this.changeListener.push(val);
   }
 
   attach() {
@@ -70,7 +90,7 @@ export default class AutoComplete extends DOMAttachedObject {
     this.ref.closeList();
   }
 
-  value() {
+  value(): any {
     if (this.options.multi) return this.$dom.val();
     return this.ref?.getSelectedItems()[0] ?? null;
   }