x4js 1.6.4 → 2.0.1

package/lib/src/combobox.ts

@@ -1,512 +0,0 @@
-/**
-*  ___  ___ __
-*  \  \/  /  / _
-*   \    /  /_| |_
-*   /    \____   _|  
-*  /__/\__\   |_|
-*        
-* @file combobox.ts
-* @author Etienne Cochard 
-*
-* Copyright (c) 2019-2023 R-libre ingenierie
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy 
-* of this software and associated documentation files (the "Software"), to deal 
-* in the Software without restriction, including without limitation the rights 
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 
-* of the Software, and to permit persons to whom the Software is furnished to do so, 
-* subject to the following conditions:
-* The above copyright notice and this permission notice shall be included in all copies
-* or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
-* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
-* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 
-* OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-**/
-
-/**
- * TODO: replace custom combo list by listview or gridview
- */
-
-import { x4document } from './x4dom'
-
-import { Component, CProps, ContainerEventMap } from './component'
-import { EvChange, EvSelectionChange, EventCallback } from './x4events'
-
-import { Input } from './input'
-import { Label } from './label'
-import { Button } from './button'
-import { HLayout } from './layout'
-import { PopupListView, ListViewItem, EvCancel, PopulateItems } from './listview';
-import { DataStore, DataView, Record } from './datastore'
-import { isFunction, HtmlString } from './tools'
-import { Tooltip } from './tooltips'
-import { _tr } from './i18n'
-
-export interface ComboStoreProxyProps {
-	store: DataView | DataStore;
-	display: ( rec: Record ) => string | HtmlString;
-}
-
-// ============================================================================
-// [COMBOBOX]
-// ============================================================================
-
-export interface ComboItemRender {
-	( itm: ListViewItem ) : Component;
-}
-
-interface ComboBoxEventMap extends ContainerEventMap {
-	readonly change: EvChange;	// value change  (event.value = new value as id)
-	readonly selectionChange?: EvSelectionChange; // ( event.value = new value as ListItem)
-	readonly cancel?: EvCancel;
-}
-
-export interface ComboBoxProps extends CProps<ComboBoxEventMap> {
-	tabIndex?: number | boolean;
-	name?: string;
-	readOnly?: boolean;
-	required?: true;
-	
-	label?: string;							
-	labelWidth?: number; // < 0 for flex 
-						 // =0 to adjust label width 
-						 // > 0 to specify a width
-
-	labelAlign?: 'left' | 'right';	
-
-	items?: ListViewItem[] | PopulateItems;
-	value?: any; // shown value at init
-
-	renderer?: ComboItemRender;
-	selectionChange?: EventCallback<EvSelectionChange>;// shortcut to events: { selectionChange: ... }
-	editable?: boolean;
-}
-
-abstract class InputLike extends Component {
-	abstract setValue( text: string ): void;
-	abstract getValue( ): string;
-	abstract showError( text: string ): void;
-	abstract clearError( ): void;
-}
-
-
-/**
- * @review use textedit
- */
-
-export class ComboBox extends HLayout<ComboBoxProps,ComboBoxEventMap> {
-	
-	private m_ui_input: Input | InputLike;
-	private m_ui_button: Button;
-	private m_popup: PopupListView;
-	private m_lockpop: boolean;
-	private m_lockchg: boolean;
-	private m_popvis: boolean;
-	private m_selection: ListViewItem;
-		
-	constructor(props: ComboBoxProps) {
-		super(props);
-
-		if( !props.editable ) {
-			this.setDomEvent( 'keypress', () => this.showPopup() );
-		}
-
-		this.setDomEvent( 'click', () => {
-			if( this.m_props.editable ) {
-				this.m_ui_input.focus( );
-			}
-			
-			this.showPopup();
-		} );
-
-		this.setDomEvent("keydown", e => this._onKey(e));
-		this.mapPropEvents(props, 'selectionChange' );
-		
-		this.m_popvis = false;
-		this.m_lockpop = false;
-		this.m_lockchg = false;
-	}
-
-	_onKey(e: KeyboardEvent ) {
-        if (this.m_popvis) {
-            if (e.key == "ArrowUp" || e.key == "ArrowDown") {
-				this.m_lockpop = true;
-                this.m_popup.handleKey(e);
-                this.m_lockpop = false;
-                e.preventDefault();
-                e.stopPropagation();
-            }
-            else if (e.key == "Escape") {
-                this._hidePopup();
-                e.preventDefault();
-                e.stopPropagation();
-            }
-        }
-    }
-
-	set items( items: ListViewItem[] ) {
-		this.m_props.items = items;
-		if( this.m_popup ) {
-			this.m_popup.items = items;
-		}
-	}
-	
-	/** @ignore */	
-	render( props: ComboBoxProps ) {
-
-		if( !props.renderer ) {
-			
-			this.setClass('@required', props.required);
-
-			const input = new Input( {
-				flex 	: 1,
-				readOnly : this.m_props.editable ? false : true,
-				tabIndex : 0,
-				name: props.name,
-				value_hook: {
-					get: (): string => { return this.value; },
-					set: (v: string) => { this.value = v; }
-				},
-				dom_events: {
-					focus: () => {
-						this.clearError();
-						if( this.m_props.editable && input.value.length==0 ) {
-							this.showPopup( );
-						}
-					},
-					input: ( ) => {
-						if( this.m_lockchg ) {
-							return;
-						}
-
-						const text = input.value;
-						this.m_selection = { id: undefined, text };
-						let items = this.showPopup( );
-						if( items && items.length && items[0].text==text ) {
-							this.m_selection = { id: items[0].id, text };
-						}
-					}
-				}
-			});
-
-			this.m_ui_input = input;
-		}
-		else {
-			this.m_ui_input = new Component( { 
-				flex: 1, 
-				cls: '@fake-input @hlayout', 
-				tabIndex: 1 
-			} ) as any;
-		}
-
-		let width = undefined,
-			flex = undefined;
-
-		let labelWidth = props.labelWidth ?? 0;
-				
-		if( labelWidth>0 ) {
-			width = labelWidth;
-		}
-		else if( labelWidth<0 ) {
-			flex = -labelWidth;
-		}
-
-		this.setContent([
-			// todo: why 'label1' class name
-			new Label({
-				cls: 'label1' + (props.label ? '' : ' @hidden'),	
-				text: props.label,
-				width,
-				flex,
-				align: props.labelAlign
-			}),
-			new HLayout({
-				flex: 1,
-				content: [
-					this.m_ui_input,
-					this.m_ui_button = new Button({
-						cls: 'gadget',
-						icon: 'var( --x4-icon-angle-down )',
-						tabIndex: false,
-						click: () => {
-							this.showPopup( false )
-						},
-						dom_events: {
-							focus: () => { 
-								this.clearError();
-								this.dom.focus(); 
-							},
-						}
-					})
-				]
-			}),
-		]);
-
-		if (props.value !== undefined) {
-			this.value = props.value;
-		}
-	}
-
-	componentDisposed( ) {
-		if( this.m_popup ) {
-			this.m_popup.close( );
-		}
-
-		super.componentDisposed( );
-	}
-
-	/** 
-	 * display the popup 
-	 */
-
-	showPopup( filter_items: boolean = true ) {
-
-		let props = this.m_props;
-		if (props.readOnly || this.hasClass("@disable") ) {
-			return null;
-		}
-
-		let items = props.items;
-		if( isFunction( items ) ) {
-			const filter = filter_items ? (this.m_ui_input as Input).value : null;
-			items = items( filter );
-		}
-		
-		if( items.length==0 ) {
-			return null;
-		}
-
-		// need creation ?
-		
-		if( !this.m_popup ) {
-			let cstyle = this.getComputedStyle( );
-			let fontFamily = cstyle.value( 'fontFamily' );
-			let fontSize = cstyle.value( 'fontSize' );
-
-			// prepare the combo listview
-			this.m_popup = new PopupListView({
-				cls: '@combo-popup',
-				populate: props.populate,
-				renderItem: this.m_props.renderer,
-				selectionChange: (e) => {
-
-					this._selectItem(e);
-					
-					if (!this.m_lockpop) {
-                        this._hidePopup();
-                        this.focus();
-                    }
-				},
-				cancel: ( e ) => this.signal( 'cancel', e ),
-				style: {
-					fontFamily,
-					fontSize
-				}
-			});
-
-			// lock focus trap
-			this.m_popup.setDomEvent( "mousedown", ( ev ) => { 
-				ev.stopImmediatePropagation( );
-				ev.stopPropagation( );
-				ev.preventDefault( );
-			}, true );
-		}
-
-		this.m_popup.items = items;
-	
-		let r1 = this.m_ui_button.getBoundingRect(),
-			r2 = this.m_ui_input.getBoundingRect();
-
-		this.m_popup.setStyle({
-			minWidth: r1.right - r2.left,
-		});
-
-		this.m_popup.displayAt(r2.left, r2.bottom);
-		this.m_popvis = true;
-		this.startTimer("focus-check", 100, true, () => this._checkFocus());
-
-		if( this.value!==undefined ) {
-			this.m_popup.selection = this.value;
-		}
-
-		return items;
-	}
-
-	/**
-	 * 
-	 */
-
-	validate( ) {
-		if( this.m_props.required && !this.m_selection ) {
-			this.showError(_tr.global.required_field);
-			return false;
-		}
-
-		return true;
-	}
-
-	public showError(text: string) {
-		this.m_ui_input.showError( text );
-	}
-
-	public clearError() {
-		this.m_ui_input.clearError( );
-	}
-
-	/** @ignore
-	  */
-
-	private _selectItem( ev: EvSelectionChange ) {
-
-		let item: ListViewItem = ev.selection as ListViewItem;
-		if( !item ) {
-			return;
-		}
-
-		this.m_lockchg = true;
-		this._setInput( item, true );
-		this.m_lockchg = false;
-					
-		this.m_selection = {
-			id: 	item.id,
-			text: 	item.text
-		};
-
-		this.emit( 'selectionChange', EvSelectionChange( item ) );
-		this.emit( 'change', EvChange(item.id) );
-		//this.m_ui_input.focus( );
-		//this.m_popup.hide( );
-	}
-
-	/**
-	 * 
-	 */
-
-	private _setInput( item: ListViewItem, fireEv = false ) {
-
-		if( item ) {
-			if( this.m_ui_input ) {
-				if( this.m_ui_input instanceof Input ) {
-					this.m_ui_input.value = item.text as string;
-					// fires a change event
-					if( fireEv ) {
-						this.m_ui_input.dom.dispatchEvent( new Event('input') );
-					}
-				}
-				else {
-					this.m_ui_input.setContent( this.m_props.renderer( item ) );
-				}
-			}
-			else {
-				this.m_props.value = item.id;
-			}
-		}
-		else {
-			if( this.m_ui_input && this.m_ui_input instanceof Input ) {
-				this.m_ui_input.value = "";
-			}
-		}
-	}
-
-	/**
-	 * 
-	 */
-
-	public get value() {
-		return this.m_selection ? this.m_selection.id : undefined;
-	}
-
-	public get valueText( ) {
-		if( this.m_selection ) {
-			return this.m_selection.text;
-		}
-
-		if( this.m_props.editable ) {
-			return (this.m_ui_input as Input).value;
-		}
-
-		return '';
-	}
-
-	/**
-	 * 
-	 */
-	
-	public set value(id) {
-		let items = this.m_props.items;
-
-		if( isFunction(items) ) {
-			items = items( null );
-		}
-		
-		const found = items.some( (v) => {
-			if (v.id === id) {
-				this._setInput( v );
-				this.m_selection = v;
-				return true;
-			}
-		});
-
-		if( !found ) {
-			this._setInput( null );
-			this.m_selection = null;
-		}
-	}
-
-	get input( ) : Input {
-		return this.m_ui_input instanceof Input ? this.m_ui_input : null;
-	}
-
-	_checkFocus() {
-        const focus = document.activeElement;
-        if (this.dom && this.dom.contains(focus) || focus==document.body ) {
-            return;
-        }
-
-        if (this.m_popup && this.m_popup.dom && this.m_popup.dom.contains(focus)) {
-            return;
-        }
-
-        this._hidePopup();
-    }
-
-	_hidePopup() {
-        if (this.m_popvis) {
-            this.m_popup.close();
-            this.m_popvis = false;
-			this.stopTimer("focus-check");
-        }
-    }
-	
-	static storeProxy( props: ComboStoreProxyProps ): PopulateItems { 
-
-		let view: DataView = props.store instanceof DataStore ? props.store.createView() : props.store;
-		
-		return ( ) => {
-			let result: ListViewItem[] = new Array( props.store.count );
-			
-			props.store.forEach( ( rec, index ) => {
-				result[index] = {
-					id: rec.getID( ),
-					text: props.display( rec )
-				}
-			});
-
-			return result;
-		};
-	} 
-
-	focus( ) {
-		if( this.m_props.editable ) {
-			this.m_ui_input.focus( );
-		}
-		else {
-			super.focus( );
-		}
-	}
-}
-