@nativescript/core 9.1.0-dev.0 → 9.1.0-next.1

package/ui/styling/style-properties.js

@@ -1,10 +1,9 @@
 import { CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty } from '../core/properties';
-import { unsetValue, isCssWideKeyword } from '../core/properties/property-shared';
+import { unsetValue } from '../core/properties/property-shared';
 import { Style } from './style';
 import { Color } from '../../color';
 import { Font, parseFont, FontStyle, FontWeight, FontVariationSettings } from './font';
 import { Background } from './background';
-import { layout } from '../../utils';
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
 import { Length, FixedLength, PercentLength } from './length-shared';
@@ -14,67 +13,6 @@ import { parseCSSShadow } from './css-shadow';
 import { transformConverter } from './css-transform';
 import { ClipPathFunction } from './clip-path-function';
 import { parseCSSCommaSeparatedListOfValues } from './css-utils';
-function equalsCommon(a, b) {
-    if (a == 'auto' || isCssWideKeyword(a)) {
-        return b == 'auto' || isCssWideKeyword(b);
-    }
-    if (b == 'auto' || isCssWideKeyword(b)) {
-        return false;
-    }
-    if (typeof a === 'number') {
-        if (typeof b === 'number') {
-            return a == b;
-        }
-        if (!b) {
-            return false;
-        }
-        return b.unit == 'dip' && a == b.value;
-    }
-    if (typeof b === 'number') {
-        return a ? a.unit == 'dip' && a.value == b : false;
-    }
-    if (!a || !b) {
-        return false;
-    }
-    return a.value == b.value && a.unit == b.unit;
-}
-function convertToStringCommon(length) {
-    if (length == 'auto' || isCssWideKeyword(length)) {
-        return 'auto';
-    }
-    if (typeof length === 'number') {
-        return length.toString();
-    }
-    let val = length.value;
-    if (length.unit === '%') {
-        val *= 100;
-    }
-    return val + length.unit;
-}
-function toDevicePixelsCommon(length, auto = Number.NaN, parentAvailableWidth = Number.NaN) {
-    if (length == 'auto' || isCssWideKeyword(length)) {
-        return auto;
-    }
-    if (typeof length === 'number') {
-        return layout.round(layout.toDevicePixels(length));
-    }
-    if (!length) {
-        return auto;
-    }
-    // @ts-ignore
-    switch (length.unit) {
-        case 'px':
-            // @ts-ignore
-            return layout.round(length.value);
-        case '%':
-            // @ts-ignore
-            return layout.round(parentAvailableWidth * length.value);
-        case 'dip':
-        default:
-            // @ts-ignore
-            return layout.round(layout.toDevicePixels(length.value));
-    }
-}
 function isNonNegativeFiniteNumber(value) {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
@@ -143,6 +81,26 @@ function parseShorthandPositioning(value) {
         left: left,
     };
 }
+function parseShorthandGap(value) {
+    const arr = value.split(/[ ,]+/);
+    let row;
+    let col;
+    if (arr.length === 1) {
+        row = arr[0];
+        col = arr[0];
+    }
+    else if (arr.length === 2) {
+        row = arr[0];
+        col = arr[1];
+    }
+    else {
+        throw new Error('Expected 1 or 2 parameters. Actual: ' + value);
+    }
+    return {
+        row,
+        col,
+    };
+}
 function parseBorderColorPositioning(value) {
     if (value.indexOf('rgb') === 0 || value.indexOf('hsl') === 0) {
         return {
@@ -224,6 +182,29 @@ function convertToPaddings(value) {
         ];
     }
 }
+function convertToGaps(value) {
+    let rowGap;
+    let colGap;
+    if (typeof value === 'string' && value !== 'auto') {
+        if (value.length) {
+            const gaps = parseShorthandGap(value);
+            rowGap = Length.parse(gaps.row);
+            colGap = Length.parse(gaps.col);
+        }
+        else {
+            rowGap = 0;
+            colGap = 0;
+        }
+    }
+    else {
+        rowGap = value;
+        colGap = value;
+    }
+    return [
+        [rowGapProperty, rowGap],
+        [columnGapProperty, colGap],
+    ];
+}
 function convertToTransform(value) {
     if (value === unsetValue) {
         value = 'none';
@@ -243,7 +224,7 @@ export const minWidthProperty = new CssProperty({
     name: 'minWidth',
     cssName: 'min-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
@@ -261,7 +242,7 @@ export const minHeightProperty = new CssProperty({
     name: 'minHeight',
     cssName: 'min-height',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
@@ -283,7 +264,7 @@ export const widthProperty = new CssAnimationProperty({
     // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
     //       on the animation property, so fake it here. x_x
     valueChanged: (target, oldValue, newValue) => {
-        if (global.isIOS) {
+        if (__APPLE__) {
             const view = target.viewRef.get();
             if (view) {
                 view.requestLayout();
@@ -301,7 +282,7 @@ export const heightProperty = new CssAnimationProperty({
     // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
     //       on the animation property, so fake it here. -_-
     valueChanged: (target, oldValue, newValue) => {
-        if (global.isIOS) {
+        if (__APPLE__) {
             const view = target.viewRef.get();
             if (view) {
                 view.requestLayout();
@@ -311,6 +292,30 @@ export const heightProperty = new CssAnimationProperty({
     valueConverter: PercentLength.parse,
 });
 heightProperty.register(Style);
+export const maxWidthProperty = new CssProperty({
+    name: 'maxWidth',
+    cssName: 'max-width',
+    // 'auto' means unconstrained (no maximum).
+    defaultValue: 'auto',
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    // The effective pixel value is resolved at measure time in
+    // View._updateEffectiveLayoutValues (percent needs the parent size), so we
+    // only need to trigger a relayout here. On iOS that is done via affectsLayout;
+    // on Android the native setNative handler applies it and re-measures.
+    valueConverter: PercentLength.parse,
+});
+maxWidthProperty.register(Style);
+export const maxHeightProperty = new CssProperty({
+    name: 'maxHeight',
+    cssName: 'max-height',
+    // 'auto' means unconstrained (no maximum).
+    defaultValue: 'auto',
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    valueConverter: PercentLength.parse,
+});
+maxHeightProperty.register(Style);
 const marginProperty = new ShorthandProperty({
     name: 'margin',
     cssName: 'margin',
@@ -327,7 +332,7 @@ export const marginLeftProperty = new CssProperty({
     name: 'marginLeft',
     cssName: 'margin-left',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
@@ -336,7 +341,7 @@ export const marginRightProperty = new CssProperty({
     name: 'marginRight',
     cssName: 'margin-right',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
@@ -345,7 +350,7 @@ export const marginTopProperty = new CssProperty({
     name: 'marginTop',
     cssName: 'margin-top',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
@@ -354,11 +359,16 @@ export const marginBottomProperty = new CssProperty({
     name: 'marginBottom',
     cssName: 'margin-bottom',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
 marginBottomProperty.register(Style);
+export const paddingInternalProperty = new CssProperty({
+    name: 'paddingInternal',
+    cssName: '_paddingInternal',
+});
+paddingInternalProperty.register(Style);
 const paddingProperty = new ShorthandProperty({
     name: 'padding',
     cssName: 'padding',
@@ -375,12 +385,13 @@ export const paddingLeftProperty = new CssProperty({
     name: 'paddingLeft',
     cssName: 'padding-left',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingLeft = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingLeft = paddingLeftProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -393,12 +404,13 @@ export const paddingRightProperty = new CssProperty({
     name: 'paddingRight',
     cssName: 'padding-right',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingRight = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingRight = paddingRightProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -411,12 +423,13 @@ export const paddingTopProperty = new CssProperty({
     name: 'paddingTop',
     cssName: 'padding-top',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingTop = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingTop = paddingTopProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -429,12 +442,13 @@ export const paddingBottomProperty = new CssProperty({
     name: 'paddingBottom',
     cssName: 'padding-bottom',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingBottom = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingBottom = paddingBottomProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -443,11 +457,59 @@ export const paddingBottomProperty = new CssProperty({
     valueConverter: Length.parse,
 });
 paddingBottomProperty.register(Style);
+const gapProperty = new ShorthandProperty({
+    name: 'gap',
+    cssName: 'gap',
+    getter: function () {
+        if (Length.equals(this.rowGap, this.columnGap)) {
+            return this.rowGap;
+        }
+        return `${Length.convertToString(this.rowGap)} ${PercentLength.convertToString(this.columnGap)}`;
+    },
+    converter: convertToGaps,
+});
+gapProperty.register(Style);
+export const rowGapProperty = new CssProperty({
+    name: 'rowGap',
+    cssName: 'row-gap',
+    defaultValue: 0,
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    valueConverter: Length.parse,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectiveRowGap = Length.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+        }
+    },
+});
+rowGapProperty.register(Style);
+export const columnGapProperty = new CssProperty({
+    name: 'columnGap',
+    cssName: 'column-gap',
+    defaultValue: 0,
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    valueConverter: Length.parse,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectiveColumnGap = Length.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+        }
+    },
+});
+columnGapProperty.register(Style);
 export const horizontalAlignmentProperty = new CssProperty({
     name: 'horizontalAlignment',
     cssName: 'horizontal-align',
     defaultValue: CoreTypes.HorizontalAlignment.stretch,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueConverter: CoreTypes.HorizontalAlignment.parse,
 });
 horizontalAlignmentProperty.register(Style);
@@ -455,7 +517,7 @@ export const verticalAlignmentProperty = new CssProperty({
     name: 'verticalAlignment',
     cssName: 'vertical-align',
     defaultValue: CoreTypes.VerticalAlignmentText.stretch,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueConverter: CoreTypes.VerticalAlignmentText.parse,
 });
 verticalAlignmentProperty.register(Style);
@@ -730,7 +792,7 @@ export const borderTopWidthProperty = new CssProperty({
     name: 'borderTopWidth',
     cssName: 'border-top-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -753,7 +815,7 @@ export const borderRightWidthProperty = new CssProperty({
     name: 'borderRightWidth',
     cssName: 'border-right-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -776,7 +838,7 @@ export const borderBottomWidthProperty = new CssProperty({
     name: 'borderBottomWidth',
     cssName: 'border-bottom-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -799,7 +861,7 @@ export const borderLeftWidthProperty = new CssProperty({
     name: 'borderLeftWidth',
     cssName: 'border-left-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -853,7 +915,7 @@ export const borderTopLeftRadiusProperty = new CssProperty({
     name: 'borderTopLeftRadius',
     cssName: 'border-top-left-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -869,7 +931,7 @@ export const borderTopRightRadiusProperty = new CssProperty({
     name: 'borderTopRightRadius',
     cssName: 'border-top-right-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -885,7 +947,7 @@ export const borderBottomRightRadiusProperty = new CssProperty({
     name: 'borderBottomRightRadius',
     cssName: 'border-bottom-right-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -901,7 +963,7 @@ export const borderBottomLeftRadiusProperty = new CssProperty({
     name: 'borderBottomLeftRadius',
     cssName: 'border-bottom-left-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -1011,7 +1073,7 @@ fontInternalProperty.register(Style);
 export const fontFamilyProperty = new InheritedCssProperty({
     name: 'fontFamily',
     cssName: 'font-family',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontFamily !== newValue) {
@@ -1031,7 +1093,7 @@ fontScaleInternalProperty.register(Style);
 export const fontSizeProperty = new InheritedCssProperty({
     name: 'fontSize',
     cssName: 'font-size',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         if (target.viewRef['handleFontSize'] === true) {
             return;
@@ -1048,7 +1110,7 @@ fontSizeProperty.register(Style);
 export const fontStyleProperty = new InheritedCssProperty({
     name: 'fontStyle',
     cssName: 'font-style',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     defaultValue: FontStyle.NORMAL,
     valueConverter: FontStyle.parse,
     valueChanged: (target, oldValue, newValue) => {
@@ -1063,7 +1125,7 @@ fontStyleProperty.register(Style);
 export const fontWeightProperty = new InheritedCssProperty({
     name: 'fontWeight',
     cssName: 'font-weight',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     defaultValue: FontWeight.NORMAL,
     valueConverter: FontWeight.parse,
     valueChanged: (target, oldValue, newValue) => {
@@ -1106,7 +1168,7 @@ fontProperty.register(Style);
 export const fontVariationSettingsProperty = new InheritedCssProperty({
     name: 'fontVariationSettings',
     cssName: 'font-variation-settings',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontVariationSettings !== newValue) {
@@ -1123,7 +1185,7 @@ export const visibilityProperty = new CssProperty({
     name: 'visibility',
     cssName: 'visibility',
     defaultValue: CoreTypes.Visibility.visible,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueConverter: CoreTypes.Visibility.parse,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();