@shzlx/ui-default 4.58.2

package/backendlib/template.ts

@@ -0,0 +1,279 @@
+import path from 'path';
+import * as status from '@hydrooj/common/status';
+import { findFileSync, getAlphabeticId } from '@hydrooj/utils/lib/utils';
+import {
+  avatar, Context, difficultyAlgorithm, fs, PERM, PRIV, Service, STATUS, yaml,
+} from 'hydrooj';
+import { cac } from 'cac';
+import { convert } from 'html-to-text';
+import jsesc from 'jsesc';
+import nunjucks from 'nunjucks';
+import markdown from './markdown';
+import { ensureTag, xss } from './markdown-it-xss';
+import * as misc from './misc';
+
+const argv = cac().parse();
+
+let { template } = argv.options;
+if (!template || typeof template !== 'string') template = findFileSync('@hydrooj/ui-default/templates');
+else template = findFileSync(template);
+
+const replacer = (s) => (k, v) => {
+  if (k.startsWith('_') && k !== '_id') return undefined;
+  if (typeof v === 'bigint') return `BigInt::${v.toString()}`;
+  if (v && typeof v === 'object' && 'serialize' in v && typeof v.serialize === 'function') return v.serialize(s);
+  return v;
+};
+
+async function getFiles(folder: string, base = ''): Promise<string[]> {
+  const files: string[] = [];
+  const f = await fs.readdir(folder);
+  for (const i of f) {
+    if ((await fs.stat(path.join(folder, i))).isDirectory()) {
+      files.push(...await getFiles(path.join(folder, i), path.join(base, i)));
+    } else files.push(path.join(base, i));
+  }
+  return files.map((item) => item.replace(/\\/g, '/'));
+}
+
+function locateFile(basePath: string, filenames: string[]) {
+  for (const i of filenames) {
+    const p = path.resolve(basePath, i);
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
+}
+
+// @ts-ignore
+nunjucks.runtime.memberLookup = function memberLookup(obj, val) {
+  if ((obj || {})._original) obj = obj._original;
+  if (obj === undefined || obj === null) return undefined;
+  if (typeof obj[val] === 'function') {
+    const fn = function (...args) {
+      return obj[val].call(obj, ...args); // eslint-disable-line no-useless-call
+    };
+    fn._original = obj[val];
+    return fn;
+  }
+  return obj[val];
+};
+
+class Nunjucks extends nunjucks.Environment {
+  constructor(Loader: any) {
+    super(new Loader(), { autoescape: true, trimBlocks: true });
+    this.addFilter('await', async (promise, callback) => {
+      try {
+        const result = await promise;
+        callback(null, result);
+      } catch (error) {
+        callback(error);
+      }
+    }, true);
+    this.addFilter('json', (self, s) => (self ? JSON.stringify(self, replacer(s)) : ''));
+    this.addFilter('parseYaml', (self) => yaml.load(self));
+    this.addFilter('dumpYaml', (self) => yaml.dump(self));
+    this.addFilter('assign', (self, data) => Object.assign(self, data));
+    this.addFilter('markdown', (self) => ensureTag(markdown.render(self)));
+    this.addFilter('markdownInline', (self) => ensureTag(markdown.renderInline(self)));
+    this.addFilter('ansi', (self) => misc.ansiToHtml(self));
+    this.addFilter('base64_encode', (s) => Buffer.from(s).toString('base64'));
+    this.addFilter('base64_decode', (s) => Buffer.from(s, 'base64').toString());
+    this.addFilter('jsesc', (self) => jsesc(self, { isScriptContext: true }));
+    this.addFilter('bitand', (self, val) => self & val);
+    this.addFilter('toString', (self, s) => (typeof self === 'string' ? self : JSON.stringify(self, replacer(s))));
+    this.addFilter('content', (content, language, html) => {
+      let s: any = '';
+      try {
+        s = JSON.parse(content);
+      } catch {
+        s = content;
+      }
+      if (typeof s === 'object') {
+        const langs = Object.keys(s);
+        const f = langs.filter((i) => i.startsWith(language));
+        if (s[language]) s = s[language];
+        else if (f.length) s = s[f[0]];
+        else s = s[langs[0]];
+      }
+      return ensureTag(html ? xss.process(s) : markdown.render(s));
+    });
+    this.addFilter('problemPreview', (html) => {
+      const res = convert(html, {
+        selectors: [
+          { selector: 'math', format: 'skip' },
+        ],
+      });
+      return res.split('\n').map((i) => i.trim()).join('\n').replace(/\n+/g, '\n');
+    });
+    this.addFilter('contentLang', (content) => {
+      let s: any = '';
+      try {
+        s = JSON.parse(content);
+      } catch {
+        s = content;
+      }
+      if (typeof s === 'object') return Object.keys(s);
+      return [];
+    });
+    this.addFilter('log', (self) => {
+      console.log(self);
+      return self;
+    });
+
+    // eslint-disable-next-line no-eval
+    this.addGlobal('eval', eval);
+    this.addGlobal('Date', Date);
+    this.addGlobal('Object', Object);
+    this.addGlobal('String', String);
+    this.addGlobal('Array', Array);
+    this.addGlobal('Math', Math);
+    this.addGlobal('process', process);
+    this.addGlobal('global', global);
+    this.addGlobal('typeof', (o) => typeof o);
+    this.addGlobal('instanceof', (a, b) => a instanceof b);
+    this.addGlobal('paginate', misc.paginate);
+    this.addGlobal('size', misc.size);
+    this.addGlobal('utils', { status, getAlphabeticId, buildQueryString: misc.buildQueryString });
+    this.addGlobal('avatarUrl', avatar);
+    this.addGlobal('formatSeconds', misc.formatSeconds);
+    this.addGlobal('model', global.Hydro.model);
+    this.addGlobal('lib', { difficulty: difficultyAlgorithm });
+    this.addGlobal('ui', global.Hydro.ui);
+    this.addGlobal('isIE', (str) => {
+      if (!str) return false;
+      if (['MSIE', 'rv:11.0'].some((i) => str.includes(i))) return true;
+      if (str.includes('Chrome/') && +str.split('Chrome/')[1].split('.')[0] < 60) return true;
+      return false;
+    });
+    this.addGlobal('set', (obj, key, val) => {
+      if (val !== undefined) obj[key] = val;
+      else Object.assign(obj, key);
+      return '';
+    });
+
+    const platformIconMap = { 'mac os': 'mac' };
+    const supportedPlatformIcons = ['android', 'chromeos', 'ios', 'linux', 'mac', 'mobile', 'windows'];
+    this.addGlobal('platformIcon', (platform) => {
+      const key = platformIconMap[platform?.toLowerCase()] || platform?.toLowerCase();
+      if (supportedPlatformIcons.includes(key)) return key;
+      return 'unknown';
+    });
+  }
+}
+
+export class TemplateService extends Service {
+  static inject = ['server'];
+
+  registry: Record<string, string> = {};
+
+  constructor(public ctx: Context) {
+    super(ctx, 'template');
+    const that = this;
+    ctx.on('handler/create', async (h) => {
+      h.user = h.context.HydroContext.user as any;
+      h.domain = h.context.HydroContext.domain as any;
+      h.translate = h.translate.bind(h);
+      h.url = h.url.bind(h);
+      h.ctx = h.ctx.extend({ domain: h.domain });
+      h.renderHTML = ((orig) => function (name: string, args: Record<string, any>) {
+        const s = name.split('.');
+        let templateName = `${s[0]}.${args.domainId}.${s[1]}`;
+        if (!that.registry[templateName]) templateName = name;
+        return orig(templateName, args);
+      })(h.renderHTML).bind(h);
+    });
+
+    class Loader extends nunjucks.Loader {
+      getSource(name) {
+        const src = that.registry[name];
+        const ref = that.registry[`${name}.source`];
+        if (!process.env.DEV) {
+          if (!src) throw new Error(`Cannot get template ${name}`);
+          return {
+            src,
+            path: name,
+            noCache: false,
+          };
+        }
+        let fullpath: string | null = null;
+        const p = path.resolve(template, name);
+        if (fs.existsSync(p)) fullpath = p;
+        if (!fullpath && ref && fs.existsSync(ref)) fullpath = ref;
+        if (!fullpath) {
+          if (src) {
+            return {
+              src,
+              path: name,
+              noCache: true,
+            };
+          }
+          throw new Error(`Cannot get template ${name}`);
+        }
+        return {
+          src: fs.readFileSync(fullpath, 'utf-8'),
+          path: fullpath,
+          noCache: true,
+        };
+      }
+    }
+
+    const env = new Nunjucks(Loader);
+    env.addGlobal('findSubModule', (prefix) => Object.keys(that.registry).filter((n) => n.startsWith(prefix)));
+    env.addGlobal('templateExists', (name) => !!that.registry[name]);
+
+    const render = (name: string, state: any) => new Promise<string>((resolve, reject) => {
+      const start = Date.now();
+      env.render(name, {
+        page_name: name.split('.')[0],
+        ...state,
+        formatJudgeTexts: (texts) => texts.map((text) => {
+          if (typeof text === 'string') return text;
+          return state._(text.message).format(...text.params || []) + ((process.env.DEV && text.stack) ? `\n${text.stack}` : '');
+        }).join('\n'),
+        datetimeSpan: (arg0, arg1, arg2) => misc.datetimeSpan(arg0, arg1, arg2, state.handler.user?.timeZone),
+        ctx: state.handler?.ctx,
+        perm: PERM,
+        PRIV,
+        STATUS,
+        UiContext: state.handler?.UiContext || {},
+      }, (err, res) => {
+        const end = Date.now();
+        if (end - start > 5000) console.error(`Render of ${name} took ${end - start}ms`);
+        if (err) reject(err);
+        else resolve(res || '');
+      });
+    });
+
+    ctx.server.registerRenderer('ui-default', {
+      name: 'ui-default',
+      output: 'html',
+      accept: [],
+      asFallback: true,
+      priority: 1,
+      render: (name, args, context) => render(name, { ...context, ...args }),
+    });
+  }
+
+  async [Service.init]() {
+    const pending = Object.values(global.addons);
+    const logger = this.ctx.logger('template');
+    for (const i of pending) {
+      const p = locateFile(i as string, ['template', 'templates']);
+      if (p && (await fs.stat(p)).isDirectory()) {
+        try {
+          const files = await getFiles(p);
+          for (const file of files) {
+            const l = path.resolve(p, file);
+            this.registry[file] = await fs.readFile(l, 'utf-8');
+            if (process.env.DEV) this.registry[`${file}.source`] = l;
+          }
+          logger.info('Template init: %s', i);
+        } catch (e) {
+          this.ctx.injectUI('Notification', 'Template load fail: {0}', { args: [i], type: 'warn' }, PRIV.PRIV_VIEW_SYSTEM_NOTIFICATION);
+          logger.error('Template Load Fail: %s', i);
+          logger.error(e);
+        }
+      }
+    }
+  }
+}

package/breakpoints.json

@@ -0,0 +1,5 @@
+{
+  "mobile": 600,
+  "desktop": 1000,
+  "hd": 1280
+}

package/components/DOMAttachedObject.ts

@@ -0,0 +1,128 @@
+import $ from 'jquery';
+
+let removalChecker = null;
+const res = [];
+
+function checkResources() {
+  for (let i = res.length - 1; i >= 0; --i) {
+    if (res[i].detached || !document.body.contains(res[i].$dom[0])) {
+      if (!res[i].detached) res[i].detach();
+      res.splice(i, 1);
+    }
+  }
+  if (res.length === 0) {
+    clearInterval(removalChecker);
+    removalChecker = null;
+  }
+}
+
+function monitorResource(resource) {
+  res.push(resource);
+  if (removalChecker === null) {
+    removalChecker = setInterval(checkResources, 500);
+  }
+}
+
+export default class DOMAttachedObject {
+  static uniqueIdCounter = 0;
+  static DOMAttachKey: string;
+  static DOMAttachSelector: string;
+  static DOMDetachSelector: string;
+  // FIXME should be JQuery<HTMLElement>, but typings for $.transition() wasn't found
+  $dom: any;
+  id: number;
+  detached: boolean;
+  eventNS: string;
+
+  static get($obj) {
+    const key = this.DOMAttachKey;
+    return $obj.data(key);
+  }
+
+  static getOrConstruct<T = DOMAttachedObject>($obj, ...args): T {
+    const $singleObj = $obj.eq(0);
+    const key = this.DOMAttachKey;
+    const Protoclass = this as any;
+    const instance = this.get($singleObj);
+    if (instance !== undefined) return instance;
+    const newInstance = new Protoclass($singleObj, ...args);
+    // $dom may be updated in constructor so that we use $dom instead
+    // of $singleObj here.
+    if (!newInstance.$dom) return null;
+    newInstance.$dom.data(key, newInstance);
+    return newInstance;
+  }
+
+  static attachAll(container: Document | HTMLElement = document.body, ...args) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!this.DOMAttachSelector) {
+        throw new Error("'DOMAttachSelector' should be specified");
+      }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      console.time(`DOMAttachedObject[${this.DOMAttachKey}]: attachAll`);
+    }
+    $(container)
+      .find(this.DOMAttachSelector)
+      .addBack(this.DOMAttachSelector)
+      .get()
+      .forEach((element) => this.getOrConstruct($(element), ...args));
+    if (process.env.NODE_ENV !== 'production') {
+      console.timeEnd(`DOMAttachedObject[${this.DOMAttachKey}]: attachAll`);
+    }
+  }
+
+  static detachAll(container: Document | HTMLElement = document.body) {
+    const selector = this.DOMDetachSelector || this.DOMAttachSelector;
+    if (process.env.NODE_ENV !== 'production') {
+      if (!selector) {
+        throw new Error("'DOMDetachSelector' or 'DOMAttachSelector' should be specified");
+      }
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      console.time(`DOMAttachedObject[${this.DOMAttachKey}]: detachAll`);
+    }
+    $(container)
+      .find(selector)
+      .addBack(selector)
+      .get()
+      .forEach((element) => {
+        const instance = this.get($(element));
+        if (instance) {
+          instance.detach();
+        }
+      });
+    if (process.env.NODE_ENV !== 'production') {
+      console.timeEnd(`DOMAttachedObject[${this.DOMAttachKey}]: detachAll`);
+    }
+  }
+
+  static registerLifeCycleHooks(attach = true) {
+    if (process.env.NODE_ENV !== 'production') {
+      if (!this.DOMAttachSelector) {
+        throw new Error("'DOMAttachSelector' should be specified");
+      }
+    }
+    $(document).on('vjContentNew', (e) => this.attachAll(e.target));
+    $(document).on('vjContentRemove', (e) => this.detachAll(e.target));
+    if (attach) {
+      this.attachAll();
+    }
+  }
+
+  detach() {
+    if ((this.constructor as any).DOMAttachKey) {
+      this.$dom.removeData((this.constructor as any).DOMAttachKey);
+    }
+    this.detached = true;
+  }
+
+  constructor($dom: JQuery<HTMLElement>, monitorDetach = false) {
+    if ($dom == null) return null;
+    this.$dom = $dom;
+    this.id = ++DOMAttachedObject.uniqueIdCounter;
+    this.eventNS = `vj4obj_${this.id}`;
+    this.detached = false;
+    if (monitorDetach) monitorResource(this);
+  }
+}

package/components/autocomplete/AssignSelectAutoComplete.tsx

@@ -0,0 +1,22 @@
+import AutoComplete, { AutoCompleteOptions } from '.';
+import AssignSelectAutoCompleteFC from './components/AssignSelectAutoComplete';
+
+export default class AssignSelectAutoComplete<Multi extends boolean> extends AutoComplete {
+  static DOMAttachKey = 'ucwAssignSelectAutoCompleteInstance';
+
+  constructor($dom, options: AutoCompleteOptions<Multi> = {}) {
+    super($dom, {
+      classes: 'assign-select',
+      component: AssignSelectAutoCompleteFC,
+      props: {
+        multi: true,
+        height: 'auto',
+      },
+      ...options,
+    });
+  }
+
+  value(): string {
+    return this.ref?.getSelectedItemKeys().join(',') ?? this.$dom.val();
+  }
+}

package/components/autocomplete/CustomSelectAutoComplete.tsx

@@ -0,0 +1,23 @@
+import { CustomSelectAutoComplete as CustomSelectAutoCompleteFC } from '@hydrooj/components';
+import AutoComplete, { AutoCompleteOptions } from '.';
+
+interface CustomSelectOptions {
+  data: any[];
+}
+
+export default class CustomSelectAutoComplete<Multi extends boolean> extends AutoComplete<CustomSelectOptions> {
+  static DOMAttachKey = 'ucwCustomSelectAutoCompleteInstance';
+
+  constructor($dom, options: CustomSelectOptions & AutoCompleteOptions<Multi>) {
+    super($dom, {
+      classes: 'custom-select',
+      component: CustomSelectAutoCompleteFC,
+      props: {
+        data: options.data,
+        multi: options.multi,
+        height: 'auto',
+      },
+      ...options,
+    });
+  }
+}

package/components/autocomplete/DomainSelectAutoComplete.tsx

@@ -0,0 +1,18 @@
+import AutoComplete, { AutoCompleteOptions } from '.';
+import DomainSelectAutoCompleteFC from './components/DomainSelectAutoComplete';
+
+export default class DomainSelectAutoComplete<Multi extends boolean> extends AutoComplete {
+  static DOMAttachKey = 'ucwDomainSelectAutoCompleteInstance';
+
+  constructor($dom, options: AutoCompleteOptions<Multi> = {}) {
+    super($dom, {
+      classes: 'domain-select',
+      component: DomainSelectAutoCompleteFC,
+      props: {
+        multi: options.multi,
+        height: '34px',
+      },
+      ...options,
+    });
+  }
+}

package/components/autocomplete/FileSelectAutoComplete.tsx

@@ -0,0 +1,26 @@
+import AutoComplete, { AutoCompleteOptions } from '.';
+import FileSelectAutoCompleteFC from './components/FileSelectAutoComplete';
+
+interface FileSelectOptions {
+  data: {
+    id: string;
+    name: string;
+  }[];
+}
+
+export default class FileSelectAutoComplete<Multi extends boolean> extends AutoComplete<FileSelectOptions> {
+  static DOMAttachKey = 'ucwFileSelectAutoCompleteInstance';
+
+  constructor($dom, options: FileSelectOptions & AutoCompleteOptions<Multi>) {
+    super($dom, {
+      classes: 'file-select',
+      component: FileSelectAutoCompleteFC,
+      props: {
+        data: options.data,
+        multi: options.multi,
+        height: 'auto',
+      },
+      ...options,
+    });
+  }
+}

package/components/autocomplete/LanguageSelectAutoComplete.tsx

@@ -0,0 +1,24 @@
+import AutoComplete, { AutoCompleteOptions } from '.';
+import LanguageSelectAutoCompleteFC from './components/LanguageSelectAutoComplete';
+
+interface LanguageSelectOptions {
+  multi?: boolean;
+  withAuto?: boolean;
+}
+
+export default class LanguageSelectAutoComplete<Multi extends boolean> extends AutoComplete<LanguageSelectOptions> {
+  static DOMAttachKey = 'ucwLanguageSelectAutoCompleteInstance';
+
+  constructor($dom, options: LanguageSelectOptions & AutoCompleteOptions<Multi>) {
+    super($dom, {
+      classes: 'language-select',
+      component: LanguageSelectAutoCompleteFC,
+      props: {
+        multi: options.multi,
+        withAuto: options.withAuto,
+        height: 'auto',
+      },
+      ...options,
+    });
+  }
+}

package/components/autocomplete/ProblemSelectAutoComplete.tsx

@@ -0,0 +1,18 @@
+import AutoComplete from '.';
+import ProblemSelectAutoCompleteFC from './components/ProblemSelectAutoComplete';
+
+export default class ProblemSelectAutoComplete extends AutoComplete {
+  static DOMAttachKey = 'ucwProblemSelectAutoCompleteInstance';
+
+  constructor($dom, options) {
+    super($dom, {
+      classes: 'problem-select',
+      component: ProblemSelectAutoCompleteFC,
+      props: {
+        multi: options.multi,
+        height: 'auto',
+      },
+      ...options,
+    });
+  }
+}

package/components/autocomplete/UserSelectAutoComplete.tsx

@@ -0,0 +1,23 @@
+import AutoComplete, { AutoCompleteOptions } from '.';
+import UserSelectAutoCompleteFC from './components/UserSelectAutoComplete';
+
+export default class UserSelectAutoComplete<Multi extends boolean> extends AutoComplete {
+  static DOMAttachKey = 'ucwUserSelectAutoCompleteInstance';
+
+  constructor($dom, options: AutoCompleteOptions<Multi> = {}) {
+    super($dom, {
+      classes: 'user-select',
+      component: UserSelectAutoCompleteFC,
+      props: {
+        multi: options.multi,
+        height: 'auto',
+      },
+      ...options,
+    });
+  }
+
+  value(): Multi extends true ? number[] : string {
+    if (this.options.multi) return this.ref?.getSelectedItemKeys().map((i) => +i) ?? this.$dom.val();
+    return this.ref?.getSelectedItems()[0] ?? null;
+  }
+}

package/components/autocomplete/components/AssignSelectAutoComplete.tsx

@@ -0,0 +1,118 @@
+import { AutoComplete, AutoCompleteHandle, AutoCompleteProps } from '@hydrooj/components';
+import type { GDoc, Udoc } from 'hydrooj/src/interface';
+import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import { api } from 'vj/utils';
+
+interface AssignItem {
+  type: 'user' | 'group';
+  key: string;
+  name: string;
+  displayName?: string;
+  avatarUrl?: string;
+  uids?: number[];
+  invalid?: boolean;
+}
+
+const toUserItem = (user: Udoc): AssignItem => ({
+  type: 'user',
+  key: user._id.toString(),
+  name: user.uname,
+  displayName: user.displayName,
+  avatarUrl: user.avatarUrl,
+});
+
+const toGroupItem = (group: GDoc): AssignItem => ({
+  type: 'group',
+  key: group.name,
+  name: group.name,
+  uids: group.uids,
+});
+
+const AssignSelectAutoComplete = forwardRef<AutoCompleteHandle<AssignItem>, AutoCompleteProps<AssignItem>>((props, ref) => (
+  <AutoComplete<AssignItem>
+    ref={ref as any}
+    cacheKey="assign"
+    queryItems={async (query) => {
+      const [users, groups] = await Promise.all([
+        api('users', { search: query }, ['_id', 'uname', 'displayName', 'avatarUrl']),
+        api('groups', { search: query }, ['name', 'uids']),
+      ]);
+      const userItems: AssignItem[] = users.map((user: Udoc) => toUserItem(user));
+      const groupItems: AssignItem[] = groups.map((group: GDoc) => toGroupItem(group));
+      return [...groupItems, ...userItems];
+    }}
+    fetchItems={async (keys) => {
+      const isUserId = (k: string) => /^-?[0-9]+$/.test(k);
+      const userIds = keys.filter((k) => isUserId(k));
+      const groupNames = keys.filter((k) => !isUserId(k));
+
+      const [users, groups]: [Udoc[], GDoc[]] = await Promise.all([
+        userIds.length > 0 ? api('users', { auto: userIds }, ['_id', 'uname', 'displayName']) : [],
+        groupNames.length > 0 ? api('groups', { names: groupNames }, ['name', 'uids']) : [],
+      ]);
+
+      const userItems: AssignItem[] = users.map((user: Udoc) => toUserItem(user));
+      const groupItems: AssignItem[] = keys
+        .filter((key) => !isUserId(key))
+        .map((key) => {
+          const group = groups.find((g) => g.name === key);
+          return group ? toGroupItem(group) : { type: 'group', key, name: key, invalid: true };
+        });
+
+      return [...groupItems, ...userItems];
+    }}
+    itemText={(item) => {
+      if (item.type === 'group') {
+        if (item.invalid) return `${item.name} (invalid)`;
+        return `${item.name} (${item.uids?.length || 0} users)`;
+      }
+      return item.name + (item.displayName ? ` (${item.displayName})` : '');
+    }}
+    itemKey={(item) => item.key}
+    renderItem={(item) => (
+      <div className="media">
+        {item.type === 'user' && (
+          <div className="media__left medium">
+            <img className="small user-profile-avatar" alt="" src={item.avatarUrl} width="30" height="30" />
+          </div>
+        )}
+        <div className="media__body medium">
+          <div className="assign-select__name">
+            {item.name}{item.type === 'user' && item.displayName && ` (${item.displayName})`}
+          </div>
+          <div className="assign-select__desc">
+            {item.type === 'group' ? `Group • ${item.uids?.length || 0} users` : `User • UID = ${item.key}`}
+          </div>
+        </div>
+      </div>
+    )}
+    {...{
+      width: '100%',
+      height: 'auto',
+      listStyle: {},
+      multi: true,
+      selectedKeys: [],
+      allowEmptyQuery: false,
+      freeSolo: false,
+      freeSoloConverter: (input) => input,
+      ...props,
+    }}
+  />
+));
+
+AssignSelectAutoComplete.propTypes = {
+  width: PropTypes.string,
+  height: PropTypes.string,
+  listStyle: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  multi: PropTypes.bool,
+  selectedKeys: PropTypes.arrayOf(PropTypes.string),
+  allowEmptyQuery: PropTypes.bool,
+  freeSolo: PropTypes.bool,
+  freeSoloConverter: PropTypes.func,
+};
+
+AssignSelectAutoComplete.displayName = 'AssignSelectAutoComplete';
+
+export default AssignSelectAutoComplete;