core&ui: add contest language limit (#1014)

Co-authored-by: panda <panda_dtdyy@outlook.com>

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

@@ -1,4 +1,5 @@
 import { AutoComplete as AutoCompleteFC } from '@hydrooj/components';
+import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DOMAttachedObject from 'vj/components/DOMAttachedObject';
 
@@ -18,23 +19,23 @@ export interface AutoCompleteOptions<Multi extends boolean = boolean> {
   text?: () => string;
 }
 
-export default class AutoComplete<Options extends Record<string, any> = {}> extends DOMAttachedObject {
+export default class AutoComplete<Options extends Record<string, any> = {}, Multi extends boolean = boolean> extends DOMAttachedObject {
   static DOMAttachKey = 'ucwAutoCompleteInstance';
   ref = null;
   container = document.createElement('div');
-  options: AutoCompleteOptions & Options;
+  options: AutoCompleteOptions<Multi> & Options;
   component = ReactDOM.createRoot(this.container);
   changeListener = [
     (val) => this.$dom.val(val),
   ];
 
-  constructor($dom, options = {} as Options) {
+  constructor($dom, options = {} as Options & { component?: React.ComponentType<any>, props?: Record<string, any> }) {
     super($dom);
     this.options = {
       items: async () => [],
       render: () => '',
       text: () => null,
-      multi: false,
+      multi: false as Multi,
       ...options,
     };
     this.clear = this.clear.bind(this);
@@ -63,20 +64,21 @@ export default class AutoComplete<Options extends Record<string, any> = {}> exte
   }
 
   attach() {
-    const value = this.$dom.val();
-    this.component.render(
-      <AutoCompleteFC
+    const Component = this.options.component || AutoCompleteFC;
+    const Wrapper = (props) => {
+      const [value, setValue] = React.useState(props.value);
+      return <Component
         ref={(ref) => { this.ref = ref; }}
+        onChange={(v) => {
+          setValue(v);
+          this.onChange(v);
+        }}
+        selectedKeys={(Array.isArray(value) ? value : value.split(',')).map((i) => i.trim()).filter((i) => i)}
         height="34px"
-        queryItems={this.options.items}
-        renderItem={this.options.render}
-        itemText={this.options.text}
-        selectedKeys={value.split(',').map((i) => i.trim())}
-        onChange={this.onChange}
-        multi={this.options.multi}
-        freeSolo={this.options.multi}
-      />,
-    );
+        {...this.options.props}
+      />;
+    };
+    this.component.render(<Wrapper value={this.$dom.val()} />);
   }
 
   open() {
@@ -89,8 +91,8 @@ export default class AutoComplete<Options extends Record<string, any> = {}> exte
     this.ref.closeList();
   }
 
-  value(): any {
-    if (this.options.multi) return this.$dom.val();
+  value(): Multi extends true ? (string | number)[] : string {
+    if (this.options.multi) return this.ref?.getSelectedItemKeys() ?? this.$dom.val();
     return this.ref?.getSelectedItems()[0] ?? null;
   }