v1.0.20

Author: MikeTatsky

README.md

@@ -35,6 +35,7 @@ const getFancyGrid = () => {
   return (
     <div style={{marginTop: '5px'}}>
       <Form
+        id={'myForm'}
         theme={'extra-gray'}
         title={'Form'}
         items={[{
@@ -44,15 +45,31 @@ const getFancyGrid = () => {
           label: 'Name',
           emptyText: 'Name',
           name: 'name'
-        }, {
+        },{
           label: 'SurName',
           emptyText: 'SurName',
           name: 'surname'
+        }]}
+        buttons={[{
+          text: 'Save',
+          handler: () => {
+            let grid = Fancy.getGrid('myGrid'),
+              form = Fancy.getForm('myForm'),
+              values = form.get(),
+              id = values.id;
+
+            grid.setById(id, values);
+            grid.update({
+              type: 'row'
+            });
+          }
         }]}>
       </Form>
       <Grid
+        id={'myGrid'}
         height={500}
         theme={'extra-gray'}
+        exporter={true}
         selModel={{
           activeCell: true,
           type: 'rows'
@@ -61,6 +78,13 @@ const getFancyGrid = () => {
           resizable: true,
           menu: true
         }}
+        events={[{
+          selectrow: (grid, rowIndex, dataItem: any) => {
+            let form = Fancy.getForm('myForm');
+
+            form.set(dataItem.data);
+          }
+        }]}
         columns={getColumns()}
         data={getData()}>
       </Grid>

dist/fancygrid-react.js

@@ -1,6 +1,47 @@
 import React from 'react';
 import Fancy from 'fancygrid';
 
+const CHANGABLE_GRID_PROPS = {
+	title: {
+		type: 'string',
+		handler: (grid, value)=>{
+			console.log(value);
+			grid.setTitle(value);
+		}
+	},
+	subTitle: {
+		type: 'string',
+		handler: (grid, value)=>{
+			grid.setSubTitle(value);
+		}
+	},
+	columns: {
+		type: 'array',
+		handler: (grid, columns)=>{
+			grid.setColumns(columns);
+		}
+	},
+	data: {
+		type: 'array',
+		handler: (grid, data)=>{
+			grid.setData(data);
+			grid.update();
+		}
+	},
+	width: {
+		type: 'number',
+		handler: (grid, value)=>{
+			grid.setWidth(value);
+		}
+	},
+	height: {
+		type: 'number',
+		handler: (grid, value)=>{
+			grid.setHeight(value);
+		}
+	}
+};
+
 class Grid extends React.Component {
 	render() {
 		let me = this,
@@ -40,6 +81,66 @@ class Grid extends React.Component {
 			this.widget.destroy(false);
 		}
 	}
+
+	componentDidUpdate(prevProps) {
+		this.processPropsChanges(prevProps, this.props);
+	}
+
+	shouldComponentUpdate(nextProps) {
+		this.processPropsChanges(this.props, nextProps);
+		return false;
+	}
+
+	processPropsChanges(prevProps, nextProps) {
+		let changes = this.getChanges(prevProps, nextProps);
+	}
+
+	getChanges(prevProps, nextProps) {
+		for(let p in prevProps){
+			if(!CHANGABLE_GRID_PROPS[p]){
+				continue;
+			}
+
+			let prevValue = prevProps[p],
+				nextValue = nextProps[p],
+				type = CHANGABLE_GRID_PROPS[p].type;
+
+			if(Fancy.typeOf(prevValue) !== type || Fancy.typeOf(nextValue) !== type){
+				continue;
+			}
+
+			switch(type){
+				case 'string':
+				case 'number':
+					if(prevValue !== nextValue){
+						CHANGABLE_GRID_PROPS[p].handler(this.widget, nextValue);
+					}
+					break;
+				case 'array':
+					if(prevValue.length !== nextValue.length){
+						CHANGABLE_GRID_PROPS[p].handler(this.widget, nextValue);
+					}
+					else{
+						prevValue.some((item, i) => {
+							if(typeof item === 'object'){
+								for(let q in item){
+									if(item[q] !== nextValue[i][q]){
+										CHANGABLE_GRID_PROPS[p].handler(this.widget, nextValue);
+										return true;
+									}
+								}
+							}
+						});
+					}
+					break;
+				case 'object':
+					if(prevValue.toString() !== nextValue.toString()){
+						CHANGABLE_GRID_PROPS[p].handler(this.widget, nextValue);
+					}
+					break;
+			}
+		}
+	}
 }
 
 class Form extends React.Component {

dist/fancygrid-react.min.js

@@ -1,11 +1,13 @@
 {
   "name": "fancygrid-react",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "React components to generate interactive javascript grids using the FancyGrid library",
-  "main": "dist/fancygrid-react.min.js",
+  "main": "dist/fancygrid-react.js",
   "author": "FancyGrid",
   "homepage": "https://fancygrid.com",
-  "scripts": {},
+  "scripts": {
+    "build": "gulp && gulp prod"
+  },
   "keywords": [
     "react",
     "react-component",
@@ -15,11 +17,16 @@
     "javascript",
     "fancygrid"
   ],
-  "license": "MIT",
+  "license": "Commercial",
   "devDependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "fancygrid": "^1.7.129",
+    "@babel/core": "^7.12.7",
+    "@babel/preset-env": "^7.12.7",
+    "fancygrid": "^1.7.139",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-react": "^4.0.0",
+    "gulp-uglify": "^3.0.2",
     "react": "^16.2.0"
   },
   "peerDependencies": {