smart-webcomponents 18.0.1 → 18.0.2

package/source/react/customizationdialog/customizationdialog.tsx

@@ -1,485 +0,0 @@
-import React from "react";
-import { CustomizationDialogProperties } from "./../../index";
-import { Animation} from './../../index';
-export { CustomizationDialogProperties } from "./../../index";
-export { Animation} from './../../index';
-
-interface IWindow { Smart: any; }
-declare const window: IWindow;
-let Smart: any;
-if (typeof window !== "undefined") {
-	Smart = window.Smart;
-}
-export interface CustomizationDialogProps extends CustomizationDialogProperties {
-    className?: string;
-    style?: React.CSSProperties;
-
-	onOpen?: ((event?: Event) => void) | undefined;
-	onClose?: ((event?: Event) => void) | undefined;
-	onChange?: ((event?: Event) => void) | undefined;
-	onApply?: ((event?: Event) => void) | undefined;
-	onCreate?: ((event?: Event) => void) | undefined;
-	onReady?: ((event?: Event) => void) | undefined;
-
-}
-/**
- Defines a dialog for customization of filtering, sorting.
-*/
-export class CustomizationDialog extends React.Component<React.HTMLAttributes<Element> & CustomizationDialogProps, any> {   
-	private _id: string;
-	private nativeElement: any;
-	private componentRef: any;
-
-	// Gets the id of the React component.
-	get id() {
-		if (!this._id) {
-			this._id =  'CustomizationDialog' + 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;
-		}
-	}
-
-	/** Array with filtered fields and their settings.
-	*	Property type: any
-	*/
-	get dataSource(): any  {
-		return this.nativeElement ? this.nativeElement.dataSource : undefined;
-	}
-	set dataSource(value: any) {
-		if (this.nativeElement) {
-			this.nativeElement.dataSource = 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;
-		}
-	}
-
-	/** 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 whether is enabled/disabled filtering tab.
-	*	Property type: boolean
-	*/
-	get filtering(): boolean  {
-		return this.nativeElement ? this.nativeElement.filtering : undefined;
-	}
-	set filtering(value: boolean) {
-		if (this.nativeElement) {
-			this.nativeElement.filtering = value;
-		}
-	}
-
-	/** Sets whether is enabled/disabled grouping tab.
-	*	Property type: boolean
-	*/
-	get grouping(): boolean  {
-		return this.nativeElement ? this.nativeElement.grouping : undefined;
-	}
-	set grouping(value: boolean) {
-		if (this.nativeElement) {
-			this.nativeElement.grouping = value;
-		}
-	}
-
-	/** Set's the buttons that will be visible in the header section.
-	*	Property type: string[]
-	*/
-	get headerButtons(): string[]  {
-		return this.nativeElement ? this.nativeElement.headerButtons : undefined;
-	}
-	set headerButtons(value: string[]) {
-		if (this.nativeElement) {
-			this.nativeElement.headerButtons = 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;
-		}
-	}
-
-	/** Callback, related to localization module. 
-	*	Property type: any
-	*/
-	get localizeFormatFunction(): any  {
-		return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
-	}
-	set localizeFormatFunction(value: any) {
-		if (this.nativeElement) {
-			this.nativeElement.localizeFormatFunction = 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;
-		}
-	}
-
-	/** Sets or gets whether the columns reordering is active.
-	*	Property type: boolean
-	*/
-	get reorder(): boolean  {
-		return this.nativeElement ? this.nativeElement.reorder : undefined;
-	}
-	set reorder(value: boolean) {
-		if (this.nativeElement) {
-			this.nativeElement.reorder = value;
-		}
-	}
-
-	/** Sets or gets the tab, wich is selected on initialization.
-	*	Property type: number
-	*/
-	get selectedTab(): number  {
-		return this.nativeElement ? this.nativeElement.selectedTab : undefined;
-	}
-	set selectedTab(value: number) {
-		if (this.nativeElement) {
-			this.nativeElement.selectedTab = value;
-		}
-	}
-
-	/** Sets whether is enabled/disabled sorting tab.
-	*	Property type: boolean
-	*/
-	get sorting(): boolean  {
-		return this.nativeElement ? this.nativeElement.sorting : undefined;
-	}
-	set sorting(value: boolean) {
-		if (this.nativeElement) {
-			this.nativeElement.sorting = 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;
-		}
-	}
-
-	/** Sets or gets element's value. It's represente by object, contained
-	*	Property type: any
-	*/
-	get value(): any  {
-		return this.nativeElement ? this.nativeElement.value : undefined;
-	}
-	set value(value: any) {
-		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;
-		}
-	}
-
-	/** Sets or gets whether the columns of the element could be hidden.
-	*	Property type: boolean
-	*/
-	get visibility(): boolean  {
-		return this.nativeElement ? this.nativeElement.visibility : undefined;
-	}
-	set visibility(value: boolean) {
-		if (this.nativeElement) {
-			this.nativeElement.visibility = value;
-		}
-	}
-
-
-	// Gets the properties of the React component.
-	get properties(): string[] {
-		return ["animation","dataSource","displayMember","disabled","filtering","grouping","headerButtons","locale","localizeFormatFunction","messages","reorder","selectedTab","sorting","theme","unfocusable","value","valueMember","visibility"];
-	}
-	/**  This event is triggered when the dialog is opened.
-	*  @param event. The custom event. 	*/
-	onOpen?: ((event?: Event) => void) | undefined
-	/**  This event is triggered when the dialog is closed.
-	*  @param event. The custom event. 	*/
-	onClose?: ((event?: Event) => void) | undefined
-	/**  This event is triggered when the data in the value property is changed.
-	*  @param event. The custom event. 	*/
-	onChange?: ((event?: Event) => void) | undefined
-	/**  This event is triggered when the dialog is closed via clicking the apply button.
-	*  @param event. The custom event. 	*/
-	onApply?: ((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 ["onOpen","onClose","onChange","onApply","onCreate","onReady"];
-	}
-	/** Opens the dialog 
-	*/
-    public open(): void {
-        if (this.nativeElement.isRendered) {
-            this.nativeElement.open();
-        }
-        else
-        {
-            this.nativeElement.whenRendered(() => {
-                this.nativeElement.open();
-            });
-        }
-    }
-
-	/** Closes the dialog. 
-	*/
-    public close(): void {
-        if (this.nativeElement.isRendered) {
-            this.nativeElement.close();
-        }
-        else
-        {
-            this.nativeElement.whenRendered(() => {
-                this.nativeElement.close();
-            });
-        }
-    }
-
-
-
-	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-customization-dialog", { ref: this.componentRef }, this.props.children)
-		)
-	}
-}
-
-export default CustomizationDialog;