@triniwiz/nativescript-masonkit 1.0.0-alpha.0 → 1.0.0-alpha.10

package/index.d.ts

@@ -1,16 +1,19 @@
 import { CoreTypes } from '@nativescript/core';
 
-import { TSCViewBase } from './common';
+import { TextBase, ViewBase } from './common';
+import { LengthPercentage } from '@nativescript/core/css/parser';
 
-export type Length = CoreTypes.dip | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit;
+export type Length = CoreTypes.dip | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit;
 
-export type LengthAuto = CoreTypes.dip | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | 'auto';
+export type LengthAuto = CoreTypes.dip | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit | 'auto';
 
 export type SizeLength = { width: LengthType; height: LengthType };
 
 export type Position = 'absolute' | 'relative';
 
-export type Display = 'none' | 'flex' | 'grid';
+export type Display = 'none' | 'flex' | 'grid' | 'block';
+
+export type Overflow = 'visible' | 'hidden' | 'scroll';
 
 export type FlexWrap = 'no-wrap' | 'wrap' | 'wrap-reverse';
 
@@ -32,17 +35,101 @@ export type JustifySelf = AlignSelf;
 
 export type JustifyContent = AlignContent;
 
-export type GridAutoFlow = 'row' | 'column' | 'row-dense' | 'column-dense';
-
-export { applyMixins } from './helpers';
-
-export class TSCView extends TSCViewBase {}
-
-export class Grid extends TSCView {}
-
-export class Flex extends TSCView {}
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense' | 'dense';
+
+export class View extends ViewBase {
+  display: Display;
+  position: Position;
+  flexDirection: FlexDirection;
+  flexWrap: FlexWrap;
+  flex: string | 'auto' | 'none' | number | 'initial';
+  flexFlow: string;
+  width: LengthAuto;
+  height: LengthAuto;
+  maxWidth: LengthAuto;
+  maxHeight: LengthAuto;
+  left: Length;
+  right: Length;
+  top: Length;
+  bottom: Length;
+  gridGap: Gap;
+  gap: Gap;
+  rowGap: Length;
+  columnGap: Length;
+  aspectRatio: number;
+  flexBasis: Length;
+  alignItems: AlignItems;
+  alignSelf: AlignSelf;
+  alignContent: AlignContent;
+  justifyItems: JustifyItems;
+  justifySelf: JustifySelf;
+  justifyContent: JustifyContent;
+  gridAutoRows: string;
+  gridAutoColumns: string;
+  gridAutoFlow: GridAutoFlow;
+  gridRowGap: Gap;
+  gridColumnGap: Gap;
+  gridArea: string;
+  gridColumn: string;
+  gridColumnStart: string;
+  gridColumnEnd: string;
+  gridRow: string;
+  gridRowStart: string;
+  gridRowEnd: string;
+  gridTemplateRows: string;
+  gridTemplateColumns: string;
+  overflow: Overflow;
+  overflowX: Overflow;
+  overflowY: Overflow;
+  scrollBarWidth: number | CoreTypes.LengthType;
+}
 
-export class Container extends TSCView {}
+export class Text extends TextBase {
+  display: Display;
+  position: Position;
+  flexDirection: FlexDirection;
+  flexWrap: FlexWrap;
+  flex: string | 'auto' | 'none' | number | 'initial';
+  flexFlow: string;
+  width: LengthAuto;
+  height: LengthAuto;
+  maxWidth: LengthAuto;
+  maxHeight: LengthAuto;
+  left: Length;
+  right: Length;
+  top: Length;
+  bottom: Length;
+  gridGap: Gap;
+  gap: Gap;
+  rowGap: Length;
+  columnGap: Length;
+  aspectRatio: number;
+  flexBasis: Length;
+  alignItems: AlignItems;
+  alignSelf: AlignSelf;
+  alignContent: AlignContent;
+  justifyItems: JustifyItems;
+  justifySelf: JustifySelf;
+  justifyContent: JustifyContent;
+  gridAutoRows: string;
+  gridAutoColumns: string;
+  gridAutoFlow: GridAutoFlow;
+  gridRowGap: Gap;
+  gridColumnGap: Gap;
+  gridArea: string;
+  gridColumn: string;
+  gridColumnStart: string;
+  gridColumnEnd: string;
+  gridRow: string;
+  gridRowStart: string;
+  gridRowEnd: string;
+  gridTemplateRows: string;
+  gridTemplateColumns: string;
+  overflow: Overflow;
+  overflowX: Overflow;
+  overflowY: Overflow;
+  scrollBarWidth: number | CoreTypes.LengthType;
+}
 
 declare module '@nativescript/core/ui/styling/style' {
   interface Style {
@@ -50,10 +137,12 @@ declare module '@nativescript/core/ui/styling/style' {
     position: Position;
     flexDirection: FlexDirection;
     flexWrap: FlexWrap;
-    width: Length;
-    height: Length;
-    maxWidth: Length;
-    maxHeight: Length;
+    flex: string | 'auto' | 'none' | number | 'initial';
+    flexFlow: string;
+    width: LengthPercentage | string | number;
+    height: LengthPercentage | string | number;
+    maxWidth: LengthPercentage | string | number;
+    maxHeight: LengthPercentage | string | number;
     left: Length;
     right: Length;
     top: Length;
@@ -63,6 +152,7 @@ declare module '@nativescript/core/ui/styling/style' {
     rowGap: Length;
     columnGap: Length;
     aspectRatio: number;
+    flexBasis: LengthPercentage | string | number;
     alignItems: AlignItems;
     alignSelf: AlignSelf;
     alignContent: AlignContent;
@@ -83,5 +173,9 @@ declare module '@nativescript/core/ui/styling/style' {
     gridRowEnd: string;
     gridTemplateRows: string;
     gridTemplateColumns: string;
+    overflow: Overflow;
+    overflowX: Overflow;
+    overflowY: Overflow;
+    scrollBarWidth: number | CoreTypes.LengthType;
   }
 }

package/index.ios.d.ts

@@ -1,27 +1,48 @@
-import { ViewBase } from '@nativescript/core';
-import { TSCViewBase } from './common';
-export declare class TSCView extends TSCViewBase {
-    __masonStylePtr: number;
-    get _masonStylePtr(): number;
-    __masonNodePtr: number;
-    get _masonNodePtr(): number;
-    __masonPtr: number;
-    get _masonPtr(): number;
+import { Color } from '@nativescript/core';
+import { MasonChild, style_, TextBase, ViewBase } from './common';
+export declare class Tree {
+    _base: NSCMason;
+    private static _tree;
+    constructor();
+    static get instance(): Tree;
+    get native(): NSCMason;
+    createView(): MasonUIView;
+    createTextView(): MasonText;
+}
+export declare class View extends ViewBase {
+    [style_]: any;
+    private _view;
+    constructor();
+    get _styleHelper(): any;
     _hasNativeView: boolean;
-    createNativeView(): UIView;
+    _inBatch: boolean;
+    createNativeView(): MasonUIView;
     disposeNativeView(): void;
-    get ios(): UIView;
+    get ios(): MasonUIView;
     onLayout(left: number, top: number, right: number, bottom: number): void;
     onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
-    layoutNativeView(): void;
-    _addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean;
-    _removeViewFromNativeVisualTree(view: ViewBase): void;
-}
-export declare class Grid extends TSCView {
-    createNativeView(): any;
-}
-export declare class Flex extends TSCView {
-    createNativeView(): any;
+    _setNativeViewFrame(nativeView: any, frame: CGRect): void;
+    _addViewToNativeVisualTree(child: MasonChild, atIndex?: number): boolean;
+    _removeViewFromNativeVisualTree(view: MasonChild): void;
 }
-export declare class Container extends TSCView {
+export declare class Text extends TextBase {
+    [style_]: any;
+    _hasNativeView: boolean;
+    _inBatch: boolean;
+    _isText: boolean;
+    private _view;
+    constructor();
+    get ios(): MasonText;
+    get _styleHelper(): any;
+    createNativeView(): MasonText;
+    get text(): string;
+    set text(value: string);
+    set backgroundColor(value: Color | number);
+    get backgroundColor(): Color | number;
+    onLayout(left: number, top: number, right: number, bottom: number): void;
+    onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
+    _addViewToNativeVisualTree(child: MasonChild & {
+        text?: string;
+    }, atIndex?: number): boolean;
+    _setNativeViewFrame(nativeView: any, frame: CGRect): void;
 }

package/index.ios.js

@@ -1,124 +1,356 @@
-import { Utils, View } from '@nativescript/core';
-import { TSCViewBase } from './common';
-export class TSCView extends TSCViewBase {
+var _a;
+import { Color, colorProperty, Utils } from '@nativescript/core';
+import { Style } from './style';
+import { style_, TextBase, ViewBase, textWrapProperty } from './common';
+function parseLength(length, parent = 0) {
+    switch (length.unit) {
+        case '%':
+            return length.value * parent;
+        case 'dip':
+            return Utils.layout.toDevicePixels(length.value);
+        case 'px':
+            return length.value;
+    }
+}
+export class Tree {
     constructor() {
-        super(...arguments);
-        this.__masonStylePtr = 0;
-        this.__masonNodePtr = 0;
-        this.__masonPtr = 0;
-        this._hasNativeView = false;
+        this._base = NSCMason.shared;
     }
-    get _masonStylePtr() {
-        if (this.__masonStylePtr === 0) {
-            this.__masonStylePtr = String(this.ios?.masonStylePtr ?? 0); // cast as string for now
-        }
-        return this.__masonStylePtr;
+    static get instance() {
+        return Tree._tree;
     }
-    get _masonNodePtr() {
-        if (this.__masonNodePtr === 0) {
-            this.__masonNodePtr = String(this.ios?.masonNodePtr ?? 0); // cast as string for now
-        }
-        return this.__masonNodePtr;
+    get native() {
+        return this._base;
+    }
+    createView() {
+        return this.native.createView();
     }
-    get _masonPtr() {
-        if (this.__masonPtr === 0) {
-            this.__masonPtr = String(UIView.masonPtr ?? 0); // cast as string for now
+    createTextView() {
+        return this.native.createTextView();
+    }
+}
+_a = Tree;
+(() => {
+    _a._tree = new Tree();
+})();
+export class View extends ViewBase {
+    constructor() {
+        super();
+        this._hasNativeView = false;
+        this._inBatch = false;
+        const view = Tree.instance.createView();
+        this._hasNativeView = true;
+        this._view = view;
+    }
+    get _styleHelper() {
+        if (this[style_] === undefined) {
+            this[style_] = Style.fromView(this, this._view);
         }
-        return this.__masonPtr;
+        return this[style_];
     }
     createNativeView() {
-        this._hasNativeView = true;
-        const view = UIView.alloc().initWithFrame(CGRectZero);
-        view.mason.isEnabled = true;
-        return view;
+        return this._view;
     }
     disposeNativeView() {
         this._hasNativeView = false;
         super.disposeNativeView();
     }
-    //@ts-ignore
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     get ios() {
-        return this.nativeViewProtected;
+        return this._view;
     }
     onLayout(left, top, right, bottom) {
         super.onLayout(left, top, right, bottom);
-        const nativeView = this.nativeView;
-        if (nativeView) {
-            this.eachLayoutChild((child) => {
-                const layout = child.ios.mason.layout();
-                child.setMeasuredDimension(layout.width, layout.height);
-                View.layoutChild(this, child, layout.x, layout.y, layout.width, layout.height);
-                return true;
-            });
+        let layout = this._view.node.layoutCache ?? this._view.node.layout();
+        const children = layout.children;
+        let i = 0;
+        for (const child of this._children) {
+            layout = children.objectAtIndex(i);
+            const x = layout.x;
+            const y = layout.y;
+            const width = x + layout.width;
+            const height = y + layout.height;
+            View.layoutChild(this, child, x, y, width, height);
+            i++;
         }
     }
     onMeasure(widthMeasureSpec, heightMeasureSpec) {
-        const nativeView = this.nativeView;
+        const nativeView = this._view;
         if (nativeView) {
-            const width = Utils.layout.getMeasureSpecSize(widthMeasureSpec);
-            const height = Utils.layout.getMeasureSpecSize(heightMeasureSpec);
-            if (!this._masonParent) {
-                this.ios.setSize(width, height);
-            }
+            const specWidth = Utils.layout.getMeasureSpecSize(widthMeasureSpec);
+            const widthMode = Utils.layout.getMeasureSpecMode(widthMeasureSpec);
+            const specHeight = Utils.layout.getMeasureSpecSize(heightMeasureSpec);
+            const heightMode = Utils.layout.getMeasureSpecMode(heightMeasureSpec);
             if (!this._isMasonChild) {
                 // only call compute on the parent
-                this.ios.mason.computeWithMaxContent();
+                if (this.width === 'auto' && this.height === 'auto') {
+                    this.ios.node.computeWithSize(specWidth, specHeight);
+                    const layout = this.ios.node.layout();
+                    const w = Utils.layout.makeMeasureSpec(layout.width, Utils.layout.EXACTLY);
+                    const h = Utils.layout.makeMeasureSpec(layout.height, Utils.layout.EXACTLY);
+                    this.eachLayoutChild((child) => {
+                        ViewBase.measureChild(this, child, child._currentWidthMeasureSpec, child._currentHeightMeasureSpec);
+                    });
+                    this.setMeasuredDimension(w, h);
+                    return;
+                }
+                else {
+                    this.ios.node.computeWithMaxContent();
+                    const layout = this.ios.node.layoutCache ?? this.ios.node.layout();
+                    const w = Utils.layout.makeMeasureSpec(layout.width, Utils.layout.EXACTLY);
+                    const h = Utils.layout.makeMeasureSpec(layout.height, Utils.layout.EXACTLY);
+                    this.setMeasuredDimension(w, h);
+                    this.eachLayoutChild((child) => {
+                        ViewBase.measureChild(this, child, child._currentWidthMeasureSpec, child._currentHeightMeasureSpec);
+                    });
+                }
+            }
+            else {
+                const layout = this.ios.node.layoutCache ?? this.ios.node.layout();
+                const w = Utils.layout.makeMeasureSpec(layout.width, Utils.layout.EXACTLY);
+                const h = Utils.layout.makeMeasureSpec(layout.height, Utils.layout.EXACTLY);
+                this.setMeasuredDimension(w, h);
+                this.eachLayoutChild((child) => {
+                    ViewBase.measureChild(this, child, child._currentWidthMeasureSpec, child._currentHeightMeasureSpec);
+                });
             }
-            const layout = this.ios.mason.layout();
-            this.setMeasuredDimension(layout.width, layout.height);
         }
     }
-    layoutNativeView() {
-        // noop
-    }
-    _addViewToNativeVisualTree(view, atIndex) {
-        const nativeView = this.nativeView;
-        view._masonParent = this;
-        super._addViewToNativeVisualTree(view, atIndex);
-        // if (nativeView && view.nativeViewProtected) {
-        //   console.log(view.nativeViewProtected);
-        //   nativeView.addSubview(view.nativeViewProtected);
-        // }
-        const index = atIndex ?? Infinity;
-        if (nativeView && view.nativeViewProtected) {
-            view['_hasNativeView'] = true;
-            view['_isMasonChild'] = true;
-            if (index >= nativeView.subviews.count) {
-                nativeView.addSubview(view.nativeViewProtected);
+    _setNativeViewFrame(nativeView, frame) {
+        nativeView.frame = frame;
+    }
+    _addViewToNativeVisualTree(child, atIndex = -1) {
+        const nativeView = this._view;
+        child._masonParent = this;
+        if (nativeView && child.nativeViewProtected) {
+            child._hasNativeView = true;
+            child._isMasonChild = true;
+            if (atIndex <= -1) {
+                nativeView.addView(child.nativeViewProtected);
             }
             else {
-                nativeView.insertSubviewAtIndex(view.nativeViewProtected, index);
+                nativeView.addViewAt(child.nativeViewProtected, atIndex);
             }
+            return true;
         }
-        return true;
+        return false;
     }
     _removeViewFromNativeVisualTree(view) {
-        const nativeView = this.viewController.view;
         view._masonParent = undefined;
         view._isMasonView = false;
         view._isMasonChild = false;
         super._removeViewFromNativeVisualTree(view);
-        if (view.nativeViewProtected) {
-            if (view.nativeViewProtected.superview === nativeView) {
-                view.nativeViewProtected.removeFromSuperview();
-            }
-        }
     }
 }
-export class Grid extends TSCView {
-    createNativeView() {
-        const view = UIView.createGridView();
+export class Text extends TextBase {
+    constructor() {
+        super();
+        this._hasNativeView = false;
+        this._inBatch = false;
+        this._isText = true;
+        const view = Tree.instance.createTextView();
+        this._view = view;
         this._hasNativeView = true;
-        return view;
+        this[style_] = Style.fromView(this, view, true);
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    get ios() {
+        return this._view;
+    }
+    get _styleHelper() {
+        if (this[style_] === undefined) {
+            this[style_] = Style.fromView(this, this._view);
+        }
+        return this[style_];
     }
-}
-export class Flex extends TSCView {
     createNativeView() {
-        const view = UIView.createFlexView();
-        this._hasNativeView = true;
-        return view;
+        return this._view;
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    get text() {
+        return this._view.text;
+    }
+    set text(value) {
+        const nativeView = this._view;
+        if (nativeView) {
+            nativeView.updateText(value);
+        }
+    }
+    // [textProperty.setNative](value) {
+    //   const nativeView = this._view;
+    //   console.log('text:setNative', value);
+    //   if (nativeView) {
+    //     nativeView.updateText(value);
+    //   }
+    // }
+    [colorProperty.setNative](value) {
+        switch (typeof value) {
+            case 'number':
+                this[style_].color = value;
+                this[style_].syncStyle(true);
+                break;
+            case 'string':
+                {
+                    this[style_].color = new Color(value).argb;
+                    this[style_].syncStyle(true);
+                }
+                break;
+            case 'object':
+                {
+                    this[style_].color = value.argb;
+                    this[style_].syncStyle(true);
+                }
+                break;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    set backgroundColor(value) {
+        switch (typeof value) {
+            case 'number':
+                this[style_].backgroundColor = value;
+                this[style_].syncStyle(true);
+                break;
+            case 'string':
+                {
+                    this[style_].backgroundColor = new Color(value).argb;
+                    this[style_].syncStyle(true);
+                }
+                break;
+            case 'object':
+                this[style_].backgroundColor = value.argb;
+                this[style_].syncStyle(true);
+                break;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    get backgroundColor() {
+        return new Color(this[style_].backgroundColor);
+    }
+    // [backgroundColorProperty.setNative](value) {
+    //   console.log('backgroundColorProperty.setNative', value);
+    //   // if (typeof value === 'number') {
+    //   //   this[style_].backgroundColor = value;
+    //   //   this[style_].syncStyle(true);
+    //   // } else if (value instanceof Color) {
+    //   //   this[style_].backgroundColor = value.argb;
+    //   //   this[style_].syncStyle(true);
+    //   // }
+    // }
+    [textWrapProperty.setNative](value) {
+        switch (value) {
+            case 'false':
+            case false:
+            case 'nowrap':
+                this[style_].textWrap = 0 /* TextWrap.NoWrap */;
+                this[style_].syncStyle(true);
+                break;
+            case true:
+            case 'true':
+            case 'wrap':
+                this[style_].textWrap = 1 /* TextWrap.Wrap */;
+                this[style_].syncStyle(true);
+                break;
+            case 'balance':
+                this[style_].textWrap = 2 /* TextWrap.Balance */;
+                this[style_].syncStyle(true);
+                break;
+        }
+    }
+    onLayout(left, top, right, bottom) {
+        super.onLayout(left, top, right, bottom);
+        let layout = this._view.node.layoutCache ?? this._view.node.layout();
+        const children = layout.children;
+        let i = 1;
+        for (const child of this._children) {
+            layout = children.objectAtIndex(i);
+            const x = layout.x;
+            const y = layout.y;
+            const width = layout.width;
+            const height = layout.height;
+            View.layoutChild(this, child, x, y, width, height);
+            i++;
+        }
+    }
+    onMeasure(widthMeasureSpec, heightMeasureSpec) {
+        const nativeView = this._view;
+        if (nativeView) {
+            const specWidth = Utils.layout.getMeasureSpecSize(widthMeasureSpec);
+            const widthMode = Utils.layout.getMeasureSpecMode(widthMeasureSpec);
+            const specHeight = Utils.layout.getMeasureSpecSize(heightMeasureSpec);
+            const heightMode = Utils.layout.getMeasureSpecMode(heightMeasureSpec);
+            if (!this._isMasonChild) {
+                // only call compute on the parent
+                if (this.width === 'auto' && this.height === 'auto') {
+                    this.ios.node.computeWithMaxContent();
+                    const layout = this.ios.node.layout();
+                    const w = Utils.layout.makeMeasureSpec(layout.width, Utils.layout.EXACTLY);
+                    const h = Utils.layout.makeMeasureSpec(layout.height, Utils.layout.EXACTLY);
+                    this.setMeasuredDimension(w, h);
+                    return;
+                }
+                else {
+                    let width;
+                    switch (typeof this.width) {
+                        case 'object': {
+                            const parent = this.parent;
+                            const mw = parent?.getMeasuredWidth?.() || Utils.layout.toDevicePixels(parent?.nativeView?.frame?.size?.width ?? 0);
+                            width = parseLength(this.width, mw);
+                            break;
+                        }
+                        case 'string':
+                            width = -2;
+                            break;
+                        case 'number':
+                            width = Utils.layout.toDevicePixels(this.width);
+                            break;
+                    }
+                    let height;
+                    switch (typeof this.height) {
+                        case 'object': {
+                            const parent = this.parent;
+                            const mh = parent?.getMeasuredHeight?.() || Utils.layout.toDevicePixels(parent?.nativeView?.frame?.size?.height ?? 0);
+                            height = parseLength(this.height, mh);
+                            break;
+                        }
+                        case 'string':
+                            height = -2;
+                            break;
+                        case 'number':
+                            height = Utils.layout.toDevicePixels(this.height);
+                            break;
+                    }
+                    this.ios.node.computeWithSize(width, height);
+                    const layout = this.ios.node.layout();
+                    const w = Utils.layout.makeMeasureSpec(layout.width, Utils.layout.EXACTLY);
+                    const h = Utils.layout.makeMeasureSpec(layout.height, Utils.layout.EXACTLY);
+                    this.setMeasuredDimension(w, h);
+                }
+            }
+            else {
+                const layout = nativeView.node.layoutCache ?? nativeView.node.layout();
+                const w = Utils.layout.makeMeasureSpec(layout.width, Utils.layout.EXACTLY);
+                const h = Utils.layout.makeMeasureSpec(layout.height, Utils.layout.EXACTLY);
+                this.setMeasuredDimension(w, h);
+            }
+        }
+    }
+    _addViewToNativeVisualTree(child, atIndex = -1) {
+        const nativeView = this._view;
+        if (nativeView && child.nativeViewProtected) {
+            child._hasNativeView = true;
+            child._isMasonChild = true;
+            nativeView.addView(child.nativeViewProtected, atIndex ?? -1);
+            return true;
+        }
+        return false;
+    }
+    _setNativeViewFrame(nativeView, frame) {
+        nativeView.frame = frame;
     }
-}
-export class Container extends TSCView {
 }
 //# sourceMappingURL=index.ios.js.map