From 093afd3be27ea5e9692839845b69bd56e2405518 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期二, 13 八月 2024 23:49:45 +0800
Subject: [PATCH] 204.8.13
---
miniprogram_npm/tdesign-miniprogram/message/message.js | 255 ++++++++++++++++++++++++--------------------------
1 files changed, 122 insertions(+), 133 deletions(-)
diff --git a/miniprogram_npm/tdesign-miniprogram/message/message.js b/miniprogram_npm/tdesign-miniprogram/message/message.js
index 73b5a65..b240baa 100644
--- a/miniprogram_npm/tdesign-miniprogram/message/message.js
+++ b/miniprogram_npm/tdesign-miniprogram/message/message.js
@@ -6,178 +6,167 @@
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
+import { MessageType } from './message.interface';
import props from './props';
-import { getRect, unitConvert, calcIcon, isObject } from '../common/utils';
+import { unitConvert } from '../common/utils';
+const SHOW_DURATION = 400;
const { prefix } = config;
const name = `${prefix}-message`;
-const SHOW_DURATION = 500;
-const THEME_ICON = {
- info: 'info-circle-filled',
- success: 'check-circle-filled',
- warning: 'info-circle-filled',
- error: 'error-circle-filled',
-};
let Message = class Message extends SuperComponent {
constructor() {
super(...arguments);
- this.externalClasses = [
- `${prefix}-class`,
- `${prefix}-class-content`,
- `${prefix}-class-icon`,
- `${prefix}-class-link`,
- `${prefix}-class-close-btn`,
- ];
this.options = {
- styleIsolation: 'apply-shared',
multipleSlots: true,
};
this.properties = Object.assign({}, props);
this.data = {
prefix,
classPrefix: name,
- loop: -1,
- animation: [],
- showAnimation: [],
- wrapTop: -999,
+ messageList: [],
};
+ this.index = 0;
+ this.instances = [];
+ this.gap = 12;
this.observers = {
- marquee(val) {
- if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') {
+ visible(value) {
+ if (value) {
+ this.setMessage(this.properties, this.properties.theme);
+ }
+ else {
this.setData({
- marquee: {
- speed: 50,
- loop: -1,
- delay: 0,
- },
+ messageList: [],
});
}
},
- 'icon, theme'(icon, theme) {
- this.setData({
- _icon: calcIcon(icon, THEME_ICON[theme]),
- });
- },
- link(v) {
- const _link = isObject(v) ? Object.assign({}, v) : { content: v };
- this.setData({ _link });
- },
- closeBtn(v) {
- this.setData({
- _closeBtn: calcIcon(v, 'close'),
- });
+ };
+ this.pageLifetimes = {
+ show() {
+ this.hideAll();
},
};
- this.closeTimeoutContext = 0;
- this.nextAnimationContext = 0;
- this.resetAnimation = wx.createAnimation({
- duration: 0,
- timingFunction: 'linear',
- });
+ this.lifetimes = {
+ ready() {
+ this.memoInitialData();
+ },
+ };
}
- ready() {
- this.memoInitalData();
+ memoInitialData() {
+ this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
}
- memoInitalData() {
- this.initalData = Object.assign(Object.assign({}, this.properties), this.data);
- }
- resetData(cb) {
- this.setData(Object.assign({}, this.initalData), cb);
- }
- detached() {
- this.clearMessageAnimation();
- }
- checkAnimation() {
- const { marquee } = this.properties;
- if (!marquee || marquee.loop === 0) {
- return;
+ setMessage(msg, theme = MessageType.info) {
+ let id = `${name}_${this.index}`;
+ if (msg.single) {
+ id = name;
}
- const speeding = marquee.speed;
- if (this.data.loop > 0) {
- this.data.loop -= 1;
+ this.gap = unitConvert(msg.gap || this.gap);
+ const msgObj = Object.assign(Object.assign({}, msg), { theme,
+ id, gap: this.gap });
+ const instanceIndex = this.instances.findIndex((x) => x.id === id);
+ if (instanceIndex < 0) {
+ this.addMessage(msgObj);
}
- else if (this.data.loop === 0) {
- this.setData({ animation: this.resetAnimation.translateX(0).step().export() });
- return;
- }
- if (this.nextAnimationContext) {
- this.clearMessageAnimation();
- }
- const warpID = `#${name}__text-wrap`;
- const nodeID = `#${name}__text`;
- Promise.all([getRect(this, nodeID), getRect(this, warpID)]).then(([nodeRect, wrapRect]) => {
- this.setData({
- animation: this.resetAnimation.translateX(wrapRect.width).step().export(),
- }, () => {
- const durationTime = ((nodeRect.width + wrapRect.width) / speeding) * 1000;
- const nextAnimation = wx
- .createAnimation({
- duration: durationTime,
- })
- .translateX(-nodeRect.width)
- .step()
- .export();
- setTimeout(() => {
- this.nextAnimationContext = setTimeout(this.checkAnimation.bind(this), durationTime);
- this.setData({ animation: nextAnimation });
- }, 20);
+ else {
+ const instance = this.instances[instanceIndex];
+ const offsetHeight = this.getOffsetHeight(instanceIndex);
+ instance.resetData(() => {
+ instance.setData(msgObj, instance.show.bind(instance, offsetHeight));
+ instance.onHide = () => {
+ this.close(id);
+ };
});
- });
- }
- clearMessageAnimation() {
- clearTimeout(this.nextAnimationContext);
- this.nextAnimationContext = 0;
- }
- show() {
- const { duration, marquee, offset } = this.properties;
- this.setData({ visible: true, loop: marquee.loop || this.data.loop });
- this.reset();
- this.checkAnimation();
- if (duration && duration > 0) {
- this.closeTimeoutContext = setTimeout(() => {
- this.hide();
- this.triggerEvent('duration-end', { self: this });
- }, duration);
}
- const wrapID = `#${name}`;
- getRect(this, wrapID).then((wrapRect) => {
- this.setData({ wrapTop: -wrapRect.height }, () => {
- this.setData({
- showAnimation: wx
- .createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
- .translateY(wrapRect.height + unitConvert(offset[0]))
- .step()
- .export(),
- });
- });
- });
}
- hide() {
- this.reset();
+ addMessage(msgObj) {
+ const list = [...this.data.messageList, { id: msgObj.id }];
this.setData({
- showAnimation: wx
- .createAnimation({ duration: SHOW_DURATION, timingFunction: 'ease' })
- .translateY(this.data.wrapTop)
- .step()
- .export(),
+ messageList: list,
+ }, () => {
+ const offsetHeight = this.getOffsetHeight();
+ const instance = this.showMessageItem(msgObj, msgObj.id, offsetHeight);
+ if (this.instances) {
+ this.instances.push(instance);
+ this.index += 1;
+ }
});
- setTimeout(() => {
- this.setData({ visible: false, animation: [] });
- }, SHOW_DURATION);
}
- reset() {
- if (this.nextAnimationContext) {
- this.clearMessageAnimation();
+ getOffsetHeight(index = -1) {
+ let offsetHeight = 0;
+ let len = index;
+ if (len === -1 || len > this.instances.length) {
+ len = this.instances.length;
}
- clearTimeout(this.closeTimeoutContext);
- this.closeTimeoutContext = 0;
+ for (let i = 0; i < len; i += 1) {
+ const instance = this.instances[i];
+ offsetHeight += instance.data.height + instance.data.gap;
+ }
+ return offsetHeight;
+ }
+ showMessageItem(options, id, offsetHeight) {
+ const instance = this.selectComponent(`#${id}`);
+ if (instance) {
+ instance.resetData(() => {
+ instance.setData(options, instance.show.bind(instance, offsetHeight));
+ instance.onHide = () => {
+ this.close(id);
+ };
+ });
+ return instance;
+ }
+ console.error('鏈壘鍒扮粍浠�,璇风‘璁� selector && context 鏄惁姝ｇ‘');
+ }
+ close(id) {
+ setTimeout(() => {
+ this.removeMsg(id);
+ }, SHOW_DURATION);
+ this.removeInstance(id);
+ }
+ hide(id) {
+ if (!id) {
+ this.hideAll();
+ }
+ const instance = this.instances.find((x) => x.id === id);
+ if (instance) {
+ instance.hide();
+ }
+ }
+ hideAll() {
+ for (let i = 0; i < this.instances.length;) {
+ const instance = this.instances[i];
+ instance.hide();
+ }
+ }
+ removeInstance(id) {
+ const index = this.instances.findIndex((x) => x.id === id);
+ if (index < 0)
+ return;
+ const instance = this.instances[index];
+ const removedHeight = instance.data.height;
+ this.instances.splice(index, 1);
+ for (let i = index; i < this.instances.length; i += 1) {
+ const instance = this.instances[i];
+ instance.setData({
+ wrapTop: instance.data.wrapTop - removedHeight - instance.data.gap,
+ });
+ }
+ }
+ removeMsg(id) {
+ const msgIndex = this.data.messageList.findIndex((x) => x.id === id);
+ if (msgIndex > -1) {
+ this.data.messageList.splice(msgIndex, 1);
+ this.setData({
+ messageList: this.data.messageList,
+ });
+ }
}
handleClose() {
- this.hide();
this.triggerEvent('close-btn-click');
}
handleLinkClick() {
this.triggerEvent('link-click');
}
+ handleDurationEnd() {
+ this.triggerEvent('duration-end');
+ }
};
Message = __decorate([
wxComponent()
--
Gitblit v1.9.3