shineout 1.12.24 → 1.12.25-beta.1

package/css/CardGroup/Item.js

@@ -6,6 +6,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -15,12 +16,45 @@ var _Lazyload = _interopRequireDefault(require("../Lazyload"));
 var _excluded = ["style", "className", "container", "children", "placeholder", "value"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Item = /*#__PURE__*/function (_React$Component) {
-  function Item() {
-    return _React$Component.apply(this, arguments) || this;
+  function Item(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    (0, _defineProperty2.default)(_this, "observerIns", null);
+    _this.state = {
+      isInView: true
+    };
+    _this.containerRef = /*#__PURE__*/_react.default.createRef();
+    return _this;
   }
   (0, _inheritsLoose2.default)(Item, _React$Component);
   var _proto = Item.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    var _this2 = this,
+      _this$props$container;
+    if (typeof window === 'undefined' || !window.IntersectionObserver || !this.containerRef.current) {
+      return;
+    }
+    this.observerIns = new IntersectionObserver(function (_ref) {
+      var entry = _ref[0];
+      var inView = entry.isIntersecting;
+      _this2.setState({
+        isInView: inView
+      });
+    }, {
+      root: this.props.container,
+      rootMargin: (((_this$props$container = this.props.container) == null ? void 0 : _this$props$container.offsetHeight) || 0) + "px",
+      threshold: [0, 1]
+    });
+    this.observerIns.observe(this.containerRef.current);
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    if (this.observerIns) {
+      this.observerIns.disconnect();
+    }
+  };
   _proto.handleChange = function handleChange(value, _, checked) {
     var onChange = this.props.onChange;
     if (onChange) onChange(checked, value);
@@ -32,7 +66,8 @@ var Item = /*#__PURE__*/function (_React$Component) {
     if (!placeholder) return content;
     return /*#__PURE__*/_react.default.createElement(_Lazyload.default, {
       container: container,
-      placeholder: placeholder
+      placeholder: placeholder,
+      isInView: this.state.isInView
     }, content);
   };
   _proto.render = function render() {
@@ -50,9 +85,14 @@ var Item = /*#__PURE__*/function (_React$Component) {
       onChange: this.handleChange.bind(this, value),
       className: (0, _styles.cardGroupClass)('checkbox')
     })));
+    var hiddenStyle = this.state.isInView ? undefined : {
+      visibility: 'hidden'
+    };
+    var itemStyle = _objectSpread(_objectSpread({}, style), hiddenStyle);
     return /*#__PURE__*/_react.default.createElement("div", {
-      style: style,
-      className: cls
+      style: itemStyle,
+      className: cls,
+      ref: this.containerRef
     }, this.renderChildren(content));
   };
   return Item;

package/css/Image/Image.js

@@ -73,6 +73,7 @@ var Image = /*#__PURE__*/function (_PureComponent) {
     this.element = el;
   };
   _proto.fetchImage = function fetchImage() {
+    var _this2 = this;
     if (this.lazyId) (0, _lazyload.removeStack)(this.lazyId);
     if (!this.props.lazy) {
       this.markToRender();
@@ -82,12 +83,18 @@ var Image = /*#__PURE__*/function (_PureComponent) {
         offset: typeof this.props.lazy === 'number' ? this.props.lazy : 0,
         element: this.element,
         render: this.markToRender,
+        offscreen: function offscreen() {
+          _this2.setState({
+            status: PLACEHOLDER
+          });
+        },
+        noRemove: this.props.inViewOnly,
         container: typeof container === 'string' ? document.querySelector(container) : container
       });
     }
   };
   _proto.markToRender = function markToRender() {
-    var _this2 = this;
+    var _this3 = this;
     var src = this.props.src;
     if (!src) {
       this.handleAlt();
@@ -96,7 +103,7 @@ var Image = /*#__PURE__*/function (_PureComponent) {
     delete this.image;
     var image = new window.Image();
     image.onload = function () {
-      return _this2.setState({
+      return _this3.setState({
         status: SRC
       });
     };
@@ -112,7 +119,7 @@ var Image = /*#__PURE__*/function (_PureComponent) {
     });
   };
   _proto.handleAlt = function handleAlt() {
-    var _this3 = this;
+    var _this4 = this;
     var alt = this.props.alt;
     if (!alt) {
       this.setState({
@@ -122,7 +129,7 @@ var Image = /*#__PURE__*/function (_PureComponent) {
     }
     var image = new window.Image();
     image.onload = function () {
-      return _this3.setState({
+      return _this4.setState({
         status: ALT
       });
     };
@@ -248,7 +255,8 @@ Image.propTypes = {
   container: _propTypes.default.string,
   error: _propTypes.default.node,
   autoSSL: _propTypes.default.bool,
-  onError: _propTypes.default.func
+  onError: _propTypes.default.func,
+  inViewOnly: _propTypes.default.bool
 };
 Image.defaultProps = {
   lazy: false,

package/css/Image/index.d.ts

@@ -170,6 +170,15 @@ export interface ImageGroupProps {
    */
   lazy?: boolean;
 
+  /**
+   * whether to only load images in view
+   *
+   * 是否仅加载在视图内的图片
+   *
+   * default: false
+   */
+  inViewOnly?: boolean
+
   /**
    * whether to stack
    *

package/css/Lazyload/index.js

@@ -46,8 +46,10 @@ var Lazyload = /*#__PURE__*/function (_PureComponent) {
     var ready = this.state.ready;
     var _this$props2 = this.props,
       children = _this$props2.children,
-      placeholder = _this$props2.placeholder;
-    if (ready) return children;
+      placeholder = _this$props2.placeholder,
+      _this$props2$isInView = _this$props2.isInView,
+      isInView = _this$props2$isInView === void 0 ? true : _this$props2$isInView;
+    if (ready && isInView) return children;
     return /*#__PURE__*/_react.default.createElement("span", {
       ref: this.placeholderRef,
       className: (0, _styles.lazyloadClass)('_')
@@ -59,7 +61,8 @@ Lazyload.propTypes = {
   children: _propTypes.default.any,
   placeholder: _propTypes.default.element,
   container: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.object]),
-  offset: _propTypes.default.number
+  offset: _propTypes.default.number,
+  isInView: _propTypes.default.bool
 };
 Lazyload.defaultProps = {
   offset: 0

package/css/index.d.ts

@@ -3,7 +3,7 @@ import * as utils from './utils'
 
 declare const __default: {
   utils: typeof utils,
-  version: '1.12.24'
+  version: '1.12.25-beta.1'
 }
 
 export default __default

package/css/index.js

@@ -117,5 +117,5 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // Created by scripts/src-index.js.
 var _default = exports.default = {
   utils: utils,
-  version: '1.12.24'
+  version: '1.12.25-beta.1'
 };

package/css/utils/lazyload.js

@@ -69,12 +69,15 @@ function getObserver(obj, id) {
     container = _obj$container === void 0 ? null : _obj$container,
     offset = obj.offset,
     render = obj.render,
+    offscreen = obj.offscreen,
     noRemove = obj.noRemove;
   var observer = new IntersectionObserver(function (entries) {
     entries.forEach(function (en) {
       if (en.isIntersecting || en.intersectionRatio > 0) {
         render();
         if (!noRemove) removeStack(id);
+      } else if (offscreen) {
+        offscreen();
       }
     });
   }, {