smart-webcomponents 18.0.0 → 18.0.1

package/source/react/path/path.tsx

@@ -0,0 +1,673 @@
+import React from "react";
+import { PathProperties } from "./../../index";
+import { Animation, DropDownPosition, PathFormat} from './../../index';
+export { PathProperties } from "./../../index";
+export { Animation, DropDownPosition, PathFormat} from './../../index';
+
+interface IWindow { Smart: any; }
+declare const window: IWindow;
+let Smart: any;
+if (typeof window !== "undefined") {
+	Smart = window.Smart;
+}
+export interface PathProps extends PathProperties {
+    className?: string;
+    style?: React.CSSProperties;
+
+	onBrowseButtonClick?: ((event?: Event) => void) | undefined;
+	onChange?: ((event?: Event) => void) | undefined;
+	onClose?: ((event?: Event) => void) | undefined;
+	onClosing?: ((event?: Event) => void) | undefined;
+	onDropDownButtonClick?: ((event?: Event) => void) | undefined;
+	onItemClick?: ((event?: Event) => void) | undefined;
+	onOpen?: ((event?: Event) => void) | undefined;
+	onOpening?: ((event?: Event) => void) | undefined;
+	onCreate?: ((event?: Event) => void) | undefined;
+	onReady?: ((event?: Event) => void) | undefined;
+
+}
+/**
+ Path component is used to display the path to url.
+*/
+export class Path extends React.Component<React.HTMLAttributes<Element> & PathProps, any> {   
+	private _id: string;
+	private nativeElement: any;
+	private componentRef: any;
+
+	// Gets the id of the React component.
+	get id() {
+		if (!this._id) {
+			this._id =  'Path' + 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(): Animation | string  {
+		return this.nativeElement ? this.nativeElement.animation : undefined;
+	}
+	set animation(value: Animation | string) {
+		if (this.nativeElement) {
+			this.nativeElement.animation = value;
+		}
+	}
+
+	/** Determines the data source for the item that will be displayed inside the drop down.
+	*	Property type: any
+	*/
+	get dataSource(): any  {
+		return this.nativeElement ? this.nativeElement.dataSource : undefined;
+	}
+	set dataSource(value: any) {
+		if (this.nativeElement) {
+			this.nativeElement.dataSource = value;
+		}
+	}
+
+	/** Enables or disables the element.
+	*	Property type: boolean
+	*/
+	get disabled(): boolean  {
+		return this.nativeElement ? this.nativeElement.disabled : undefined;
+	}
+	set disabled(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.disabled = value;
+		}
+	}
+
+	/** Sets or gets the displayMember. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'dataSource' property.
+	*	Property type: string
+	*/
+	get displayMember(): string  {
+		return this.nativeElement ? this.nativeElement.displayMember : undefined;
+	}
+	set displayMember(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.displayMember = value;
+		}
+	}
+
+	/** Sets the parent container of the dropDown (the popup). Used when a CSS property of unknown parent is interfering with the visibility of the dropDown.
+	*	Property type: any
+	*/
+	get dropDownAppendTo(): any  {
+		return this.nativeElement ? this.nativeElement.dropDownAppendTo : undefined;
+	}
+	set dropDownAppendTo(value: any) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownAppendTo = value;
+		}
+	}
+
+	/** Sets the height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
+	*	Property type: string | number
+	*/
+	get dropDownHeight(): string | number  {
+		return this.nativeElement ? this.nativeElement.dropDownHeight : undefined;
+	}
+	set dropDownHeight(value: string | number) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownHeight = value;
+		}
+	}
+
+	/** Sets the max height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
+	*	Property type: string | number
+	*/
+	get dropDownMaxHeight(): string | number  {
+		return this.nativeElement ? this.nativeElement.dropDownMaxHeight : undefined;
+	}
+	set dropDownMaxHeight(value: string | number) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownMaxHeight = value;
+		}
+	}
+
+	/** Sets the max width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
+	*	Property type: string | number
+	*/
+	get dropDownMaxWidth(): string | number  {
+		return this.nativeElement ? this.nativeElement.dropDownMaxWidth : undefined;
+	}
+	set dropDownMaxWidth(value: string | number) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownMaxWidth = value;
+		}
+	}
+
+	/** Sets the min height of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
+	*	Property type: string | number
+	*/
+	get dropDownMinHeight(): string | number  {
+		return this.nativeElement ? this.nativeElement.dropDownMinHeight : undefined;
+	}
+	set dropDownMinHeight(value: string | number) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownMinHeight = value;
+		}
+	}
+
+	/** Sets the min width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
+	*	Property type: string | number
+	*/
+	get dropDownMinWidth(): string | number  {
+		return this.nativeElement ? this.nativeElement.dropDownMinWidth : undefined;
+	}
+	set dropDownMinWidth(value: string | number) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownMinWidth = value;
+		}
+	}
+
+	/** If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document.
+	*	Property type: boolean
+	*/
+	get dropDownOverlay(): boolean  {
+		return this.nativeElement ? this.nativeElement.dropDownOverlay : undefined;
+	}
+	set dropDownOverlay(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownOverlay = value;
+		}
+	}
+
+	/** Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size.
+	*	Property type: DropDownPosition | string
+	*/
+	get dropDownPosition(): DropDownPosition | string  {
+		return this.nativeElement ? this.nativeElement.dropDownPosition : undefined;
+	}
+	set dropDownPosition(value: DropDownPosition | string) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownPosition = value;
+		}
+	}
+
+	/** Sets the width of the drop down. Default value of empty string means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.
+	*	Property type: string | number
+	*/
+	get dropDownWidth(): string | number  {
+		return this.nativeElement ? this.nativeElement.dropDownWidth : undefined;
+	}
+	set dropDownWidth(value: string | number) {
+		if (this.nativeElement) {
+			this.nativeElement.dropDownWidth = value;
+		}
+	}
+
+	/** Sets additional helper text below the element. 
+	*	Property type: string
+	*/
+	get hint(): string  {
+		return this.nativeElement ? this.nativeElement.hint : undefined;
+	}
+	set hint(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.hint = value;
+		}
+	}
+
+	/** Sets the element as an indicator.
+	*	Property type: boolean
+	*/
+	get indicator(): boolean  {
+		return this.nativeElement ? this.nativeElement.indicator : undefined;
+	}
+	set indicator(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.indicator = value;
+		}
+	}
+
+	/** A getter that returns an array of all Path items.
+	*	Property type: any[]
+	*/
+	get items(): any[]  {
+		return this.nativeElement ? this.nativeElement.items : undefined;
+	}
+	set items(value: any[]) {
+		if (this.nativeElement) {
+			this.nativeElement.items = value;
+		}
+	}
+
+	/** Sets label above the element. 
+	*	Property type: string
+	*/
+	get label(): string  {
+		return this.nativeElement ? this.nativeElement.label : undefined;
+	}
+	set label(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.label = value;
+		}
+	}
+
+	/** Sets or gets the language. Used in conjunction with the property messages. 
+	*	Property type: string
+	*/
+	get locale(): string  {
+		return this.nativeElement ? this.nativeElement.locale : undefined;
+	}
+	set locale(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.locale = 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(): any  {
+		return this.nativeElement ? this.nativeElement.messages : undefined;
+	}
+	set messages(value: any) {
+		if (this.nativeElement) {
+			this.nativeElement.messages = value;
+		}
+	}
+
+	/** The name of the control.
+	*	Property type: string
+	*/
+	get name(): string  {
+		return this.nativeElement ? this.nativeElement.name : undefined;
+	}
+	set name(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.name = value;
+		}
+	}
+
+	/** Determines whether the popup is opened or closed
+	*	Property type: boolean
+	*/
+	get opened(): boolean  {
+		return this.nativeElement ? this.nativeElement.opened : undefined;
+	}
+	set opened(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.opened = value;
+		}
+	}
+
+	/** Determines the element's placeholder.
+	*	Property type: string
+	*/
+	get placeholder(): string  {
+		return this.nativeElement ? this.nativeElement.placeholder : undefined;
+	}
+	set placeholder(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.placeholder = value;
+		}
+	}
+
+	/** Determines the format of the path. Follows specific operation system criteria by changing the drive,folder separators. 
+	*	Property type: PathFormat | string
+	*/
+	get pathFormat(): PathFormat | string  {
+		return this.nativeElement ? this.nativeElement.pathFormat : undefined;
+	}
+	set pathFormat(value: PathFormat | string) {
+		if (this.nativeElement) {
+			this.nativeElement.pathFormat = value;
+		}
+	}
+
+	/** Disables user interaction with the element.
+	*	Property type: boolean
+	*/
+	get readonly(): boolean  {
+		return this.nativeElement ? this.nativeElement.readonly : undefined;
+	}
+	set readonly(value: boolean) {
+		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(): boolean  {
+		return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
+	}
+	set rightToLeft(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.rightToLeft = value;
+		}
+	}
+
+	/** Determines the theme. Theme defines the look of the element
+	*	Property type: string
+	*/
+	get theme(): string  {
+		return this.nativeElement ? this.nativeElement.theme : undefined;
+	}
+	set theme(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.theme = value;
+		}
+	}
+
+	/** If is set to true, the element cannot be focused.
+	*	Property type: boolean
+	*/
+	get unfocusable(): boolean  {
+		return this.nativeElement ? this.nativeElement.unfocusable : undefined;
+	}
+	set unfocusable(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.unfocusable = value;
+		}
+	}
+
+	/** The value of the Path control.
+	*	Property type: string
+	*/
+	get value(): string  {
+		return this.nativeElement ? this.nativeElement.value : undefined;
+	}
+	set value(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.value = value;
+		}
+	}
+
+	/** Determines the value member of an item. Stored as value in the item object.
+	*	Property type: string
+	*/
+	get valueMember(): string  {
+		return this.nativeElement ? this.nativeElement.valueMember : undefined;
+	}
+	set valueMember(value: string) {
+		if (this.nativeElement) {
+			this.nativeElement.valueMember = value;
+		}
+	}
+
+	/** Determines whether or not the element wraps to a new line if overflows. If set the Path can be wrapped on multiple lines. 
+	*	Property type: boolean
+	*/
+	get wrap(): boolean  {
+		return this.nativeElement ? this.nativeElement.wrap : undefined;
+	}
+	set wrap(value: boolean) {
+		if (this.nativeElement) {
+			this.nativeElement.wrap = value;
+		}
+	}
+
+
+	// Gets the properties of the React component.
+	get properties(): string[] {
+		return ["animation","dataSource","disabled","displayMember","dropDownAppendTo","dropDownHeight","dropDownMaxHeight","dropDownMaxWidth","dropDownMinHeight","dropDownMinWidth","dropDownOverlay","dropDownPosition","dropDownWidth","hint","indicator","items","label","locale","messages","name","opened","placeholder","pathFormat","readonly","rightToLeft","theme","unfocusable","value","valueMember","wrap"];
+	}
+	/**  This event is triggered when user clicks on the browse button.
+	*  @param event. The custom event. 	*/
+	onBrowseButtonClick?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when the value is changed.
+	*  @param event. The custom event. 	*/
+	onChange?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when the drop down is closed.
+	*  @param event. The custom event. 	*/
+	onClose?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when the drop down is closing.
+	*  @param event. The custom event. 	*/
+	onClosing?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when user clicks on the drop down button.
+	*  @param event. The custom event. 	*/
+	onDropDownButtonClick?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when an item from the popup is clicked.
+	*  @param event. The custom event. 	*/
+	onItemClick?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when the drop down is opened.
+	*  @param event. The custom event. 	*/
+	onOpen?: ((event?: Event) => void) | undefined
+	/**  This event is triggered when the drop down is opening.
+	*  @param event. The custom event. 	*/
+	onOpening?: ((event?: Event) => void) | undefined
+	/**  This event occurs, when the React component is created.
+	*  @param event. The custom event. 	*/
+	onCreate?: ((event?: Event) => void) | undefined
+	/**  This event occurs, when the React component is completely rendered.
+	*  @param event. The custom event. 	*/
+	onReady?: ((event?: Event) => void) | undefined
+
+	// Gets the events of the React component.
+	get eventListeners(): string[] {
+		return ["onBrowseButtonClick","onChange","onClose","onClosing","onDropDownButtonClick","onItemClick","onOpen","onOpening","onCreate","onReady"];
+	}
+	/** Closes the dropDown. 
+	*/
+    public close(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.close();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.close();
+            });
+        }
+    }
+
+	/** Opens the dropDown. 
+	*/
+    public open(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.open();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.open();
+            });
+        }
+    }
+
+	/** Set's the Path element to 'emptyPath' state and changes the value to '////'. 
+	*/
+    public setToEmptyPath(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.setToEmptyPath();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.setToEmptyPath();
+            });
+        }
+    }
+
+	/** Set's the Path element to 'notAPath' state and changes the value to '//'. 
+	*/
+    public setToNotAPath(): void {
+        if (this.nativeElement.isRendered) {
+            this.nativeElement.setToNotAPath();
+        }
+        else
+        {
+            this.nativeElement.whenRendered(() => {
+                this.nativeElement.setToNotAPath();
+            });
+        }
+    }
+
+
+
+	constructor(props: any) {
+		super(props);
+		this.componentRef = React.createRef();
+	}
+
+	componentDidRender(initialize: boolean) {
+		const that = this;
+		const props: any = {};
+		const events: any = {};
+		let styles: any = null;
+		
+		const stringifyCircularJSON = (obj: any) => {
+		  const seen = new WeakSet();
+		  return JSON.stringify(obj, (k, v) => {
+			if (v !== null && typeof v === 'object') {
+			  if (seen.has(v)) return;
+			  seen.add(v);
+			}
+			
+			if (k === 'Smart') {
+				return v;
+			}
+			
+			return v;
+		  });
+		};
+		
+		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;
+			if (that.nativeElement && !that.nativeElement.isCompleted) {
+				that.nativeElement.reactStateProps = JSON.parse(stringifyCircularJSON(props));
+			}
+		}
+
+		if (initialize && that.nativeElement && that.nativeElement.isCompleted) {
+		//	return;
+		}
+
+
+		for(let prop in props) {
+			if (prop === 'class' || prop === 'className') {
+				const classNames = props[prop].trim().split(' ');
+				
+				if (that.nativeElement._classNames) {
+					const oldClassNames = that.nativeElement._classNames;
+					for(let className in oldClassNames) {
+						if (that.nativeElement.classList.contains(oldClassNames[className]) && oldClassNames[className] !== "") {
+							that.nativeElement.classList.remove(oldClassNames[className]);
+						}
+					}
+				}
+				
+				that.nativeElement._classNames = classNames;
+				
+				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: string) => {
+					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);
+
+				if (that.nativeElement[normalizedProp] === undefined) {
+				    that.nativeElement.setAttribute(prop, props[prop]);
+				}
+
+				if (props[prop] !== undefined) {
+					if (typeof props[prop] === 'object' && that.nativeElement.reactStateProps && !initialize) {
+						if (stringifyCircularJSON(props[prop]) === stringifyCircularJSON(that.nativeElement.reactStateProps[normalizedProp])) {
+							continue;
+						}
+					}
+					
+					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-path", { ref: this.componentRef }, this.props.children)
+		)
+	}
+}
+
+export default Path;