update: 修正scrollIntoView在无滚动条的情况下导致scrollParent报错问题

react-widget · Feb 17, 2019 · 2fd2628 · 2fd2628
1 parent 338f5ae
commit 2fd2628
Show file tree

Hide file tree

Showing 17 changed files with 286 additions and 249 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -15,11 +15,11 @@
             overflow: auto;
         }
     </style>
-<link href="static\css\vendors.8e7adae1.css" rel="stylesheet"><link href="static\css\index.17c1c53a.css" rel="stylesheet"></head>
+<link href="static\css\index.c57af803.css" rel="stylesheet"></head>
 
 <body style="background:#F5F5F5">
     <div class="demo" id="demo">
     </div>
-<script src="static\js\vendors.97067170.chunk.js"></script><script src="static\js\index.e4b5ae6c.js"></script></body>
+<script src="static\js\vendors.308b581e.chunk.js"></script><script src="static\js\index.ed336b3c.js"></script></body>
 
 </html>
diff --git a/docs/static/css/index.17c1c53a.css → docs/static/css/index.c57af803.css b/docs/static/css/index.17c1c53a.css → docs/static/css/index.c57af803.css
diff --git a/docs/static/css/index.17c1c53a.css.map → docs/static/css/index.c57af803.css.map b/docs/static/css/index.17c1c53a.css.map → docs/static/css/index.c57af803.css.map
diff --git a/docs/static/css/vendors.8e7adae1.css b/docs/static/css/vendors.8e7adae1.css
diff --git a/docs/static/css/vendors.8e7adae1.css.map b/docs/static/css/vendors.8e7adae1.css.map
diff --git a/docs/static/js/index.e4b5ae6c.js.map b/docs/static/js/index.e4b5ae6c.js.map
diff --git a/docs/static/js/index.e4b5ae6c.js → docs/static/js/index.ed336b3c.js b/docs/static/js/index.e4b5ae6c.js → docs/static/js/index.ed336b3c.js
diff --git a/docs/static/js/index.ed336b3c.js.map b/docs/static/js/index.ed336b3c.js.map
diff --git a/docs/static/js/vendors.97067170.chunk.js → docs/static/js/vendors.308b581e.chunk.js b/docs/static/js/vendors.97067170.chunk.js → docs/static/js/vendors.308b581e.chunk.js
@@ -1025,7 +1025,7 @@ module.exports = function scrollPrarent(node) {
       excludeStatic = position === 'absolute',
       ownerDoc = node.ownerDocument,
       overflowRegex = /(auto|scroll)/;
-  if (position === 'fixed') return ownerDoc || document;
+  if (position === 'fixed') return (ownerDoc || document).documentElement;
 
   while ((node = node.parentNode) && node.nodeType !== 9) {
     var isStatic = excludeStatic && (0, _css.default)(node, 'position') === 'static',
@@ -1035,7 +1035,7 @@ module.exports = function scrollPrarent(node) {
     if (overflowRegex.test(style) && hasScroll) return node;
   }
 
-  return document;
+  return document.documentElement;
 };
 
 /***/ }),
@@ -26114,17 +26114,6 @@ if (false) {} else {
 }
 
 
-/***/ }),
-
-/***/ "./node_modules/react-widget-scrollview/lib/style/index.css":
-/*!******************************************************************!*\
-  !*** ./node_modules/react-widget-scrollview/lib/style/index.css ***!
-  \******************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
 /***/ }),
 
 /***/ "./node_modules/react/cjs/react.development.js":
@@ -29736,4 +29725,4 @@ if (!self.fetch) {
 /***/ })
 
 }]);
-//# sourceMappingURL=vendors.97067170.chunk.js.map
+//# sourceMappingURL=vendors.308b581e.chunk.js.map
diff --git a/docs/static/js/vendors.308b581e.chunk.js.map b/docs/static/js/vendors.308b581e.chunk.js.map
diff --git a/docs/static/js/vendors.97067170.chunk.js.map b/docs/static/js/vendors.97067170.chunk.js.map
diff --git a/examples/index.js b/examples/index.js
@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 import './style/index.scss';
 import './style/animate.scss';
 
-import 'react-widget-scrollview/lib/style/index.css';
+//import 'react-widget-scrollview/lib/style/index.css';
 import '../src/style/index.scss';
 
 import Demo from './Demo';

diff --git a/lib/ListBox.js b/lib/ListBox.js
@@ -66,7 +66,7 @@ function (_React$Component) {
       var onItemClick = _this.props.onItemClick;
 
       if (e) {
-        (0, _scrollIntoView.default)(e.target);
+        (0, _scrollIntoView.default)(e.target, _this.getListViewBody());
       } //this.getListView().scrollIntoView(e.target);
 
 
@@ -168,7 +168,7 @@ function (_React$Component) {
         }
 
         _this._activeIndex = list[idx].getAttribute('data-index');
-        (0, _scrollIntoView.default)(list[idx]); //scrollview.scrollIntoView(list[idx]);
+        (0, _scrollIntoView.default)(list[idx], _this.getListViewBody()); //scrollview.scrollIntoView(list[idx]);
       } else if (ENTER && activeIndex !== null) {
         var value = indexValueMap[activeIndex];
         var item = state.itemsMap[value] || {};
@@ -185,6 +185,15 @@ function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "saveListView", function (node) {
       _this._listview = node;
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "saveListViewHeader", function (node) {
+      _this._listview_header = node;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "saveListViewBody", function (node) {
+      _this._listview_body = node;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "saveListViewFooter", function (node) {
+      _this._listview_footer = node;
+    });
     var _selectedValue = [];
 
     var _value; // if (!isUndefined(props.value)) {
@@ -239,7 +248,7 @@ function (_React$Component) {
       var selectedItem = el.querySelector(selector);
 
       if (selectedItem) {
-        (0, _scrollIntoView.default)(selectedItem); //scrollview.scrollIntoView(selectedItem);
+        (0, _scrollIntoView.default)(selectedItem, this.getListViewBody()); //scrollview.scrollIntoView(selectedItem);
       }
     }
   }, {
@@ -446,6 +455,21 @@ function (_React$Component) {
     value: function getListView() {
       return (0, _reactDom.findDOMNode)(this._listview);
     }
+  }, {
+    key: "getListViewHeader",
+    value: function getListViewHeader() {
+      return (0, _reactDom.findDOMNode)(this._listview_header);
+    }
+  }, {
+    key: "getListViewBody",
+    value: function getListViewBody() {
+      return (0, _reactDom.findDOMNode)(this._listview_body);
+    }
+  }, {
+    key: "getListViewFooter",
+    value: function getListViewFooter() {
+      return (0, _reactDom.findDOMNode)(this._listview_footer);
+    }
   }, {
     key: "render",
     value: function render() {
@@ -499,12 +523,15 @@ function (_React$Component) {
         onFocus: onFocus,
         onBlur: onBlur
       }, renderHeader ? _react.default.createElement(HeaderWrapperComponent, {
+        ref: this.saveListViewHeader,
         className: "".concat(prefixCls, "-header"),
         style: headerStyle
       }, renderHeader()) : null, _react.default.createElement(BodyWrapperComponent, {
+        ref: this.saveListViewBody,
         className: "".concat(prefixCls, "-body"),
         style: bodyStyle
       }, this.renderList()), renderFooter ? _react.default.createElement(FooterWrapperComponent, {
+        ref: this.saveListViewFooter,
         className: "".concat(prefixCls, "-footer"),
         style: footerStyle
       }, renderFooter()) : null);

diff --git a/lib/style/index.css b/lib/style/index.css
@@ -39,6 +39,6 @@
     .rw-listbox .rw-listbox-body .rw-listbox-item-group-title {
       padding: 8px 12px;
       cursor: default;
-      color: #999; }
+      font-weight: 700; }
     .rw-listbox .rw-listbox-body .rw-listbox-item-group-list .rw-listbox-item {
-      padding-left: 20px; }
+      padding-left: 28px; }