tdesign-mobile-vue/cjs/picker/picker.class.js

tdesign-mobile-vue

/**
 * tdesign v1.7.0
 * (c) 2024 TDesign Group
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
var _createClass = require('@babel/runtime/helpers/createClass');
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var shared_dom = require('../shared/dom.js');
var hooks_useClass = require('../hooks/useClass.js');
require('lodash/isFunction');
require('lodash/isString');
require('vue');
require('../config-provider/useConfig.js');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('lodash/isArray');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('@babel/runtime/helpers/typeof');
require('../_chunks/dep-a20a5149.js');
require('dayjs');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);

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__default["default"](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 = hooks_useClass.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__default["default"](this, Picker);
    _defineProperty__default["default"](this, "holder", void 0);
    _defineProperty__default["default"](this, "options", void 0);
    _defineProperty__default["default"](this, "list", null);
    _defineProperty__default["default"](this, "elementItems", []);
    _defineProperty__default["default"](this, "height", DEFAULT_HOLDER_HEIGHT);
    _defineProperty__default["default"](this, "curIndex", 0);
    _defineProperty__default["default"](this, "itemClassName", "");
    _defineProperty__default["default"](this, "itemSelectedClassName", "");
    _defineProperty__default["default"](this, "itemHeight", DEFAULT_ITEM_HEIGHT);
    _defineProperty__default["default"](this, "lastMoveTime", 0);
    _defineProperty__default["default"](this, "lastMoveStart", 0);
    _defineProperty__default["default"](this, "stopInertiaMove", false);
    _defineProperty__default["default"](this, "startY", 0);
    _defineProperty__default["default"](this, "isPicking", false);
    _defineProperty__default["default"](this, "offsetYOfStartBound", OFFSET_OF_BOUND);
    _defineProperty__default["default"](this, "offsetYOfEndBound", -OFFSET_OF_BOUND);
    _defineProperty__default["default"](this, "offsetY", 0);
    _defineProperty__default["default"](this, "offsetYOfStart", 0);
    _defineProperty__default["default"](this, "offsetYOfEnd", 0);
    _defineProperty__default["default"](this, "curValue", "");
    _defineProperty__default["default"](this, "onChange", void 0);
    _defineProperty__default["default"](this, "itemGroupHeight", void 0);
    _defineProperty__default["default"](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__default["default"](Picker, [{
    key: "init",
    value: function init() {
      this.initScrollParams();
      this.setSelectedClassName();
      this.bindEvent();
    }
  }, {
    key: "updateItems",
    value: function updateItems() {
      this.elementItems = _toConsumableArray__default["default"](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__default["default"](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) {
      shared_dom.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) {
      shared_dom.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) {
      shared_dom.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;
    }
  }]);
}();

exports.ANIMATION_TIME_LIMIT = ANIMATION_TIME_LIMIT;
exports.DEFAULT_ITEM_HEIGHT = DEFAULT_ITEM_HEIGHT;
exports["default"] = Picker;
//# sourceMappingURL=picker.class.js.map