shineout 1.12.2 → 1.12.3

package/esm/Scroll/Scroll.js

@@ -0,0 +1,436 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import classnames from 'classnames';
+import { banOverScrollX } from '../utils/dom/scrollBehavior';
+import { PureComponent } from '../component';
+import { getParent } from '../utils/dom/element';
+import normalizeWheel from '../utils/dom/normalizeWheel';
+import { scrollClass } from './styles';
+import Bar from './Bar';
+import config from '../config';
+import { Provider } from './context';
+import { throttleWrapper } from '../utils/lazyload';
+import { isRTL } from '../config';
+export var BAR_WIDTH = 16;
+
+var Scroll =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(Scroll, _PureComponent);
+
+  function Scroll(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "baseScrollRatio", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "touchStartX", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "touchStartY", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "wheelX", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "wheelY", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "pixelX", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "pixelY", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cacheWidth", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "cacheHeight", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "wheelElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "inner", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "footerElement", void 0);
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "rmOverScrollListener", void 0);
+
+    _this.touchStartX = 0;
+    _this.touchStartY = 0;
+    _this.wheelX = props.scrollX;
+    _this.wheelY = props.scrollY;
+    _this.pixelX = 0;
+    _this.pixelY = 0;
+    _this.cacheWidth = 0;
+    _this.cacheHeight = 0;
+    _this.bindInner = _this.bindInner.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindWheel = _this.bindWheel.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindFooter = _this.bindFooter.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setRect = _this.setRect.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleScrollX = _this.handleScrollX.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleScrollY = _this.handleScrollY.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleWheel = _this.handleWheel.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.bindIframe = _this.bindIframe.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleTouchStart = _this.handleTouchStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleTouchMove = _this.handleTouchMove.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.setStartPoint = _this.setStartPoint.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    _this.handleInnerScroll = _this.handleInnerScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = Scroll.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    _PureComponent.prototype.componentDidMount.call(this);
+
+    setTimeout(this.setRect);
+    this.wheelElement.addEventListener('wheel', this.handleWheel, {
+      passive: false
+    });
+    this.wheelElement.addEventListener('touchstart', this.handleTouchStart, {
+      passive: true
+    });
+    this.wheelElement.addEventListener('touchmove', this.handleTouchMove, {
+      passive: false
+    });
+    this.inner.addEventListener('scroll', this.handleInnerScroll);
+    this.wheelElement.addEventListener('scroll', this.handleInnerScroll);
+    this.rmOverScrollListener = banOverScrollX(this.wheelElement);
+  };
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$props = this.props,
+        stable = _this$props.stable,
+        scrollWidth = _this$props.scrollWidth,
+        scrollHeight = _this$props.scrollHeight;
+    if (scrollWidth !== prevProps.scrollWidth) this.setRect();else if (stable && scrollHeight !== prevProps.scrollHeight) this.setRect();
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    _PureComponent.prototype.componentWillUnmount.call(this);
+
+    this.wheelElement.removeEventListener('wheel', this.handleWheel);
+    this.wheelElement.removeEventListener('touchstart', this.handleTouchStart);
+    this.wheelElement.removeEventListener('touchmove', this.handleTouchMove);
+    this.inner.removeEventListener('scroll', this.handleInnerScroll);
+    this.wheelElement.removeEventListener('scroll', this.handleInnerScroll);
+
+    if (this.footerElement) {
+      this.footerElement.removeEventListener('wheel', this.handleWheel);
+      this.footerElement.removeEventListener('touchstart', this.handleTouchStart);
+      this.footerElement.removeEventListener('touchmove', this.handleTouchMove);
+    }
+
+    if (this.rmOverScrollListener) this.rmOverScrollListener();
+  };
+
+  _proto.getWheelRect = function getWheelRect() {
+    if (!this.wheelElement) return {
+      width: 0,
+      height: 0
+    };
+
+    var _this$wheelElement$ge = this.wheelElement.getBoundingClientRect(),
+        width = _this$wheelElement$ge.width,
+        height = _this$wheelElement$ge.height; // display none
+
+
+    if (width === 0 && height === 0) {
+      width = this.cacheWidth;
+      height = this.cacheHeight;
+    } else {
+      this.cacheWidth = width;
+      this.cacheHeight = height;
+    }
+
+    var _this$props2 = this.props,
+        scrollX = _this$props2.scrollX,
+        scrollY = _this$props2.scrollY,
+        _this$props2$style = _this$props2.style,
+        style = _this$props2$style === void 0 ? {} : _this$props2$style;
+    width = (typeof style.width === 'number' ? style.width : width) - (scrollY ? BAR_WIDTH : 0);
+    height = (typeof style.height === 'number' ? style.height : height) - (scrollX ? BAR_WIDTH : 0);
+    return {
+      width: width,
+      height: height
+    };
+  };
+
+  _proto.setRect = function setRect() {
+    this.handleScroll(this.props.left, this.props.top);
+    this.forceUpdate();
+  };
+
+  _proto.setBaseScrollHeightRatio = function setBaseScrollHeightRatio(height) {
+    if (this.baseScrollRatio) return;
+    this.baseScrollRatio = 1;
+    var ratio = config.scrollRatio; // windows scroll
+
+    if (Math.abs(height) > 10) {
+      this.baseScrollRatio = ratio / Math.abs(height);
+    }
+  };
+
+  _proto.setStartPoint = function setStartPoint(position) {
+    this.touchStartX = position.clientX;
+    this.touchStartY = position.clientY;
+  };
+
+  _proto.bindInner = function bindInner(el) {
+    this.inner = el;
+  };
+
+  _proto.bindIframe = function bindIframe(el) {
+    if (el && el.contentWindow) {
+      el.contentWindow.onresize = throttleWrapper(this.setRect);
+    }
+  };
+
+  _proto.bindWheel = function bindWheel(el) {
+    this.wheelElement = el;
+  };
+
+  _proto.bindFooter = function bindFooter(el) {
+    if (this.footerElement) {
+      this.footerElement.removeEventListener('wheel', this.handleWheel);
+      this.footerElement.removeEventListener('touchstart', this.handleTouchStart);
+      this.footerElement.removeEventListener('touchmove', this.handleTouchMove);
+    }
+
+    if (el) {
+      el.addEventListener('wheel', this.handleWheel, {
+        passive: false
+      });
+      el.addEventListener('touchstart', this.handleTouchStart, {
+        passive: true
+      });
+      el.addEventListener('touchmove', this.handleTouchMove, {
+        passive: false
+      });
+    }
+
+    this.footerElement = el;
+  };
+
+  _proto.boundleScroll = function boundleScroll() {
+    /*
+    this.locked = true
+    this.scrollTimer = setTimeout(() => {
+      this.locked = false
+      if (this.pixelX !== 0 || this.pixelY !== 0) {
+        this.boundleScroll()
+      }
+    }, 32)
+    */
+    // lock direction
+    if (Math.abs(this.pixelX) > Math.abs(this.pixelY)) {
+      this.pixelY = 0;
+    } else {
+      this.pixelX = 0;
+    }
+
+    var _this$props3 = this.props,
+        left = _this$props3.left,
+        top = _this$props3.top;
+    var _this$props4 = this.props,
+        _this$props4$scrollWi = _this$props4.scrollWidth,
+        scrollWidth = _this$props4$scrollWi === void 0 ? Scroll.defaultProps.scrollWidth : _this$props4$scrollWi,
+        _this$props4$scrollHe = _this$props4.scrollHeight,
+        scrollHeight = _this$props4$scrollHe === void 0 ? Scroll.defaultProps.scrollHeight : _this$props4$scrollHe;
+    var x = left + this.pixelX / scrollWidth;
+    if (x < 0) x = 0;
+    if (x > 1) x = 1;
+    var y = top + this.pixelY / scrollHeight;
+    if (y < 0) y = 0;
+    if (y > 1) y = 1;
+
+    if (x !== left || y !== top) {
+      this.handleScroll(x, y, this.pixelX, this.pixelY);
+    }
+
+    this.pixelX = 0;
+    this.pixelY = 0;
+  };
+
+  _proto.handleWheel = function handleWheel(event) {
+    var scrollX = this.wheelX;
+    var scrollY = this.wheelY;
+    var _this$props$innerScro = this.props.innerScrollAttr,
+        innerScrollAttr = _this$props$innerScro === void 0 ? Scroll.defaultProps.innerScrollAttr : _this$props$innerScro;
+    if (!scrollX && !scrollY) return;
+    var wheelTarget = event.target;
+
+    if (innerScrollAttr.find(function (attr) {
+      return wheelTarget.hasAttribute(attr);
+    })) {
+      event.stopPropagation();
+      return;
+    }
+
+    var target = getParent(wheelTarget, "." + scrollClass('_'));
+    var inFooter = false;
+
+    if (this.footerElement) {
+      inFooter = this.footerElement === event.target || this.footerElement.contains(wheelTarget);
+    }
+
+    if (target !== this.wheelElement && !inFooter) return;
+    var wheel = normalizeWheel(event);
+    this.setBaseScrollHeightRatio(wheel.pixelY);
+    if (scrollX) this.pixelX = isRTL() ? this.pixelX - wheel.pixelX : this.pixelX + wheel.pixelX;
+    if (scrollY && !inFooter) this.pixelY += wheel.pixelY * this.baseScrollRatio;
+
+    if (Math.abs(wheel.pixelX) > Math.abs(wheel.pixelY)) {
+      event.preventDefault();
+    } else if (scrollY) event.preventDefault(); // if (!this.locked) {
+
+
+    this.boundleScroll(); // }
+  };
+
+  _proto.handleScroll = function handleScroll(x, y, pixelX, pixelY, _temp) {
+    var _ref = _temp === void 0 ? {} : _temp,
+        drag = _ref.drag;
+
+    var _this$props$scrollWid = this.props.scrollWidth,
+        scrollWidth = _this$props$scrollWid === void 0 ? Scroll.defaultProps.scrollWidth : _this$props$scrollWid;
+
+    var _this$getWheelRect = this.getWheelRect(),
+        width = _this$getWheelRect.width,
+        height = _this$getWheelRect.height;
+
+    var max = Math.round((1 - width / scrollWidth) * scrollWidth);
+
+    if (this.props.onScroll) {
+      this.props.onScroll(x, y, max, this.inner, width, height, pixelX, pixelY, drag);
+    }
+  };
+
+  _proto.handleScrollX = function handleScrollX(left) {
+    this.handleScroll(left, this.props.top, undefined, 0, {
+      drag: true
+    });
+  };
+
+  _proto.handleScrollY = function handleScrollY(top) {
+    this.handleScroll(this.props.left, top, undefined, undefined, {
+      drag: true
+    });
+  };
+
+  _proto.handleTouchStart = function handleTouchStart(e) {
+    this.setStartPoint(e.changedTouches[0]);
+  };
+
+  _proto.handleTouchMove = function handleTouchMove(e) {
+    var _this$props5 = this.props,
+        scrollX = _this$props5.scrollX,
+        scrollY = _this$props5.scrollY;
+    e.preventDefault();
+    var position = e.changedTouches[0];
+    var moveX = position.clientX - this.touchStartX;
+    var moveY = position.clientY - this.touchStartY;
+    if (scrollX) this.pixelX = -moveX;
+    if (scrollY) this.pixelY = -moveY; // need reset the start
+
+    this.setStartPoint(position);
+    this.boundleScroll();
+  } // handle inner scroll cased by input focus
+  ;
+
+  _proto.handleInnerScroll = function handleInnerScroll(e) {
+    var target = e.target;
+    var _this$props6 = this.props,
+        _this$props6$scrollWi = _this$props6.scrollWidth,
+        scrollWidth = _this$props6$scrollWi === void 0 ? Scroll.defaultProps.scrollWidth : _this$props6$scrollWi,
+        _this$props6$scrollHe = _this$props6.scrollHeight,
+        scrollHeight = _this$props6$scrollHe === void 0 ? Scroll.defaultProps.scrollHeight : _this$props6$scrollHe,
+        left = _this$props6.left,
+        top = _this$props6.top;
+
+    var _this$getWheelRect2 = this.getWheelRect(),
+        width = _this$getWheelRect2.width,
+        height = _this$getWheelRect2.height;
+
+    if (target.scrollLeft || target.scrollTop) {
+      var sLeft = target.scrollLeft ? left + target.scrollLeft / (scrollWidth - width) : left;
+      var sTop = target.scrollTop ? top + target.scrollTop / (scrollHeight - height) : top;
+      sTop = Math.min(1, sTop);
+      sTop = Math.max(0, sTop);
+      sLeft = Math.min(1, sLeft);
+      sLeft = Math.max(0, sLeft);
+      this.handleScroll(sLeft, sTop, undefined, undefined, {
+        drag: true
+      });
+      target.scrollLeft = 0;
+      target.scrollTop = 0;
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props7 = this.props,
+        _this$props7$scrollWi = _this$props7.scrollWidth,
+        scrollWidth = _this$props7$scrollWi === void 0 ? Scroll.defaultProps.scrollWidth : _this$props7$scrollWi,
+        _this$props7$scrollHe = _this$props7.scrollHeight,
+        scrollHeight = _this$props7$scrollHe === void 0 ? Scroll.defaultProps.scrollHeight : _this$props7$scrollHe,
+        children = _this$props7.children,
+        left = _this$props7.left,
+        top = _this$props7.top,
+        scrollX = _this$props7.scrollX,
+        scrollY = _this$props7.scrollY,
+        style = _this$props7.style;
+
+    var _this$getWheelRect3 = this.getWheelRect(),
+        width = _this$getWheelRect3.width,
+        height = _this$getWheelRect3.height;
+
+    var rtl = isRTL();
+    var className = classnames(scrollClass('_', scrollX && 'show-x', scrollY && 'show-y', rtl && 'rtl'), this.props.className);
+    var yLength = scrollHeight < height ? scrollHeight : height;
+    this.wheelY = scrollY && Math.ceil(scrollHeight) > Math.ceil(yLength);
+    this.wheelX = scrollX && Math.ceil(scrollWidth) > Math.ceil(width);
+    return React.createElement(React.Fragment, null, React.createElement("div", {
+      style: style,
+      ref: this.bindWheel,
+      className: className
+    }, React.createElement("iframe", {
+      tabIndex: -1,
+      title: "scroll",
+      ref: this.bindIframe,
+      className: scrollClass('iframe')
+    }), React.createElement("div", {
+      className: scrollClass('iframe')
+    }), React.createElement("div", {
+      ref: this.bindInner,
+      className: scrollClass('inner')
+    }, React.createElement(Provider, {
+      value: {
+        left: left * width,
+        top: top * height,
+        element: this.wheelElement
+      }
+    }, children)), scrollY && React.createElement(Bar, {
+      direction: "y",
+      length: yLength,
+      forceHeight: scrollHeight < height ? scrollHeight : undefined,
+      scrollLength: scrollHeight,
+      offset: top,
+      onScroll: this.handleScrollY
+    }), scrollX && React.createElement(Bar, {
+      direction: "x",
+      length: width,
+      scrollLength: scrollWidth,
+      offset: left,
+      onScroll: this.handleScrollX
+    })), this.props.footer && React.createElement("div", {
+      ref: this.bindFooter,
+      className: scrollClass('footer')
+    }, this.props.footer));
+  };
+
+  return Scroll;
+}(PureComponent);
+
+_defineProperty(Scroll, "defaultProps", {
+  scrollHeight: 0,
+  scrollWidth: 0,
+  innerScrollAttr: []
+});
+
+export default Scroll;

package/esm/Scroll/context.d.ts

@@ -0,0 +1,4 @@
+import React, { ComponentType } from 'react';
+import { GetScrollContextConsumerValue, ScrollContextProviderValue } from './Props';
+export declare const Provider: React.Provider<ScrollContextProviderValue>;
+export declare const scrollConsumer: <U extends {}>(Origin: React.ComponentType<U>) => React.FC<GetScrollContextConsumerValue<U>>;

package/esm/Scroll/context.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import createReactContext from '../context';
+var context = createReactContext({});
+var Consumer = context.Consumer; // eslint-disable-next-line
+
+export var Provider = context.Provider;
+export var scrollConsumer = function scrollConsumer(Origin) {
+  return function (props) {
+    return React.createElement(Consumer, null, function (value) {
+      if (value === void 0) {
+        value = {};
+      }
+
+      return React.createElement(Origin, _extends({}, props, {
+        scrollElement: value.element,
+        scrollLeft: value.left,
+        scrollTop: value.top
+      }));
+    });
+  };
+};

package/esm/Scroll/fixedLength.d.ts

@@ -0,0 +1,3 @@
+import React, { ComponentType } from 'react';
+import { BarProps, FixedLengthProps } from './Props';
+export default function (Bar: ComponentType<BarProps>): React.ComponentType<FixedLengthProps>;

package/esm/Scroll/fixedLength.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import React, { PureComponent } from 'react';
+export default function (Bar) {
+  var FixedLength =
+  /*#__PURE__*/
+  function (_PureComponent) {
+    _inheritsLoose(FixedLength, _PureComponent);
+
+    function FixedLength() {
+      return _PureComponent.apply(this, arguments) || this;
+    }
+
+    var _proto = FixedLength.prototype;
+
+    _proto.render = function render() {
+      var _this$props = this.props,
+          length = _this$props.length,
+          scrollLength = _this$props.scrollLength;
+      var barLength = length / scrollLength * length;
+      if (barLength < 20) barLength = 20;
+      return React.createElement(Bar, _extends({}, this.props, {
+        length: length,
+        barLength: barLength
+      }));
+    };
+
+    return FixedLength;
+  }(PureComponent);
+
+  return FixedLength;
+}

package/esm/Scroll/index.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { PureComponent } from '../component';
+import { ScrollIndexProps } from './Props';
+interface ScrollIndexState {
+    left: number;
+    top: number;
+}
+export default class extends PureComponent<ScrollIndexProps, ScrollIndexState> {
+    static displayName: string;
+    static defaultProps: {
+        scroll: string;
+    };
+    constructor(props: ScrollIndexProps);
+    get scrollX(): boolean;
+    get scrollY(): boolean;
+    getRect(): {
+        left: number;
+        top: number;
+    };
+    handleScroll(x: number, y: number, ...others: any): void;
+    render(): JSX.Element;
+}
+export {};

package/esm/Scroll/index.js

@@ -0,0 +1,95 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from '../component';
+import Scroll from './Scroll';
+
+var default_1 =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inheritsLoose(default_1, _PureComponent);
+
+  function default_1(props) {
+    var _this;
+
+    _this = _PureComponent.call(this, props) || this;
+    _this.state = {
+      left: props.scrollLeft || 0,
+      top: props.scrollTop || 0
+    };
+    _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  var _proto = default_1.prototype;
+
+  _proto.getRect = function getRect() {
+    var left = this.props.scrollLeft === undefined ? this.state.left : this.props.scrollLeft;
+    var top = this.props.scrollTop === undefined ? this.state.top : this.props.scrollTop;
+    return {
+      left: left,
+      top: top
+    };
+  };
+
+  _proto.handleScroll = function handleScroll(x, y) {
+    var left = this.scrollX ? x : 0;
+    var top = this.scrollY ? y : 0;
+    this.setState({
+      left: left,
+      top: top
+    });
+
+    if (this.props.onScroll) {
+      var _this$props;
+
+      for (var _len = arguments.length, others = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        others[_key - 2] = arguments[_key];
+      }
+
+      // @ts-ignore
+      (_this$props = this.props).onScroll.apply(_this$props, [left, top].concat(others));
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$getRect = this.getRect(),
+        left = _this$getRect.left,
+        top = _this$getRect.top;
+
+    return React.createElement(Scroll, _extends({}, this.props, {
+      left: left,
+      top: top,
+      scrollX: this.scrollX,
+      scrollY: this.scrollY,
+      onScroll: this.handleScroll
+    }));
+  };
+
+  _createClass(default_1, [{
+    key: "scrollX",
+    get: function get() {
+      var scroll = this.props.scroll;
+      return scroll === 'x' || scroll === 'both';
+    }
+  }, {
+    key: "scrollY",
+    get: function get() {
+      var scroll = this.props.scroll;
+      return scroll === 'y' || scroll === 'both';
+    }
+  }]);
+
+  return default_1;
+}(PureComponent);
+
+_defineProperty(default_1, "displayName", 'ShineoutScroll');
+
+_defineProperty(default_1, "defaultProps", {
+  scroll: 'both'
+});
+
+export { default_1 as default };

package/esm/Scroll/styles/index.d.ts

@@ -0,0 +1,2 @@
+import '../../styles/normalize.less';
+export declare const scrollClass: (...args: any) => string;

package/esm/Scroll/styles/index.js

@@ -0,0 +1,4 @@
+import '../../styles/normalize.less';
+import scrollLess from './scroll.less';
+import genaration from '../../utils/classname';
+export var scrollClass = genaration(scrollLess, 'scroll');