Skip to content

Commit

Permalink
feat(navbar): adapt miniprogram's capsule length change feature (#2922)
Browse files Browse the repository at this point in the history 
* feat(navbar): adapt miniprogram's capsule length change feature

wechat add a new feature of displaying the provider of the miniprogram on the capsule. When it
displays, the capsule enxtends above the content of the navbar, this commit adapts this new feature
, hides the content of the navbar when it is covered by the capsule

"feat #2802"

* feat(navbar): dapt miniprogram's capsule length change feature

wechat add a new feature of displaying the provider of the miniprogram on the capsule. When it
displays, the capsule enxtends above the content of the navbar, this commit adapts this new feature
, hides the content of the navbar when it is covered by the capsule

"feat #2802"

* feat(navbar): update snap

* feat(navbar): use getRect adaptor

---------

Co-authored-by: jarmywang <[email protected]>
  • Loading branch information
@jby0107 @jarmywang
jby0107 and jarmywang authored Jul 1, 2024
1 parent c81e40c commit c2cbc52
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 13 deletions.
20 changes: 10 additions & 10 deletions src/navbar/__test__/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ exports[`navbar :base 1`] = `
class="t-navbar__content t-class-content"
>
<wx-view
class="t-navbar__left t-class-left"
class="t-navbar__left t-class-left"
>
<wx-view
class="t-navbar__capsule t-class-capsule"
/>
</wx-view>
<wx-view
class="t-navbar__center t-class-center"
class="t-navbar__center t-class-center"
>
<wx-text
class="t-navbar__center-title t-class-title"
Expand Down Expand Up @@ -49,14 +49,14 @@ exports[`navbar :base 2`] = `
class="t-navbar__content t-class-content"
>
<wx-view
class="t-navbar__left t-class-left"
class="t-navbar__left t-class-left"
>
<wx-view
class="t-navbar__capsule t-class-capsule"
/>
</wx-view>
<wx-view
class="t-navbar__center t-class-center"
class="t-navbar__center t-class-center"
>
<wx-text
class="t-navbar__center-title t-class-title"
Expand Down Expand Up @@ -84,14 +84,14 @@ exports[`navbar :base 3`] = `
class="t-navbar__content t-class-content"
>
<wx-view
class="t-navbar__left t-class-left"
class="t-navbar__left t-class-left"
>
<wx-view
class="t-navbar__capsule t-class-capsule"
/>
</wx-view>
<wx-view
class="t-navbar__center t-class-center"
class="t-navbar__center t-class-center"
>
<wx-text
class="t-navbar__center-title t-class-title"
Expand Down Expand Up @@ -119,14 +119,14 @@ exports[`navbar :fixed 1`] = `
class="t-navbar__content t-class-content"
>
<wx-view
class="t-navbar__left t-class-left"
class="t-navbar__left t-class-left"
>
<wx-view
class="t-navbar__capsule t-class-capsule"
/>
</wx-view>
<wx-view
class="t-navbar__center t-class-center"
class="t-navbar__center t-class-center"
>
<wx-text
class="t-navbar__center-title t-class-title"
Expand Down Expand Up @@ -154,14 +154,14 @@ exports[`navbar :menu button 1`] = `
class="t-navbar__content t-class-content"
>
<wx-view
class="t-navbar__left t-class-left"
class="t-navbar__left t-class-left"
>
<wx-view
class="t-navbar__capsule t-class-capsule"
/>
</wx-view>
<wx-view
class="t-navbar__center t-class-center"
class="t-navbar__center t-class-center"
>
<wx-text
class="t-navbar__center-title t-class-title"
Expand Down
10 changes: 10 additions & 0 deletions src/navbar/navbar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,10 +82,15 @@
display: flex;
align-items: center;
margin-left: @spacer-1;
transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

&-arrow {
font-size: @navbar-left-arrow-size;
}

&--hide {
opacity: 0;
}
}

&__capsule {
Expand Down Expand Up @@ -129,6 +134,7 @@
align-items: center;
justify-content: center;
overflow: hidden;
transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

&:empty {
display: none;
Expand All @@ -141,5 +147,9 @@
overflow: hidden;
font-weight: @navbar-title-font-weight;
}

&--hide {
opacity: 0;
}
}
}
45 changes: 45 additions & 0 deletions src/navbar/navbar.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { SuperComponent, wxComponent } from '../common/src/index';
import { getRect } from '../common/utils';
import config from '../common/config';
import props from './props';

Expand Down Expand Up @@ -62,6 +63,8 @@ export default class Navbar extends SuperComponent {
classPrefix: name,
boxStyle: '',
showTitle: '',
hideLeft: false, // 隐藏左侧内容
hideCenter: false, // 隐藏中部内容
};

attached() {
Expand All @@ -86,14 +89,56 @@ export default class Navbar extends SuperComponent {
this.setData({
boxStyle: `${boxStyleList.join('; ')}`,
});
// @ts-ignore
if (wx.onMenuButtonBoundingClientRectWeightChange) {
// fixme: 规避单元测试无法识别新api，更新后可删除
// @ts-ignore
wx.onMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res)); // 监听胶囊条长度变化，隐藏遮挡的内容
}
},
fail: (err) => {
console.error('navbar 获取系统信息失败', err);
},
});
}

detached() {
// @ts-ignore
if (wx.offMenuButtonBoundingClientRectWeightChange) {
// fixme: 规避单元测试无法识别新api，更新后可删除
// @ts-ignore
wx.offMenuButtonBoundingClientRectWeightChange((res: object) => this.queryElements(res));
}
}

methods = {
/**
* 比较胶囊条和navbar内容，决定是否隐藏
* @param capsuleRect API返回值，胶囊条的位置信息
*/
queryElements(capsuleRect) {
Promise.all([
getRect(this, `.${this.data.classPrefix}__left`),
getRect(this, `.${this.data.classPrefix}__center`),
]).then(([leftRect, centerRect]) => {
if (leftRect.right > capsuleRect.left) {
this.setData({
hideLeft: true,
hideCenter: true,
});
} else if (centerRect.right > capsuleRect.left) {
this.setData({
hideLeft: false,
hideCenter: true,
});
} else {
this.setData({
hideLeft: false,
hideCenter: false,
});
}
});
},
goBack() {
const { delta } = this.data;
// eslint-disable-next-line
Expand Down
4 changes: 2 additions & 2 deletions src/navbar/navbar.wxml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
>
<view wx:if="{{fixed}}" class="{{classPrefix}}__placeholder {{prefix}}-class-placeholder" />
<view class="{{classPrefix}}__content {{prefix}}-class-content">
<view class="{{classPrefix}}__left {{prefix}}-class-left">
<view class="{{classPrefix}}__left {{hideLeft ? classPrefix + '__left--hide' : ''}} {{prefix}}-class-left">
<view wx:if="{{leftArrow}}" class="{{classPrefix}}__btn" bind:tap="goBack" aria-role="button" aria-label="返回">
<t-icon name="chevron-left" class="{{classPrefix}}__left-arrow" />
</view>
Expand All @@ -14,7 +14,7 @@
<slot name="capsule" />
</view>
</view>
<view class="{{classPrefix}}__center {{prefix}}-class-center">
<view class="{{classPrefix}}__center {{hideCenter ? classPrefix + '__center--hide' : ''}} {{prefix}}-class-center">
<slot name="title" />
<text wx:if="{{title}}" class="{{classPrefix}}__center-title {{prefix}}-class-title">{{showTitle}}</text>
</view>
Expand Down
2 changes: 1 addition & 1 deletion tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
"tdesign-miniprogram/*": ["miniprogram_dist/*"]
}
},
"include": ["src/**/*", "example/**/*", "site/**/*", "typing.d.ts"]
"include": ["src/**/*", "example/**/*", "site/**/*", "typing.d.ts", "wechat-miniprogram-extension.d.ts"]
}
9 changes: 9 additions & 0 deletions wechat-miniprogram-extension.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* fixme: miniprogram-api-typings 未加入的新api临时声明，更新后可删除
*/
declare namespace WechatMiniprogram {
interface Wx {
onMenuButtonBoundingClientRectWeightChange(callback: (rect: any) => void): void;
offMenuButtonBoundingClientRectWeightChange(callback: (res: any) => void): void;
}
}

0 comments on commit c2cbc52

Please sign in to comment.