javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: cleanup api

Browse Source
This commit is contained in:
Nathan Walker
2023-03-13 21:31:45 -07:00
parent daad13ee6b
commit da5cfa9bda
7 changed files with 52 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/toolbox/src/pages/transitions.ts
View File

@@ -13,38 +13,29 @@ export class TransitionsModel extends Observable {
open() {
page.frame.navigate({
moduleName: `pages/transitions/transitions-detail`,
transition: {
instance: SharedTransition.configure({
page,
instance: new PageTransition(),
toPageStart: {
duration: 1000,
},
fromPageEnd: {
duration: 500,
},
}),
},
transition: SharedTransition.custom(new PageTransition(), {
toPageStart: {
duration: 1000,
},
fromPageEnd: {
duration: 500,
},
}),
});
}
openModal() {
page.showModal('pages/transitions/transitions-modal', {
context: {},
transition: {
instance: SharedTransition.configure({
page,
instance: new ModalTransition(),
toPageStart: {
y: 200,
duration: 1000,
},
fromPageEnd: {
y: 100,
duration: 500,
},
}),
},
transition: SharedTransition.custom(new ModalTransition(), {
toPageStart: {
y: 200,
duration: 1000,
},
fromPageEnd: {
y: 100,
duration: 500,
},
}),
closeCallback(args) {
console.log('close modal callback', args);
},

8
packages/core/ui/core/view/view-common.ts
View File

@@ -27,6 +27,7 @@ import { AccessibilityEventOptions, AccessibilityLiveRegion, AccessibilityRole,
import { accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
import { accessibilityBlurEvent, accessibilityFocusChangedEvent, accessibilityFocusEvent, accessibilityPerformEscapeEvent, getCurrentFontScale } from '../../../accessibility';
import { CSSShadow } from '../../styling/css-shadow';
import { SharedTransition } from '../../transition/shared-transition';
// helpers (these are okay re-exported here)
export * from './view-helper';
@@ -362,7 +363,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
public showModal(...args): ViewDefinition {
const { view, options } = this.getModalOptions(args);
if (options.transition?.instance) {
SharedTransition.updateState(options.transition?.instance.id, {
page: this,
toPage: view,
});
}
view._showNativeModalView(this, options);
return view;

8
packages/core/ui/frame/frame-common.ts
View File

@@ -11,6 +11,7 @@ import { Builder } from '../builder';
import { sanitizeModuleName } from '../builder/module-name-sanitizer';
import { profile } from '../../profiling';
import { FRAME_SYMBOL } from './frame-helpers';
import { SharedTransition } from '../transition/shared-transition';
export { NavigationType } from './frame-interfaces';
export type { AndroidActivityCallbacks, AndroidFragmentCallbacks, AndroidFrame, BackstackEntry, NavigationContext, NavigationEntry, NavigationTransition, TransitionState, ViewEntry, iOSFrame } from './frame-interfaces';
@@ -398,6 +399,13 @@ export class FrameBase extends CustomLayoutView {
const backstackEntry = navigationContext.entry;
const isBackNavigation = navigationContext.navigationType === NavigationType.back;
this._onNavigatingTo(backstackEntry, isBackNavigation);
const navigationTransition = this._getNavigationTransition(backstackEntry.entry);
if (navigationTransition?.instance) {
SharedTransition.updateState(navigationTransition?.instance.id, {
page: this.currentPage,
toPage: this,
});
}
this._navigateCore(backstackEntry);
}

6
packages/core/ui/page/index.ios.ts
View File

@@ -427,12 +427,8 @@ export class Page extends PageBase {
constructor() {
super();
const controller = UIViewControllerImpl.initWithOwner(new WeakRef(this));
this.viewController = this._ios = controller;
// Make transitions look good
controller.view.backgroundColor = this._backgroundColor;
console.log('here for Page:', this.viewController);
SharedTransition.addPageToTop(this);
this.viewController = this._ios = controller;
}
createNativeView() {

3
packages/core/ui/transition/modal-transition.ios.ts
View File

@@ -168,8 +168,7 @@ class ModalTransitionController extends NSObject implements UIViewControllerAnim
for (const presenting of owner.sharedElements.presenting) {
presenting.snapshot.removeFromSuperview();
}
SharedTransition.updateState({
id: owner.id,
SharedTransition.updateState(owner.id, {
activeType: SharedTransitionAnimationType.dismiss,
});
transitionContext.completeTransition(true);

7
packages/core/ui/transition/page-transition.ios.ts
View File

@@ -107,8 +107,7 @@ export class PageTransition extends Transition {
presentingView.opacity = 0;
presentedView.opacity = 0;
// add snapshot to animate
// transitionContext.containerView.addSubview(sharedElementSnapshot);
transitionContext.containerView.insertSubviewAboveSubview(sharedElementSnapshot, this.presented.view);
transitionContext.containerView.addSubview(sharedElementSnapshot);
}
const cleanupPresent = () => {
@@ -129,8 +128,7 @@ export class PageTransition extends Transition {
for (const presenting of this.sharedElements.presenting) {
presenting.snapshot.removeFromSuperview();
}
SharedTransition.updateState({
id: this.id,
SharedTransition.updateState(this.id, {
activeType: SharedTransitionAnimationType.dismiss,
});
transitionContext.completeTransition(true);
@@ -219,7 +217,6 @@ export class PageTransition extends Transition {
for (const p of this.sharedElements.presenting) {
p.snapshot.alpha = p.endOpacity;
transitionContext.containerView.addSubview(p.snapshot);
// transitionContext.containerView.insertSubviewBelowSubview(p.snapshot, fromViewCtrl.view);
}
const cleanupDismiss = () => {

44
packages/core/ui/transition/shared-transition.ts
View File

@@ -1,7 +1,6 @@
import type { Transition } from '.';
import { querySelectorAll } from '../core/view-base';
import { querySelectorAll, ViewBase } from '../core/view-base';
import type { View } from '../core/view';
import type { Page } from '../page';
export const DEFAULT_DURATION = 0.35;
// always increment when adding new transitions to be able to track their state
@@ -13,7 +12,7 @@ export interface SharedTransitionConfig {
/**
* Page which will start the transition
*/
page?: Page;
page?: ViewBase;
/**
* Preconfigured transition or your own custom configured one
*/
@@ -32,9 +31,8 @@ export interface SharedTransitionConfig {
fromPageEnd?: SharedTransitionPageProperties;
}
export interface SharedTransitionState extends SharedTransitionConfig {
id?: number;
activeType?: SharedTransitionAnimationType;
toPage?: Page;
toPage?: ViewBase;
}
type SharedTransitionPageProperties = {
x?: number;
@@ -48,27 +46,26 @@ type SharedTransitionPageProperties = {
duration?: number;
};
/**
* Shared Element Transition (experimental)
* Shared Element Transitions (experimental)
*
* no
* Note: some APIs may change in subsequent releases
* Note: some APIs may change in future releases
*/
export class SharedTransition {
static configure(options: SharedTransitionConfig): Transition {
SharedTransition.updateState({
static custom(instance: Transition, options: SharedTransitionConfig): { instance: Transition } {
SharedTransition.updateState(instance.id, {
...options,
id: options.instance.id,
instance,
activeType: SharedTransitionAnimationType.present,
});
return options.instance;
return { instance };
}
static currentStack: Array<SharedTransitionState>;
static updateState(state: SharedTransitionState) {
static updateState(id: number, state: SharedTransitionState) {
if (!SharedTransition.currentStack) {
SharedTransition.currentStack = [];
}
const existingTransition = SharedTransition.getState(state.id);
const existingTransition = SharedTransition.getState(id);
if (existingTransition) {
// updating existing
for (const key in state) {
@@ -79,29 +76,18 @@ export class SharedTransition {
SharedTransition.currentStack.push(state);
}
}
static addPageToTop(page: Page) {
if (SharedTransition.currentStack?.length) {
const top = SharedTransition.currentStack.slice(-1)[0];
if (top) {
SharedTransition.updateState({
id: top.id,
toPage: page,
});
}
}
}
static getState(id: number) {
return SharedTransition.currentStack.find((t) => t.id === id);
return SharedTransition.currentStack.find((t) => t.instance.id === id);
}
static finishState(id: number) {
const index = SharedTransition.currentStack.findIndex((t) => t.id === id);
const index = SharedTransition.currentStack.findIndex((t) => t.instance.id === id);
if (index > -1) {
SharedTransition.currentStack.splice(index, 1);
}
}
static getSharedElements(
fromPage: Page,
toPage: Page
fromPage: ViewBase,
toPage: ViewBase
): {
sharedElements: Array<View>;
presented: Array<View>;