diff --git a/components/vc-lazy-load/index.js b/components/vc-lazy-load/index.js deleted file mode 100644 index f7c7aa7d3..000000000 --- a/components/vc-lazy-load/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import LazyLoad from './src/LazyLoad'; -export default LazyLoad; diff --git a/components/vc-lazy-load/src/LazyLoad.jsx b/components/vc-lazy-load/src/LazyLoad.jsx deleted file mode 100644 index 77ee7b938..000000000 --- a/components/vc-lazy-load/src/LazyLoad.jsx +++ /dev/null @@ -1,151 +0,0 @@ -import PropTypes from '../../_util/vue-types'; -import BaseMixin from '../../_util/BaseMixin'; -import addEventListener from '../../vc-util/Dom/addEventListener'; -import { initDefaultProps, findDOMNode, getSlot } from '../../_util/props-util'; -import warning from '../../_util/warning'; -import debounce from 'lodash-es/debounce'; -import throttle from 'lodash-es/throttle'; -import parentScroll from './utils/parentScroll'; -import inViewport from './utils/inViewport'; -import { watchEffect, defineComponent } from 'vue'; - -const lazyLoadProps = { - debounce: PropTypes.looseBool, - elementType: PropTypes.string, - height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), - offset: PropTypes.number, - offsetBottom: PropTypes.number, - offsetHorizontal: PropTypes.number, - offsetLeft: PropTypes.number, - offsetRight: PropTypes.number, - offsetTop: PropTypes.number, - offsetVertical: PropTypes.number, - threshold: PropTypes.number, - throttle: PropTypes.number, - width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), -}; - -export default defineComponent({ - name: 'LazyLoad', - mixins: [BaseMixin], - inheritAttrs: false, - props: initDefaultProps(lazyLoadProps, { - elementType: 'div', - debounce: true, - offset: 0, - offsetBottom: 0, - offsetHorizontal: 0, - offsetLeft: 0, - offsetRight: 0, - offsetTop: 0, - offsetVertical: 0, - throttle: 250, - }), - data() { - if (this.throttle > 0) { - if (this.debounce) { - this.lazyLoadHandler = debounce(this.lazyLoadHandler, this.throttle); - } else { - this.lazyLoadHandler = throttle(this.lazyLoadHandler, this.throttle); - } - } - return { - visible: false, - }; - }, - mounted() { - this.$nextTick(() => { - watchEffect(() => { - if (!this.visible) { - this.lazyLoadHandler(this.$props); - } - }); - const eventNode = this.getEventNode(); - - if (this.lazyLoadHandler.flush) { - this.lazyLoadHandler.flush(); - } - this.resizeHander = addEventListener(window, 'resize', this.lazyLoadHandler); - this.scrollHander = addEventListener(eventNode, 'scroll', this.lazyLoadHandler); - }); - }, - beforeUnmount() { - if (this.lazyLoadHandler.cancel) { - this.lazyLoadHandler.cancel(); - } - - this.detachListeners(); - }, - methods: { - getEventNode() { - return parentScroll(findDOMNode(this)); - }, - getOffset() { - const { - offset, - offsetVertical, - offsetHorizontal, - offsetTop, - offsetBottom, - offsetLeft, - offsetRight, - threshold, - } = this.$props; - - const _offsetAll = threshold || offset; - const _offsetVertical = offsetVertical || _offsetAll; - const _offsetHorizontal = offsetHorizontal || _offsetAll; - - return { - top: offsetTop || _offsetVertical, - bottom: offsetBottom || _offsetVertical, - left: offsetLeft || _offsetHorizontal, - right: offsetRight || _offsetHorizontal, - }; - }, - lazyLoadHandler() { - if (!this._.isMounted) { - return; - } - const offset = this.getOffset(); - const node = findDOMNode(this); - const eventNode = this.getEventNode(); - - if (inViewport(node, eventNode, offset)) { - this.setState({ visible: true }, () => { - this.__emit('contentVisible'); - }); - this.detachListeners(); - } - }, - detachListeners() { - this.resizeHander && this.resizeHander.remove(); - this.scrollHander && this.scrollHander.remove(); - }, - }, - render() { - const children = getSlot(this); - if (children.length !== 1) { - warning(false, 'lazyLoad组件只能包含一个子元素'); - return null; - } - const { height, width, elementType: ElementType } = this.$props; - const { visible } = this; - const { class: className } = this.$attrs; - - const elStyles = { - height: typeof height === 'number' ? height + 'px' : height, - width: typeof width === 'number' ? width + 'px' : width, - }; - const elClasses = { - LazyLoad: true, - 'is-visible': visible, - [className]: className, - }; - return ( - - {visible ? children[0] : null} - - ); - }, -}); diff --git a/components/vc-lazy-load/src/utils/getElementPosition.js b/components/vc-lazy-load/src/utils/getElementPosition.js deleted file mode 100644 index 8e599cde6..000000000 --- a/components/vc-lazy-load/src/utils/getElementPosition.js +++ /dev/null @@ -1,12 +0,0 @@ -/* - * Finds element's position relative to the whole document, - * rather than to the viewport as it is the case with .getBoundingClientRect(). - */ -export default function getElementPosition(element) { - const rect = element.getBoundingClientRect(); - - return { - top: rect.top + window.pageYOffset, - left: rect.left + window.pageXOffset, - }; -} diff --git a/components/vc-lazy-load/src/utils/inViewport.js b/components/vc-lazy-load/src/utils/inViewport.js deleted file mode 100644 index b8f4c3fe8..000000000 --- a/components/vc-lazy-load/src/utils/inViewport.js +++ /dev/null @@ -1,37 +0,0 @@ -import getElementPosition from './getElementPosition'; - -const isHidden = element => element.offsetParent === null; - -export default function inViewport(element, container, customOffset) { - if (isHidden(element)) { - return false; - } - - let top; - let bottom; - let left; - let right; - - if (typeof container === 'undefined' || container === window) { - top = window.pageYOffset; - left = window.pageXOffset; - bottom = top + window.innerHeight; - right = left + window.innerWidth; - } else { - const containerPosition = getElementPosition(container); - - top = containerPosition.top; - left = containerPosition.left; - bottom = top + container.offsetHeight; - right = left + container.offsetWidth; - } - - const elementPosition = getElementPosition(element); - - return ( - top <= elementPosition.top + element.offsetHeight + customOffset.top && - bottom >= elementPosition.top - customOffset.bottom && - left <= elementPosition.left + element.offsetWidth + customOffset.left && - right >= elementPosition.left - customOffset.right - ); -} diff --git a/components/vc-lazy-load/src/utils/parentScroll.js b/components/vc-lazy-load/src/utils/parentScroll.js deleted file mode 100644 index 4e54f0a97..000000000 --- a/components/vc-lazy-load/src/utils/parentScroll.js +++ /dev/null @@ -1,39 +0,0 @@ -const style = (element, prop) => { - let styleVal = ''; - if (typeof getComputedStyle !== 'undefined') { - styleVal = window.getComputedStyle(element, null).getPropertyValue(prop); - } else { - styleVal = element.style[prop]; - } - return styleVal; -}; - -const overflow = element => - style(element, 'overflow') + style(element, 'overflow-y') + style(element, 'overflow-x'); - -const scrollParent = element => { - if (!(element instanceof window.HTMLElement)) { - return window; - } - - let parent = element; - - while (parent) { - if (parent === document.body || parent === document.documentElement) { - break; - } - - if (!parent.parentNode) { - break; - } - if (/(scroll|auto)/.test(overflow(parent))) { - return parent; - } - - parent = parent.parentNode; - } - - return window; -}; - -export default scrollParent; diff --git a/components/vc-m-feedback/index.js b/components/vc-m-feedback/index.js deleted file mode 100755 index 7c603c6db..000000000 --- a/components/vc-m-feedback/index.js +++ /dev/null @@ -1,3 +0,0 @@ -// based on 2.0.0 -import TouchFeedback from './src/TouchFeedback'; -export default TouchFeedback; diff --git a/components/vc-m-feedback/src/PropTypes.jsx b/components/vc-m-feedback/src/PropTypes.jsx deleted file mode 100755 index 9ff09ce49..000000000 --- a/components/vc-m-feedback/src/PropTypes.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import PropTypes from '../../_util/vue-types'; - -export const ITouchProps = { - disabled: PropTypes.looseBool, - activeClassName: PropTypes.string, - activeStyle: PropTypes.any, - // onTouchStart: PropTypes.func, - // onTouchEnd: PropTypes.func, - // onTouchCancel: PropTypes.func, - // onMouseDown: PropTypes.func, - // onMouseUp: PropTypes.func, - // onMouseLeave: PropTypes.func, -}; diff --git a/components/vc-m-feedback/src/TouchFeedback.jsx b/components/vc-m-feedback/src/TouchFeedback.jsx deleted file mode 100755 index 4ebf0283c..000000000 --- a/components/vc-m-feedback/src/TouchFeedback.jsx +++ /dev/null @@ -1,109 +0,0 @@ -import classNames from '../../_util/classNames'; -import { initDefaultProps, getSlot } from '../../_util/props-util'; -import { cloneElement } from '../../_util/vnode'; -import warning from '../../_util/warning'; -import BaseMixin from '../../_util/BaseMixin'; -import { ITouchProps } from './PropTypes'; -import { defineComponent } from 'vue'; -import supportsPassive from '../../_util/supportsPassive'; - -export default defineComponent({ - name: 'TouchFeedback', - mixins: [BaseMixin], - inheritAttrs: false, - props: initDefaultProps(ITouchProps, { - disabled: false, - }), - data() { - this.child = null; - return { - active: false, - }; - }, - mounted() { - this.$nextTick(() => { - if (this.disabled && this.active) { - this.setState({ - active: false, - }); - } - }); - }, - methods: { - triggerEvent(type, isActive, ev) { - const eventType = `on${type}`; - const { child } = this; - - if (child.props[eventType]) { - child.props[eventType](ev); - } - if (isActive !== this.active) { - this.setState({ - active: isActive, - }); - } - }, - onTouchStart(e) { - this.triggerEvent('Touchstart', true, e); - }, - onTouchMove(e) { - this.triggerEvent('Touchmove', false, e); - }, - onTouchEnd(e) { - this.triggerEvent('Touchend', false, e); - }, - onTouchCancel(e) { - this.triggerEvent('Touchcancel', false, e); - }, - onMouseDown(e) { - // pc simulate mobile - this.triggerEvent('Mousedown', true, e); - }, - onMouseUp(e) { - this.triggerEvent('Mouseup', false, e); - }, - onMouseLeave(e) { - this.triggerEvent('Mouseleave', false, e); - }, - }, - render() { - const { disabled, activeClassName = '', activeStyle = {} } = this.$props; - - let child = getSlot(this); - if (child.length !== 1) { - warning(false, 'm-feedback组件只能包含一个子元素'); - return null; - } - const events = disabled - ? undefined - : { - [supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: this.onTouchStart, - [supportsPassive ? 'onTouchmovePassive' : 'onTouchmove']: this.onTouchMove, - onTouchend: this.onTouchEnd, - onTouchcancel: this.onTouchCancel, - onMousedown: this.onMouseDown, - onMouseup: this.onMouseUp, - onMouseleave: this.onMouseLeave, - }; - - child = child[0]; - this.child = child; - if (!disabled && this.active) { - let { style, class: className } = child.props; - - if (activeStyle !== false) { - if (activeStyle) { - style = { ...style, ...activeStyle }; - } - className = classNames(className, activeClassName); - } - return cloneElement(child, { - class: className, - style, - ...events, - }); - } - - return cloneElement(child, events); - }, -});