From a9e77c4c7bdecd73cd916f89b9e24141e34c5649 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Mon, 13 Mar 2023 19:04:30 +0800
Subject: [PATCH] ui: add tpl tsx example

---
 .../components/dialog/{index.ts => index.tsx} | 23 ++++++++-------
 .../{selectUser.ts => selectUser.tsx}         | 29 ++++++++++---------
 packages/ui-default/utils/base.ts             | 16 ++++++++--
 3 files changed, 41 insertions(+), 27 deletions(-)
 rename packages/ui-default/components/dialog/{index.ts => index.tsx} (82%)
 rename packages/ui-default/components/{selectUser.ts => selectUser.tsx} (60%)

diff --git a/packages/ui-default/components/dialog/index.ts b/packages/ui-default/components/dialog/index.tsx
similarity index 82%
rename from packages/ui-default/components/dialog/index.ts
rename to packages/ui-default/components/dialog/index.tsx
index b16f31d6a..9fe689436 100644
--- a/packages/ui-default/components/dialog/index.ts
+++ b/packages/ui-default/components/dialog/index.tsx
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import React from 'react';
 import { i18n, tpl } from 'vj/utils';
 import DomDialog, { DialogOptions } from './DomDialog';
 
@@ -14,19 +15,19 @@ export class Dialog {
       $action: null,
       ...options,
     };
-    let box = '';
-    if (options.width) box += `width:${options.width};max-width:${options.width};`;
-    if (options.height) box += `height:${options.height};max-height:${options.height};`;
-    this.$dom = $(tpl`
-      <div class="dialog withBg ${this.options.classes}" style="display:none">
-        <div class="dialog__content" style="${box}">
-          <div class="dialog__body" style="height:calc(100% - 45px);"></div>
-          <div class="row"><div class="columns clearfix">
-            <div class="float-right dialog__action"></div>
+    const box: React.CSSProperties = {};
+    if (options.width) box.width = box.maxWidth = options.width;
+    if (options.height) box.height = box.maxHeight = options.height;
+    this.$dom = $(tpl(
+      <div className={`dialog withBg ${this.options.classes}`} style={{ display: 'none' }}>
+        <div className="dialog__content" style={box}>
+          <div className="dialog__body" style={{ height: 'calc(100% - 45px);' }} />
+          <div className="row"><div className="columns clearfix">
+            <div className="float-right dialog__action" />
           </div></div>
         </div>
-      </div>
-    `);
+      </div>,
+    ));
     this.$dom.on('click', '[data-action]', this.handleActionButton.bind(this));
     this.$dom.on('vjDomDialogShow', this.beforeShow.bind(this));
     this.$dom.on('vjDomDialogHidden', this.afterHide.bind(this));
diff --git a/packages/ui-default/components/selectUser.ts b/packages/ui-default/components/selectUser.tsx
similarity index 60%
rename from packages/ui-default/components/selectUser.ts
rename to packages/ui-default/components/selectUser.tsx
index 3aa05a3b1..9cf75c95d 100644
--- a/packages/ui-default/components/selectUser.ts
+++ b/packages/ui-default/components/selectUser.tsx
@@ -1,24 +1,27 @@
+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';
 
 let hintInserted = false;
-$(tpl`<div style="display: none" class="dialog__body--user-select">
-  <div class="row"><div class="columns">
-    <h1 name="select_user_hint">${i18n('Select User')}</h1>
-  </div></div>
-  <div class="row">
-    <div class="columns">
-      <label>${i18n('Username / UID')}
-        <input name="user" type="text" class="textbox" autocomplete="off" data-autofocus>
-      </label>
+$(tpl(
+  <div style={{ display: 'none' }} 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);
+  </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 > div'),
+  $body: $('.dialog__body--user-select'),
   onDispatch(action) {
     if (action === 'ok' && userSelector.value() === null) {
       userSelector.focus();
@@ -30,7 +33,7 @@ const userSelectDialog = new ActionDialog({
 
 export default async function selectUser(hint?: string) {
   if (hint && !hintInserted) {
-    createHint(hint, $('[name="select_user_hint"]'));
+    createHint(hint, $('#select_user_hint'));
     hintInserted = true;
   }
   userSelector.clear();
diff --git a/packages/ui-default/utils/base.ts b/packages/ui-default/utils/base.ts
index 82831f434..53744dbcb 100644
--- a/packages/ui-default/utils/base.ts
+++ b/packages/ui-default/utils/base.ts
@@ -1,7 +1,8 @@
 import $ from 'jquery';
 import _ from 'lodash';
 import React from 'react';
-import DOMServer from 'react-dom/server.browser';
+import ReactDOM from 'react-dom/client';
+import DOMServer from 'react-dom/server';
 
 export function substitute(str: string, obj: any) {
   return str.replace(/\{([^{}]+)\}/g, (match, key) => {
@@ -33,8 +34,17 @@ export function secureRandomString(digit = 32, dict = defaultDict) {
 
 type Substitution = string | number | { templateRaw: true, html: string };
 
-export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]) {
-  if (React.isValidElement(pieces)) return DOMServer.renderToStaticMarkup(pieces);
+export function tpl(node: React.ReactNode, reactive?: boolean);
+export function tpl(pieces: TemplateStringsArray, ...substitutions: Substitution[]);
+export function tpl(pieces: TemplateStringsArray | React.ReactNode, ...substitutions: Substitution[] | boolean[]) {
+  if (React.isValidElement(pieces)) {
+    if (substitutions[0]) {
+      const div = document.createElement('div');
+      ReactDOM.createRoot(div).render(pieces);
+      return div;
+    }
+    return DOMServer.renderToStaticMarkup(pieces);
+  }
   let result = pieces[0];
   for (let i = 0; i < substitutions.length; ++i) {
     const subst = substitutions[i];