nativescript-telerik-ui-pro - npm Package Compare versions

Comparing version 1.5.0-2016.10.18.3 to 1.5.0-2016.10.18.4

dataform/dataform-common.js

@@ -5,3 +5,4 @@ var dependencyObservable = require("ui/core/dependency-observable");
 var bindable_1 = require("ui/core/bindable");
-var observableModule = require("data/observable");
+var observable = require("data/observable");
+var enums = require("ui/enums");
 var utils = require("utils/utils");
@@ -306,2 +307,6 @@ var knownCollections;
     };
+    PropertyGroup.onLayoutPropertyChanged = function (data) {
+        var group = data.object;
+        group.onLayoutChanged(data);
+    };
     PropertyGroup.prototype.onNameChanged = function (data) {
@@ -317,2 +322,4 @@ };
     };
+    PropertyGroup.prototype.onLayoutChanged = function (data) {
+    };
     Object.defineProperty(PropertyGroup.prototype, "name", {
@@ -368,2 +375,12 @@ get: function () {
     });
+    Object.defineProperty(PropertyGroup.prototype, "layout", {
+        get: function () {
+            return this._getValue(PropertyGroup.layoutProperty);
+        },
+        set: function (value) {
+            this._setValue(PropertyGroup.layoutProperty, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     PropertyGroup.nameProperty = new dependencyObservable.Property("name", "PropertyGroup", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.None, PropertyGroup.onNamePropertyChanged));
@@ -374,2 +391,3 @@ PropertyGroup.hiddenProperty = new dependencyObservable.Property("hidden", "PropertyGroup", new proxy_1.PropertyMetadata(false, dependencyObservable.PropertyMetadataSettings.AffectsLayout, PropertyGroup.onHiddenPropertyChanged));
     PropertyGroup.propertiesProperty = new dependencyObservable.Property("properties", "PropertyGroup", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, PropertyGroup.onPropertiesPropertyChanged));
+    PropertyGroup.layoutProperty = new dependencyObservable.Property("layout", "PropertyGroup", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, PropertyGroup.onLayoutPropertyChanged));
     return PropertyGroup;
@@ -644,6 +662,6 @@ })(bindable_1.Bindable);
         if (data.oldValue) {
-            data.oldValue.off(observableModule.Observable.propertyChangeEvent);
+            data.oldValue.off(observable.Observable.propertyChangeEvent);
         }
         if (data.newValue) {
-            data.newValue.on(observableModule.Observable.propertyChangeEvent, function (propertyChangeData) {
+            data.newValue.on(observable.Observable.propertyChangeEvent, function (propertyChangeData) {
                 if (propertyChangeData.propertyName === "type") {
@@ -694,2 +712,6 @@ prop.onEditorTypeChanged();
     };
+    EntityProperty.onColumnIndexPropertyChanged = function (data) {
+        var prop = data.object;
+        prop.onColumnIndexChanged(data);
+    };
     EntityProperty.onHiddenPropertyChanged = function (data) {
@@ -757,2 +779,7 @@ var prop = data.object;
     };
+    EntityProperty.prototype.onColumnIndexChanged = function (data) {
+        if (!isNaN(data.newValue)) {
+            this.updateNativeColumnIndex(data.newValue);
+        }
+    };
     EntityProperty.prototype.onHiddenChanged = function (data) {
@@ -771,4 +798,2 @@ this.updateNativeHidden(data.newValue);
     EntityProperty.prototype.onImageResourceChanged = function (data) {
-        console.log("onImageResourceChanged");
-        console.log(this.imageResource);
         if (this.imageResource != null) {
@@ -848,2 +873,12 @@ if (this.imageResource.indexOf(utils.RESOURCE_PREFIX) === 0) {
     });
+    Object.defineProperty(EntityProperty.prototype, "columnIndex", {
+        get: function () {
+            return this._getValue(EntityProperty.columnIndexProperty);
+        },
+        set: function (value) {
+            this._setValue(EntityProperty.columnIndexProperty, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(EntityProperty.prototype, "hidden", {
@@ -909,2 +944,4 @@ get: function () {
     };
+    EntityProperty.prototype.updateNativeColumnIndex = function (value) {
+    };
     EntityProperty.prototype.updateNativeHidden = function (value) {
@@ -927,2 +964,3 @@ };
     EntityProperty.indexProperty = new dependencyObservable.Property("index", "EntityProperty", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, EntityProperty.onIndexPropertyChanged));
+    EntityProperty.columnIndexProperty = new dependencyObservable.Property("columnIndex", "EntityProperty", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, EntityProperty.onColumnIndexPropertyChanged));
     EntityProperty.hiddenProperty = new dependencyObservable.Property("hidden", "EntityProperty", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, EntityProperty.onHiddenPropertyChanged));
@@ -966,6 +1004,6 @@ EntityProperty.readOnlyProperty = new dependencyObservable.Property("readOnly", "EntityProperty", new proxy_1.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsStyle, EntityProperty.onReadOnlyPropertyChanged));
         if (data.oldValue) {
-            data.oldValue.off(observableModule.Observable.propertyChangeEvent);
+            data.oldValue.off(observable.Observable.propertyChangeEvent);
         }
         if (data.newValue) {
-            data.newValue.on(observableModule.Observable.propertyChangeEvent, function (propertyChangeData) {
+            data.newValue.on(observable.Observable.propertyChangeEvent, function (propertyChangeData) {
                 editor.onPropertyStyleChanged(propertyChangeData.propertyName);
@@ -979,6 +1017,6 @@ });
         if (data.oldValue) {
-            data.oldValue.off(observableModule.Observable.propertyChangeEvent);
+            data.oldValue.off(observable.Observable.propertyChangeEvent);
         }
         if (data.newValue) {
-            data.newValue.on(observableModule.Observable.propertyChangeEvent, function (propertyChangeData) {
+            data.newValue.on(observable.Observable.propertyChangeEvent, function (propertyChangeData) {
                 editor.onPropertyParamsChanged(propertyChangeData.propertyName);
@@ -1244,1 +1282,43 @@ });
 exports.StringToTimeConverter = StringToTimeConverter;
+///////////////////////////////////////////////////////////////////////////////
+var DataFormLayout = (function (_super) {
+    __extends(DataFormLayout, _super);
+    function DataFormLayout() {
+        _super.apply(this, arguments);
+    }
+    return DataFormLayout;
+})(bindable_1.Bindable);
+exports.DataFormLayout = DataFormLayout;
+var DataFormStackLayout = (function (_super) {
+    __extends(DataFormStackLayout, _super);
+    function DataFormStackLayout() {
+        _super.apply(this, arguments);
+    }
+    DataFormStackLayout.onOrientationPropertyChanged = function (data) {
+        var layout = data.object;
+        layout.onOrientationChanged(data);
+    };
+    DataFormStackLayout.prototype.onOrientationChanged = function (data) {
+    };
+    Object.defineProperty(DataFormStackLayout.prototype, "orientation", {
+        get: function () {
+            return this._getValue(DataFormStackLayout.orientationProperty);
+        },
+        set: function (value) {
+            this._setValue(DataFormStackLayout.orientationProperty, value);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    DataFormStackLayout.orientationProperty = new dependencyObservable.Property("orientation", "DataFormStackLayout", new proxy_1.PropertyMetadata(enums.Orientation.vertical, dependencyObservable.PropertyMetadataSettings.AffectsLayout, DataFormStackLayout.onOrientationPropertyChanged));
+    return DataFormStackLayout;
+})(DataFormLayout);
+exports.DataFormStackLayout = DataFormStackLayout;
+var DataFormGridLayout = (function (_super) {
+    __extends(DataFormGridLayout, _super);
+    function DataFormGridLayout() {
+        _super.apply(this, arguments);
+    }
+    return DataFormGridLayout;
+})(DataFormLayout);
+exports.DataFormGridLayout = DataFormGridLayout;

dataform/dataform.android.js

@@ -5,2 +5,3 @@ var commonModule = require("./dataform-common");
 var observableModule = require("data/observable");
+var enums = require("ui/enums");
 require("utils/module-merge").merge(commonModule, exports);
@@ -48,2 +49,6 @@ var RadDataForm = (function (_super) {
                             }
+                            if (!propertyGroup.layout) {
+                                propertyGroup.layout = new commonModule.DataFormStackLayout();
+                            }
+                            that.get()._updateGroupLayout(propertyGroup, group_1);
                             that.get()._attachGroupChangeListener(propertyGroup);
@@ -63,2 +68,19 @@ return group_1;
     };
+    RadDataForm.prototype._updateGroupLayout = function (propertyGroup, nativeGroup) {
+        var context = nativeGroup.rootLayout().getContext();
+        if (propertyGroup.layout instanceof commonModule.DataFormStackLayout) {
+            var nativeLayout = new com.telerik.widget.dataform.visualization.DataFormLinearLayoutManager(context);
+            if (propertyGroup.layout.orientation == enums.Orientation.horizontal) {
+                nativeLayout.setOrientation(android.widget.LinearLayout.HORIZONTAL);
+            }
+            else {
+                nativeLayout.setOrientation(android.widget.LinearLayout.VERTICAL);
+            }
+            nativeGroup.setLayoutManager(nativeLayout);
+        }
+        else if (propertyGroup.layout instanceof commonModule.DataFormGridLayout) {
+            var nativeLayout = new com.telerik.widget.dataform.visualization.DataFormTableLayoutManager(context);
+            nativeGroup.setLayoutManager(nativeLayout);
+        }
+    };
     RadDataForm.prototype._updateSource = function () {
@@ -175,2 +197,6 @@ if (!this._android || !this.source) {
         });
+        group.layout.off(observableModule.Observable.propertyChangeEvent);
+        group.layout.on(observableModule.Observable.propertyChangeEvent, function (propertyChangeData) {
+            that.get()._onGroupLayoutPropertyChanged(propertyChangeData);
+        });
     };
@@ -237,2 +263,3 @@ RadDataForm.prototype._createPropertyFromNative = function (nativeProperty) {
             case "collapsible":
+            case "layout":
                 this._android.arrangeEditors();
@@ -261,2 +288,8 @@ break;
     };
+    RadDataForm.prototype._onGroupLayoutPropertyChanged = function (data) {
+        if (!this._android || !this._loaded) {
+            return;
+        }
+        this._android.arrangeEditors();
+    };
     RadDataForm.prototype._applyGroupTitleStyle = function (nativeGroup, titleStyle) {
@@ -497,2 +530,3 @@ if (titleStyle.fillColor) {
         this.updateNativeIndex(this.index);
+        this.updateNativeColumnIndex(this.columnIndex);
         this.updateNativeHidden(this.hidden);
@@ -582,2 +616,8 @@ this.updateNativeReadOnly(this.readOnly);
     };
+    EntityProperty.prototype.updateNativeColumnIndex = function (value) {
+        if (!this._android || value == null) {
+            return;
+        }
+        this._android.setColumnPosition(value);
+    };
     EntityProperty.prototype.updateNativeHidden = function (value) {
@@ -584,0 +624,0 @@ if (!this._android || value == null) {

dataform/dataform.ios.js

@@ -5,2 +5,3 @@ var commonModule = require("./dataform-common");
 var utils = require("utils/utils");
+var enums = require("ui/enums");
 require("utils/module-merge").merge(commonModule, exports);
@@ -169,2 +170,3 @@ //////////////////////////////////////////////
         groupView.collapsible = group.collapsible;
+        this._owner._updateGroupLayout(group, groupView);
         this._owner._applyGroupTitleStyle(groupView, group.titleStyle);
@@ -300,2 +302,17 @@ //throw event for additional customizations
     };
+    RadDataForm.prototype._updateGroupLayout = function (propertyGroup, nativeGroup) {
+        if (propertyGroup.layout instanceof commonModule.DataFormStackLayout) {
+            var nativeLayout = TKStackLayout.alloc().init();
+            if (propertyGroup.layout.orientation == enums.Orientation.horizontal) {
+                nativeLayout.orientation = TKLayoutOrientationHorizontal;
+            }
+            else {
+                nativeLayout.orientation = TKLayoutOrientationVertical;
+            }
+            nativeGroup.editorsContainer.layout = nativeLayout;
+        }
+        else if (propertyGroup.layout instanceof commonModule.DataFormGridLayout) {
+            nativeGroup.editorsContainer.layout = TKGridLayout.alloc().init();
+        }
+    };
     RadDataForm.prototype.onGroupPropertyChanged = function (data) {
@@ -315,2 +332,4 @@ if (!this._ios || !this._initialized) {
                 break;
+            case "layout":
+                this._onLayoutPropertyChanged(data.object);
             case "name":
@@ -321,2 +340,39 @@ this._reset();
     };
+    RadDataForm.prototype._onLayoutPropertyChanged = function (group) {
+        if (!this._ios || !this._initialized) {
+            return;
+        }
+        this._updateLayout(group);
+    };
+    RadDataForm.prototype._updateLayout = function (group) {
+        this._updateNativeLayoutInfoForGroup(group);
+        var nativeGroup = this.getNativeGroup(group.name);
+        var nativeGroupView = this._ios.groupViewForGroup(nativeGroup);
+        this._updateGroupLayout(group, nativeGroupView);
+    };
+    RadDataForm.prototype._updateNativeLayoutInfoForGroup = function (group) {
+        for (var i = 0; i < group.properties.length; i++) {
+            var property = group.properties[i];
+            this._updateNativeLayoutInfoForProperty(property, group);
+        }
+    };
+    // This method aims to unify the behavior of the horizontal stack layout in Android and iOS.
+    // When this layout is used the order of elements is determined by property's index in android
+    // and the property's column in iOS.
+    RadDataForm.prototype._updateNativeLayoutInfoForProperty = function (property, group) {
+        if (group != null && group.layout instanceof commonModule.DataFormStackLayout
+            && group.layout.orientation == enums.Orientation.horizontal) {
+            property.ios.layoutInfo.row = 0;
+            property.ios.layoutInfo.column = property.index;
+        }
+        else if (group != null && group.layout instanceof commonModule.DataFormStackLayout
+            && group.layout.orientation == enums.Orientation.vertical) {
+            property.ios.layoutInfo.row = property.index;
+            property.ios.layoutInfo.column = 0;
+        }
+        else {
+            property.ios.layoutInfo.row = property.index;
+            property.ios.layoutInfo.column = property.columnIndex;
+        }
+    };
     RadDataForm.prototype.getNativeGroup = function (name) {
@@ -338,4 +394,9 @@ var groupCount = this._dataSource.numberOfGroupsInDataForm(this.ios);
     };
+    RadDataForm.prototype._onGroupLayoutPropertyChanged = function (data, group) {
+        if (!this._ios || !this._initialized) {
+            return;
+        }
+        this._updateLayout(group);
+    };
     RadDataForm.prototype.onPropertyPropertyChanged = function (data) {
-        console.log(">>>> onPropertyPropertyChanged " + data.propertyName);
         if (!this._ios || !this._initialized) {
@@ -376,5 +437,12 @@ return;
                     propertyNames.addObject(entityProperty.name);
+                }
+                this._dataSource.addGroupWithNamePropertyNames(group.name, propertyNames);
+                // When a group is added to the data source, each property gets a new
+                // value for its layoutInfo.row. Since we want the index defined in NS,
+                // to have a bigger priority, we make the update after the property is
+                // added to the data source.
+                for (var j = 0; j < group.properties.length; ++j) {
+                    var entityProperty = group.properties[j];
                     this._updateNativeProperty(entityProperty);
                 }
-                this._dataSource.addGroupWithNamePropertyNames(group.name, propertyNames);
                 var nativeGroup = this.getNativeGroup(group.name);
@@ -387,2 +455,5 @@ if (group.hidden) {
                 }
+                if (!group.layout) {
+                    group.layout = new commonModule.DataFormStackLayout();
+                }
                 this._attachGroupChangeListener(group);
@@ -417,2 +488,6 @@ }
         });
+        group.layout.off(observableModule.Observable.propertyChangeEvent);
+        group.layout.on(observableModule.Observable.propertyChangeEvent, function (propertyChangeData) {
+            that.get()._onGroupLayoutPropertyChanged(propertyChangeData, group);
+        });
     };
@@ -582,2 +657,3 @@ RadDataForm.prototype._createPropertyFromNative = function (nativeProperty) {
         this.updateNativeIndex(this.index);
+        this.updateNativeColumnIndex(this.columnIndex);
         this.updateNativeHidden(this.hidden);
@@ -655,5 +731,6 @@ this.updateNativeReadOnly(this.readOnly);
         }
-        this._ios.layoutInfo.row = value;
         this._ios.index = value;
     };
+    EntityProperty.prototype.updateNativeColumnIndex = function (value) {
+    };
     EntityProperty.prototype.updateNativeHidden = function (value) {
@@ -660,0 +737,0 @@ if (!this._ios || value == null) {

package.json

@@ -1,1 +0,1 @@
-{"name":"nativescript-telerik-ui-pro","version":"1.5.0-2016.10.18.3","description":"Telerik UI for NativeScript Pro is an upgrade of Telerik UI for NativeScript - a cross-platform UI components suite based on the native iOS and Android libraries provided by Telerik.","nativescript":{"ios":"2.4.0","android":"2.4.0"},"scripts":{"preinstall":"node ./scripts/eula-prompt.js","postinstall":"node ./scripts/email-prompt.js dev_uins_pro"},"repository":{"type":"git","url":"http://www.github.com/telerik/nativescript-ui-samples.git"},"keywords":["nativescript","ui","listview","sidedrawer","chart","calendar","dataform"],"author":"Telerik AD","license":"SEE LICENSE IN LICENSE.md","devDependencies":{"del":"^1.2.0","gulp":"^3.9.0","gulp-decompress":"^1.0.2","gulp-gzip":"^1.2.0","gulp-rename":"^1.2.2","gulp-tar":"^1.4.0","gulp-typescript":"^2.8.0","gulp-untar2":"^0.1.0","gulp-unzip":"^0.1.3","yargs":"^3.18.0"}}
+{"name":"nativescript-telerik-ui-pro","version":"1.5.0-2016.10.18.4","description":"Telerik UI for NativeScript Pro is an upgrade of Telerik UI for NativeScript - a cross-platform UI components suite based on the native iOS and Android libraries provided by Telerik.","nativescript":{"ios":"2.4.0","android":"2.4.0"},"scripts":{"preinstall":"node ./scripts/eula-prompt.js","postinstall":"node ./scripts/email-prompt.js dev_uins_pro"},"repository":{"type":"git","url":"http://www.github.com/telerik/nativescript-ui-samples.git"},"keywords":["nativescript","ui","listview","sidedrawer","chart","calendar","dataform"],"author":"Telerik AD","license":"SEE LICENSE IN LICENSE.md","devDependencies":{"del":"^1.2.0","gulp":"^3.9.0","gulp-decompress":"^1.0.2","gulp-gzip":"^1.2.0","gulp-rename":"^1.2.2","gulp-tar":"^1.4.0","gulp-typescript":"^2.8.0","gulp-untar2":"^0.1.0","gulp-unzip":"^0.1.3","yargs":"^3.18.0"}}

No alert changes

Improved metrics

Total package byte prevSize

33644657

increased by0.03%

Lines of code

55947

increased by0.36%

No dependency changes