ui: add alert/prompt/confirm helper function (#1018)

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

@@ -1,6 +1,9 @@
+/* eslint-disable react-refresh/only-export-components */
 import $ from 'jquery';
 import React from 'react';
 import { i18n, tpl } from 'vj/utils';
+import DomainSelectAutoComplete from '../autocomplete/components/DomainSelectAutoComplete';
+import UserSelectAutoComplete from '../autocomplete/components/UserSelectAutoComplete';
 import DomDialog, { DialogOptions } from './DomDialog';
 
 export class Dialog {
@@ -108,7 +111,96 @@ export class ConfirmDialog extends Dialog {
   }
 }
 
+export interface Field {
+  type: 'text' | 'checkbox' | 'user' | 'domain';
+  placeholder?: string;
+  label?: string;
+  autofocus?: boolean;
+  required?: boolean;
+  default?: string;
+}
+
+export async function prompt<T extends string>(title: string, fields: Record<T, Field>) {
+  let valueCache: Record<T, string | number | boolean> = {} as any;
+  const defaultValues = Object.fromEntries(Object.entries(fields)
+    .map(([name, field]: [T, Field]) => [name, field.default || ''])) as Record<T, string | number | boolean>;
+
+  const Component = () => {
+    const [values, setValues] = React.useState(defaultValues);
+
+    React.useEffect(() => {
+      valueCache = values;
+    }, [values]);
+
+    return <div style={{ display: 'none' }}>
+      <div className="row"><div className="columns">
+        <h1>{title}</h1>
+      </div></div>
+      {Object.entries(fields).map(([name, field]: [string, Field]) => <div className="row" key={name}>
+        <div className="columns">
+          {['text', 'user', 'domain'].includes(field.type) && <label>
+            {field.label}
+            <div className="textbox-container">
+              {field.type === 'text'
+                ? <input
+                  type="text" className="textbox" data-autofocus={field.autofocus}
+                  defaultValue={field.default}
+                  onChange={(e) => setValues({ ...values, [name]: e.target.value })}
+                />
+                : field.type === 'user'
+                  ? <UserSelectAutoComplete
+                    data-autofocus={field.autofocus} selectedKeys={values[name] ? [values[name]] : []}
+                    onChange={(e) => setValues({ ...values, [name]: e })}
+                  />
+                  : <DomainSelectAutoComplete
+                    data-autofocus={field.autofocus} selectedKeys={values[name] ? [values[name]] : []}
+                    onChange={(e) => setValues({ ...values, [name]: e })}
+                  />}
+            </div>
+          </label>}
+          {field.type === 'checkbox' && <label className="checkbox">
+            <input type="checkbox"
+              defaultChecked={field.default === 'true'}
+              onChange={(e) => setValues({ ...values, [name]: !!e.target.checked })}
+            />
+            {field.label}
+          </label>}
+        </div>
+      </div>)}
+    </div>;
+  };
+  const res = await new Dialog({
+    $body: $(tpl(<Component />, true)),
+    onDispatch(action) {
+      if (action === 'ok') {
+        for (const [name, field] of Object.entries(fields)) {
+          if ((field as any).required && !valueCache[name]) return false;
+        }
+      }
+      return true;
+    },
+  }).open();
+  if (res !== 'ok') return null;
+  return valueCache;
+}
+
+export async function confirm(text: string) {
+  const res = await new ConfirmDialog({
+    $body: tpl.typoMsg(text),
+  }).open();
+  return res === 'yes';
+}
+
+export async function alert(text: string) {
+  return await new InfoDialog({
+    $body: tpl.typoMsg(text),
+  }).open();
+}
+
 window.Hydro.components.Dialog = Dialog;
 window.Hydro.components.InfoDialog = InfoDialog;
 window.Hydro.components.ActionDialog = ActionDialog;
 window.Hydro.components.ConfirmDialog = ConfirmDialog;
+window.Hydro.components.prompt = prompt;
+window.Hydro.components.confirm = confirm;
+window.Hydro.components.alert = alert;

packages/ui-default/components/problem/create.page.js

@@ -1,14 +1,12 @@
 import $ from 'jquery';
-import { InfoDialog } from 'vj/components/dialog';
+import { alert } from 'vj/components/dialog';
 import { NamedPage } from 'vj/misc/Page';
-import { i18n, tpl } from 'vj/utils';
+import { i18n } from 'vj/utils';
 
 export default new NamedPage(['problem_create', 'problem_edit'], () => {
   $('input[name="pid"]').on('blur', () => {
     if (/^[0-9]+$/.test($('input[name="pid"]').val())) {
-      new InfoDialog({
-        $body: tpl.typoMsg(i18n('Problem ID cannot be a pure number. Leave blank if you want to use numberic id.')),
-      }).open();
+      alert(i18n('Problem ID cannot be a pure number. Leave blank if you want to use numberic id.'));
     }
   });
 });

packages/ui-default/components/selectUser.tsx

@@ -1,47 +1,16 @@
-import React from 'react';
-import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { ActionDialog } from 'vj/components/dialog';
-import { i18n, tpl } from 'vj/utils';
-import createHint from './hint';
+import { prompt } from 'vj/components/dialog';
+import { i18n } from 'vj/utils';
 
-let hintInserted = false;
-$(tpl(
-  <div style={{ display: 'none' }}>
-    <div className="dialog__body--user-select">
-      <div className="row"><div className="columns">
-        <h1 id="select_user_hint">{i18n('Select User')}</h1>
-      </div></div>
-      <div className="row">
-        <div className="columns">
-          <label>{i18n('Username / UID')}
-            <input name="user" type="text" className="textbox" autoComplete="off" data-autofocus />
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>,
-)).appendTo(document.body);
-const userSelector = UserSelectAutoComplete.getOrConstruct($('.dialog__body--user-select [name="user"]')) as any;
-const userSelectDialog = new ActionDialog({
-  $body: $('.dialog__body--user-select'),
-  onDispatch(action) {
-    if (action === 'ok' && userSelector.value() === null) {
-      userSelector.focus();
-      return false;
-    }
-    return true;
-  },
-});
-
-export default async function selectUser(hint?: string) {
-  if (hint && !hintInserted) {
-    createHint(hint, $('#select_user_hint'));
-    hintInserted = true;
-  }
-  userSelector.clear();
-  const action = await userSelectDialog.open();
-  if (action !== 'ok') return null;
-  return userSelector.value();
+export default async function selectUser() {
+  const res = await prompt(i18n('Select User'), {
+    user: {
+      type: 'user',
+      label: i18n('Username / UID'),
+      required: true,
+      autofocus: true,
+    },
+  });
+  return res?.user;
 }
 
 window.Hydro.components.selectUser = selectUser;