search

nativescript-community / ui-material-components

Monorepo that contains all of the NativeScript Material Design plugins.
https://nativescript-community.github.io/ui-material-components/
Apache License 2.0
216 stars 80 forks source link

Issue v 4.0.12 with Nativescript 7 Angular 10 - MDTextField/View #179

Closed jwrascoe closed 4 years ago

jwrascoe commented 4 years ago

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

<MDTextField text="Hello World-1"></MDTextField>

The above works on Angular 8 / NativeScript 6 with the components made for that platform.

    "nativescript-material-textfield": "^3.2.19",
    "nativescript-material-textview": "^3.2.19",

   "tns-ios": {
      "version": "6.5.2"
    }

Maybe the BaseValueAccessor is not working somehow for Angular 10? https://github.com/nativescript-community/ui-material-components/blob/master/src/textfield/angular/textvalue-accessor.ts

farfromrefug commented 4 years ago

@jwrascoe totally possible. But I honestly don't know anything about angular :s can't really help, really sorry

jwrascoe commented 4 years ago

Wow.. Thank you for the speedy response... My HTML call didn't paste in correctly.. but its a simple call like this... `

` I have been hacking at it for a while to figure it out... I noticed that the demo is still set on 8 and that doesn't work.

I'll make a small Angular 10 example and attach it... maybe together we can figure it out?

farfromrefug commented 4 years ago

@jwrascoe so with that simple example the text does not show?

jwrascoe commented 4 years ago

@farfromrefug Correct.. its fine on tns run android but not on tns run ios Physical devices & emulators, it just doesn't show the initial data, it also doesn't work for reactive forms and & models

Im just about done with my small code example and I will post it up

farfromrefug commented 4 years ago

Ok will try and test it on non angular later on.

jwrascoe commented 4 years ago

@farfromrefug Attached is the demo.. npm i tns run android -- this will work and you will see the initial data tns run ios -- it will run but there will be no initial data set into the controls.

demo.zip

farfromrefug commented 4 years ago

@jwrascoe you must have shared the wrong demo. Not using any of my comps ;)

farfromrefug commented 4 years ago

@jwrascoe found the issue and fixed it! Will release. Be careful though it will be a major release for N 7. especially it will break N tabs component if you use it. If you use Tabs component then you need to migrate to @nativescript-community/ui-material-tabs

jwrascoe commented 4 years ago

@farfromrefug ... wow thank you! I will test it now.... as for the demo that I pushed up...yes, lol I pushed the wrong one... sorry.

jwrascoe commented 4 years ago

@farfromrefug it looks like there are build problems related to the tabs (which I dont use) the messages have been changing between 5.0.1 and 5.0.2 which you just published.. on 5.0.2 im gettting stuff like this... but will track things down to ensure I have not made a mistake.

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../../color' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 4:0-36 346:66-71 735:57-62 764:40-45 855:45-50 863:45-50 989:54-59
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../../image-source' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 5:0-49 694:25-36 698:21-32 701:21-32
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../../platform' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 6:0-40 17:16-22
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../../utils' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 7:0-69 16:21-36 504:22-28 505:26-32 506:23-29 507:27-33 695:16-29 725:94-100
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../core/view' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 8:0-47 120:8-17 194:31-40 508:30-34 509:31-35 543:28-37
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../frame' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 9:0-33 416:36-41 449:40-45 493:36-41 881:28-33
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../styling/font' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 10:0-39 686:50-54 825:58-62 985:49-53
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../tab-navigation-base/tab-navigation-base' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 11:0-133 722:29-44 889:5-26 927:5-18 930:5-18 937:8-29 939:5-21 942:5-21 944:8-29
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../tab-navigation-base/tab-strip' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 1:0-60 48:27-35
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve '../tab-navigation-base/tab-strip-item' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 2:0-69 46:47-59 458:46-58 462:46-58 577:56-68
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts

ERROR in ../node_modules/@nativescript/core/ui/index.js
Module not found: Error: Can't resolve './tabs-common' in '/Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui'
 @ ../node_modules/@nativescript/core/ui/index.js 12:0-96 15:0-30 15:0-30 387:26-34 946:5-25 949:5-25 954:5-36 961:5-36
 @ ../node_modules/@nativescript/core/bundle-entry-points.js
 @ ./main.ts
farfromrefug commented 4 years ago

@jwrascoe ok yes i must have broken something :P I ll fix it Can you share the content of /Users/jwrascoe/dev/tw-fix/a8/twbasic/node_modules/@nativescript/core/ui/index.js ?

jwrascoe commented 4 years ago 
import { TabStrip } from '../tab-navigation-base/tab-strip';
import { TabStripItem } from '../tab-navigation-base/tab-strip-item';
// Requires
import { Color } from '../../color';
import { ImageSource } from '../../image-source';
import { Device } from '../../platform';
import { iOSNativeHelper, isFontIconURI, layout } from '../../utils';
import { IOSHelper, View } from '../core/view';
import { Frame } from '../frame';
import { Font } from '../styling/font';
import { getIconSpecSize, itemsProperty, selectedIndexProperty, tabStripProperty } from '../tab-navigation-base/tab-navigation-base';
import { swipeEnabledProperty, TabsBase, iOSTabBarItemsAlignmentProperty } from './tabs-common';
// TODO
// import { profile } from "../../profiling";
export * from './tabs-common';
const majorVersion = iOSNativeHelper.MajorVersion;
const isPhone = Device.deviceType === 'Phone';
// Equivalent to dispatch_async(dispatch_get_main_queue(...)) call
const invokeOnRunLoop = (function () {
    const runloop = CFRunLoopGetMain();
    return (action) => {
        CFRunLoopPerformBlock(runloop, kCFRunLoopDefaultMode, action);
        CFRunLoopWakeUp(runloop);
    };
})();
var MDCTabBarViewDelegateImpl = /** @class */ (function (_super) {
    __extends(MDCTabBarViewDelegateImpl, _super);
    function MDCTabBarViewDelegateImpl() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MDCTabBarViewDelegateImpl.initWithOwner = function (owner) {
        var delegate = MDCTabBarViewDelegateImpl.new();
        delegate._owner = owner;
        return delegate;
    };
    MDCTabBarViewDelegateImpl.prototype.tabBarShouldSelectItem = function (tabBar, item) {
        var owner = this._owner.get();
        var shouldSelectItem = owner._canSelectItem;
        var selectedIndex = owner.tabBarItems.indexOf(item);
        if (owner.selectedIndex !== selectedIndex) {
            owner._canSelectItem = false;
        }
        var tabStrip = owner.tabStrip;
        var tabStripItems = tabStrip && tabStrip.items;
        if (tabStripItems && tabStripItems[selectedIndex]) {
            tabStripItems[selectedIndex]._emit(TabStripItem.tapEvent);
            tabStrip.notify({
                eventName: TabStrip.itemTapEvent,
                object: tabStrip,
                index: selectedIndex,
            });
        }
        return shouldSelectItem;
    };
    MDCTabBarViewDelegateImpl.prototype.tabBarDidSelectItem = function (tabBar, selectedItem) {
        var owner = this._owner.get();
        var tabBarItems = owner.tabBarItems;
        var selectedIndex = tabBarItems.indexOf(selectedItem);
        owner.selectedIndex = selectedIndex;
    };
    MDCTabBarViewDelegateImpl.ObjCProtocols = [MDCTabBarViewDelegate];
    return MDCTabBarViewDelegateImpl;
}(NSObject));
var BackgroundIndicatorTemplate = /** @class */ (function (_super) {
    __extends(BackgroundIndicatorTemplate, _super);
    function BackgroundIndicatorTemplate() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BackgroundIndicatorTemplate.prototype.indicatorAttributesForContext = function (context) {
        var attributes = new MDCTabBarViewIndicatorAttributes();
        attributes.path = UIBezierPath.bezierPathWithRect(context.bounds);
        return attributes;
    };
    BackgroundIndicatorTemplate.ObjCProtocols = [MDCTabBarViewIndicatorTemplate];
    return BackgroundIndicatorTemplate;
}(NSObject));
var UIPageViewControllerImpl = /** @class */ (function (_super) {
    __extends(UIPageViewControllerImpl, _super);
    function UIPageViewControllerImpl() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    UIPageViewControllerImpl.initWithOwner = function (owner) {
        var handler = UIPageViewControllerImpl.alloc().initWithTransitionStyleNavigationOrientationOptions(UIPageViewControllerTransitionStyle.Scroll, UIPageViewControllerNavigationOrientation.Horizontal, null);
        handler._owner = owner;
        return handler;
    };
    UIPageViewControllerImpl.prototype.viewDidLoad = function () {
        var owner = this._owner.get();
        var tabBarItems = owner.tabBarItems;
        var tabBar = MDCTabBarView.alloc().initWithFrame(this.view.bounds);
        if (tabBarItems && tabBarItems.length) {
            tabBar.items = NSArray.arrayWithArray(tabBarItems);
        }
        tabBar.delegate = this.tabBarDelegate = MDCTabBarViewDelegateImpl.initWithOwner(new WeakRef(owner));
        if (majorVersion <= 12 || !UIColor.labelColor) {
            tabBar.tintColor = UIColor.blueColor;
            tabBar.barTintColor = UIColor.whiteColor;
            tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarViewItemState.Normal);
            tabBar.setTitleColorForState(UIColor.blackColor, MDCTabBarViewItemState.Selected);
        }
        else {
            tabBar.tintColor = UIColor.systemBlueColor;
            tabBar.barTintColor = UIColor.systemBackgroundColor;
            tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarViewItemState.Normal);
            tabBar.setTitleColorForState(UIColor.labelColor, MDCTabBarViewItemState.Selected);
            tabBar.inkColor = UIColor.clearColor;
        }
        tabBar.autoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleBottomMargin;
        tabBar.alignment = MDCTabBarViewAlignment.Justified;
        tabBar.sizeToFit();
        this.tabBar = tabBar;
        this.view.addSubview(tabBar);
    };
    UIPageViewControllerImpl.prototype.viewWillAppear = function (animated) {
        _super.prototype.viewWillAppear.call(this, animated);
        var owner = this._owner.get();
        if (!owner) {
            return;
        }
        IOSHelper.updateAutoAdjustScrollInsets(this, owner);
        // Tabs can be reset as a root view. Call loaded here in this scenario.
        if (!owner.isLoaded) {
            owner.callLoaded();
        }
    };
    UIPageViewControllerImpl.prototype.viewDidLayoutSubviews = function () {
        _super.prototype.viewDidLayoutSubviews.call(this);
        var owner = this._owner.get();
        if (!owner) {
            return;
        }
        var safeAreaInsetsBottom = 0;
        var safeAreaInsetsTop = 0;
        if (majorVersion > 10) {
            safeAreaInsetsBottom = this.view.safeAreaInsets.bottom;
            safeAreaInsetsTop = this.view.safeAreaInsets.top;
        }
        else {
            safeAreaInsetsTop = this.topLayoutGuide.length;
        }
        var scrollViewTop = 0;
        var scrollViewHeight = this.view.bounds.size.height + safeAreaInsetsBottom;
        if (owner.tabStrip) {
            scrollViewTop = this.tabBar.frame.size.height;
            scrollViewHeight = this.view.bounds.size.height - this.tabBar.frame.size.height + safeAreaInsetsBottom;
            var tabBarTop = safeAreaInsetsTop;
            var tabBarHeight = this.tabBar.frame.size.height;
            var tabsPosition = owner.tabsPosition;
            if (tabsPosition === 'bottom') {
                tabBarTop = this.view.frame.size.height - this.tabBar.frame.size.height - safeAreaInsetsBottom;
                scrollViewTop = this.view.frame.origin.y;
                scrollViewHeight = this.view.frame.size.height - safeAreaInsetsBottom;
            }
            var parent = owner.parent;
            // Handle Angular scenario where Tabs is in a ProxyViewContainer
            // It is possible to wrap components in ProxyViewContainers indefinitely
            while (parent && !parent.nativeViewProtected) {
                parent = parent.parent;
            }
            if (parent && majorVersion > 10) {
                // TODO: Figure out a better way to handle ViewController nesting/Safe Area nesting
                tabBarTop = Math.max(tabBarTop, parent.nativeView.safeAreaInsets.top);
            }
            this.tabBar.frame = CGRectMake(0, tabBarTop, this.tabBar.frame.size.width, tabBarHeight);
        }
        else {
            this.tabBar.hidden = true;
        }
        var subViews = this.view.subviews;
        var scrollView = null;
        for (var i = 0; i < subViews.count; i++) {
            var view = subViews[i];
            if (view instanceof UIScrollView) {
                scrollView = view;
            }
        }
        if (scrollView) {
            // The part of the UIPageViewController that is changing the pages is a UIScrollView
            // We want to expand it to the size of the UIPageViewController as it is not so by default
            this.scrollView = scrollView;
            if (!owner.swipeEnabled) {
                scrollView.scrollEnabled = false;
            }
            scrollView.frame = CGRectMake(0, scrollViewTop, this.view.bounds.size.width, scrollViewHeight); //this.view.bounds;
        }
    };
    // Mind implementation for other controllers
    UIPageViewControllerImpl.prototype.traitCollectionDidChange = function (previousTraitCollection) {
        _super.prototype.traitCollectionDidChange.call(this, previousTraitCollection);
        if (majorVersion >= 13) {
            var owner = this._owner.get();
            if (owner && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection && this.traitCollection.hasDifferentColorAppearanceComparedToTraitCollection(previousTraitCollection)) {
                owner.notify({
                    eventName: IOSHelper.traitCollectionColorAppearanceChangedEvent,
                    object: owner,
                });
            }
        }
    };
    UIPageViewControllerImpl.prototype.viewWillTransitionToSizeWithTransitionCoordinator = function (size, coordinator) {
        var _this = this;
        _super.prototype.viewWillTransitionToSizeWithTransitionCoordinator.call(this, size, coordinator);
        coordinator.animateAlongsideTransitionCompletion(function () {
            var owner = _this._owner.get();
            if (owner && owner.tabStrip && owner.tabStrip.items) {
                var tabStrip_1 = owner.tabStrip;
                tabStrip_1.items.forEach(function (tabStripItem) {
                    updateBackgroundPositions(tabStrip_1, tabStripItem, _this.tabBar.alignment !== MDCTabBarViewAlignment.Justified || owner.selectedIndex !== tabStripItem._index ? owner._defaultItemBackgroundColor : null);
                    var index = tabStripItem._index;
                    var tabBarItemController = owner.viewControllers[index];
                    updateTitleAndIconPositions(tabStripItem, tabBarItemController.tabBarItem, tabBarItemController);
                });
            }
        }, null);
    };
    return UIPageViewControllerImpl;
}(UIPageViewController));
var UIPageViewControllerDataSourceImpl = /** @class */ (function (_super) {
    __extends(UIPageViewControllerDataSourceImpl, _super);
    function UIPageViewControllerDataSourceImpl() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    UIPageViewControllerDataSourceImpl.initWithOwner = function (owner) {
        var dataSource = UIPageViewControllerDataSourceImpl.new();
        dataSource._owner = owner;
        return dataSource;
    };
    UIPageViewControllerDataSourceImpl.prototype.pageViewControllerViewControllerBeforeViewController = function (pageViewController, viewController) {
        // TODO
        // if (Trace.isEnabled()) {
        //     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
        // }
        var owner = this._owner.get();
        var selectedIndex = owner.selectedIndex;
        if (selectedIndex === 0) {
            return null;
        }
        selectedIndex--;
        var prevItem = owner.items[selectedIndex];
        var prevViewController = prevItem.__controller;
        // if (!prevViewController) {
        //     prevViewController = owner.getViewController(prevItem);
        // }
        owner._setCanBeLoaded(selectedIndex);
        owner._loadUnloadTabItems(selectedIndex);
        return prevViewController;
    };
    UIPageViewControllerDataSourceImpl.prototype.pageViewControllerViewControllerAfterViewController = function (pageViewController, viewController) {
        // TODO
        // if (Trace.isEnabled()) {
        //     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
        // }
        var owner = this._owner.get();
        var selectedIndex = owner.selectedIndex;
        if (selectedIndex === owner.items.length - 1) {
            return null;
        }
        selectedIndex++;
        var nextItem = owner.items[selectedIndex];
        var nextViewController = nextItem.__controller;
        // if (!nextViewController) {
        //     nextViewController = owner.getViewController(nextItem);
        // }
        owner._setCanBeLoaded(selectedIndex);
        owner._loadUnloadTabItems(selectedIndex);
        // nextItem.loadView(nextItem.view);
        return nextViewController;
    };
    UIPageViewControllerDataSourceImpl.prototype.presentationCountForPageViewController = function (pageViewController) {
        // TODO
        // if (Trace.isEnabled()) {
        //     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
        // }
        return 0;
    };
    UIPageViewControllerDataSourceImpl.prototype.presentationIndexForPageViewController = function (pageViewController) {
        // TODO
        // if (Trace.isEnabled()) {
        //     Trace.write("TabView.delegate.SHOULD_select(" + tabBarController + ", " + viewController + ");", Trace.categories.Debug);
        // }
        return 0;
    };
    UIPageViewControllerDataSourceImpl.ObjCProtocols = [UIPageViewControllerDataSource];
    return UIPageViewControllerDataSourceImpl;
}(NSObject));
var UIPageViewControllerDelegateImpl = /** @class */ (function (_super) {
    __extends(UIPageViewControllerDelegateImpl, _super);
    function UIPageViewControllerDelegateImpl() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    UIPageViewControllerDelegateImpl.initWithOwner = function (owner) {
        var delegate = UIPageViewControllerDelegateImpl.new();
        delegate._owner = owner;
        return delegate;
    };
    UIPageViewControllerDelegateImpl.prototype.pageViewControllerWillTransitionToViewControllers = function (pageViewController, viewControllers) {
        // const owner = this._owner.get();
        // const ownerViewControllers = owner.viewControllers;
        // const selectedIndex = owner.selectedIndex;
        // const nextViewController = viewControllers[0];
        // const nextViewControllerIndex = ownerViewControllers.indexOf(nextViewController);
        // if (selectedIndex > nextViewControllerIndex) {
        //     owner.selectedIndex--;
        // } else {
        //     owner.selectedIndex++;
        // }
    };
    UIPageViewControllerDelegateImpl.prototype.pageViewControllerDidFinishAnimatingPreviousViewControllersTransitionCompleted = function (pageViewController, didFinishAnimating, previousViewControllers, transitionCompleted) {
        if (!transitionCompleted) {
            return;
        }
        var owner = this._owner.get();
        var ownerViewControllers = owner.viewControllers;
        var selectedIndex = owner.selectedIndex;
        var nextViewController = pageViewController.viewControllers[0];
        var nextViewControllerIndex = ownerViewControllers.indexOf(nextViewController);
        if (selectedIndex !== nextViewControllerIndex) {
            owner.selectedIndex = nextViewControllerIndex;
            owner._canSelectItem = true;
        }
    };
    UIPageViewControllerDelegateImpl.ObjCProtocols = [UIPageViewControllerDelegate];
    return UIPageViewControllerDelegateImpl;
}(NSObject));
function iterateIndexRange(index, eps, lastIndex, callback) {
    const rangeStart = Math.max(0, index - eps);
    const rangeEnd = Math.min(index + eps, lastIndex);
    for (let i = rangeStart; i <= rangeEnd; i++) {
        callback(i);
    }
}
function updateBackgroundPositions(tabStrip, tabStripItem, color = null) {
    let bgView = tabStripItem.bgView;
    const index = tabStripItem._index;
    let width = tabStrip.nativeView.frame.size.width / tabStrip.items.length;
    const frame = CGRectMake(width * index, 0, width, tabStrip.nativeView.frame.size.width);
    if (!bgView) {
        bgView = UIView.alloc().initWithFrame(frame);
        tabStrip.nativeView.insertSubviewAtIndex(bgView, 0);
        tabStripItem.bgView = bgView;
    }
    else {
        bgView.frame = frame;
    }
    const backgroundColor = tabStripItem.style.backgroundColor;
    bgView.backgroundColor = color || (backgroundColor instanceof Color ? backgroundColor.ios : backgroundColor);
}
function updateTitleAndIconPositions(tabStripItem, tabBarItem, controller) {
    if (!tabStripItem || !tabBarItem) {
        return;
    }
    // For iOS <11 icon is *always* above the text.
    // For iOS 11 icon is above the text *only* on phones in portrait mode.
    const orientation = controller.interfaceOrientation;
    const isPortrait = orientation !== 4 /* LandscapeLeft */ && orientation !== 3 /* LandscapeRight */;
    const isIconAboveTitle = majorVersion < 11 || (isPhone && isPortrait);
    if (!tabStripItem.iconSource) {
        if (isIconAboveTitle) {
            tabBarItem.titlePositionAdjustment = {
                horizontal: 0,
                vertical: -20,
            };
        }
        else {
            tabBarItem.titlePositionAdjustment = { horizontal: 0, vertical: 0 };
        }
    }
    if (!tabStripItem.title) {
        if (isIconAboveTitle) {
            tabBarItem.imageInsets = new UIEdgeInsets({
                top: 6,
                left: 0,
                bottom: -6,
                right: 0,
            });
        }
        else {
            tabBarItem.imageInsets = new UIEdgeInsets({
                top: 0,
                left: 0,
                bottom: 0,
                right: 0,
            });
        }
    }
}
export class Tabs extends TabsBase {
    constructor() {
        super();
        // private _moreNavigationControllerDelegate: UINavigationControllerDelegateImpl;
        this._iconsCache = {};
        this.viewController = this._ios = UIPageViewControllerImpl.initWithOwner(new WeakRef(this)); //alloc().initWithTransitionStyleNavigationOrientationOptions(UIPageViewControllerTransitionStyle.Scroll, UIPageViewControllerNavigationOrientation.Horizontal, null);;
    }
    createNativeView() {
        return this._ios.view;
    }
    initNativeView() {
        super.initNativeView();
        this._dataSource = UIPageViewControllerDataSourceImpl.initWithOwner(new WeakRef(this));
        this._delegate = UIPageViewControllerDelegateImpl.initWithOwner(new WeakRef(this));
    }
    disposeNativeView() {
        this._dataSource = null;
        this._delegate = null;
        this._ios.tabBarDelegate = null;
        this._ios.tabBar = null;
        super.disposeNativeView();
    }
    // TODO
    // @profile()
    onLoaded() {
        super.onLoaded();
        this.setViewControllers(this.items);
        const selectedIndex = this.selectedIndex;
        const selectedView = this.items && this.items[selectedIndex] && this.items[selectedIndex].content;
        if (selectedView instanceof Frame) {
            selectedView._pushInFrameStackRecursive();
        }
        this._ios.dataSource = this._dataSource;
        this._ios.delegate = this._delegate;
    }
    onUnloaded() {
        this._ios.dataSource = null;
        this._ios.delegate = null;
        super.onUnloaded();
    }
    get ios() {
        return this._ios;
    }
    layoutNativeView(left, top, right, bottom) {
        //
    }
    _setNativeViewFrame(nativeView, frame) {
        //
    }
    onSelectedIndexChanged(oldIndex, newIndex) {
        const items = this.items;
        if (!items) {
            return;
        }
        const oldItem = items[oldIndex];
        if (oldItem) {
            oldItem.canBeLoaded = false;
            oldItem.unloadView(oldItem.content);
        }
        const newItem = items[newIndex];
        if (newItem && this.isLoaded) {
            const selectedView = items[newIndex].content;
            if (selectedView instanceof Frame) {
                selectedView._pushInFrameStackRecursive();
            }
            newItem.canBeLoaded = true;
            newItem.loadView(newItem.content);
        }
        const tabStripItems = this.tabStrip && this.tabStrip.items;
        if (tabStripItems) {
            if (tabStripItems[newIndex]) {
                tabStripItems[newIndex]._emit(TabStripItem.selectEvent);
                this.updateItemColors(tabStripItems[newIndex]);
            }
            if (tabStripItems[oldIndex]) {
                tabStripItems[oldIndex]._emit(TabStripItem.unselectEvent);
                this.updateItemColors(tabStripItems[oldIndex]);
            }
        }
        this._loadUnloadTabItems(newIndex);
        super.onSelectedIndexChanged(oldIndex, newIndex);
    }
    _loadUnloadTabItems(newIndex) {
        const items = this.items;
        if (!items) {
            return;
        }
        const lastIndex = items.length - 1;
        const offsideItems = this.offscreenTabLimit;
        let toUnload = [];
        let toLoad = [];
        iterateIndexRange(newIndex, offsideItems, lastIndex, (i) => toLoad.push(i));
        items.forEach((item, i) => {
            const indexOfI = toLoad.indexOf(i);
            if (indexOfI < 0) {
                toUnload.push(i);
            }
        });
        toUnload.forEach((index) => {
            const item = items[index];
            if (items[index]) {
                item.unloadView(item.content);
            }
        });
        const newItem = items[newIndex];
        const selectedView = newItem && newItem.content;
        if (selectedView instanceof Frame) {
            selectedView._pushInFrameStackRecursive();
        }
        toLoad.forEach((index) => {
            const item = items[index];
            if (this.isLoaded && items[index]) {
                item.loadView(item.content);
            }
        });
    }
    onMeasure(widthMeasureSpec, heightMeasureSpec) {
        const width = layout.getMeasureSpecSize(widthMeasureSpec);
        const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
        const height = layout.getMeasureSpecSize(heightMeasureSpec);
        const heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
        const widthAndState = View.resolveSizeAndState(width, width, widthMode, 0);
        const heightAndState = View.resolveSizeAndState(height, height, heightMode, 0);
        this.setMeasuredDimension(widthAndState, heightAndState);
    }
    _onViewControllerShown(viewController) {
        // This method could be called with the moreNavigationController or its list controller, so we have to check.
        // TODO
        // if (Trace.isEnabled()) {
        //     Trace.write("TabView._onViewControllerShown(" + viewController + ");", Trace.categories.Debug);
        // }
        if (this._ios.viewControllers && this._ios.viewControllers.containsObject(viewController)) {
            this.selectedIndex = this._ios.viewControllers.indexOfObject(viewController);
        }
        else {
            // TODO
            // if (Trace.isEnabled()) {
            //     Trace.write("TabView._onViewControllerShown: viewController is not one of our viewControllers", Trace.categories.Debug);
            // }
        }
    }
    getViewController(item) {
        let newController = item.content ? item.content.viewController : null;
        if (newController) {
            item.setViewController(newController, newController.view);
            return newController;
        }
        if (item.content.ios instanceof UIViewController) {
            newController = item.content.ios;
            item.setViewController(newController, newController.view);
        }
        else if (item.content.ios && item.content.ios.controller instanceof UIViewController) {
            newController = item.content.ios.controller;
            item.setViewController(newController, newController.view);
        }
        else {
            newController = IOSHelper.UILayoutViewController.initWithOwner(new WeakRef(item.content));
            newController.view.addSubview(item.content.nativeViewProtected);
            item.content.viewController = newController;
            item.setViewController(newController, item.content.nativeViewProtected);
        }
        return newController;
    }
    _setCanBeLoaded(index) {
        const items = this.items;
        if (!this.items) {
            return;
        }
        const lastIndex = items.length - 1;
        const offsideItems = this.offscreenTabLimit;
        iterateIndexRange(index, offsideItems, lastIndex, (i) => {
            if (items[i]) {
                items[i].canBeLoaded = true;
            }
        });
    }
    setViewControllers(items) {
        const length = items ? items.length : 0;
        if (length === 0) {
            this.viewControllers = null;
            return;
        }
        const viewControllers = [];
        const tabBarItems = [];
        if (this.tabStrip) {
            this.tabStrip.setNativeView(this._ios.tabBar);
        }
        const tabStripItems = this.tabStrip && this.tabStrip.items;
        if (tabStripItems) {
            if (tabStripItems[this.selectedIndex]) {
                tabStripItems[this.selectedIndex]._emit(TabStripItem.selectEvent);
            }
        }
        items.forEach((item, i) => {
            const controller = this.getViewController(item);
            if (this.tabStrip && this.tabStrip.items && this.tabStrip.items[i]) {
                const tabStripItem = this.tabStrip.items[i];
                const tabBarItem = this.createTabBarItem(tabStripItem, i);
                updateTitleAndIconPositions(tabStripItem, tabBarItem, controller);
                this.setViewTextAttributes(tabStripItem.label, i === this.selectedIndex);
                controller.tabBarItem = tabBarItem;
                tabStripItem._index = i;
                tabBarItems.push(tabBarItem);
                tabStripItem.setNativeView(tabBarItem);
            }
            item.canBeLoaded = true;
            viewControllers.push(controller);
        });
        this.setItemImages();
        this.viewControllers = viewControllers;
        this.tabBarItems = tabBarItems;
        if (this.viewController && this.viewController.tabBar) {
            this.viewController.tabBar.itemAppearance = this.getTabBarItemAppearance();
            this.viewController.tabBar.items = NSArray.arrayWithArray(this.tabBarItems);
            // TODO: investigate why this call is necessary to actually toggle item appearance
            this.viewController.tabBar.sizeToFit();
            if (this.selectedIndex) {
                this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[this.selectedIndex], false);
            }
        }
    }
    setItemImages() {
        if (this._selectedItemColor || this._unSelectedItemColor) {
            if (this.tabStrip && this.tabStrip.items) {
                this.tabStrip.items.forEach((item) => {
                    if (this._unSelectedItemColor && item.nativeView) {
                        item.nativeView.image = this.getIcon(item, this._unSelectedItemColor);
                    }
                    if (this._selectedItemColor && item.nativeView) {
                        if (this.selectedIndex === item._index) {
                            item.nativeView.image = this.getIcon(item, this._selectedItemColor);
                        }
                    }
                });
            }
        }
    }
    updateAllItemsColors() {
        this._defaultItemBackgroundColor = null;
        this.setItemColors();
        if (this.tabStrip && this.tabStrip.items) {
            this.tabStrip.items.forEach((tabStripItem) => {
                this.updateItemColors(tabStripItem);
            });
        }
    }
    updateItemColors(tabStripItem) {
        updateBackgroundPositions(this.tabStrip, tabStripItem);
        this.setIconColor(tabStripItem, true);
    }
    createTabBarItem(item, index) {
        let image;
        let title;
        if (item.isLoaded) {
            image = this.getIcon(item);
            title = item.label.text;
            if (!this.tabStrip._hasImage) {
                this.tabStrip._hasImage = !!image;
            }
            if (!this.tabStrip._hasTitle) {
                this.tabStrip._hasTitle = !!title;
            }
        }
        const tabBarItem = UITabBarItem.alloc().initWithTitleImageTag(title, image, index);
        return tabBarItem;
    }
    getTabBarItemAppearance() {
        let itemAppearance;
        if (this.tabStrip && this.tabStrip._hasImage && this.tabStrip._hasTitle) {
            itemAppearance = 2 /* TitledImages */;
        }
        else if (this.tabStrip && this.tabStrip._hasImage) {
            itemAppearance = 1 /* Images */;
        }
        else {
            itemAppearance = 0 /* Titles */;
        }
        return itemAppearance;
    }
    getIconRenderingMode() {
        switch (this.tabStrip && this.tabStrip.iosIconRenderingMode) {
            case 'alwaysOriginal':
                return 1 /* AlwaysOriginal */;
            case 'alwaysTemplate':
                return 2 /* AlwaysTemplate */;
            case 'automatic':
            default:
                const hasItemColor = this._selectedItemColor || this._unSelectedItemColor;
                return hasItemColor ? 2 /* AlwaysTemplate */ : 1 /* AlwaysOriginal */;
        }
    }
    getIcon(tabStripItem, color) {
        // Image and Label children of TabStripItem
        // take priority over its `iconSource` and `title` properties
        const iconSource = tabStripItem.image && tabStripItem.image.src;
        if (!iconSource) {
            return null;
        }
        const target = tabStripItem.image;
        const font = target.style.fontInternal || Font.default;
        if (!color) {
            color = target.style.color;
        }
        const iconTag = [iconSource, font.fontStyle, font.fontWeight, font.fontSize, font.fontFamily, color].join(';');
        let isFontIcon = false;
        let image = this._iconsCache[iconTag];
        if (!image) {
            let is = new ImageSource();
            if (isFontIconURI(iconSource)) {
                isFontIcon = true;
                const fontIconCode = iconSource.split('//')[1];
                is = ImageSource.fromFontIconCodeSync(fontIconCode, font, color);
            }
            else {
                is = ImageSource.fromFileOrResourceSync(iconSource);
            }
            if (is && is.ios) {
                image = is.ios;
                if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
                    image = this.getFixedSizeIcon(image);
                }
                let renderingMode = 0 /* Automatic */;
                if (!isFontIcon) {
                    renderingMode = this.getIconRenderingMode();
                }
                const originalRenderedImage = image.imageWithRenderingMode(renderingMode);
                this._iconsCache[iconTag] = originalRenderedImage;
                image = originalRenderedImage;
            }
        }
        return image;
    }
    getFixedSizeIcon(image) {
        const inWidth = image.size.width;
        const inHeight = image.size.height;
        const iconSpecSize = getIconSpecSize({ width: inWidth, height: inHeight });
        const widthPts = iconSpecSize.width;
        const heightPts = iconSpecSize.height;
        UIGraphicsBeginImageContextWithOptions({ width: widthPts, height: heightPts }, false, layout.getDisplayDensity());
        image.drawInRect(CGRectMake(0, 0, widthPts, heightPts));
        let resultImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return resultImage;
    }
    getTabBarBackgroundColor() {
        return this._ios.tabBar.barTintColor;
    }
    setTabBarBackgroundColor(value) {
        this._ios.tabBar.barTintColor = value instanceof Color ? value.ios : value;
        this.updateAllItemsColors();
    }
    setTabBarItemTitle(tabStripItem, value) {
        tabStripItem.nativeView.title = value;
    }
    equalUIColor(first, second) {
        if (!first && !second) {
            return true;
        }
        if (!first || !second) {
            return false;
        }
        const firstComponents = CGColorGetComponents(first.CGColor);
        const secondComponents = CGColorGetComponents(second.CGColor);
        return firstComponents[0] === secondComponents[0] && firstComponents[1] === secondComponents[1] && firstComponents[2] === secondComponents[2] && firstComponents[3] === secondComponents[3];
    }
    isSelectedAndHightlightedItem(tabStripItem) {
        // to find out whether the current tab strip item is active (has style with :active selector applied)
        // we need to check whether its _visualState is equal to "highlighted" as when changing tabs
        // we first go through setTabBarItemBackgroundColor thice, once before setting the "highlighted" state
        // and once after that, but if the "highlighted" state is not set we cannot get the backgroundColor
        // set using :active selector
        return tabStripItem._index === this.selectedIndex && tabStripItem['_visualState'] === 'highlighted';
    }
    setTabBarItemBackgroundColor(tabStripItem, value) {
        if (!this.tabStrip || !tabStripItem) {
            return;
        }
        let newColor = value instanceof Color ? value.ios : value;
        const itemSelectedAndHighlighted = this.isSelectedAndHightlightedItem(tabStripItem);
        // As we cannot implement selected item background color in Tabs we are using the Indicator for this
        // To be able to detect that there are two different background colors (one for selected and one for not selected item)
        // we are checking whether the current item is not selected and higlighted and we store the value of its
        // background color to _defaultItemBackgroundColor and later if we need to process a selected and highlighted item
        // we are comparing it's backgroun color to the default one and if there's a difference
        // we are changing the selectionIndicatorTemplate from underline to the whole item
        // in that mode we are not able to show the indicator as it is used for the background of the selected item
        if (!this._defaultItemBackgroundColor && !itemSelectedAndHighlighted) {
            this._defaultItemBackgroundColor = newColor;
        }
        if (this.viewController.tabBar.alignment !== 1 /* Justified */ && itemSelectedAndHighlighted && !this.equalUIColor(this._defaultItemBackgroundColor, newColor)) {
            if (!this._backgroundIndicatorColor) {
                this._backgroundIndicatorColor = newColor;
                this._ios.tabBar.selectionIndicatorTemplate = new BackgroundIndicatorTemplate();
                this._ios.tabBar.tintColor = newColor;
            }
        }
        else {
            updateBackgroundPositions(this.tabStrip, tabStripItem, newColor);
        }
    }
    setTabBarItemColor(tabStripItem, value) {
        this.setViewTextAttributes(tabStripItem.label);
    }
    setItemColors() {
        if (this._selectedItemColor) {
            this.viewController.tabBar.selectedItemTintColor = this._selectedItemColor.ios;
        }
        if (this._unSelectedItemColor) {
            this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
        }
    }
    setIconColor(tabStripItem, forceReload = false) {
        // if there is no change in the css color and there is no item color set
        // we don't need to reload the icon
        if (!forceReload && !this._selectedItemColor && !this._unSelectedItemColor) {
            return;
        }
        let image;
        // if selectedItemColor or unSelectedItemColor is set we don't respect the color from the style
        const tabStripColor = this.selectedIndex === tabStripItem._index ? this._selectedItemColor : this._unSelectedItemColor;
        image = this.getIcon(tabStripItem, tabStripColor);
        tabStripItem.nativeView.image = image;
    }
    setTabBarIconColor(tabStripItem, value) {
        this.setIconColor(tabStripItem, true);
    }
    setTabBarIconSource(tabStripItem, value) {
        this.updateItemColors(tabStripItem);
    }
    setTabBarItemFontInternal(tabStripItem, value) {
        this.setViewTextAttributes(tabStripItem.label);
    }
    getTabBarFontInternal() {
        return this._ios.tabBar.unselectedItemTitleFont;
    }
    setTabBarFontInternal(value) {
        const defaultTabItemFontSize = 10;
        const tabItemFontSize = this.tabStrip.style.fontSize || defaultTabItemFontSize;
        const font = (this.tabStrip.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
        this._ios.tabBar.unselectedItemTitleFont = font;
        this._ios.tabBar.selectedItemTitleFont = font;
    }
    getTabBarTextTransform() {
        switch (this._ios.tabBar.titleTextTransform) {
            case 1 /* None */:
                return 'none';
            case 0 /* Automatic */:
                return 'initial';
            case 2 /* Uppercase */:
            default:
                return 'uppercase';
        }
    }
    setTabBarTextTransform(value) {
        if (value === 'none') {
            this._ios.tabBar.titleTextTransform = 1 /* None */;
        }
        else if (value === 'uppercase') {
            this._ios.tabBar.titleTextTransform = 2 /* Uppercase */;
        }
        else if (value === 'initial') {
            this._ios.tabBar.titleTextTransform = 0 /* Automatic */;
        }
    }
    getTabBarColor() {
        return this._ios.tabBar.titleColorForState(0 /* Normal */);
    }
    setTabBarColor(value) {
        const nativeColor = value instanceof Color ? value.ios : value;
        this._ios.tabBar.setTitleColorForState(nativeColor, 0 /* Normal */);
        this._ios.tabBar.setTitleColorForState(nativeColor, 1 /* Selected */);
    }
    getTabBarHighlightColor() {
        return this._ios.tabBar.tintColor;
    }
    setTabBarHighlightColor(value) {
        const nativeColor = value instanceof Color ? value.ios : value;
        this._ios.tabBar.tintColor = nativeColor;
    }
    getTabBarSelectedItemColor() {
        return this._selectedItemColor;
    }
    setTabBarSelectedItemColor(value) {
        this._selectedItemColor = value;
        this.updateAllItemsColors();
    }
    getTabBarUnSelectedItemColor() {
        return this._unSelectedItemColor;
    }
    setTabBarUnSelectedItemColor(value) {
        this._unSelectedItemColor = value;
        this.updateAllItemsColors();
    }
    visitFrames(view, operation) {
        if (view instanceof Frame) {
            operation(view);
        }
        view.eachChild((child) => {
            this.visitFrames(child, operation);
            return true;
        });
    }
    [selectedIndexProperty.setNative](value) {
        // TODO
        // if (Trace.isEnabled()) {
        //     Trace.write("TabView._onSelectedIndexPropertyChangedSetNativeValue(" + value + ")", Trace.categories.Debug);
        // }
        if (value > -1) {
            const item = this.items[value];
            const controllers = NSMutableArray.alloc().initWithCapacity(1);
            let itemController = item.__controller;
            // if (!itemController) {
            //     itemController = this.getViewController(item);
            // }
            controllers.addObject(itemController);
            let navigationDirection = 0 /* Forward */;
            if (this._currentNativeSelectedIndex && this._currentNativeSelectedIndex > value) {
                navigationDirection = 1 /* Reverse */;
            }
            this._currentNativeSelectedIndex = value;
            // do not make layout changes while the animation is in progress https://stackoverflow.com/a/47031524/613113
            this.visitFrames(item, (frame) => (frame._animationInProgress = true));
            invokeOnRunLoop(() => this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, this.animationEnabled, (finished) => {
                this.visitFrames(item, (frame) => (frame._animationInProgress = false));
                if (finished) {
                    // HACK: UIPageViewController fix; see https://stackoverflow.com/a/17330606
                    invokeOnRunLoop(() => this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, false, null));
                    this._canSelectItem = true;
                    this._setCanBeLoaded(value);
                    this._loadUnloadTabItems(value);
                }
            }));
            if (this.tabBarItems && this.tabBarItems.length && this.viewController && this.viewController.tabBar) {
                this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[value], this.animationEnabled);
            }
            // TODO:
            // (<any>this._ios)._willSelectViewController = this._ios.viewControllers[value];
            // this._ios.selectedIndex = value;
        }
    }
    [itemsProperty.getDefault]() {
        return null;
    }
    [itemsProperty.setNative](value) {
        if (value) {
            value.forEach((item, i) => {
                item.index = i;
            });
        }
        this.setViewControllers(value);
        selectedIndexProperty.coerce(this);
    }
    [tabStripProperty.getDefault]() {
        return null;
    }
    [tabStripProperty.setNative](value) {
        this.setViewControllers(this.items);
        selectedIndexProperty.coerce(this);
    }
    [swipeEnabledProperty.getDefault]() {
        return true;
    }
    [swipeEnabledProperty.setNative](value) {
        if (this.viewController && this.viewController.scrollView) {
            this.viewController.scrollView.scrollEnabled = value;
        }
    }
    [iOSTabBarItemsAlignmentProperty.getDefault]() {
        if (!this.viewController || !this.viewController.tabBar) {
            return 'justified';
        }
        let alignment = this.viewController.tabBar.alignment.toString();
        return (alignment.charAt(0).toLowerCase() + alignment.substring(1));
    }
    [iOSTabBarItemsAlignmentProperty.setNative](value) {
        if (!this.viewController || !this.viewController.tabBar) {
            return;
        }
        let alignment = 1 /* Justified */;
        switch (value) {
            case 'leading':
                alignment = 0 /* Leading */;
                break;
            case 'center':
                alignment = 2 /* Center */;
                break;
            case 'centerSelected':
                alignment = 3 /* CenterSelected */;
                break;
        }
        this.viewController.tabBar.alignment = alignment;
    }
    setViewTextAttributes(view, setSelected = false) {
        if (!view) {
            return null;
        }
        const defaultTabItemFontSize = 10;
        const tabItemFontSize = view.style.fontSize || defaultTabItemFontSize;
        const font = (view.style.fontInternal || Font.default).getUIFont(UIFont.systemFontOfSize(tabItemFontSize));
        this.viewController.tabBar.unselectedItemTitleFont = font;
        this.viewController.tabBar.selectedItemTitleFont = font;
        const tabItemTextColor = view.style.color;
        const textColor = tabItemTextColor instanceof Color ? tabItemTextColor.ios : null;
        if (textColor) {
            this.viewController.tabBar.setTitleColorForState(textColor, 0 /* Normal */);
            this.viewController.tabBar.setImageTintColorForState(textColor, 0 /* Normal */);
            if (setSelected) {
                this.viewController.tabBar.setTitleColorForState(textColor, 1 /* Selected */);
                this.viewController.tabBar.setImageTintColorForState(textColor, 1 /* Selected */);
            }
        }
        if (this._selectedItemColor) {
            this.viewController.tabBar.selectedItemTintColor = this._selectedItemColor.ios;
        }
        if (this._unSelectedItemColor) {
            this.viewController.tabBar.unselectedItemTintColor = this._unSelectedItemColor.ios;
        }
    }
}
//# sourceMappingURL=index.ios.js.map
jwrascoe commented 4 years ago

@farfromrefug here is the CORRECT demo... it will show the failure and then if you roll back to your released packages it will work on android and not show the initial text on ios

Sorry about uploading the wrong code. demo.zip

farfromrefug commented 4 years ago

oh dear i know what i did :s

farfromrefug commented 4 years ago

@jwrascoe published 5.0.3. Please remove your node_modules folder and run npm i again. Really sorry!

jwrascoe commented 4 years ago

@farfromrefug it builds now (after a npm run clean in the demo app I re-uploaded) but crashes when it starts up the app on the iOS device.. android works fine.

This is the crash error... humm...

Project successfully built.
The build result is located at: /Users/jwrascoe/dev/tw-fix/a10x/demo/platforms/ios/build/Debug-iphoneos/demo.ipa
Installing on device 00008020-001D65E01E78003A...
Successfully installed on device with identifier '00008020-001D65E01E78003A'.
Restarting application on device 00008020-001D65E01E78003A...
Unzipping LiveSync folder. This could take a while...
Unzipped 5 entries in 148.264050ms.
Initializing connection
Removing all cached process handles
Sending handshake request attempt #1 to server
Creating connection to com.apple.runningboard
Handshake succeeded
Identity resolved as application<com.taskwizzard.twbasic>
***** Fatal JavaScript exception - application has been terminated. *****
NativeScript encountered a fatal error: Uncaught ReferenceError: MDCTabBarViewDelegate is not defined
at
(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:61:0)
at ../node_modules/@nativescript/core/ui/tabs/index.js(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:63:1)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/index.js(file: node_modules/@nativescript/core/ui/index.js:1:0)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/index.js(file: node_modules/@nativescript/core/index.js:1:0)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:1:0)
at ../node_modules/@nativescript/angular/fesm2015/nativescript-angular.js(file:///app/vendor.js:97369:30)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at (file:///app/bundle.js:122:125)
at ./main.ts(file:///app/bundle.js:174:30)
at __webpack_require__(<\M-b\M^@\M-&>
*** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: Uncaught ReferenceError: MDCTabBarViewDelegate is not defined
at
(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:61:0)
at ../node_modules/@nativescript/core/ui/tabs/index.js(file: node_modules/@nativescript/core/ui/tabs/index.ios.js:63:1)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/ui/index.js(file: node_modules/@nativescript/core/ui/index.js:1:0)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at ../node_modules/@nativescript/core/index.js(file: node_modules/@nativescript/core/index.js:1:0)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at (file: node_modules/@nativescript/angular/fesm2015/nativescript-angular.js:1:0)
at ../node_modules/@nativescript/angular/fesm2015/nativescript-angular.js(file:///app/vendor.js:97369:30)
at __webpack_require__(file: src/webpack/bootstrap:816:0)
at fn(file: src/webpack/bootstrap:120:0)
at (file:///app/bundle.js:122:125)
farfromrefug commented 4 years ago

@jwrascoe ok quicjk fix for you until i really manage to fix this the right way! create App_Resources/ios/Podfile inside put (or add) pod 'MaterialComponents/Tabs+TabBarView' Rebuild

jwrascoe commented 4 years ago

@farfromrefug getting closer.. or maybe I dont understand how to implement this (I have never added a pod before)

Here is what it says now...

[~/package.json] external "~/package.json" 42 bytes {bundle} {tns_modules/@nativescript/core/inspector_modules} [optional] [built]
    + 557 hidden modules
Webpack compilation complete. Watching for file changes.
Webpack build done!
Installing pods...
Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "MaterialComponents/Tabs+TabBarView":
  In Podfile:
    MaterialComponents/Tabs+TabBarView

None of your spec sources contain a spec satisfying the dependency: `MaterialComponents/Tabs+TabBarView`.

You have either:
 * out-of-date source repos which you can update with `pod repo update` or with `pod install --repo-update`.
 * mistyped the name or version.
 * not added the source repo that hosts the Podspec to your Podfile.

[!] Automatically assigning platform `iOS` with version `9.0` on target `demo` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
'pod install' command failed.
For more information on resolving CocoaPod issues in NativeScript read.
jwrascoe@mbp-james demo %
farfromrefug commented 4 years ago

@jwrascoe do you have cocoapod install globally ? (pod --version) ? you can run pod repo update in a terminal should do it. However this should happen automatically i think... I released a new version 5.0.4 which should do it this time :s install, remove the podfile, remove platforms, build again. Also if you need more help, you can find me on slack

jwrascoe commented 4 years ago

@farfromrefug ok got past that... did a "pod repo update" and it works!!! But.....

Just for MDTextField.... MDTextView will need to get the same fix to put in the initial value...

farfromrefug commented 4 years ago

@jwrascoe damn me I thought I did. Will do, sorry........

jwrascoe commented 4 years ago

@farfromrefug Thanks... I just tested the MDTextField in a real app (not the demo) and it appears to be working fine, once the View is ready I will do the same.

jwrascoe commented 4 years ago

@farfromrefug 5.0.5 is working much better... right now there seems to be only 1 problem

MDTextView is working, initial values are there, however it does not appear to be passing its text changes back correctly for reactive forms.

MDTextField has passed all my checks in my normal application and works correctly with reactive forms with respect to input changes.

Any ideas? I'll start digging thru the code to see if I can find the difference why Field works and View does not.

farfromrefug commented 4 years ago

@jwrascoe ok can you try with a N textview to see if it work? My comp inherit N's one so it should behave the same

jwrascoe commented 4 years ago

@farfromrefug N textview works fine... it appears that textFieldShouldChangeCharactersInRangeReplacementString is totally missing out of the MDTextView, im hacking in a version of it from with MDTextField with the necessary changes to see if that fixes it.... think it was just an oversight for some reason.

farfromrefug commented 4 years ago

@jwrascoe damns it means i broke it this morning. Changed it to fix formattedText live edit! We can chat on slack if you want faster answers;)

jwrascoe commented 4 years ago

@farfromrefug 5.0.6 fixes everything, thanks for all the help!

tce-rishab commented 2 years ago

Getting the following exception with MDTextField

An uncaught Exception occurred on "main" thread. Calling js method onCreateView failed TypeError: Cannot read property 'TextInputEditText' of undefined

StackTrace: createNativeView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:2665:80) at _setupUI(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22613:31) at (file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22657:19) at eachChildView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:33250:28) at eachChild(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:24968:14) at _setupUI(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22656:14) at (file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22657:19) at eachChildView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:33250:28) at eachChild(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:24968:14) at _setupUI(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22656:14) at (file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22657:19) at eachChildView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:20087:13) at eachChildView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:35192:15) at eachChild(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:24968:14) at _setupUI(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22656:14) at _addViewCore(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22509:18) at _addView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:22498:14) at onCreateView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:29250:13) at onCreateView(file:///data/data/org.nativescript.exampleapp/files/app/vendor.js:26893:40) at com.tns.Runtime.callJSMethodNative(Native Method) at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302) at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188) at com.tns.Runtime.callJSMethod(Runtime.java:1175) at com.tns.Runtime.callJSMethod(Runtime.java:1153) at com.tns.Runtime.callJSMethod(Runtime.java:1149) at com.tns.FragmentClass.onCreateView(FragmentClass.java:55) at androidx.fragment.app.Fragment.performCreateView(Fragment.java:2699) at androidx.fragment.app.FragmentStateManager.createView(FragmentStateManager.java:320) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1199) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1368) at androidx.fragment.app.FragmentManager.moveFragmentToExpectedState(FragmentManager.java:1446) at androidx.fragment.app.FragmentManager.moveToState(FragmentManager.java:1509) at androidx.fragment.app.BackStackRecord.executeOps(BackStackRecord.java:447) at androidx.fragment.app.FragmentManager.executeOps(FragmentManager.java:2181) at androidx.fragment.app.FragmentManager.executeOpsTogether(FragmentManager.java:2004) at androidx.fragment.app.FragmentManager.removeRedundantOperationsAndExecute(FragmentManager.java:1959) at androidx.fragment.app.FragmentManager.execPendingActions(FragmentManager.java:1861) at androidx.fragment.app.FragmentManager$4.run(FragmentManager.java:413) at android.os.Handler.handleCallback(Handler.java:938) at android.os.Handler.dispatchMessage(Handler.java:99) at android.os.Looper.loop(Looper.java:223) at android.app.ActivityThread.main(ActivityThread.java:7656) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)

package.json

{
  "name": "example-app",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.1.1",
    "@angular/common": "~13.1.1",
    "@angular/compiler": "~13.1.1",
    "@angular/core": "~13.1.1",
    "@angular/forms": "~13.1.1",
    "@angular/platform-browser": "~13.1.1",
    "@angular/platform-browser-dynamic": "~13.1.1",
    "@angular/router": "~13.1.1",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@nativescript-community/text": "^1.5.0",
    "@nativescript-community/ui-material-bottomnavigationbar": "^6.2.10",
    "@nativescript-community/ui-material-button": "^6.2.14",
    "@nativescript-community/ui-material-core": "^6.2.14",
    "@nativescript-community/ui-material-floatingactionbutton": "^6.2.14",
    "@nativescript-community/ui-material-textfield": "^6.2.14",
    "@nativescript-community/ui-material-textview": "^6.2.14",
    "@nativescript/angular": "^13.0.0",
    "@nativescript/core": "~8.1.1",
    "@nativescript/theme": "~3.0.1",
    "fontawesome": "^5.6.3",
    "nativescript-material-core": "^3.3.2",
    "nativescript-ngx-fonticon": "^7.0.0",
    "rxjs": "~7.4.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.1",
    "@angular/compiler-cli": "~13.1.1",
    "@nativescript/android": "8.1.1",
    "@nativescript/types": "~8.1.1",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "~13.1.1",
    "typescript": "~4.4.4"
  }
}