From 2d0d2ae10a223162be65e7b5b698a794f5c5496a Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Wed, 22 May 2024 17:42:10 +0800
Subject: [PATCH] ui: update tpl function

---
 packages/ui-default/pages/contest_balloon.page.tsx | 14 +++++---------
 packages/utils/lib/utils.ts                        |  2 +-
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/ui-default/pages/contest_balloon.page.tsx b/packages/ui-default/pages/contest_balloon.page.tsx
index c30d867f7..bae997895 100644
--- a/packages/ui-default/pages/contest_balloon.page.tsx
+++ b/packages/ui-default/pages/contest_balloon.page.tsx
@@ -2,7 +2,6 @@ import $ from 'jquery';
 import yaml from 'js-yaml';
 import React from 'react';
 import { HexColorInput, HexColorPicker } from 'react-colorful';
-import { createRoot } from 'react-dom/client';
 import { ActionDialog } from 'vj/components/dialog';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
@@ -72,17 +71,14 @@ async function handleSetColor(tdoc) {
     for (const pid of tdoc.pids) val[+pid] = { color: '#ffffff', name: '' };
   }
   Notification.info(i18n('Loading...'));
-  const promise = new ActionDialog({
-    $body: tpl`
+  const action = await new ActionDialog({
+    $body: tpl(<>
       <div className="row"><div className="columns">
-        <h1>${i18n('Set Color')}</h1>
+        <h1>{i18n('Set Color')}</h1>
       </div></div>
-      <div id="balloon"></div>`,
+      <Balloon tdoc={tdoc} val={val} />
+    </>, true),
   }).open();
-  createRoot($('#balloon').get(0)).render(
-    <Balloon tdoc={tdoc} val={val} />,
-  );
-  const action = await promise;
   if (action !== 'ok') return;
   Notification.info(i18n('Updating...'));
   try {
diff --git a/packages/utils/lib/utils.ts b/packages/utils/lib/utils.ts
index 390260d87..eec732c7a 100644
--- a/packages/utils/lib/utils.ts
+++ b/packages/utils/lib/utils.ts
@@ -137,7 +137,7 @@ export namespace Time {
         else if (isMoment(timestamp)) _timestamp = timestamp.toDate().getTime();
         else _timestamp = timestamp.getTime();
         const hexSeconds = Math.floor(_timestamp / 1000).toString(16);
-        return new ObjectId(`${hexSeconds}${allZero ? '0000000000000000' : new ObjectId().toHexString().substr(8)}`);
+        return new ObjectId(`${hexSeconds}${allZero ? '0000000000000000' : new ObjectId().toHexString().substring(8)}`);
     }
 }