Skip to content

Commit 8834d67

Browse files
josebaliusjosebalius
committed
2 parents ab4c759 + 5d12327 commit 8834d67

File tree

10 files changed

+268
-46
lines changed

10 files changed

+268
-46
lines changed

‎build/css/ngReactGrid.css‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -237,14 +237,11 @@
237237

238238
.ngReactTextField {
239239
margin:0;
240-
width: 95%;
240+
width: calc(90% - 4px);
241241
outline: none;
242-
border: none;
243242
padding: 4px;
244-
background: transparent;
245-
font-weight: bold;
246243
}
247244

248245
.ngReactGridSelectField {
249-
width: 95%;
246+
width: calc(100% - 4px);
250247
}

‎build/js/ngReactGrid.js‎

Lines changed: 133 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -563,9 +563,38 @@ var ngReactGridCheckboxFieldComponent = (function() {
563563
var ngReactGridSelectFieldComponent = (function() {
564564

565565
var ngReactGridSelectFieldComponent = React.createClass({displayName: 'ngReactGridSelectFieldComponent',
566+
getInitialState: function() {
567+
return {
568+
defaultValue: {
569+
id: "",
570+
name: ""
571+
}
572+
};
573+
},
574+
handleChange: function(e) {
575+
var value = e.target.value;
576+
this.props.updateValue(value);
577+
this.setState({
578+
defaultValue: {
579+
id: value
580+
}
581+
});
582+
},
583+
componentWillReceiveProps: function(nextProps) {
584+
this.setState({
585+
defaultValue: nextProps.value || {}
586+
});
587+
},
588+
componentWillMount: function() {
589+
this.setState({
590+
defaultValue: this.props.value || {}
591+
});
592+
},
566593
render: function() {
567594

568-
if(!this.props.referenceData) {}
595+
if(!this.props.referenceData) {
596+
this.props.referenceData = [];
597+
}
569598

570599
var options = this.props.referenceData.map(function(option) {
571600
return (
@@ -574,7 +603,7 @@ var ngReactGridSelectFieldComponent = (function() {
574603
});
575604

576605
return (
577-
React.DOM.select( {className:"ngReactGridSelectField"},
606+
React.DOM.select( {className:"ngReactGridSelectField", value:this.state.defaultValue.id, onChange:this.handleChange},
578607
options
579608
)
580609
)
@@ -1096,6 +1125,12 @@ var NgReactGridReactManager = function (ngReactGrid) {
10961125
* @type {boolean}
10971126
*/
10981127
this.loading = false;
1128+
1129+
/**
1130+
* Instance pointer to a static function
1131+
* @type {Function}
1132+
*/
1133+
this.getObjectPropertyByString = NgReactGridReactManager.getObjectPropertyByString;
10991134
};
11001135

11011136
/**
@@ -1336,11 +1371,13 @@ NgReactGridReactManager.prototype.wrapWithRootScope = function (func) {
13361371

13371372
/**
13381373
* This function allows you to get a property from any object, no matter how many levels deep it is
1374+
* MOVE THIS FUNCTION INTO ITS OWN CLASS
13391375
* @param object
13401376
* @param str
1377+
* @static
13411378
* @returns {*}
13421379
*/
1343-
NgReactGridReactManager.prototype.getObjectPropertyByString = function (object, str) {
1380+
NgReactGridReactManager.getObjectPropertyByString = function (object, str) {
13441381

13451382
/**
13461383
* Convert indexes to properties
@@ -1363,6 +1400,28 @@ NgReactGridReactManager.prototype.getObjectPropertyByString = function (object,
13631400
return object;
13641401
};
13651402

1403+
/**
1404+
* Updates an object property given a specified path, it will create the object if it doesn't exist
1405+
* @static
1406+
* @param obj
1407+
* @param path
1408+
* @param value
1409+
*/
1410+
NgReactGridReactManager.updateObjectPropertyByString = function(obj, path, value) {
1411+
var a = path.split('.');
1412+
var o = obj;
1413+
for (var i = 0; i < a.length - 1; i++) {
1414+
var n = a[i];
1415+
if (n in o) {
1416+
o = o[n];
1417+
} else {
1418+
o[n] = {};
1419+
o = o[n];
1420+
}
1421+
}
1422+
o[a[a.length - 1]] = value;
1423+
};
1424+
13661425
module.exports = NgReactGridReactManager;
13671426
},{}],4:[function(require,module,exports){
13681427
var ngReactGrid = require("../classes/NgReactGrid");
@@ -1408,60 +1467,115 @@ var ngReactGridCheckboxFactory = function() {
14081467

14091468
module.exports = ngReactGridCheckboxFactory;
14101469
},{}],6:[function(require,module,exports){
1470+
var NgReactGridReactManager = require("../classes/NgReactGridReactManager");
1471+
14111472
var ngReactGridCheckboxFieldFactory = function() {
14121473

1413-
var ngReactGridCheckboxField = function(record, field) {
1474+
var ngReactGridCheckboxField = function(record, field, updateNotification) {
14141475
this.record = record;
14151476
this.field = field;
1416-
return ngReactGridCheckboxFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)});
1477+
this.updateNotification = updateNotification;
1478+
1479+
var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field);
1480+
return ngReactGridCheckboxFieldComponent({value: value, updateValue: this.updateValue.bind(this)});
14171481
};
14181482

14191483
ngReactGridCheckboxField.prototype.updateValue = function(newValue) {
1420-
this.record[this.field] = newValue;
1484+
NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue);
1485+
1486+
if(this.updateNotification) {
1487+
this.updateNotification(this.record);
1488+
}
14211489
};
14221490

14231491
return ngReactGridCheckboxField;
14241492

14251493
};
14261494

14271495
module.exports = ngReactGridCheckboxFieldFactory;
1428-
},{}],7:[function(require,module,exports){
1429-
var ngReactGridSelectFieldFactory = function() {
1496+
},{"../classes/NgReactGridReactManager":3}],7:[function(require,module,exports){
1497+
var NgReactGridReactManager = require("../classes/NgReactGridReactManager");
14301498

1431-
var ngReactGridSelectField = function(record, field, referenceData) {
1499+
var ngReactGridSelectFieldFactory = function($rootScope) {
1500+
1501+
var ngReactGridSelectField = function(record, field, referenceData, updateNotification) {
14321502
this.record = record;
14331503
this.field = field;
1434-
return ngReactGridSelectFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this), referenceData: referenceData});
1504+
this.updateNotification = updateNotification;
1505+
this.referenceData = referenceData;
1506+
1507+
var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field);
1508+
1509+
return ngReactGridSelectFieldComponent({value: value, updateValue: this.updateValue.bind(this), referenceData: (referenceData || [])});
14351510
};
14361511

14371512
ngReactGridSelectField.prototype.updateValue = function(newValue) {
1438-
this.record[this.field] = newValue;
1513+
1514+
var updateValue = {};
1515+
1516+
for(var i in this.referenceData) {
1517+
var option = this.referenceData[i];
1518+
1519+
if(option.id == newValue) {
1520+
updateValue = option;
1521+
}
1522+
}
1523+
1524+
console.debug(this.record, this.field, updateValue);
1525+
1526+
NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, updateValue);
1527+
1528+
if(this.updateNotification) {
1529+
if($rootScope.$$phase) {
1530+
this.updateNotification(this.record);
1531+
} else {
1532+
$rootScope.$apply(function () {
1533+
this.updateNotification(this.record);
1534+
}.bind(this));
1535+
}
1536+
}
14391537
};
14401538

14411539
return ngReactGridSelectField;
14421540

14431541
};
14441542

14451543
module.exports = ngReactGridSelectFieldFactory;
1446-
},{}],8:[function(require,module,exports){
1447-
var ngReactGridTextFieldFactory = function() {
1544+
},{"../classes/NgReactGridReactManager":3}],8:[function(require,module,exports){
1545+
var NgReactGridReactManager = require("../classes/NgReactGridReactManager");
14481546

1449-
var ngReactGridTextField = function(record, field) {
1547+
var ngReactGridTextFieldFactory = function($rootScope) {
1548+
1549+
var ngReactGridTextField = function(record, field, updateNotification) {
14501550
this.record = record;
14511551
this.field = field;
1452-
return ngReactGridTextFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)});
1552+
this.updateNotification = updateNotification;
1553+
1554+
var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field);
1555+
1556+
return ngReactGridTextFieldComponent({value: value, updateValue: this.updateValue.bind(this)});
14531557
};
14541558

14551559
ngReactGridTextField.prototype.updateValue = function(newValue) {
1456-
this.record[this.field] = newValue;
1560+
NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue);
1561+
1562+
if(this.updateNotification) {
1563+
if($rootScope.$$phase) {
1564+
this.updateNotification(this.record);
1565+
} else {
1566+
$rootScope.$apply(function () {
1567+
this.updateNotification(this.record);
1568+
}.bind(this));
1569+
}
1570+
}
14571571
};
14581572

14591573
return ngReactGridTextField;
14601574

14611575
};
14621576

14631577
module.exports = ngReactGridTextFieldFactory;
1464-
},{}],9:[function(require,module,exports){
1578+
},{"../classes/NgReactGridReactManager":3}],9:[function(require,module,exports){
14651579
'use strict';
14661580

14671581
var ngReactGridDirective = require('./directives/ngReactGridDirective');
@@ -1472,9 +1586,9 @@ var ngReactGridSelectFieldFactory = require("./factories/ngReactGridSelectFieldF
14721586

14731587
angular.module('ngReactGrid', [])
14741588
.factory("ngReactGridCheckbox", [ngReactGridCheckboxFactory])
1475-
.factory("ngReactGridTextField", [ngReactGridTextFieldFactory])
1589+
.factory("ngReactGridTextField", ['$rootScope', ngReactGridTextFieldFactory])
14761590
.factory("ngReactGridCheckboxField", [ngReactGridCheckboxFieldFactory])
1477-
.factory("ngReactGridSelectField", [ngReactGridSelectFieldFactory])
1591+
.factory("ngReactGridSelectField", ['$rootScope', ngReactGridSelectFieldFactory])
14781592
.directive("ngReactGrid", ['$rootScope', ngReactGridDirective]);
14791593

14801594
},{"./directives/ngReactGridDirective":4,"./factories/ngReactGridCheckboxFactory":5,"./factories/ngReactGridCheckboxFieldFactory":6,"./factories/ngReactGridSelectFieldFactory":7,"./factories/ngReactGridTextFieldFactory":8}],10:[function(require,module,exports){

‎build/js/ngReactGrid.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/ngReactGrid.css‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -237,14 +237,11 @@
237237

238238
.ngReactTextField {
239239
margin:0;
240-
width: 95%;
240+
width: calc(90% - 4px);
241241
outline: none;
242-
border: none;
243242
padding: 4px;
244-
background: transparent;
245-
font-weight: bold;
246243
}
247244

248245
.ngReactGridSelectField {
249-
width: 95%;
246+
width: calc(100% - 4px);
250247
}

‎src/js/classes/NgReactGridReactManager.js‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,12 @@ var NgReactGridReactManager = function (ngReactGrid) {
4444
* @type {boolean}
4545
*/
4646
this.loading = false;
47+
48+
/**
49+
* Instance pointer to a static function
50+
* @type {Function}
51+
*/
52+
this.getObjectPropertyByString = NgReactGridReactManager.getObjectPropertyByString;
4753
};
4854

4955
/**
@@ -284,11 +290,13 @@ NgReactGridReactManager.prototype.wrapWithRootScope = function (func) {
284290

285291
/**
286292
* This function allows you to get a property from any object, no matter how many levels deep it is
293+
* MOVE THIS FUNCTION INTO ITS OWN CLASS
287294
* @param object
288295
* @param str
296+
* @static
289297
* @returns {*}
290298
*/
291-
NgReactGridReactManager.prototype.getObjectPropertyByString = function (object, str) {
299+
NgReactGridReactManager.getObjectPropertyByString = function (object, str) {
292300

293301
/**
294302
* Convert indexes to properties
@@ -311,4 +319,26 @@ NgReactGridReactManager.prototype.getObjectPropertyByString = function (object,
311319
return object;
312320
};
313321

322+
/**
323+
* Updates an object property given a specified path, it will create the object if it doesn't exist
324+
* @static
325+
* @param obj
326+
* @param path
327+
* @param value
328+
*/
329+
NgReactGridReactManager.updateObjectPropertyByString = function(obj, path, value) {
330+
var a = path.split('.');
331+
var o = obj;
332+
for (var i = 0; i < a.length - 1; i++) {
333+
var n = a[i];
334+
if (n in o) {
335+
o = o[n];
336+
} else {
337+
o[n] = {};
338+
o = o[n];
339+
}
340+
}
341+
o[a[a.length - 1]] = value;
342+
};
343+
314344
module.exports = NgReactGridReactManager;

‎src/js/factories/ngReactGridCheckboxFieldFactory.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,22 @@
1+
var NgReactGridReactManager = require("../classes/NgReactGridReactManager");
2+
13
var ngReactGridCheckboxFieldFactory = function() {
24

3-
var ngReactGridCheckboxField = function(record, field) {
5+
var ngReactGridCheckboxField = function(record, field, updateNotification) {
46
this.record = record;
57
this.field = field;
6-
return ngReactGridCheckboxFieldComponent({value: this.record[field], updateValue: this.updateValue.bind(this)});
8+
this.updateNotification = updateNotification;
9+
10+
var value = NgReactGridReactManager.getObjectPropertyByString(this.record, this.field);
11+
return ngReactGridCheckboxFieldComponent({value: value, updateValue: this.updateValue.bind(this)});
712
};
813

914
ngReactGridCheckboxField.prototype.updateValue = function(newValue) {
10-
this.record[this.field] = newValue;
15+
NgReactGridReactManager.updateObjectPropertyByString(this.record, this.field, newValue);
16+
17+
if(this.updateNotification) {
18+
this.updateNotification(this.record);
19+
}
1120
};
1221

1322
return ngReactGridCheckboxField;

0 commit comments

Comments
 (0)