Merge remote-tracking branch 'origin/master' into vsetoslavtsenov/merge-release-in-master

tns-core-modules/ui/core/properties/properties.d.ts

@@ -144,6 +144,10 @@ export function makeParser<T>(isValid: (value: any) => boolean): (value: any) =>
 export function getSetProperties(view: ViewBase): [string, any][];
 export function getComputedCssValues(view: ViewBase): [string, any][];
 
+export function isCssVariable(property: string): boolean;
+export function isCssCalcExpression(value: string): boolean;
+export function isCssVariableExpression(value: string): boolean;
+
 //@private
 /**
  * @private get all properties defined on ViewBase
@@ -154,4 +158,8 @@ export function _getProperties(): Property<any, any>[];
  * @private get all properties defined on Style
  */
 export function _getStyleProperties(): CssProperty<any, any>[];
+
+export function _evaluateCssVariableExpression(view: ViewBase, cssName: string, value: string): string;
+
+export function _evaluateCssCalcExpression(value: string): string;
 //@endprivate

tns-core-modules/ui/core/properties/properties.ts

@@ -1,3 +1,5 @@
+import reduceCSSCalc from "reduce-css-calc";
+
 // Definitions.
 import * as definitions from "../view-base";
 import { ViewBase } from "../view-base";
@@ -56,6 +58,76 @@ export function _getStyleProperties(): CssProperty<any, any>[] {
     return getPropertiesFromMap(cssSymbolPropertyMap) as CssProperty<any, any>[];
 }
 
+const cssVariableExpressionRegexp = /\bvar\(\s*(--[^,\s]+?)(?:\s*,\s*(.+))?\s*\)/;
+const cssVariableAllExpressionsRegexp = /\bvar\(\s*(--[^,\s]+?)(?:\s*,\s*(.+))?\s*\)/g;
+
+export function isCssVariable(property: string) {
+    return /^--[^,\s]+?$/.test(property);
+}
+
+export function isCssCalcExpression(value: string) {
+    return /\bcalc\(/.test(value);
+}
+
+export function isCssVariableExpression(value: string) {
+    return cssVariableExpressionRegexp.test(value);
+}
+
+export function _evaluateCssVariableExpression(view: ViewBase, cssName: string, value: string): string {
+    if (typeof value !== "string") {
+        return value;
+    }
+
+    if (!isCssVariableExpression(value)) {
+        // Value is not using css-variable(s)
+        return value;
+    }
+
+    let output = value.trim();
+
+    // Evaluate every (and nested) css-variables in the value.
+    let lastValue: string;
+    while (lastValue !== output) {
+        lastValue = output;
+
+        output = output.replace(cssVariableAllExpressionsRegexp, (matchStr, cssVariableName: string, fallbackStr: string) => {
+            const cssVariableValue = view.style.getCssVariable(cssVariableName);
+            if (cssVariableValue !== null) {
+                return cssVariableValue;
+            }
+
+            if (fallbackStr) {
+                // css-variable not found, using fallback-string.
+                const fallbackOutput = _evaluateCssVariableExpression(view, cssName, fallbackStr);
+                if (fallbackOutput) {
+                    // If the fallback have multiple values, return the first of them.
+                    return fallbackOutput.split(",")[0];
+                }
+            }
+
+            // Couldn't find a value for the css-variable or the fallback, return "unset"
+            traceWrite(`Failed to get value for css-variable "${cssVariableName}" used in "${cssName}"=[${value}] to ${view}`, traceCategories.Style, traceMessageType.error);
+
+            return "unset";
+        });
+    }
+
+    return output;
+}
+
+export function _evaluateCssCalcExpression(value: string) {
+    if (typeof value !== "string") {
+        return value;
+    }
+
+    if (isCssCalcExpression(value)) {
+        // WORKAROUND: reduce-css-calc can't handle the dip-unit.
+        return reduceCSSCalc(value.replace(/([0-9]+(\.[0-9]+)?)dip\b/g, "$1"));
+    } else {
+        return value;
+    }
+}
+
 function getPropertiesFromMap(map): Property<any, any>[] | CssProperty<any, any>[] {
     const props = [];
     Object.getOwnPropertySymbols(map).forEach(symbol => props.push(map[symbol]));

tns-core-modules/ui/core/view-base/view-base.d.ts

@@ -98,8 +98,16 @@ export abstract class ViewBase extends Observable {
     dock: "left" | "top" | "right" | "bottom";
     row: number;
     col: number;
+    /**
+     * Setting `column` property is the same as `col`
+     */
+    column: number;
     rowSpan: number;
     colSpan: number;
+    /**
+     * Setting `columnSpan` property is the same as `colSpan`
+     */
+    columnSpan: number;
     domNode: DOMNode;
 
     order: Order;

tns-core-modules/ui/core/view-base/view-base.ts

@@ -37,7 +37,7 @@ function ensuredomNodeModule(): void {
 let styleScopeModule: typeof ssm;
 function ensureStyleScopeModule() {
     if (!styleScopeModule) {
-        styleScopeModule = require("ui/styling/style-scope");
+        styleScopeModule = require("../../styling/style-scope");
     }
 }
 
@@ -210,8 +210,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
     dock: "left" | "top" | "right" | "bottom";
     row: number;
     col: number;
+    column: number; // synonym for "col"
     rowSpan: number;
     colSpan: number;
+    columnSpan: number; // synonym for "columnSpan"
 
     order: Order;
     flexGrow: FlexGrow;

tns-core-modules/ui/core/view/view-common.ts

@@ -31,10 +31,14 @@ export * from "../view-base";
 export { LinearGradient };
 
 import * as am from "../../animation";
+import { CSS_CLASS_PREFIX } from "../../../application";
+
+const MODAL = "modal";
+
 let animationModule: typeof am;
 function ensureAnimationModule() {
     if (!animationModule) {
-        animationModule = require("ui/animation");
+        animationModule = require("../../animation");
     }
 }
 
@@ -367,8 +371,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         return this._modal;
     }
 
-    protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) { //context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean, iosOpts?: any) {
+    protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
         _rootModalViews.push(this);
+        this.cssClasses.add(`${CSS_CLASS_PREFIX}${MODAL}`);
 
         parent._modal = this;
         this._modalParent = parent;

tns-core-modules/ui/core/view/view.android.ts

@@ -619,10 +619,6 @@ export class View extends ViewCommon {
     }
     protected _showNativeModalView(parent: View, options: ShowModalOptions) {
         super._showNativeModalView(parent, options);
-        if (!this.backgroundColor) {
-            this.backgroundColor = new Color("White");
-        }
-
         initializeDialogFragment();
 
         const df = new DialogFragment();
@@ -767,7 +763,7 @@ export class View extends ViewCommon {
         const AnimatorSet = android.animation.AnimatorSet;
 
         const duration = nativeView.getContext().getResources().getInteger(shortAnimTime) / 2;
-        
+
         let elevation = this.androidElevation;
         if (typeof elevation === "undefined" || elevation === null) {
             elevation = this.getDefaultElevation();
@@ -1049,7 +1045,7 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO
     const { getter, setter, auto = 0 } = options;
     let setPixels, getPixels, setPercent;
     if (getter) {
-        View.prototype[getter] = function(this: View): PercentLength {
+        View.prototype[getter] = function (this: View): PercentLength {
             if (options) {
                 setPixels = options.setPixels;
                 getPixels = options.getPixels;
@@ -1065,7 +1061,7 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO
         };
     }
     if (setter) {
-        View.prototype[setter] = function(this: View, length: PercentLength) {
+        View.prototype[setter] = function (this: View, length: PercentLength) {
             if (options) {
                 setPixels = options.setPixels;
                 getPixels = options.getPixels;