Skip to content

Tabs animation and selected index fixes #8377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vtrifonov merged 2 commits into from
Feb 25, 2020
Merged

Tabs animation and selected index fixes #8377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b91e61
fix(tabs): animation freeze when chaning tabs
vtrifonov Feb 25, 2020
2b0cab1
fix(tabs): poper item selecting programically
vtrifonov Feb 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion api-reports/NativeScript.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2934,7 +2934,7 @@ export abstract class ViewBase extends Observable {
// (undocumented)
_setupAsRootView(context: any): void;
_setupUI(context: any /* android.content.Context */, atIndex?: number): void;
_shouldDelayLoad(): boolean;
_shouldDelayLayout(): boolean;
showModal(moduleName: string, modalOptions: ShowModalOptions): ViewBase;
showModal(view: ViewBase, modalOptions: ShowModalOptions): ViewBase;
public readonly style: Style;
Expand Down
2 changes: 1 addition & 1 deletion nativescript-core/ui/core/view-base/view-base.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -474,7 +474,7 @@ export abstract class ViewBase extends Observable {
* When returning true the callLoaded method will be run in setTimeout
* Method is intended to be overridden by inheritors and used as "protected"
*/
_shouldDelayLoad(): boolean;
_shouldDelayLayout(): boolean;

/**
* @private
Expand Down
22 changes: 15 additions & 7 deletions nativescript-core/ui/core/view-base/view-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,12 +561,24 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
}
}

private performLayout(currentRun = 0) {
// if there's an animation in progress we need to delay the layout
// we've added a guard of 5000 milliseconds execution
// to make sure that the layout will happen even if the animation haven't finished in 5 seconds
if (this._shouldDelayLayout() && currentRun < 100) {
setTimeout(() => this.performLayout(currentRun), currentRun);
currentRun++;
} else {
this.parent.requestLayout();
}
}

@profile
public requestLayout(): void {
// Default implementation for non View instances (like TabViewItem).
const parent = this.parent;
if (parent) {
parent.requestLayout();
this.performLayout();
}
}

Expand Down Expand Up @@ -615,15 +627,11 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition

public loadView(view: ViewBase): void {
if (view && !view.isLoaded) {
if (this._shouldDelayLoad()) {
setTimeout(() => view.callLoaded());
} else {
view.callLoaded();
}
view.callLoaded();
}
}

public _shouldDelayLoad(): boolean {
public _shouldDelayLayout(): boolean {
return false;
}

Expand Down
2 changes: 1 addition & 1 deletion nativescript-core/ui/page/page.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,7 @@ export class Page extends PageBase {
//
}

public _shouldDelayLoad(): boolean {
public _shouldDelayLayout(): boolean {
return this._frame && this._frame._animationInProgress;
}

Expand Down
28 changes: 18 additions & 10 deletions nativescript-core/ui/tabs/tabs.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { TabContentItem } from "../tab-navigation-base/tab-content-item";
import { TabStrip } from "../tab-navigation-base/tab-strip";
import { TabStripItem } from "../tab-navigation-base/tab-strip-item";
import { TextTransform } from "../text-base";
import { TextTransform, ViewBase } from "../text-base";

// Requires
import { Color } from "../../color";
Expand Down Expand Up @@ -873,6 +873,9 @@ export class Tabs extends TabsBase {
// TODO: investigate why this call is necessary to actually toggle item appearance
this.viewController.tabBar.sizeToFit();
this.tabStrip.setNativeView(this.viewController.tabBar);
if (this.selectedIndex) {
this.viewController.tabBar.setSelectedItemAnimated(this.tabBarItems[this.selectedIndex], false);
}
}

// const length = items ? items.length : 0;
Expand Down Expand Up @@ -1066,6 +1069,17 @@ export class Tabs extends TabsBase {
this._ios.tabBar.tintColor = nativeColor;
}

private visitFrames(view: ViewBase, operation: (frame: Frame) => {}) {
if (view instanceof Frame) {
operation(view);
}
view.eachChild(child => {
this.visitFrames(child, operation);

return true;
});
}

[selectedIndexProperty.setNative](value: number) {
// TODO
// if (traceEnabled()) {
Expand All @@ -1092,17 +1106,11 @@ export class Tabs extends TabsBase {

this._currentNativeSelectedIndex = value;

let itemControllerOwner = null;
if (itemController._owner) {
let itemControllerOwner = <Frame>itemController._owner.get();
// do not load new views while the animation is in progress https://stackoverflow.com/a/47031524/613113
itemControllerOwner._animationInProgress = true;
}
// do not make layout changes while the animation is in progress https://stackoverflow.com/a/47031524/613113
this.visitFrames(item, frame => frame._animationInProgress = true);

this.viewController.setViewControllersDirectionAnimatedCompletion(controllers, navigationDirection, true, (finished: boolean) => {
if (itemControllerOwner) {
itemControllerOwner._animationInProgress = false;
}
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));
Expand Down