tdesign-mobile-vue
Version:
tdesign-mobile-vue
342 lines (338 loc) • 13.7 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { preventDefault } from '../shared/dom.js';
import { usePrefixClass } from '../hooks/useClass.js';
import 'lodash/isFunction';
import 'lodash/isString';
import 'vue';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import 'lodash/isArray';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var classPrefix = usePrefixClass();
var quartEaseOut = function quartEaseOut(t, b, c, d) {
var tempT = t;
return -c * ((tempT = tempT / d - 1) * tempT * tempT * tempT - 1) + b;
};
var DEFAULT_ITEM_HEIGHT = 40;
var DEFAULT_HOLDER_HEIGHT = 200;
var OFFSET_OF_BOUND = 60;
var ANIMATION_TIME_LIMIT = 460;
var ANIMATION_DURATION = 150;
var Picker = /*#__PURE__*/function () {
function Picker(options) {
_classCallCheck(this, Picker);
_defineProperty(this, "holder", void 0);
_defineProperty(this, "options", void 0);
_defineProperty(this, "list", null);
_defineProperty(this, "elementItems", []);
_defineProperty(this, "height", DEFAULT_HOLDER_HEIGHT);
_defineProperty(this, "curIndex", 0);
_defineProperty(this, "itemClassName", "");
_defineProperty(this, "itemSelectedClassName", "");
_defineProperty(this, "itemHeight", DEFAULT_ITEM_HEIGHT);
_defineProperty(this, "lastMoveTime", 0);
_defineProperty(this, "lastMoveStart", 0);
_defineProperty(this, "stopInertiaMove", false);
_defineProperty(this, "startY", 0);
_defineProperty(this, "isPicking", false);
_defineProperty(this, "offsetYOfStartBound", OFFSET_OF_BOUND);
_defineProperty(this, "offsetYOfEndBound", -OFFSET_OF_BOUND);
_defineProperty(this, "offsetY", 0);
_defineProperty(this, "offsetYOfStart", 0);
_defineProperty(this, "offsetYOfEnd", 0);
_defineProperty(this, "curValue", "");
_defineProperty(this, "onChange", void 0);
_defineProperty(this, "itemGroupHeight", void 0);
_defineProperty(this, "indicatorOffset", void 0);
if (!options.el) throw new Error("options el needed!");
this.holder = options.el;
this.options = options;
this.onChange = options.onChange;
this.init();
}
return _createClass(Picker, [{
key: "init",
value: function init() {
this.initScrollParams();
this.setSelectedClassName();
this.bindEvent();
}
}, {
key: "updateItems",
value: function updateItems() {
this.elementItems = _toConsumableArray(this.holder.querySelectorAll("li"));
var itemLen = this.elementItems.length;
this.offsetYOfEnd = -this.itemHeight * (itemLen - 3);
this.offsetYOfEndBound = -(this.itemHeight * (itemLen - 3) + OFFSET_OF_BOUND);
}
}, {
key: "initScrollParams",
value: function initScrollParams() {
var _this$holder$parentEl,
_this$holder$querySel,
_this$elementItems$cu,
_this = this;
this.list = this.holder;
this.itemGroupHeight = ((_this$holder$parentEl = this.holder.parentElement) === null || _this$holder$parentEl === void 0 ? void 0 : _this$holder$parentEl.offsetHeight) || DEFAULT_HOLDER_HEIGHT;
this.elementItems = _toConsumableArray(this.holder.querySelectorAll("li"));
this.itemHeight = ((_this$holder$querySel = this.holder.querySelector("li")) === null || _this$holder$querySel === void 0 ? void 0 : _this$holder$querySel.offsetHeight) || DEFAULT_ITEM_HEIGHT;
this.height = this.holder.offsetHeight || DEFAULT_HOLDER_HEIGHT;
this.indicatorOffset = this.itemGroupHeight / 2 - this.itemHeight / 2;
var curIndex = this.options.defaultIndex || 0;
this.itemClassName = "".concat(classPrefix.value, "-picker-item__item");
this.itemSelectedClassName = "".concat(classPrefix.value, "-picker-item__item--active");
this.startY = 0;
this.isPicking = false;
this.lastMoveTime = 0;
this.lastMoveStart = 0;
this.stopInertiaMove = false;
this.curValue = (_this$elementItems$cu = this.elementItems[curIndex]) === null || _this$elementItems$cu === void 0 ? void 0 : _this$elementItems$cu.textContent;
Object.defineProperty(this, "curIndex", {
set: function set(value) {
var _this$elementItems$va;
curIndex = value;
_this.curValue = (_this$elementItems$va = _this.elementItems[value]) === null || _this$elementItems$va === void 0 ? void 0 : _this$elementItems$va.textContent;
},
get: function get() {
return curIndex;
}
});
var startOffsetY = this.indicatorOffset - this.curIndex * this.itemHeight;
var itemLen = this.elementItems.length;
this.setOffsetY(startOffsetY);
this.offsetYOfStart = startOffsetY;
this.offsetYOfEnd = this.indicatorOffset - (itemLen - 1) * this.itemHeight;
this.offsetYOfStartBound = this.indicatorOffset + OFFSET_OF_BOUND;
this.offsetYOfEndBound = this.indicatorOffset - (itemLen - 1) * this.itemHeight - OFFSET_OF_BOUND;
}
}, {
key: "bindEvent",
value: function bindEvent() {
var _this2 = this;
this.holder.addEventListener("touchstart", function (e) {
return _this2.touchStartHandler(e);
}, false);
this.holder.addEventListener("touchmove", function (e) {
return _this2.touchMoveHandler(e);
}, false);
this.holder.addEventListener("touchend", function (e) {
return _this2.touchEndHandler(e);
}, false);
this.holder.addEventListener("touchcancel", function (e) {
return _this2.touchEndHandler(e);
}, false);
}
}, {
key: "touchStartHandler",
value: function touchStartHandler(event) {
preventDefault(event, false);
this.isPicking = true;
if (!this.holder) return;
if (this.list) this.list.style.transition = "";
this.startY = event.changedTouches[0].pageY;
this.updateInertiaParams(event, true);
}
}, {
key: "touchMoveHandler",
value: function touchMoveHandler(event) {
preventDefault(event, false);
if (!this.isPicking || !this.holder) return;
var endY = event.changedTouches[0].pageY;
var dragRange = endY - this.startY;
this.updateInertiaParams(event, false);
var moveOffsetY = this.indicatorOffset - this.curIndex * this.itemHeight + dragRange;
this.setOffsetY(moveOffsetY);
}
}, {
key: "touchEndHandler",
value: function touchEndHandler(event) {
preventDefault(event, false);
this.isPicking = false;
if (!this.holder) return;
var point = event.changedTouches[0];
var nowTime = event.timeStamp || Date.now();
var moveTime = nowTime - this.lastMoveTime;
if (moveTime > ANIMATION_TIME_LIMIT) {
this.stopInertiaMove = false;
this.endScroll();
return;
}
var v = (point.pageY - this.lastMoveStart) / moveTime;
var dir = v > 0 ? -1 : 1;
var dampingCoefficient = 8e-4;
var deceleration = -1 * dir * dampingCoefficient;
var duration = Math.abs(v / deceleration);
var endY = event.changedTouches[0].pageY;
var dragRange = endY - this.startY;
var dist = v * duration - Math.pow(duration, 2) * deceleration / 2 + dragRange;
if (dist === 0) {
this.stopInertiaMove = false;
this.endScroll();
return;
}
this.scrollDist(nowTime, this.offsetY, dist, duration);
}
}, {
key: "updateInertiaParams",
value: function updateInertiaParams(event, isStart) {
var point = event.changedTouches[0];
if (isStart) {
this.lastMoveStart = point.pageY;
this.lastMoveTime = event.timeStamp || Date.now();
}
this.stopInertiaMove = true;
}
}, {
key: "scrollDist",
value: function scrollDist(now, startOffsetY, dist, duration) {
var _this3 = this;
this.stopInertiaMove = false;
var start = null;
var _inertiaMove = function inertiaMove(timestamp) {
if (_this3.stopInertiaMove) {
return;
}
if (!start) start = timestamp;
var progress = timestamp - start;
var newOffsetY = quartEaseOut(progress, startOffsetY, dist, duration);
_this3.setOffsetY(newOffsetY);
if (progress > duration || newOffsetY > _this3.offsetYOfStartBound || newOffsetY < _this3.offsetYOfEndBound) {
_this3.endScroll();
} else {
window.requestAnimationFrame(_inertiaMove);
}
};
window.requestAnimationFrame(_inertiaMove);
}
}, {
key: "update",
value: function update(options) {
var _this4 = this;
this.updateItems();
var targetIndex = this.elementItems.findIndex(function (el) {
return el.textContent === _this4.curValue;
});
var updateIndex = targetIndex === -1 ? 0 : targetIndex;
this.updateIndex(updateIndex, options);
}
}, {
key: "updateIndex",
value: function updateIndex(index, options) {
var realOptions = _objectSpread({
duration: 460,
isChange: true
}, options);
this.curIndex = index;
this.setSelectedClassName();
var moveOffsetY = this.indicatorOffset - index * this.itemHeight;
if (this.list) {
this.list.style.transform = "translate(0,".concat(moveOffsetY, "px) translateZ(0)");
this.list.style.transitionDuration = "".concat(realOptions.duration, "ms");
this.list.style.transitionTimingFunction = "ease-out";
}
realOptions.isChange && this.onChange(index);
}
}, {
key: "getCurIndex",
value: function getCurIndex() {
return this.curIndex;
}
}, {
key: "fix3d",
value: function fix3d(index) {
for (var i = 0; i < this.elementItems.length; i++) {
var deg = 25 * (-index + i);
this.elementItems[i].style.transform = "rotateX(".concat(deg, "deg)");
this.elementItems[i].style.webkitTransform = "rotateX(".concat(deg, "deg)");
}
}
}, {
key: "setSelectedClassName",
value: function setSelectedClassName() {
var _this5 = this;
var regClass = new RegExp(this.itemClassName, "i");
var regSelected = new RegExp(this.itemSelectedClassName, "i");
this.elementItems.forEach(function (item, i) {
var tempItem = item;
var itemClass = tempItem.className;
if (itemClass === "" || !itemClass) {
tempItem.className = _this5.itemClassName;
} else {
if (!regClass.test(itemClass)) {
tempItem.classList.add(_this5.itemClassName);
}
if (regSelected.test(itemClass)) {
tempItem.classList.remove(_this5.itemSelectedClassName);
}
}
if (_this5.curIndex === i) {
tempItem.classList.add(_this5.itemSelectedClassName);
}
});
}
}, {
key: "setOffsetY",
value: function setOffsetY(offsetY) {
this.offsetY = offsetY;
if (this.list) {
this.list.style.transform = "translate3d(0, ".concat(offsetY, "px, 0)");
}
}
}, {
key: "endScroll",
value: function endScroll() {
if (this.stopInertiaMove) return;
var curIndex = 0;
if (this.offsetY > this.offsetYOfStartBound) {
curIndex = 0;
if (this.list) {
this.list.style.transition = "".concat(ANIMATION_DURATION, "ms ease-out");
}
} else if (this.offsetY < this.offsetYOfEndBound) {
curIndex = this.elementItems.length - 1;
if (this.list) {
this.list.style.transition = "".concat(ANIMATION_DURATION, "ms ease-out");
}
} else {
if (this.list) {
this.list.style.transition = "".concat(ANIMATION_DURATION, "ms ease-out");
}
curIndex = -Math.round((this.offsetY - this.indicatorOffset) / this.itemHeight);
if (curIndex < 0) curIndex = 0;
if (curIndex > this.elementItems.length - 1) curIndex = this.elementItems.length - 1;
}
var offsetY = this.indicatorOffset - curIndex * this.itemHeight;
this.setOffsetY(offsetY);
if (curIndex !== this.curIndex) {
this.curIndex = curIndex;
this.setSelectedClassName();
this.onChange(this.curIndex);
}
}
}, {
key: "destroy",
value: function destroy() {
delete this.holder;
}
}]);
}();
export { ANIMATION_TIME_LIMIT, DEFAULT_ITEM_HEIGHT, Picker as default };
//# sourceMappingURL=picker.class.js.map