inviton-powerduck 0.0.145 → 0.0.147

package/components/dropdown/country-dropdown.tsx

@@ -19,15 +19,17 @@ interface CountryDropdownArgs extends FormItemWrapperArgs {
 	changed?: (newValue: string | string[]) => void;
 }
 
-function getFlaggedResult(state, originator): string | JQuery {
-	if (!state) { return ''; }
-
-	if (!state.id) { return state.text; }
+function getFlaggedResult(h, state, originator): void {
+	if (!state) {
+		return null;
+	} else if (!state.id) {
+		return (<span>{state.text || ''}</span>);
+	}
 
-	if (originator == 'fdd') {
-		return state.text;
+	if (originator == 'mobile') {
+		return (<span>{state.text}</span>);
 	} else {
-		return $(`<span><span class="fi fi-${state.dataRow.twoLetters}"></span>&nbsp;&nbsp;${state.text}</span>`);
+		return (<span><span class={`fi fi-${state.dataRow.twoLetters}`}></span>&nbsp;&nbsp;{state.text}</span>);
 	}
 }
 
@@ -124,8 +126,8 @@ class CountryDropdownComponent extends TsxComponent<CountryDropdownArgs> impleme
 			<DropdownList
 				disabled={this.disabled}
 				options={this.getDataSource()}
-				formatResult={(e, o) => { return getFlaggedResult(e, o); }}
-				formatSelection={(e, o) => { return getFlaggedResult(e, o); }}
+				customRenderOption={(h, item, o) => { return getFlaggedResult(h, item, o); }}
+				customRenderSelectionResult={(h, item, o) => { return getFlaggedResult(h, item, o); }}
 				wrap={this.wrap}
 				mandatory={this.mandatory}
 				multiselect={this.multiselect}

package/components/dropdown/image-dropdown.tsx

@@ -57,46 +57,58 @@ class ImageDropdownComponent extends TsxComponent<ImageDropdownArgs> implements
 		this.changed(e);
 	}
 
-	getSelectionTemplate(state, allOpts: ImageDropdownDataItem[]): string | JQuery {
-		if (!state) { return ''; }
-
-		if (!state.id) { return state.text; }
+	getSelectionTemplate(h, state, allOpts: ImageDropdownDataItem[]): string | JQuery {
+		if (!state) {
+			return null;
+		} else if (!state.id) {
+			return (<span>{state.text || ''}</span>);
+		}
 
 		const dataItem = allOpts.filter(p => p.id.toString() == state.id)[0];
 		if (dataItem == null) {
-			return state.text;
+			return (<span>{state.text || ''}</span>);
 		}
 
-		return $(`<div class="imgddl-dropdown-wrap"><div class="imgddl-image" style="background-image:url('${
-			dataItem.imageUrl
-		}')"></div><div class="imgddl-text">${
-			PortalUtils.htmlEscape(dataItem.text)
-		}</div><div class="imgddl-subtitle">${
-			PortalUtils.htmlEscape(dataItem.subtitle)
-		}</div></div>`);
+		return (
+			<div class="imgddl-dropdown-wrap">
+				<div class="imgddl-image" style={`background-image:url('${dataItem.imageUrl}')`}></div>
+				<div class="imgddl-text">{dataItem.text}</div>
+				<div class="imgddl-subtitle">{dataItem.subtitle}</div>
+			</div>
+		);
 	}
 
-	getResultItemTemplate(state, allOpts: ImageDropdownDataItem[]): string | JQuery {
-		if (!state) { return ''; }
-
-		if (!state.id) { return state.text; }
+	getResultItemTemplate(h, state, allOpts: ImageDropdownDataItem[]): string | JQuery {
+		if (!state) {
+			return null;
+		} else if (!state.id) {
+			return (<span>{state.text || ''}</span>);
+		}
 
 		const dataItem = allOpts.filter(p => p.id.toString() == state.id)[0];
 		if (dataItem == null) {
-			return state.text;
+			return (<span>{state.text || ''}</span>);
 		}
 
-		let builder
-            = `<div class="imgddl-dropdown-resultroot"><div class="imgddl-dropdown-resultwrap"><div class="imgddl-result-image" style="background-image:url('${
-            	dataItem.imageUrl
-            }')"></div><div class="imgddl-result-text">${
-            	PortalUtils.htmlEscape(dataItem.text)
-            }</div>`;
-		(this.buttons || ([] as DropdownListButton[])).forEach((button, i) => {
-			builder += `<span class="imgddl-result-button imgdll-clickable-button" data-index="${i}" role="presentation"><i class="${button.iconCss}"></i></span>`;
-		});
-
-		return $(`${builder}</div></div>`);
+		return (
+			<div class="imgddl-dropdown-resultroot">
+				<div class="imgddl-dropdown-resultwrap">
+					<div class="imgddl-result-image" style={{ backgroundImage: `url('${dataItem.imageUrl}')` }}></div>
+					<div class="imgddl-result-text">{dataItem.text}</div>
+
+					{(this.buttons || []).map((button, i) => (
+						<span
+							key={i}
+							class="imgddl-result-button imgdll-clickable-button"
+							data-index={i}
+							role="presentation"
+						>
+							<i class={button.iconCss}></i>
+						</span>
+					))}
+				</div>
+			</div>
+		);
 	}
 
 	handleAfterBound(elem: JQuery<Element>, select2Instance: any) {
@@ -205,11 +217,11 @@ class ImageDropdownComponent extends TsxComponent<ImageDropdownArgs> implements
 			<DropdownList
 				ref="ddList"
 				options={this.options}
-				formatSelection={(e) => {
-					return this.getResultItemTemplate(e, this.options);
+				customRenderSelectionResult={(h, item, o) => {
+					return this.getResultItemTemplate(h, item, this.options);
 				}}
-				formatResult={(e) => {
-					return this.getSelectionTemplate(e, this.options);
+				customRenderOption={(h, item, o) => {
+					return this.getSelectionTemplate(h, item, this.options);
 				}}
 				multiselect={true}
 				multiselectMode={MultiselectMode.Tags}
@@ -217,7 +229,7 @@ class ImageDropdownComponent extends TsxComponent<ImageDropdownArgs> implements
 				tagsShouldPrependContent={true}
 				tagsTemplate={
 					this.tagsTemplate
-					|| '<li class="imgddl-selected-item"><span class="imgddl-result-remove imgddl-result-button select2-selection__choice__remove" role="presentation"><i class="fas fa-times"></i></span></li>'
+					|| '<li class="imgddl-selected-item"><span class="imgddl-result-remove imgddl-result-button select2-selection__choice__remove" role="presentation"><i class="icon icon-trash"></i></span></li>'
 				}
 				tagsAdded={this.tagsAdded}
 				tagsNewPlaceLast={true}

package/components/dropdown/index.tsx

@@ -1,5 +1,6 @@
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
+import { h as _h, h, render, VNodeChild } from 'vue'
 import Sortable from 'sortablejs';
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
@@ -84,8 +85,8 @@ interface DropdownListArgs extends FormItemWrapperArgs {
 	changed: (newValue: string | any | Array<string> | Array<any>, exclusivity?: MultiSelectExclusivity) => void;
 	afterBound?: (elem: JQuery<Element>, select2Instance: any) => void;
 	noResultsFound?: () => void;
-	formatResult?: (state: DropdownDisplayArgs, originator?: string) => JQuery | string;
-	formatSelection?: (state: DropdownDisplayArgs, originator?: string) => JQuery | string;
+	customRenderOption?: (h, state: DropdownDisplayArgs, originator?: CustomRenderOriginator) => any
+	customRenderSelectionResult?: (h, state: DropdownDisplayArgs, originator?: CustomRenderOriginator) => any
 	customIdProperty?: string;
 }
 
@@ -115,6 +116,8 @@ class DropdownSelect2Helper {
 	}
 }
 
+type CustomRenderOriginator = 'default' | 'mobile';
+
 @Component
 class DropdownListComponent extends TsxComponent<DropdownListArgs> implements DropdownListArgs {
 	@Prop() label!: string;
@@ -159,8 +162,8 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	@Prop() placeholder: string;
 	@Prop() noResultsFound: () => void;
 	@Prop() marginType?: MarginType;
-	@Prop() formatResult: (state: DropdownDisplayArgs) => JQuery | string;
-	@Prop() formatSelection: (state: DropdownDisplayArgs) => JQuery | string;
+	@Prop() customRenderOption?: (h, state: DropdownDisplayArgs, originator?: CustomRenderOriginator) => any
+	@Prop() customRenderSelectionResult?: (h, state: DropdownDisplayArgs, originator?: CustomRenderOriginator) => any
 	@Prop() disabled?: boolean;
 	@Prop() disableSearch?: boolean;
 	@Prop() containerCssClass?: string;
@@ -411,7 +414,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		}
 
 		return (
-			<span onClick={e => this.showMobilePicker(e)} class={`select2 select2-container select2-container--default s2-pseudo maxwidth-input ${this.getRootBaseCssClass()}`} dir="ltr">
+			<span onClick={e => this.showMobilePicker(h)} class={`select2 select2-container select2-container--default s2-pseudo maxwidth-input ${this.getRootBaseCssClass()}`} dir="ltr">
 				<span class="selection">
 					<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true">
 						<span class="select2-selection__rendered mbl-ddl-text" title={selectedText} style="font-size: inherit;">
@@ -427,15 +430,15 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		);
 	}
 
-	getFormatResult() {
+	getCustomFormatOptions(h: any, originator: CustomRenderOriginator) {
 		if (this.trailingButton) {
 			const self = this;
 			return (row) => {
 				const retVal = $(`<span class="s2-ri-withtb">${row.text
-				}<button class="s2-trailing-button ${self.trailingButton.cssClass || ''
-				} btn-sm">${self.trailingButton.icon != null ? `<i class="${self.trailingButton.icon}"></i> ` : ''
-				}${self.trailingButton.text || ''
-				}</button></span>`);
+					}<button class="s2-trailing-button ${self.trailingButton.cssClass || ''
+					} btn-sm">${self.trailingButton.icon != null ? `<i class="${self.trailingButton.icon}"></i> ` : ''
+					}${self.trailingButton.text || ''
+					}</button></span>`);
 				retVal.find('button').click((e) => {
 					try {
 						clearTimeout(self.preventDefaultTimeout);
@@ -457,13 +460,27 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			};
 		}
 
-		if (this.formatResult) {
-			return this.formatResult;
+		if (this.customRenderOption) {
+			return this.handleCustomRenderResult(h, this.customRenderOption, originator);
 		}
 
 		return null;
 	}
 
+	private handleCustomRenderResult(h: any, renderFunc: any, originator: CustomRenderOriginator) {
+		return (item: any, container: any) => {
+			const result = renderFunc(h, item, originator);
+			if (result?.__v_isVNode) {
+				const container = document.createElement('span')
+				// vue render accepts VNodeChild
+				render(result as any, container)
+				return (container.firstElementChild ?? container) as HTMLElement
+			}
+
+			return result;
+		};
+	}
+
 	isOptionGroupBinding(): boolean {
 		if (this.options == null) {
 			return false;
@@ -477,7 +494,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		return false;
 	}
 
-	showMobilePicker(e) {
+	showMobilePicker(h: any) {
 		const opts = this.getOptions();
 		let selectedItems = this.getSelectedItems();
 		let dropDown = new FilterableSelect({
@@ -498,12 +515,12 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 			autoInputFocus: !PortalUtils.treatAsMobileDevice(),
 			selectedIds: selectedItems.map(p => p.id),
 			useListviewBuilder: false,
-			formatSelection: this.formatSelection,
-			formatResult: this.getFormatResult(),
+			formatSelection: this.customRenderSelectionResult != null ? this.handleCustomRenderResult(h, this.customRenderSelectionResult, 'mobile') : null,
+			formatResult: this.getCustomFormatOptions(h, 'mobile'),
 			onItemSelected: (items, exclusivity) => {
 				this.currentExclusivity = exclusivity;
 				this.raiseChangedEvent(items, true);
-				this.setMobilePickerInputText(items);
+				this.setMobilePickerInputText(h, items);
 			},
 		});
 
@@ -515,11 +532,11 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 		dropDown.open();
 	}
 
-	setMobilePickerInputText(items: DropdownDisplayArgs[]): void {
+	setMobilePickerInputText(h: any, items: DropdownDisplayArgs[]): void {
 		this.$nextTick(() => {
 			let selectedText = this.getMobileSelectionText();
 			const textContext = $(this.$el).find('.mbl-ddl-text') as any;
-			const isPlaceholder = items.length == 0;
+			const isPlaceholder = (items || []).length == 0;
 
 			if (isNullOrEmpty(selectedText)) {
 				selectedText = this.placeholder;
@@ -529,25 +546,29 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				selectedText = `[${PowerduckState.getResourceValue('all')}]`;
 			}
 
-			if (this.formatResult == null) {
+			if (this.customRenderSelectionResult == null) {
 				textContext.attr('title', selectedText);
 				textContext.text(selectedText);
 			} else {
-				let item: any;
-				if (items != null && items.length > 0) {
-					item = items[0];
+				const renderFunc = this.handleCustomRenderResult(h, this.customRenderSelectionResult, 'mobile');
+				textContext.html('');
+				for (const item of items) {
+					const response = renderFunc(item, textContext[0]);
+					if (response != null) {
+						textContext[0].appendChild(response);
+					}
 				}
 
-				const result = this.formatResult(item);
-				if (isNullOrEmpty(result)) {
-					textContext.attr('title', selectedText);
-					textContext.text(selectedText);
-				} else if ((result as any).jquery) {
-					textContext.html('');
-					textContext.append(result);
-				} else {
-					textContext.text(result as any);
-				}
+				// const result = this.formatResult(item);
+				// if (isNullOrEmpty(result)) {
+				// 	textContext.attr('title', selectedText);
+				// 	textContext.text(selectedText);
+				// } else if ((result as any).jquery) {
+				// 	textContext.html('');
+				// 	textContext.append(result);
+				// } else {
+				// 	textContext.text(result as any);
+				// }
 			}
 
 			if (isPlaceholder) {
@@ -915,13 +936,13 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				};
 			}
 
-			const formatResult = this.getFormatResult();
-			if (formatResult != null) {
-				s2Args.templateResult = formatResult;
+			const customFormatOptions = this.getCustomFormatOptions(h, 'default');
+			if (customFormatOptions != null) {
+				s2Args.templateResult = customFormatOptions;
 			}
 
-			if (this.formatSelection != null) {
-				s2Args.templateSelection = this.formatSelection;
+			if (this.customRenderSelectionResult != null) {
+				s2Args.templateSelection = this.handleCustomRenderResult(h, this.customRenderSelectionResult, 'default');
 			}
 
 			const modalContent = $(this.$el).closest('.modal-content');
@@ -953,7 +974,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 				}
 
 				if (this.tagsButtons != null) {
-					if (tagsTemplate == null && this.tagsShouldPrependContent != false && this.formatSelection == null) {
+					if (tagsTemplate == null && this.tagsShouldPrependContent != false && this.customRenderSelectionResult == null) {
 						validTagsButtons = true;
 						tagsTemplate
 							= '<li class="select2-selection__choice select2-selection__choice-with-button"><span class="select2-selection__choice__remove" role="presentation"><i class="fas fa-times"></i></span></li>';
@@ -1216,7 +1237,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 	mounted() {
 		this.updateSelect2();
 		this.$nextTick(() => {
-			this.setMobilePickerInputText(this.getSelectedItems());
+			this.setMobilePickerInputText(h, this.getSelectedItems());
 		});
 	}
 

package/components/dropdown/language-dropdown.tsx

@@ -11,16 +11,12 @@ interface LanguageDropdownArgs extends FormItemWrapperArgs {
 	changed?: (newValue: LanguageUtils.LanguageListItem) => void;
 }
 
-function getFlaggedResult(item): string | JQuery {
+function getFlaggedResult(h, item): any {
 	if (item.dataRow != null) {
-		return $(`<span><img class="flag" src="${LanguageUtils.getLanguageFlagUrl(item.dataRow.flag, false)}"/>&nbsp;&nbsp;${item.dataRow.text}</span>`);
+		return (<span><img class="flag" src={LanguageUtils.getLanguageFlagUrl(item.dataRow.flag, false)} />&nbsp;&nbsp;${item.dataRow.text}</span>);
 	}
 
-	if (item.text != null) {
-		return item.text;
-	}
-
-	return '';
+	return (<span>{item.text || ''}</span>);
 }
 
 @Component
@@ -54,12 +50,8 @@ class LanguageDropdownComponent extends TsxComponent<LanguageDropdownArgs> imple
 				options={LanguageUtils.getLanguageList()}
 				displayMember="text"
 				valueMember="id"
-				formatResult={(e) => {
-					return getFlaggedResult(e);
-				}}
-				formatSelection={(e) => {
-					return getFlaggedResult(e);
-				}}
+				customRenderOption={(h, item, o) => { return getFlaggedResult(h, item); }}
+				customRenderSelectionResult={(h, item, o) => { return getFlaggedResult(h, item); }}
 				wrap={this.wrap}
 				mandatory={this.mandatory}
 				label={this.label}

package/components/dropdown/mobile/legacy_fdd.ts

@@ -27,8 +27,8 @@ export interface FilterableSelectArgs {
 	iScroll?: boolean;
 	iframeTopMode?: boolean;
 	cssClass?: string;
-	formatResult?: (state: any, originator?: string) => JQuery | string;
-	formatSelection?: (state: any, originator?: string) => JQuery | string;
+	formatResult?: (state: any, originator?: string) => HTMLElement;
+	formatSelection?: (state: any, originator?: string) => HTMLElement;
 }
 
 export interface FilterableSelectDataSource {
@@ -230,33 +230,6 @@ export default function FilterableSelect(this: any, args: FilterableSelectArgs):
 		return itemLine;
 	};
 
-	if (args.formatResult != null) {
-		this._getRowValuePerf = (item) => {
-			const formatedResult = args.formatResult(item, 'fdd');
-			if ((formatedResult as any).jquery) {
-				return (formatedResult[0] as any).outerHTML;
-			} else {
-				return formatedResult;
-			}
-		};
-	} else {
-		this._getRowValuePerf = item => htmlEscape(item.text);
-	}
-
-	this._getRowLineWithSelectedPerf = (item): string => {
-		if (hasOptionGroups) {
-			if ((item as any).isOptionGroup == true) {
-				return `<li class="filterabledd-item filterabledd-optgroup fdd-noselected" data-id="${item.id}"><a href="javascript:" class="fdd-item-link fdd-item-content"><div class="fdd-item-inner fdd-inner"><div class="fdd-item-title fdd-item">${this._getRowValuePerf(item)}</div></div></a></li>`;
-			}
-		}
-
-		if (this.selectedIds == null || !this.selectedIds.includes(item.id)) {
-			return `<li class="filterabledd-item filterabledd-item-perf fdd-noselected" data-id="${item.id}">${this._getRowValuePerf(item)}</li>`;
-		} else {
-			return `<li class="filterabledd-item filterabledd-item-perf fdd-selected" data-id="${item.id}">${this._getRowValuePerf(item)}</li>`;
-		}
-	};
-
 	this._handleItemClick = (targetElem) => {
 		const sender = $(targetElem);
 		const liSender = (sender.is('li') ? sender : sender.closest('li'));
@@ -361,16 +334,71 @@ export default function FilterableSelect(this: any, args: FilterableSelectArgs):
 			builder._getRowLine = this._getRowLineWithSelected;
 			builder.build();
 		} else {
-			let builder = '';
-			for (const item of data) {
-				builder += this._getRowLineWithSelectedPerf(item);
-			}
-
 			const listContainer = document.createElement('ul');
 			listContainer.onclick = (e) => {
 				this._handleItemClick(e.target);
 			};
-			listContainer.innerHTML = builder;
+
+			const rebuildData = (filter: string) => {
+				const frag = document.createDocumentFragment();
+				let opData = data;
+				let _setRowValue: (item: any, el: HTMLElement) => void;
+
+				if (args.formatResult != null) {
+					_setRowValue = (item, el) => {
+						const formatedResult = args.formatResult(item, 'fdd');
+						if ((formatedResult as any).setAttribute) {
+							el.appendChild(formatedResult as any);
+						} else if ((formatedResult as any).jquery) {
+							el.appendChild(formatedResult[0] as any);
+						} else {
+							return el.innerHTML = (formatedResult as any || '');
+						}
+					};
+				} else {
+					_setRowValue = (item, el) => {
+						el.innerHTML = htmlEscape(item.text);
+					}
+				}
+
+				if (filter?.length > 0) {
+					opData = [];
+					for (const item of data) {
+						if ((item as any).filterValue.includes(filter)) {
+							opData.push(item);
+						}
+					}
+				}
+
+				for (const item of opData) {
+					const newEl = document.createElement('li');
+					newEl.setAttribute('data-id', item.id);
+
+					if (hasOptionGroups && (item as any).isOptionGroup == true) {
+						newEl.setAttribute('class', 'filterabledd-item filterabledd-optgroup fdd-noselected');
+						newEl.innerHTML = `<a href="javascript:" class="fdd-item-link fdd-item-content"><div class="fdd-item-inner fdd-inner"><div class="fdd-item-title fdd-item"></div></div></a>`;
+						const targetElem = newEl.querySelector('.fdd-item');
+						_setRowValue(item, targetElem as any);
+
+
+					} else {
+						if (this.selectedIds == null || !this.selectedIds.includes(item.id)) {
+							newEl.setAttribute('class', 'filterabledd-item filterabledd-item-perf fdd-noselected');
+						} else {
+							newEl.setAttribute('class', 'filterabledd-item filterabledd-item-perf fdd-selected');
+						}
+
+						_setRowValue(item, newEl);
+					}
+
+					frag.appendChild(newEl);
+				}
+
+				listContainer.innerHTML = '';
+				listContainer.appendChild(frag);
+			}
+
+			rebuildData(null);
 
 			const targetElem = this._getTargetElement(useIscroll)[0];
 			targetElem.innerHTML = `<div class="lvb-filter-container filterableSelectFilter ${cssClass || ''}"><div class="lvb-filter-erase"><span class="far fa-trash-alt"></span></div><input type="text" class="lvb-filter-input" placeholder="Search..."></div>`;
@@ -394,21 +422,7 @@ export default function FilterableSelect(this: any, args: FilterableSelectArgs):
 					const currVal = latinize((searchInput.val() || '').toString().toLowerCase());
 					if (currVal != this._filterVal) {
 						this._filterVal = currVal;
-
-						let builder = '';
-						if (currVal == '') {
-							for (const item of data) {
-								builder += this._getRowLineWithSelectedPerf(item);
-							}
-						} else {
-							for (const item of data) {
-								if ((item as any).filterValue.includes(currVal)) {
-									builder += this._getRowLineWithSelectedPerf(item);
-								}
-							}
-						}
-
-						listContainer.innerHTML = builder;
+						rebuildData(currVal);
 					}
 				}, 400);
 			});