Convert comboboxeditor and quicksearchinput to jsx

serenity-is · Sep 6, 2024 · 2723189 · 2723189
1 parent 9c4a56a
commit 2723189
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 40 deletions.
diff --git a/...relib/src/ui/datagrid/quicksearchinput.ts → ...elib/src/ui/datagrid/quicksearchinput.tsx b/...relib/src/ui/datagrid/quicksearchinput.ts → ...elib/src/ui/datagrid/quicksearchinput.tsx
@@ -17,7 +17,7 @@ export interface QuickSearchInputOptions {
 
 @Decorators.registerClass('Serenity.QuickSearchInput')
 export class QuickSearchInput<P extends QuickSearchInputOptions = QuickSearchInputOptions> extends Widget<P> {
-    static override createDefaultElement() { return Fluent("input").attr("type", "text").getNode(); }
+    static override createDefaultElement() { return <input type="text" /> as HTMLInputElement; }
     declare readonly domNode: HTMLInputElement;
 
     declare private lastValue: string;
@@ -29,46 +29,29 @@ export class QuickSearchInput<P extends QuickSearchInputOptions = QuickSearchInp
     constructor(props: WidgetProps<P>) {
         super(props);
 
-        this.domNode.setAttribute('title', localText('Controls.QuickSearch.Hint'));
-        this.domNode.setAttribute('placeholder', localText('Controls.QuickSearch.Placeholder'));
+        this.domNode.title = localText('Controls.QuickSearch.Hint');
+        this.domNode.placeholder = localText('Controls.QuickSearch.Placeholder');
         this.lastValue = (this.domNode.value ?? "").trim();
 
         Fluent.on(this.domNode, "keyup." + this.uniqueName, this.checkIfValueChanged.bind(this));
         Fluent.on(this.domNode, "change." + this.uniqueName, this.checkIfValueChanged.bind(this));
 
-        Fluent("span")
-            .class("quick-search-icon")
-            .append(Fluent("i"))
-            .insertBefore(this.domNode);
-
-        if (this.options.fields?.length > 0) {
-            var dropdown = Fluent("div")
-                .class("dropdown quick-search-field")
-                .insertBefore(this.domNode);
-
-            this.fieldLink = Fluent("a").class('.quick-search-field-toggle')
-                .attr('title', localText('Controls.QuickSearch.FieldSelection'))
-                .data("bs-toggle", "dropdown")
-                .appendTo(dropdown)
-                .getNode();
-
-            var menu = Fluent("ul").class("dropdown-menu")
-                .appendTo(dropdown);
-
-            this.options.fields.forEach(item =>
-                Fluent("li")
-                    .appendTo(menu)
-                    .append(Fluent("a")
-                        .class("dropdown-item")
-                        .attr("href", "#")
-                        .text(item.title ?? '')
-                        .on("click", e => {
+        this.domNode.before(<span class="quick-search-icon"><i /></span>)
+
+        if (this.options.fields?.length) {
+            this.domNode.before(
+                <div class="dropdown quick-search-field">
+                    <a class="quick-search-field-toggle" title={localText('Controls.QuickSearch.FieldSelection')} data-bs-toggle="dropdown" ref={el => this.fieldLink = el} />
+                    <ul class="dropdown-menu">
+                        {this.options.fields.map(item => <a class="dropdown-item" href="#" onClick={e => {
                             e.preventDefault();
                             this.fieldChanged = item !== this.field;
                             this.field = item;
                             this.updateInputPlaceHolder();
                             this.checkIfValueChanged();
-                        })));
+                        }}>{item.title ?? ''}</a>)}
+                    </ul>
+                </div>);
 
             this.field = this.options.fields[0];
             this.updateInputPlaceHolder();

diff --git a/packages/corelib/src/ui/editors/comboboxeditor.tsx b/packages/corelib/src/ui/editors/comboboxeditor.tsx
@@ -301,21 +301,18 @@ export class ComboboxEditor<P, TItem> extends Widget<P> implements
         var self = this;
         addTitle = (addTitle ?? localText('Controls.SelectEditor.InplaceAdd'));
         editTitle = (editTitle ?? localText('Controls.SelectEditor.InplaceEdit'));
-        var inplaceButton = Fluent("a")
-            .class('inplace-button inplace-create')
-            .attr('title', addTitle)
-            .append(Fluent("b"))
-            .insertAfter(this.domNode)
-            .on("click", function (e) {
-                self.inplaceCreateClick(e as any);
-            });
+        const inplaceButton = (<a class="inplace-button inplace-create" title={addTitle} onClick={e => {
+            self.inplaceCreateClick(e as any);
+        }}><b></b></a>) as HTMLElement;
+        this.domNode.after(inplaceButton);
 
         this.getComboboxContainer()?.classList.add("has-inplace-button");
         this.domNode.classList.add("has-inplace-button");
 
         this.element.on("change", () => {
             var isNew = this.isMultiple() || !this.get_value();
-            inplaceButton.attr('title', (isNew ? addTitle : editTitle)).toggleClass('edit', !isNew);
+            inplaceButton.title = (isNew ? addTitle : editTitle);
+            inplaceButton.classList.toggle('edit', !isNew);
         });
 
         this.element.on("change", (e: any) => {