diff --git a/atomicservicenavigation/interfaces/atomicservicenavigation.js b/atomicservicenavigation/interfaces/atomicservicenavigation.js index 9093c5e0a522005cf7a9756f4bf7e6b8c6830566..bee6b01246d2312eccf9aff8df7b7870254025bc 100644 --- a/atomicservicenavigation/interfaces/atomicservicenavigation.js +++ b/atomicservicenavigation/interfaces/atomicservicenavigation.js @@ -16,6 +16,12 @@ if (!("finalizeConstruction" in ViewPU.prototype)) { Reflect.set(ViewPU.prototype, "finalizeConstruction", () => { }); } +const display = requireNativeModule('ohos.dsiplay'); +export class AtomicServiceNavigation extends ViewPU { + constructor(parent, params, __localStorage, elmtId = -1, paramsLambda = undefined, extraInfo) { + super(parent, __localStorage, elmtId, extraInfo); + if (typeof paramsLambda === "function") { + this.paramsGenerator_ = paramsLambda; const hilog = requireNapi('hilog'); const backGroundColor = ['rgb(0,0,0)', 'rgb(255,255,255)', 'rgb(241,243,245)']; const backGroundTransparentGradientColor = [['rgba(0,0,0,0)', 'rgba(0,0,0,1)'], @@ -104,6 +110,19 @@ export class AtomicServiceNavigation extends ViewPU { } this.__navPathStack = new ObservedPropertyObjectPU(new NavPathStack(), this, 'navPathStack'); this.navigationContent = undefined; + this.__title = new SynchedPropertyObjectOneWayPU(params.title, this, "title"); + this.__titleOptions = new SynchedPropertyObjectOneWayPU(params.titleOptions, this, "titleOptions"); + this.__hideTitleBar = new SynchedPropertySimpleOneWayPU(params.hideTitleBar, this, "hideTitleBar"); + this.__navBarWidth = new SynchedPropertyObjectOneWayPU(params.navBarWidth, this, "navBarWidth"); + this.__mode = new SynchedPropertySimpleOneWayPU(params.mode, this, "mode"); + this.navDestinationBuilder = this.defaultNavDestinationBuilder; + this.__navBarWidthRange = new SynchedPropertyObjectOneWayPU(params.navBarWidthRange, this, "navBarWidthRange"); + this.__minContentWidth = new SynchedPropertyObjectOneWayPU(params.minContentWidth, this, "minContentWidth"); + this.insertComps = undefined; + this.stateChangeCallback = undefined; + this.modeChangeCallback = undefined; + this.__isShow = new ObservedPropertySimplePU(false, this, "isShow"); + this.setInitiallyProvidedValue(params); this.__title = new SynchedPropertyObjectOneWayPU(x.title, this, 'title'); this.__titleOptions = new SynchedPropertyObjectOneWayPU(x.titleOptions, this, 'titleOptions'); this.__gradientBackground = new SynchedPropertyObjectOneWayPU(x.gradientBackground, this, 'gradientBackground'); @@ -122,24 +141,30 @@ export class AtomicServiceNavigation extends ViewPU { this.setInitiallyProvidedValue(x); this.finalizeConstruction(); } - setInitiallyProvidedValue(v) { - if (v.navPathStack !== undefined) { - this.navPathStack = v.navPathStack; + setInitiallyProvidedValue(params) { + if (params.navPathStack !== undefined) { + this.navPathStack = params.navPathStack; } - if (v.navigationContent !== undefined) { - this.navigationContent = v.navigationContent; + if (params.navigationContent !== undefined) { + this.navigationContent = params.navigationContent; } - if (v.titleOptions === undefined) { + if (params.titleOptions === undefined) { this.__titleOptions.set({ isBlurEnabled: true }); } - if (v.navDestinationBuilder !== undefined) { - this.navDestinationBuilder = v.navDestinationBuilder; + if (params.navDestinationBuilder !== undefined) { + this.navDestinationBuilder = params.navDestinationBuilder; } - if (v.stateChangeCallback !== undefined) { - this.stateChangeCallback = v.stateChangeCallback; + if (params.insertComps !== undefined) { + this.insertComps = params.insertComps; } - if (v.modeChangeCallback !== undefined) { - this.modeChangeCallback = v.modeChangeCallback; + if (params.stateChangeCallback !== undefined) { + this.stateChangeCallback = params.stateChangeCallback; + } + if (params.modeChangeCallback !== undefined) { + this.modeChangeCallback = params.modeChangeCallback; + } + if (params.isShow !== undefined) { + this.isShow = params.isShow; } if (v.settings !== undefined) { this.settings = v.settings; @@ -154,6 +179,25 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationHeight = v.navigationHeight; } } + updateStateVars(params) { + this.__title.reset(params.title); + this.__titleOptions.reset(params.titleOptions); + this.__hideTitleBar.reset(params.hideTitleBar); + this.__navBarWidth.reset(params.navBarWidth); + this.__mode.reset(params.mode); + this.__navBarWidthRange.reset(params.navBarWidthRange); + this.__minContentWidth.reset(params.minContentWidth); + } + purgeVariableDependenciesOnElmtId(rmElmtId) { + this.__navPathStack.purgeDependencyOnElmtId(rmElmtId); + this.__title.purgeDependencyOnElmtId(rmElmtId); + this.__titleOptions.purgeDependencyOnElmtId(rmElmtId); + this.__hideTitleBar.purgeDependencyOnElmtId(rmElmtId); + this.__navBarWidth.purgeDependencyOnElmtId(rmElmtId); + this.__mode.purgeDependencyOnElmtId(rmElmtId); + this.__navBarWidthRange.purgeDependencyOnElmtId(rmElmtId); + this.__minContentWidth.purgeDependencyOnElmtId(rmElmtId); + this.__isShow.purgeDependencyOnElmtId(rmElmtId); updateStateVars(u) { this.__title.reset(u.title); this.__titleOptions.reset(u.titleOptions); @@ -185,26 +229,27 @@ export class AtomicServiceNavigation extends ViewPU { this.__mode.aboutToBeDeleted(); this.__navBarWidthRange.aboutToBeDeleted(); this.__minContentWidth.aboutToBeDeleted(); + this.__isShow.aboutToBeDeleted(); SubscriberManager.Get().delete(this.id__()); this.aboutToBeDeletedInternal(); } get navPathStack() { return this.__navPathStack.get(); } - set navPathStack(s) { - this.__navPathStack.set(s); + set navPathStack(newValue) { + this.__navPathStack.set(newValue); } get title() { return this.__title.get(); } - set title(r) { - this.__title.set(r); + set title(newValue) { + this.__title.set(newValue); } get titleOptions() { return this.__titleOptions.get(); } - set titleOptions(q) { - this.__titleOptions.set(q); + set titleOptions(newValue) { + this.__titleOptions.set(newValue); } get gradientBackground() { return this.__gradientBackground.get(); @@ -215,34 +260,56 @@ export class AtomicServiceNavigation extends ViewPU { get hideTitleBar() { return this.__hideTitleBar.get(); } - set hideTitleBar(p) { - this.__hideTitleBar.set(p); + set hideTitleBar(newValue) { + this.__hideTitleBar.set(newValue); } get navBarWidth() { return this.__navBarWidth.get(); } - set navBarWidth(o) { - this.__navBarWidth.set(o); + set navBarWidth(newValue) { + this.__navBarWidth.set(newValue); } get mode() { return this.__mode.get(); } - set mode(n) { - this.__mode.set(n); + set mode(newValue) { + this.__mode.set(newValue); } get navBarWidthRange() { return this.__navBarWidthRange.get(); } - set navBarWidthRange(m) { - this.__navBarWidthRange.set(m); + set navBarWidthRange(newValue) { + this.__navBarWidthRange.set(newValue); } get minContentWidth() { return this.__minContentWidth.get(); } - set minContentWidth(l) { - this.__minContentWidth.set(l); + set minContentWidth(newValue) { + this.__minContentWidth.set(newValue); + } + get isShow() { + return this.__isShow.get(); } - defaultNavDestinationBuilder(i, j, k = null) { + set isShow(newValue) { + this.__isShow.set(newValue); + } + getCurrentWidth() { + let displayClass = display.getDefaultDisplaySync(); + return displayClass.width / displayClass.densityPixels; + } + aboutToAppear() { + this.isShow = this.getCurrentWidth() > 600; + display.on('change', () => { + this.isShow = this.getCurrentWidth() > 600; + }); + } + aboutToDisappear() { + display.off('change'); + } + defaultNavDestinationBuilder(name, param, parent = null) { + } + MenuItemArray() { + return this.isShow && this.insertComps instanceof Array ? this.insertComps : undefined; } BackgroundBuilder(gradientBackground, parent = null) { this.observeComponentCreation2((elmtId, isInitialRender) => { @@ -280,6 +347,8 @@ export class AtomicServiceNavigation extends ViewPU { Canvas.pop(); } initialRender() { + this.observeComponentCreation2((elmtId, isInitialRender) => { + Navigation.create(this.navPathStack, { moduleName: "library", pagePath: "", isUserCreateStack: true }); this.observeComponentCreation2((g, h) => { Navigation.create(this.navPathStack, { moduleName: 'library', pagePath: '', isUserCreateStack: true }); Navigation.title(ObservedObject.GetRawObject(this.title), { @@ -287,6 +356,9 @@ export class AtomicServiceNavigation extends ViewPU { backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, barStyle: this.titleOptions?.barStyle }); + Navigation.menus(this.isShow && this.insertComps instanceof Function ? { builder: () => { + this.insertComps.call(this); + } } : this.MenuItemArray()); Navigation.titleMode(NavigationTitleMode.Mini); Navigation.hideBackButton(true); Navigation.hideTitleBar(this.hideTitleBar); @@ -311,7 +383,7 @@ export class AtomicServiceNavigation extends ViewPU { this.navigationHeight = newValue.height; }); }, Navigation); - this.observeComponentCreation2((c, d) => { + this.observeComponentCreation2((elmtId, isInitialRender) => { If.create(); if (this.navigationContent) { this.ifElseBranchUpdateFunction(0, () => { diff --git a/atomicservicenavigation/source/atomicservicenavigation.ets b/atomicservicenavigation/source/atomicservicenavigation.ets index c332d1e8b27bcf244db2f428a8d9e85a931729d6..994e3ea9103ee213c23e8bd415cd9a1bb54cda8c 100644 --- a/atomicservicenavigation/source/atomicservicenavigation.ets +++ b/atomicservicenavigation/source/atomicservicenavigation.ets @@ -14,6 +14,7 @@ */ import { Callback } from '@ohos.base'; +import { display } from '@kit.ArkUI'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { BusinessError } from '@kit.BasicServicesKit'; @@ -110,8 +111,27 @@ export struct AtomicServiceNavigation { @BuilderParam navDestinationBuilder?: NavDestinationBuilder = this.defaultNavDestinationBuilder; @Prop navBarWidthRange?: [Dimension, Dimension]; @Prop minContentWidth?: Dimension; + @BuilderParam insertComps?: CustomBuilder | Array; stateChangeCallback?: Callback; modeChangeCallback?: Callback; + @State isShow: boolean = false; + + private getCurrentWidth(): number { + let displayClass = display.getDefaultDisplaySync(); + return displayClass.width / displayClass.densityPixels; + } + + aboutToAppear(): void { + this.isShow = this.getCurrentWidth() > 600; + + display.on('change', () => { + this.isShow = this.getCurrentWidth() > 600; + }) + } + + aboutToDisappear(): void { + display.off('change'); + } private settings: RenderingContextSettings = new RenderingContextSettings(true); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private navigationWidth: number = 0; @@ -121,6 +141,8 @@ export struct AtomicServiceNavigation { defaultNavDestinationBuilder(name: string, param?: Object) { } + private MenuItemArray(): undefined | Array { + return this.isShow && this.insertComps instanceof Array ? this.insertComps : undefined; @Builder BackgroundBuilder(gradientBackground: GradientBackground) { Canvas(this.context) @@ -167,6 +189,7 @@ export struct AtomicServiceNavigation { backgroundBlurStyle: this.titleOptions?.isBlurEnabled ? BlurStyle.COMPONENT_THICK : BlurStyle.NONE, barStyle: this.titleOptions?.barStyle }) + .menus(this.isShow && this.insertComps instanceof Function ? this.insertComps() : this.MenuItemArray()) .titleMode(NavigationTitleMode.Mini) .hideBackButton(true) .hideTitleBar(this.hideTitleBar)