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

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

"use strict";

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

var _vue = require("vue");

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

var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));

var _propsUtil = require("../_util/props-util");

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

var _bar = _interopRequireDefault(require("./bar"));

var _domWap = _interopRequireDefault(require("./dom-wap"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function extend(to, _from) {
  return _extends(to, _from);
}

function toObject(arr) {
  var res = {};

  for (var i = 0; i < arr.length; i++) {
    if (arr[i]) {
      extend(res, arr[i]);
    }
  }

  return res;
}

var _default2 = (0, _vue.defineComponent)({
  name: 'AScrollbar',
  // inheritAttrs: false,
  components: {
    Bar: _bar.default
  },
  props: {
    native: {
      type: Boolean,
      default: false
    },
    wrapStyle: {
      type: [String, Array],
      default: ''
    },
    wrapClass: {
      type: [String, Array],
      default: ''
    },
    viewClass: {
      type: [String, Array],
      default: ''
    },
    viewStyle: {
      type: [String, Array],
      default: ''
    },
    showHorizontal: Boolean,
    noresize: {
      type: Boolean,
      default: true
    },
    tag: {
      type: String,
      default: 'div'
    },
    prefixCls: _vueTypes.default.string
  },
  setup: function setup(props) {
    var sizeWidth = (0, _vue.ref)('0');
    var sizeHeight = (0, _vue.ref)('0');
    var moveX = (0, _vue.ref)(0);
    var moveY = (0, _vue.ref)(0);
    var wrap = (0, _vue.ref)(null);
    var resize = (0, _vue.ref)(null); // TODO [fix] 解决使用的过程中未用 configProvider 报错

    var configProvider = (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider) || _configProvider.defaultConfigProvider;

    var prefixClsNew = configProvider.getPrefixCls('scrollbar', props.prefixCls);
    (0, _vue.provide)('scroll-bar-wrap', wrap);

    var handleScroll = function handleScroll() {
      if (!props.native) {
        moveY.value = wrap.value.scrollTop * 100 / wrap.value.clientHeight;
        moveX.value = wrap.value.scrollLeft * 100 / wrap.value.clientWidth;
      }
    };

    var update = function update() {
      if (!wrap.value) {
        return;
      }

      var heightPercentage = wrap.value.clientHeight * 100 / wrap.value.scrollHeight;
      var widthPercentage = wrap.value.clientWidth * 100 / wrap.value.scrollWidth;
      sizeHeight.value = heightPercentage < 100 ? "".concat(heightPercentage, "%") : '';
      sizeWidth.value = widthPercentage < 100 ? "".concat(widthPercentage, "%") : '';
    };

    (0, _vue.onMounted)(function () {
      if (props.native) {
        return;
      }

      (0, _vue.nextTick)(update);

      if (!props.noresize) {
        (0, _dom.addResizeListener)(resize.value, update);
        (0, _dom.addResizeListener)(wrap.value, update);
      }
    });
    (0, _vue.onBeforeUnmount)(function () {
      if (props.native) {
        return;
      }

      if (!props.noresize) {
        (0, _dom.removeResizeListener)(resize.value, update);
        (0, _dom.removeResizeListener)(wrap.value, update);
      }
    });
    var style = (0, _vue.computed)(function () {
      var style = props.wrapStyle;

      if (Array.isArray(props.wrapStyle)) {
        style = toObject(props.wrapStyle);
      }

      return style;
    });
    var domWrapProps = {
      onUpdateDom: update
    };
    return {
      moveX: moveX,
      moveY: moveY,
      sizeWidth: sizeWidth,
      sizeHeight: sizeHeight,
      style: style,
      wrap: wrap,
      resize: resize,
      update: update,
      handleScroll: handleScroll,
      prefixClsNew: prefixClsNew,
      domWrapProps: domWrapProps
    };
  },
  render: function render() {
    var compProps = {
      ref: 'resize',
      class: ["".concat(this.prefixClsNew, "-view"), this.viewClass],
      style: this.viewStyle
    };
    var children = (0, _propsUtil.getSlot)(this);
    var compChildren = (0, _vue.createVNode)("div", compProps, [children]);
    var horizontalNode = null;

    if (this.showHorizontal) {
      horizontalNode = (0, _vue.createVNode)((0, _vue.resolveComponent)("bar"), {
        "move": this.moveX,
        "size": this.sizeWidth
      }, null);
    }

    var myScroll = null;

    if (!this.native) {
      myScroll = (0, _vue.createVNode)(_vue.Fragment, null, [horizontalNode, (0, _vue.createVNode)((0, _vue.resolveComponent)("bar"), {
        "vertical": true,
        "move": this.moveY,
        "size": this.sizeHeight
      }, null)]);
    }

    return (0, _vue.createVNode)("div", {
      "class": this.prefixClsNew
    }, [(0, _vue.createVNode)("div", {
      "ref": "wrap",
      "class": [this.wrapClass, "".concat(this.prefixClsNew, "-wrap"), this.native ? '' : "".concat(this.prefixClsNew, "-wrap-hidden-default")],
      "style": this.style,
      "onScroll": this.handleScroll
    }, [(0, _vue.createVNode)(_domWap.default, this.domWrapProps, {
      default: function _default() {
        return [compChildren];
      }
    })]), myScroll]);
  }
});

exports.default = _default2;