@meve/ui/es/back-top/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Button from '../button';
import Icon from '../icon';
import { getParentScroller, getScrollLeft, getScrollTop, toPxNum, scrollTo, toSizeUnit } from '../utils/elements';
import { isObject, isString } from '../utils/shared';
import { easeInOutCubic } from '../utils/animation';
import { props } from './props';
import { createNamespace } from '../utils/create';





var _createNamespace = createNamespace('back-top'),
    createComponent = _createNamespace.createComponent,
    namespace = _createNamespace.namespace;

var BackTopPlugin = createComponent({
  props: props,
  data: function data() {
    return {
      visible: false,
      scroller: null
    };
  },
  mounted: function mounted() {
    this.scroller = this.getTarget();
    this.scroller.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy: function beforeDestroy() {
    this.scroller.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    getTarget: function getTarget() {
      var target = this.target;

      if (isString(target)) {
        return document.querySelector(target);
      }

      if (isObject(target)) {
        return target;
      }

      return getParentScroller(this.$refs.el);
    },
    handleScroll: function handleScroll() {
      this.visible = getScrollTop(this.scroller) >= toPxNum(this.visibilityHeight);
    },
    handleClick: function handleClick(e) {
      e.stopPropagation();
      this.$emit('click', e);
      var left = getScrollLeft(this.scroller);
      scrollTo(this.scroller, {
        left: left,
        duration: this.duration,
        animation: easeInOutCubic
      });
    },
    renderSlot: function renderSlot() {
      var h = this.$createElement;

      if (this.hasSlots()) {
        return this.slots();
      }

      return h(Button, {
        "attrs": {
          "type": "primary",
          "round": true,
          "back-top-cover": true
        }
      }, [h(Icon, {
        "attrs": {
          "name": "format-vertical-align-top"
        }
      })]);
    }
  },
  render: function render() {
    var h = arguments[0];
    var visible = this.visible,
        handleClick = this.handleClick,
        renderSlot = this.renderSlot,
        right = this.right,
        bottom = this.bottom;
    return h("div", {
      "ref": "el",
      "class": [namespace(), visible ? namespace('--active') : null],
      "style": {
        right: toSizeUnit(right),
        bottom: toSizeUnit(bottom)
      },
      "on": _extends({}, {
        "click": function click($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          handleClick.apply(void 0, [$event].concat(attrs));
        }
      })
    }, [renderSlot()]);
  }
});
export var _BackTopComponent = BackTopPlugin;
export default BackTopPlugin;