@triniwiz/nativescript-masonkit 1.0.0-beta.91 → 1.0.0-beta.93

package/common.d.ts

@@ -1,10 +1,10 @@
 import { AddChildFromBuilder, CustomLayoutView, View as NSView, ViewBase as NSViewBase, Property, widthProperty, heightProperty, CoreTypes, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty } from '@nativescript/core';
 import { Display, Gap, GridAutoFlow, JustifyItems, JustifySelf, Length, LengthAuto, Overflow, Position, BoxSizing, VerticalAlign, FlexDirection, Float, Clear } from '.';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
-import { fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
+import { fontInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
 import { Style } from './style';
 import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty } from './properties';
-import { isMasonView_, isTextChild_, isText_, native_, pseudoStyles_ } from './symbols';
+import { isMasonView_, isTextChild_, isText_, native_, pseudoStyles_, eventType_ } from './symbols';
 import { TextNode } from './text-node';
 export interface MasonChild extends ViewBase {
 }
@@ -69,6 +69,14 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     [textProperty.setNative]: (value: string) => void;
     [filterProperty.setNative]: (value: any) => void;
     [borderRadiusProperty.setNative]: (value: any) => void;
+    [borderTopLeftRadiusProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderTopRightRadiusProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderBottomRightRadiusProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderBottomLeftRadiusProperty.setNative]: (value: CoreTypes.LengthType) => void;
+    [borderTopColorProperty.setNative]: (value: any) => void;
+    [borderRightColorProperty.setNative]: (value: any) => void;
+    [borderBottomColorProperty.setNative]: (value: any) => void;
+    [borderLeftColorProperty.setNative]: (value: any) => void;
     [borderProperty.setNative]: (value: any) => void;
     [borderLeftProperty.setNative]: (value: any) => void;
     [borderTopProperty.setNative]: (value: any) => void;
@@ -266,6 +274,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     set filter(value: string);
     set borderRadius(value: string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit);
     get borderRadius(): string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit;
+    private _borderRadiusCorner;
+    private _borderSideColor;
     set border(value: string);
     get border(): string;
     set background(value: string);
@@ -356,6 +366,7 @@ export declare class ImageBase extends ViewBase {
 }
 export declare class Event {
     [native_]: any;
+    [eventType_]: string | undefined;
     get bubbles(): boolean;
     get cancelable(): boolean;
     get isComposing(): any;
@@ -368,7 +379,9 @@ export declare class Event {
     stopPropagation(): void;
     preventDefault(): void;
     get type(): string;
-    set type(_: string);
+    set type(value: string);
+    get button(): number;
+    set button(_: number);
     get target(): any;
     set target(_: any);
     set currentTarget(_: any);

package/common.js

@@ -3,11 +3,14 @@ var _a, _b, _c, _d;
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { CustomLayoutView, View as NSView, getViewById, Property, widthProperty, heightProperty, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, textDecorationProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, backgroundColorProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, paddingBottomProperty, zIndexProperty, PseudoClassHandler } from '@nativescript/core';
 import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexShrinkProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
-import { fontInternalProperty } from '@nativescript/core/ui/styling/style-properties';
+// The per-corner radius and per-side colour longhands core's `border-radius`
+// / `border-color` shorthands expand into. They live in the styling module
+// rather than core's root export, unlike the border *width* longhands above.
+import { fontInternalProperty, borderTopLeftRadiusProperty, borderTopRightRadiusProperty, borderBottomRightRadiusProperty, borderBottomLeftRadiusProperty, borderTopColorProperty, borderRightColorProperty, borderBottomColorProperty, borderLeftColorProperty } from '@nativescript/core/ui/styling/style-properties';
 import { _forceStyleUpdate } from './utils';
 import { Style } from './style';
 import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderProperty, borderLeftProperty, borderTopProperty, borderRightProperty, borderBottomProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, } from './properties';
-import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_ } from './symbols';
+import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, borderRadiusCorners_, borderSideColors_, eventType_ } from './symbols';
 import { Tree } from './tree';
 import { TextNode } from './text-node';
 import { compile } from './pseudo';
@@ -151,6 +154,18 @@ function nativeOwnerFor(nativeView) {
 function nativeViewFor(owner) {
     return owner?.nativeViewProtected ?? owner?.[native_];
 }
+function masonNativeEventName(eventName) {
+    switch (eventName) {
+        case 'tap':
+        case 'click':
+            return 'click';
+        case 'input':
+        case 'change':
+            return eventName;
+        default:
+            return null;
+    }
+}
 function findOwnerForNativeView(owner, nativeView) {
     if (!owner || !nativeView)
         return null;
@@ -176,6 +191,36 @@ export const textContentProperty = new Property({
 function toCamelCase(prop) {
     return prop.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 }
+/** A core `Length` (number of dip, or `{ value, unit }`) as a CSS string. */
+function lengthToCssString(value) {
+    if (value == null) {
+        return '0';
+    }
+    if (typeof value === 'number') {
+        return `${value}px`;
+    }
+    const unit = value.unit;
+    const amount = value.value ?? 0;
+    return unit === '%' ? `${amount * 100}%` : `${amount}px`;
+}
+/**
+ * A core colour value as a CSS string. Duck-typed rather than
+ * `instanceof Color` on purpose: a `Color` can arrive from a different
+ * `@nativescript/core` copy, where `instanceof` fails.
+ */
+function colorToCssString(value) {
+    if (value == null) {
+        return 'transparent';
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    const hex = value.hex;
+    if (typeof hex === 'string') {
+        return hex;
+    }
+    return String(value);
+}
 export class ViewBase extends CustomLayoutView {
     /**
      * Enable or disable CSS Preflight (web-normalised / Tailwind-like) defaults
@@ -369,14 +414,14 @@ export class ViewBase extends CustomLayoutView {
         //@ts-ignore
         if (this._view) {
             if (__ANDROID__) {
-                if (!id) {
+                if (id) {
                     //@ts-ignore
                     const removed = this._view.removeEventListener(arg, id);
                     callback['mason:event:id'] = undefined;
                 }
             }
             if (__APPLE__) {
-                if (!id) {
+                if (id) {
                     //@ts-ignore
                     const removed = this._view.mason_removeEventListenerId(arg, id);
                     callback['mason:event:id'] = undefined;
@@ -420,17 +465,17 @@ export class ViewBase extends CustomLayoutView {
                 capture: thisArg,
             };
         }
-        super.addEventListener(arg, callback, thisArg);
         if (typeof arg !== 'string') {
+            super.addEventListener(arg, callback, thisArg);
             return;
         }
-        switch (arg) {
-            case 'input':
-            case 'change':
-            case 'click':
-                this._registerNativeEvent(arg, callback, thisArg);
-                break;
+        const nativeEventName = masonNativeEventName(arg);
+        if (nativeEventName) {
+            super.addEventListener(nativeEventName, callback, thisArg);
+            this._registerNativeEvent(nativeEventName, callback, thisArg);
+            return;
         }
+        super.addEventListener(arg, callback, thisArg);
     }
     removeEventListener(arg, callback, thisArg) {
         if (typeof thisArg === 'boolean') {
@@ -438,14 +483,15 @@ export class ViewBase extends CustomLayoutView {
                 capture: thisArg,
             };
         }
-        super.removeEventListener(arg, callback, thisArg);
-        switch (arg) {
-            case 'input':
-            case 'change':
-            case 'click':
-                this._unregisterNativeEvent(arg, callback, thisArg);
-                break;
+        if (typeof arg === 'string') {
+            const nativeEventName = masonNativeEventName(arg);
+            if (nativeEventName) {
+                super.removeEventListener(nativeEventName, callback, thisArg);
+                this._unregisterNativeEvent(nativeEventName, callback, thisArg);
+                return;
+            }
         }
+        super.removeEventListener(arg, callback, thisArg);
     }
     _applyPseudoClassStyles(pseudoClass, view, styles) {
         if (pseudoClass && styles && pseudoClass in styles) {
@@ -1042,7 +1088,21 @@ export class ViewBase extends CustomLayoutView {
             if (Array.isArray(frameworkEl.childNodes)) {
                 const rawChildNodes = frameworkEl.childNodes;
                 if (rawChildNodes.length === 0) {
-                    this.replaceChild({ [text_]: value }, 0);
+                    // No framework-tracked DOM child backs this text (e.g. a Label-like
+                    // element with plain `.text` set directly). Without a stable node to
+                    // key the reuse cache on, every write fell through to the "always
+                    // new" `replaceChild` string branch, orphaning a native TextNode
+                    // each call. Cache a synthetic node on `this` instead, so repeat
+                    // writes route through the same update-in-place path a real DOM
+                    // text node gets (and never touch `replaceChild`, which a host
+                    // framework's DOM shim may itself shadow).
+                    let node = this[emptyTextNode_];
+                    if (!node) {
+                        node = {};
+                        this[emptyTextNode_] = node;
+                    }
+                    node.text = value;
+                    this._updateTextNode(node, { type: this._children.length === 0 ? 'add' : 'replace', index: 0, isBreak: false });
                     return;
                 }
                 // Deduplicate nodes (some frameworks expose the same nodes via both
@@ -1146,6 +1206,73 @@ export class ViewBase extends CustomLayoutView {
             style.borderRadius = value;
         }
     }
+    // `border-radius` / `border-color` arriving as core's longhands.
+    //
+    // Core expands both shorthands into four longhands before a *stylesheet*
+    // declaration ever reaches a property (`_expandCssShorthand` in
+    // ui/styling/css-selector), so our own shorthand `setNative` above only
+    // ever fires for an inline `view.style.borderRadius = …`. A CSS class was
+    // silently doing nothing. Each longhand below records its corner/side and
+    // recomposes the whole shorthand string, which is the shape the native
+    // side parses anyway.
+    _borderRadiusCorner(corner, value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (!style) {
+            return;
+        }
+        let corners = this[borderRadiusCorners_];
+        if (!corners) {
+            corners = this[borderRadiusCorners_] = { tl: '0', tr: '0', br: '0', bl: '0' };
+        }
+        corners[corner] = lengthToCssString(value);
+        // @ts-ignore
+        style.borderRadius = `${corners.tl} ${corners.tr} ${corners.br} ${corners.bl}`;
+    }
+    [borderTopLeftRadiusProperty.setNative](value) {
+        this._borderRadiusCorner('tl', value);
+    }
+    [borderTopRightRadiusProperty.setNative](value) {
+        this._borderRadiusCorner('tr', value);
+    }
+    [borderBottomRightRadiusProperty.setNative](value) {
+        this._borderRadiusCorner('br', value);
+    }
+    [borderBottomLeftRadiusProperty.setNative](value) {
+        this._borderRadiusCorner('bl', value);
+    }
+    _borderSideColor(side, value) {
+        let sides = this[borderSideColors_];
+        if (!sides) {
+            sides = this[borderSideColors_] = { t: 'transparent', r: 'transparent', b: 'transparent', l: 'transparent' };
+        }
+        sides[side] = colorToCssString(value);
+        const shorthand = `${sides.t} ${sides.r} ${sides.b} ${sides.l}`;
+        if (__ANDROID__) {
+            // @ts-ignore
+            org.nativescript.mason.masonkit.NodeHelper.getShared().setBorderColor(this.nativeView, shorthand);
+        }
+        else if (__APPLE__) {
+            // @ts-ignore
+            this.nativeView?.style?.setBorderColor(shorthand);
+        }
+        else if (__WINDOWS__) {
+            // @ts-ignore
+            this._styleHelper?.setBorderColor(shorthand);
+        }
+    }
+    [borderTopColorProperty.setNative](value) {
+        this._borderSideColor('t', value);
+    }
+    [borderRightColorProperty.setNative](value) {
+        this._borderSideColor('r', value);
+    }
+    [borderBottomColorProperty.setNative](value) {
+        this._borderSideColor('b', value);
+    }
+    [borderLeftColorProperty.setNative](value) {
+        this._borderSideColor('l', value);
+    }
     set border(value) {
         this.style.border = value;
     }
@@ -2231,13 +2358,10 @@ export class Event {
         return false;
     }
     get currentTarget() {
-        if (__ANDROID__) {
-            return this[native_]?.getCurrentTarget();
-        }
-        if (__APPLE__) {
-            return this[native_]?.currentTarget;
-        }
-        return false;
+        // DOM semantics: the element the listener is attached to, not the raw
+        // native view. `_target` is set to that same owner at every dispatch
+        // site (_registerNativeEvent), so reuse it here.
+        return this['_target'];
     }
     stopImmediatePropagation() {
         if (__ANDROID__) {
@@ -2263,13 +2387,31 @@ export class Event {
             return this[native_]?.preventDefault();
         }
     }
+    // Writable on purpose, unlike the DOM's read-only `Event.type`. Aliases
+    // (e.g. 'tap') are folded onto the native name ('click') before the event
+    // reaches JS; a host framework's DOM shim relabels it back to the name the
+    // listener was registered under and re-dispatches, which needs a working
+    // setter or the relabel is silently dropped and the listener never fires.
     get type() {
+        const override = this[eventType_];
+        if (override !== undefined) {
+            return override;
+        }
         if (__ANDROID__) {
             return this[native_]?.getType();
         }
         return this[native_]?.type;
     }
-    set type(_) { }
+    set type(value) {
+        this[eventType_] = value;
+    }
+    // DOM MouseEvent.button: 0 = primary button. Mason's touch-originated
+    // click has no native concept of mouse buttons, but callers checking
+    // `e.button === 0` (e.g. a router's <Link> onClick guard) expect this.
+    get button() {
+        return 0;
+    }
+    set button(_) { }
     get target() {
         return this['_target'];
     }