sync

lib/ui/dropdown.js

@@ -1,5 +1,5 @@
 import './css/dropdown.scss';
-import { r } from "../utility/lgres";
+import { r as lang } from "../utility/lgres";
 import { contains, nullOrEmpty } from "../utility/strings";
 import { global, isPositive, throttle } from "../utility";
 import { createElement } from "../functions";
@@ -9,6 +9,7 @@ import { createIcon } from "./icon"
 const SymbolDropdown = Symbol.for('ui-dropdown');
 const DropdownItemHeight = 30;
 
+let r = lang;
 let dropdownGlobal = global[SymbolDropdown];
 
 if (dropdownGlobal == null) {
@@ -51,8 +52,13 @@ if (dropdownGlobal == null) {
     });
 }
 
-function selectItems(label, itemlist, htmlkey, textkey) {
-    const htmls = itemlist.map(it => it[htmlkey]);
+function selectItems(label, itemlist, template, htmlkey, textkey) {
+    let htmls;
+    if (typeof template === 'function') {
+        htmls = itemlist.map(it => template.call(this, it));
+    } else {
+        htmls = itemlist.map(it => it[htmlkey]);
+    }
     if (htmls.some(it => it instanceof HTMLElement)) {
         label.replaceChildren(...htmls.filter(it => it != null).map(it => it.cloneNode(true)));
     } else {
@@ -87,6 +93,7 @@ function filterSource(searchkeys, textkey, key, source) {
  * @property {string} [textKey=text] - 文本关键字
  * @property {string} [valueKey=value] - 值关键字
  * @property {string} [htmlKey=html] - 源码显示的关键字
+ * @property {Function} [htmlTemplate] - 模板创建函数
  * @property {number} [maxLength=500] - 最大输入长度
  * @property {boolean} [multiSelect] - 是否允许多选
  * @property {string} [selected] - 选中值
@@ -129,6 +136,10 @@ export class Dropdown {
         options.htmlKey ??= 'html';
         options.maxLength ??= 500;
         this._var.options = options;
+        const getText = options.getText;
+        if (typeof getText === 'function') {
+            r = getText;
+        }
     }
 
     create() {
@@ -300,6 +311,7 @@ export class Dropdown {
         this._var.lastSelected = selected;
         const valuekey = this._var.options.valueKey;
         const textkey = this._var.options.textKey;
+        const template = this._var.options.htmlTemplate;
         const htmlkey = this._var.options.htmlKey;
         let item = this.source.find(it => (ignoreCase ? String(it[valuekey]).toLowerCase() : String(it[valuekey])) === selected);
         if (this._var.options.input) {
@@ -317,7 +329,12 @@ export class Dropdown {
                 this._var.label.innerText = ' ';
                 return false;
             }
-            const html = item[htmlkey];
+            let html;
+            if (typeof template === 'function') {
+                html = template.call(this, item);
+            } else {
+                html = item[htmlkey];
+            }
             if (html instanceof HTMLElement) {
                 this._var.label.replaceChildren(html.cloneNode(true));
             } else if (typeof html === 'string') {
@@ -354,6 +371,7 @@ export class Dropdown {
         const source = this.source;
         const valuekey = this._var.options.valueKey;
         const textkey = this._var.options.textKey;
+        const template = this._var.options.htmlTemplate;
         const htmlkey = this._var.options.htmlKey;
         const itemlist = selectedlist.map(a => {
             const v = typeof a === 'string' ? a : String(a);
@@ -371,7 +389,7 @@ export class Dropdown {
             this._var.label.innerText = r('none', '( None )');
             return false;
         }
-        selectItems(this._var.label, itemlist, htmlkey, textkey);
+        selectItems(this._var.label, itemlist, template, htmlkey, textkey);
         this._var.selectedList = itemlist;
         if (!silence && typeof this.onSelectedList === 'function') {
             this.onSelectedList(itemlist);
@@ -563,6 +581,7 @@ export class Dropdown {
         const multiselect = this.multiSelect;
         const valuekey = this._var.options.valueKey;
         const textkey = this._var.options.textKey;
+        const template = this._var.options.htmlTemplate;
         const htmlkey = this._var.options.htmlKey;
         const selected = this.selected;
         let scrolled;
@@ -575,7 +594,12 @@ export class Dropdown {
             li.dataset.value = val;
             li.title = item[textkey];
             let label;
-            const html = item[htmlkey];
+            let html;
+            if (typeof template === 'function') {
+                html = template.call(this, item);
+            } else {
+                html = item[htmlkey];
+            }
             if (html instanceof HTMLElement) {
                 label = html;
             } else if (typeof html === 'string') {
@@ -617,6 +641,7 @@ export class Dropdown {
         let list;
         const valuekey = this._var.options.valueKey;
         const textkey = this._var.options.textKey;
+        const template = this._var.options.htmlTemplate;
         const htmlkey = this._var.options.htmlKey;
         if (checkbox.getAttribute('isall') === '1') {
             const allchecked = this._var.allChecked = checkbox.checked;
@@ -653,7 +678,7 @@ export class Dropdown {
         if (this._var.allChecked) {
             this._var.label.innerText = r('allItem', '( All )');
         } else {
-            selectItems(this._var.label, list, htmlkey, textkey);
+            selectItems(this._var.label, list, template, htmlkey, textkey);
         }
         this._var.selectedList = list;
         if (typeof this.onSelectedList === 'function') {