smart-webcomponents 15.0.1 → 15.0.11

package/source/react/numberinput/numberinput.jsx

@@ -0,0 +1,413 @@
+import React from "react";
+/**
+ NumberInput specifies an input field where the user can enter a numbers.
+*/
+export class NumberInput extends React.Component {
+	// Gets the id of the React component.
+	get id() {
+		if (!this._id) {
+			this._id =  'NumberInput' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+		}
+
+		return this._id;
+	}
+	/** Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
+	*	Property type: Animation | string
+	*/
+	get animation() {
+		return this.nativeElement ? this.nativeElement.animation : undefined;
+	}
+	set animation(value) {
+		if (this.nativeElement) {
+			this.nativeElement.animation = value;
+		}
+	}
+
+	/** Enables or disables the element.
+	*	Property type: boolean
+	*/
+	get disabled() {
+		return this.nativeElement ? this.nativeElement.disabled : undefined;
+	}
+	set disabled(value) {
+		if (this.nativeElement) {
+			this.nativeElement.disabled = value;
+		}
+	}
+
+	/** Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
+	*	Property type: string
+	*/
+	get inputPurpose() {
+		return this.nativeElement ? this.nativeElement.inputPurpose : undefined;
+	}
+	set inputPurpose(value) {
+		if (this.nativeElement) {
+			this.nativeElement.inputPurpose = value;
+		}
+	}
+
+	/** Sets or gets the language. Used in conjunction with the property messages. 
+	*	Property type: string
+	*/
+	get locale() {
+		return this.nativeElement ? this.nativeElement.locale : undefined;
+	}
+	set locale(value) {
+		if (this.nativeElement) {
+			this.nativeElement.locale = value;
+		}
+	}
+
+	/** Callback used to customize the format of the messages that are returned from the Localization Module.
+	*	Property type: any
+	*/
+	get localizeFormatFunction() {
+		return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
+	}
+	set localizeFormatFunction(value) {
+		if (this.nativeElement) {
+			this.nativeElement.localizeFormatFunction = value;
+		}
+	}
+
+	/** Determines the max number that can be displayed inside the input.
+	*	Property type: number
+	*/
+	get max() {
+		return this.nativeElement ? this.nativeElement.max : undefined;
+	}
+	set max(value) {
+		if (this.nativeElement) {
+			this.nativeElement.max = value;
+		}
+	}
+
+	/** Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. 
+	*	Property type: any
+	*/
+	get messages() {
+		return this.nativeElement ? this.nativeElement.messages : undefined;
+	}
+	set messages(value) {
+		if (this.nativeElement) {
+			this.nativeElement.messages = value;
+		}
+	}
+
+	/** Determines the min number that can be displayed inside the input.
+	*	Property type: number
+	*/
+	get min() {
+		return this.nativeElement ? this.nativeElement.min : undefined;
+	}
+	set min(value) {
+		if (this.nativeElement) {
+			this.nativeElement.min = value;
+		}
+	}
+
+	/** Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
+	*	Property type: string
+	*/
+	get name() {
+		return this.nativeElement ? this.nativeElement.name : undefined;
+	}
+	set name(value) {
+		if (this.nativeElement) {
+			this.nativeElement.name = value;
+		}
+	}
+
+	/** Sets or gets the value format of the element.
+	*	Property type: any
+	*/
+	get numberFormat() {
+		return this.nativeElement ? this.nativeElement.numberFormat : undefined;
+	}
+	set numberFormat(value) {
+		if (this.nativeElement) {
+			this.nativeElement.numberFormat = value;
+		}
+	}
+
+	/** Determines the placeholder of the input.
+	*	Property type: string
+	*/
+	get placeholder() {
+		return this.nativeElement ? this.nativeElement.placeholder : undefined;
+	}
+	set placeholder(value) {
+		if (this.nativeElement) {
+			this.nativeElement.placeholder = value;
+		}
+	}
+
+	/** Determines whether ot not the user can enter text inside the input.
+	*	Property type: boolean
+	*/
+	get readonly() {
+		return this.nativeElement ? this.nativeElement.readonly : undefined;
+	}
+	set readonly(value) {
+		if (this.nativeElement) {
+			this.nativeElement.readonly = value;
+		}
+	}
+
+	/** Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
+	*	Property type: boolean
+	*/
+	get rightToLeft() {
+		return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
+	}
+	set rightToLeft(value) {
+		if (this.nativeElement) {
+			this.nativeElement.rightToLeft = value;
+		}
+	}
+
+	/** Sets or gets the incremental/decremental step for the value of the element.
+	*	Property type: number
+	*/
+	get step() {
+		return this.nativeElement ? this.nativeElement.step : undefined;
+	}
+	set step(value) {
+		if (this.nativeElement) {
+			this.nativeElement.step = value;
+		}
+	}
+
+	/** Determines the theme for the element. Themes define the look of the elements.
+	*	Property type: string
+	*/
+	get theme() {
+		return this.nativeElement ? this.nativeElement.theme : undefined;
+	}
+	set theme(value) {
+		if (this.nativeElement) {
+			this.nativeElement.theme = value;
+		}
+	}
+
+	/** If is set to true, the element cannot be focused.
+	*	Property type: boolean
+	*/
+	get unfocusable() {
+		return this.nativeElement ? this.nativeElement.unfocusable : undefined;
+	}
+	set unfocusable(value) {
+		if (this.nativeElement) {
+			this.nativeElement.unfocusable = value;
+		}
+	}
+
+	/** Sets or gets the value of the element.
+	*	Property type: any
+	*/
+	get value() {
+		return this.nativeElement ? this.nativeElement.value : undefined;
+	}
+	set value(value) {
+		if (this.nativeElement) {
+			this.nativeElement.value = value;
+		}
+	}
+
+
+	// Gets the properties of the React component.
+	get properties() {
+		return ["animation","disabled","inputPurpose","locale","localizeFormatFunction","max","messages","min","name","numberFormat","placeholder","readonly","rightToLeft","step","theme","unfocusable","value"];
+	}
+	/**  This event is triggered when the selection is changed.
+	*  @param event. The custom event. 	Custom event was created with: event.detail(	label, 	oldLabel, 	oldValue, 	value)
+	*   label - The label of the new selected item.
+	*   oldLabel - The label of the item that was previously selected before the event was triggered.
+	*   oldValue - The value of the item that was previously selected before the event was triggered.
+	*   value - The value of the new selected item.
+	*/
+	_onChange = null;	get onChange() {
+		return this._onChange;
+	}
+	set onChange(value) {
+		this._onChange = value;
+	}
+
+	// Gets the events of the React component.
+	get eventListeners() {
+		return ["onChange"];
+	}
+	/** Returns the value in the desired format. 
+	* @param {string | number} value. The value to be formatted by the method. 
+	* @param {any} format?. The object that contains the formatting properties. The argument should contain Intl.NumberFormat valid properties. For example, { style: 'currency', currency: 'EUR' }
+	* @returns {string}
+  */
+	getFormattedValue(value, format) {
+        const result = this.nativeElement.getFormattedValue(value, format);
+        return result;
+    }
+
+	/** Returns the number of the input. 
+	* @returns {number}
+  */
+	getValue() {
+        const result = this.nativeElement.getValue();
+        return result;
+    }
+
+	/** Selects the text inside the input or if it is readonly then the element is focused. 
+	*/
+    select(){
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.select();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.select();
+            });
+        }
+    }
+
+	/** Sets the value of the input. 
+	* @param {string | number} value. The value to be set. 
+	*/
+    setValue(value){
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.setValue(value);
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.setValue(value);
+            });
+        }
+    }
+
+
+
+	constructor(props) {
+		super(props);
+		this.componentRef = React.createRef();
+	}
+
+	componentDidRender(initialize) {
+		const that = this;
+		const props = {};
+		const events = {};
+		let styles = null;
+
+		for(let prop in that.props) {
+			if (prop === 'children') {
+				continue;
+			}
+
+			if (prop === 'style') {
+				styles = that.props[prop];
+				continue;
+			}
+
+			if (prop.startsWith('on') && that.properties.indexOf(prop) === -1) {
+				events[prop] = that.props[prop];
+				continue;
+			}
+
+			props[prop] = that.props[prop];
+		}
+
+		if (initialize) {
+			that.nativeElement = this.componentRef.current;
+		}
+
+		for(let prop in props) {
+			if (prop === 'class' || prop === 'className') {
+				const classNames = props[prop].trim().split(' ');
+
+				for(let className in classNames) {
+					if (!that.nativeElement.classList.contains(classNames[className]) && classNames[className] !== "") {
+						that.nativeElement.classList.add(classNames[className]);
+					}
+				}
+
+				continue;
+			}
+
+			if (props[prop] !== that.nativeElement[prop]) {
+				const normalizeProp = (str) => {
+					return str.replace(/-([a-z])/g, function (g) {
+						return g[1].toUpperCase();
+					});
+				}
+
+				if (prop === 'hover' || prop === 'active' || prop === 'focus' || prop === 'selected') {
+					that.nativeElement.setAttribute(prop, '');
+				}
+
+				const normalizedProp = normalizeProp(prop);
+
+				that.nativeElement[normalizedProp] = props[prop];
+			}
+		}
+
+		
+		for(let eventName in events) {
+			that[eventName] = events[eventName];
+			that.nativeElement[eventName.toLowerCase()] = events[eventName];
+        }
+
+		if (initialize) {
+			Smart.Render();
+	
+			if (that.onCreate) {
+				that.onCreate();
+			}
+
+			that.nativeElement.whenRendered(() => {
+				if (that.onReady) {
+					that.onReady();
+				}
+			});
+		}
+
+		// setup styles.
+
+		if (styles) {
+			for(let styleName in styles) {
+				that.nativeElement.style[styleName] = styles[styleName];
+			}
+		}
+	}
+
+	componentDidMount() {
+		this.componentDidRender(true);
+    }
+
+	componentDidUpdate() {
+		this.componentDidRender(false);
+    }
+
+	componentWillUnmount() {
+		const that = this;
+
+		if (!that.nativeElement) {
+			return;
+		}
+		
+		that.nativeElement.whenRenderedCallbacks = [];
+		
+		for(let i = 0; i < that.eventListeners.length; i++){
+			const eventName = that.eventListeners[i];
+
+			that.nativeElement.removeEventListener(eventName.substring(2).toLowerCase(), that[eventName]);
+		}
+	}
+
+	render() {
+		return (
+			React.createElement("smart-number-input", { ref: this.componentRef }, this.props.children)
+		)
+	}
+}
+
+export default NumberInput;