ukelli-ui
Version:
Base on React's UI lib. Make frontend's dev simpler and faster.
196 lines (195 loc) • 8.24 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import React, { Component } from 'react';
import { DebounceClass, Call } from 'basic-helper';
import { Icon } from '../icon';
var TRANSTION_TIME = 2000;
var delayExec = new DebounceClass();
/**
* 3D 效果的轮播控件，暂时没有用
*
* @export
* @class Carousel3D
* @extends {Component}
*/
var Carousel3D = /** @class */ (function (_super) {
__extends(Carousel3D, _super);
function Carousel3D(props) {
var _this = _super.call(this, props) || this;
_this.defaultRotateX = window.$UKE.isMobile ? '200px' : '1600px';
_this.handleTouchStart = function (e) {
var touches = e.changedTouches || e;
_this.startPageX = touches[0] ? touches[0].pageX : touches.pageX;
};
_this.handleTouchEnd = function (e) {
var activeIdx = _this.state.activeIdx;
var touches = e.changedTouches || e;
_this.endPageX = touches[0] ? touches[0].pageX : touches.pageX;
var touchOffset = _this.endPageX - _this.startPageX;
if (Math.abs(touchOffset) < 50) {
return _this.showDetail();
}
var toLeft = touchOffset < 0;
_this.roll(activeIdx + (toLeft ? -1 : 1));
};
_this.showDetail = function () {
var activeArea = document.querySelector('.card-render-group .card-item.active .action-area');
if (activeArea)
activeArea.click();
};
var config = props.config;
_this.state = {
activeIdx: 0,
bannerTotalWidth: 0,
rotateIdx: 0,
carouselRotateY: 0
};
_this.timer = null;
_this.freq = 5000;
_this.isStarted = false;
_this._loopConfig = config;
var configIdx = 0;
// for (var i = 0; i < 6; i++) {
// this._loopConfig.push(config[configIdx]);
// configIdx++;
// configIdx = config[configIdx] ? configIdx : 0;
// }
_this.animateDuration = 1000;
_this.bannerItemWidth = 800;
_this.configLen = config.length;
_this.eachItemRotate = 360 / _this.configLen;
return _this;
}
Carousel3D.prototype.componentDidUpdate = function (prevProps) {
if (this.props.config.length == 0 && prevProps.config.length > 0) {
this.startLoop();
}
};
Carousel3D.prototype.componentDidMount = function () {
this.setState({
bannerTotalWidth: this.bannerItemWidth * this.configLen
});
this.setActiveIdx(this.props.config.length - 1);
};
Carousel3D.prototype.componentWillUnmount = function () {
this.stopLoop();
};
Carousel3D.prototype.startLoop = function () {
var _this = this;
var self = this;
if (this.timer)
this.stopLoop();
this.timer = setInterval(function () {
var activeIdx = _this.state.activeIdx;
/**
* 如果不在当前的标签，就不渲染
*/
if (!document.hidden)
self.roll(activeIdx - 1);
}, this.freq);
};
Carousel3D.prototype.stopLoop = function () {
clearInterval(this.timer);
this.timer = null;
};
Carousel3D.prototype.setActiveIdx = function (idx) {
this.startLoop();
};
Carousel3D.prototype.roll = function (type, callback) {
var _this = this;
var self = this;
this.isAnimating = true;
this.stopLoop();
var _a = this.state, carouselRotateY = _a.carouselRotateY, activeIdx = _a.activeIdx, rotateIdx = _a.rotateIdx;
var nextRotateY = carouselRotateY;
var nextIdx = activeIdx;
var nextRotateIdx = activeIdx;
var currGroupLen = this.configLen - 1;
if (!!+type || type == 0) {
nextIdx = type;
nextRotateIdx = rotateIdx - activeIdx + type;
}
nextRotateY = nextRotateIdx * this.eachItemRotate;
// 判断索引
if (nextIdx < 0)
nextIdx = currGroupLen;
if (nextIdx > currGroupLen)
nextIdx = 0;
this.setState({
carouselRotateY: nextRotateY,
activeIdx: nextIdx,
rotateIdx: nextRotateIdx,
}, function () {
Call(callback, nextIdx);
setTimeout(function () {
self.isAnimating = false;
}, _this.animateDuration);
});
};
Carousel3D.prototype.rollAndEmitChangeEvent = function (type) {
var _a = this.props, onClickItem = _a.onClickItem, onChange = _a.onChange;
if (this.isAnimating || (!type && type != 0))
return;
this.roll(type, function (nextIdx) {
Call(onChange, nextIdx);
});
};
Carousel3D.prototype.handleWheel = function (e) {
var _this = this;
var self = this;
this.oneWheel += e.deltaY; // 返回鼠标滚轮的垂直滚动量
// 防抖
delayExec.exec(function () {
// this.queryOrderDetail();
var rollTyoe;
if (self.oneWheel > 50)
rollTyoe = '+';
if (self.oneWheel < -50)
rollTyoe = '-';
delayExec.exec(function () {
if (!rollTyoe)
return;
_this.rollAndEmitChangeEvent(rollTyoe);
}, 20);
self.oneWheel = 0;
}, 10);
};
Carousel3D.prototype.render = function () {
var _this = this;
var _a = this.state, carouselRotateY = _a.carouselRotateY, activeIdx = _a.activeIdx, bannerTotalWidth = _a.bannerTotalWidth;
var _b = this.props, config = _b.config, _c = _b.isMobile, isMobile = _c === void 0 ? false : _c, onClickItem = _b.onClickItem;
return (React.createElement("div", { onWheel: function (e) { return _this.handleWheel(e); }, className: "card-render-group" },
React.createElement("div", { className: "fill-h-w", style: {
// 'transform': `translateZ(-${defaultRotateX})`,
} },
React.createElement("div", { className: "carousel", style: {
transform: "rotateY(" + carouselRotateY + "deg)",
} },
React.createElement("div", null, this._loopConfig.map(function (item, idx) {
var isActive = idx == activeIdx;
return (React.createElement("div", { key: idx, style: {
transform: "rotateY(" + idx * _this.eachItemRotate + "deg) translateZ(" + _this.defaultRotateX + ")"
}, className: "card-item item idx-" + idx + (isActive ? ' active' : '') },
React.createElement("div", { className: "card-img" }, item)));
})))),
isMobile ? (React.createElement("div", { className: "section-mark", onMouseDown: this.handleTouchStart, onMouseUp: this.handleTouchEnd, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd })) : [
React.createElement("div", { className: "func-btn prev-btn", key: "prev", onClick: function (e) { return _this.rollAndEmitChangeEvent(activeIdx + 1); } },
React.createElement(Icon, { n: "arrow" })),
React.createElement("div", { className: "func-btn next-btn", key: "next", onClick: function (e) { return _this.rollAndEmitChangeEvent(activeIdx - 1); } },
React.createElement(Icon, { n: "arrow" }))
]));
};
return Carousel3D;
}(Component));
export default Carousel3D;