@fe6/water-pro/lib/scrollbar/bar.js

An enterprise-class UI design language and Vue-based implementation

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _vue = require("vue");

var _configProvider = require("../config-provider");

var _dom = require("../_util/dom");

var _util = require("./util");

/** @format */
var _default = (0, _vue.defineComponent)({
  name: 'Bar',
  props: {
    vertical: Boolean,
    size: String,
    move: Number,
    prefixCls: String
  },
  setup: function setup(props) {
    // TODO [fix] 解决使用的过程中未用 configProvider 报错
    var configProvider = (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider) || _configProvider.defaultConfigProvider;

    var prefixCls = configProvider.getPrefixCls('scrollbar', props.prefixCls);
    var instance = (0, _vue.getCurrentInstance)();
    var thumb = (0, _vue.ref)(null);
    var wrap = (0, _vue.inject)('scroll-bar-wrap', {});
    var bar = (0, _vue.computed)(function () {
      return _util.BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
    });
    var barStore = (0, _vue.ref)({});
    var cursorDown = (0, _vue.ref)(null);

    var clickThumbHandler = function clickThumbHandler(e) {
      // prevent click event of right button
      if (e.ctrlKey || e.button === 2) {
        return;
      }

      startDrag(e);
      barStore.value[bar.value.axis] = e.currentTarget[bar.value.offset] - (e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
    };

    var clickTrackHandler = function clickTrackHandler(e) {
      var _a;

      var offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
      var thumbHalf = thumb.value[bar.value.offset] / 2;
      var thumbPositionPercentage = (offset - thumbHalf) * 100 / ((_a = instance === null || instance === void 0 ? void 0 : instance.vnode.el) === null || _a === void 0 ? void 0 : _a[bar.value.offset]);
      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
    };

    var startDrag = function startDrag(e) {
      e.stopImmediatePropagation();
      cursorDown.value = true;
      (0, _dom.on)(document, 'mousemove', mouseMoveDocumentHandler);
      (0, _dom.on)(document, 'mouseup', mouseUpDocumentHandler);

      document.onselectstart = function () {
        return false;
      };
    };

    var mouseMoveDocumentHandler = function mouseMoveDocumentHandler(e) {
      var _a, _b;

      if (cursorDown.value === false) {
        return;
      }

      var prevPage = barStore.value[bar.value.axis];

      if (!prevPage) {
        return;
      }

      var offset = (((_a = instance === null || instance === void 0 ? void 0 : instance.vnode.el) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()[bar.value.direction]) - e[bar.value.client]) * -1;
      var thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
      var thumbPositionPercentage = (offset - thumbClickPosition) * 100 / ((_b = instance === null || instance === void 0 ? void 0 : instance.vnode.el) === null || _b === void 0 ? void 0 : _b[bar.value.offset]);
      wrap.value[bar.value.scroll] = thumbPositionPercentage * wrap.value[bar.value.scrollSize] / 100;
    };

    function mouseUpDocumentHandler() {
      cursorDown.value = false;
      barStore.value[bar.value.axis] = 0;
      (0, _dom.off)(document, 'mousemove', mouseMoveDocumentHandler);
      document.onselectstart = null;
    }

    (0, _vue.onUnmounted)(function () {
      (0, _dom.off)(document, 'mouseup', mouseUpDocumentHandler);
    });
    return function () {
      return (0, _vue.h)('div', {
        class: ["".concat(prefixCls, "-bar"), "is-".concat(bar.value.key)],
        onMousedown: clickTrackHandler
      }, (0, _vue.h)('div', {
        ref: thumb,
        class: "".concat(prefixCls, "-thumb"),
        onMousedown: clickThumbHandler,
        style: (0, _util.renderThumbStyle)({
          size: props.size,
          move: props.move,
          bar: bar.value
        })
      }));
    };
  }
});

exports.default = _default;