@tarojs/components
Version:
191 lines (190 loc) • 4.4 kB
JavaScript
import { h, Host } from '@stencil/core';
import classNames from 'classnames';
import { handleStencilNodes } from '../../utils';
export class View {
constructor() {
this.startTime = 0;
this.animation = undefined;
this.hoverClass = undefined;
this.hoverStartTime = 50;
this.hoverStayTime = 400;
this.hover = false;
this.touch = false;
}
onTouchStart() {
if (this.hoverClass) {
this.touch = true;
setTimeout(() => {
if (this.touch) {
this.hover = true;
}
}, this.hoverStartTime);
}
this.timeoutEvent = setTimeout(() => {
this.onLongPress.emit();
}, 350);
this.startTime = Date.now();
}
onTouchMove() {
clearTimeout(this.timeoutEvent);
}
onTouchEnd() {
const spanTime = Date.now() - this.startTime;
if (spanTime < 350) {
clearTimeout(this.timeoutEvent);
}
if (this.hoverClass) {
this.touch = false;
setTimeout(() => {
if (!this.touch) {
this.hover = false;
}
}, this.hoverStayTime);
}
}
componentDidRender() {
handleStencilNodes(this.el);
}
render() {
const cls = classNames({
[`${this.hoverClass}`]: this.hover
});
let attr = {};
if (!!this.animation) {
attr['animation'] = this.animation;
attr['data-animation'] = this.animation;
}
return (h(Host, Object.assign({ class: cls }, attr), h("slot", null)));
}
static get is() { return "taro-view-core"; }
static get originalStyleUrls() {
return {
"$": ["./style/index.scss"]
};
}
static get styleUrls() {
return {
"$": ["./style/index.css"]
};
}
static get properties() {
return {
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "animation",
"reflect": false
},
"hoverClass": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-class",
"reflect": false
},
"hoverStartTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-start-time",
"reflect": false,
"defaultValue": "50"
},
"hoverStayTime": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "hover-stay-time",
"reflect": false,
"defaultValue": "400"
}
};
}
static get states() {
return {
"hover": {},
"touch": {}
};
}
static get events() {
return [{
"method": "onLongPress",
"name": "longpress",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "touchstart",
"method": "onTouchStart",
"target": undefined,
"capture": false,
"passive": true
}, {
"name": "touchmove",
"method": "onTouchMove",
"target": undefined,
"capture": false,
"passive": true
}, {
"name": "touchend",
"method": "onTouchEnd",
"target": undefined,
"capture": false,
"passive": true
}];
}
}