@ucloud-fe/react-components 1.5.2 → 1.5.5

package/lib/__index.js

@@ -151,6 +151,10 @@ import * as SelectAll from './components/Select/';
 const Select = Object.assign(SelectAll.default, SelectAll);
 export { Select };
 
+import * as SkeletonAll from './components/Skeleton/';
+const Skeleton = Object.assign(SkeletonAll.default, SkeletonAll);
+export { Skeleton };
+
 import * as SliderAll from './components/Slider/';
 const Slider = Object.assign(SliderAll.default, SliderAll);
 export { Slider };

package/lib/components/Select/Overflow.js

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Static = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,10 +21,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-
 var _Tag = _interopRequireDefault(require("../../components/Tag"));
 
+var _useOverflow3 = _interopRequireDefault(require("../../hooks/useOverflow"));
+
 var _style = require("./style");
 
 var _excluded = ["items", "renderItem", "renderRest", "count"],
@@ -33,6 +35,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _uid = 0;
+var ID_KEY = 'data-urc-select_overflow-id';
 
 var Static = function Static(_ref) {
   var _this = this;
@@ -74,69 +77,26 @@ var Overflow = function Overflow(_ref2) {
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
       uid = _useState2[0];
 
-  var _useState3 = (0, _react.useState)(0),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      count = _useState4[0],
-      setCount = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(null),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      latestValidCount = _useState6[0],
-      setLatestValidCount = _useState6[1];
+  var l = items.length;
+  var containerRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    containerRef.current = document.querySelector("[".concat(ID_KEY, "=\"").concat(uid, "\"]"));
+  }.bind(this), [uid]);
 
-  var compute = (0, _react.useCallback)(function () {
-    var _this3 = this;
+  var _useOverflow = (0, _useOverflow3.default)({
+    containerRef: containerRef,
+    defaultCount: 1,
+    maxCount: l
+  }, [changeContent]),
+      _useOverflow2 = (0, _slicedToArray2.default)(_useOverflow, 2),
+      count = _useOverflow2[0],
+      measureCount = _useOverflow2[1];
 
-    (0, _newArrowCheck2.default)(this, _this2);
-    var containerDOM = document.querySelector("[data-urc-overflow-id=\"".concat(uid, "\"]"));
-    if (!containerDOM) return;
-
-    if (count === latestValidCount) {
-      onMeasure(count);
-      return;
-    }
-
-    if (containerDOM.offsetWidth >= containerDOM.scrollWidth) {
-      setLatestValidCount(count);
-      setCount(Math.min(items.length, count + 1));
-    } else if (containerDOM.offsetWidth < containerDOM.scrollWidth) {
-      setCount(function (count) {
-        (0, _newArrowCheck2.default)(this, _this3);
-        return Math.max(0, count - 1);
-      }.bind(this));
-    }
-  }.bind(this), [count, items.length, latestValidCount, onMeasure, uid]);
-  var computeRef = (0, _react.useRef)(compute);
   (0, _react.useEffect)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
-    computeRef.current = compute;
-  }.bind(this), [compute]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    setLatestValidCount(null);
-  }.bind(this), [changeContent]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    computeRef.current();
-  }.bind(this), [compute]);
-  (0, _react.useLayoutEffect)(function () {
-    var _this4 = this;
-
-    (0, _newArrowCheck2.default)(this, _this2);
-    var containerDOM = document.querySelector("[data-urc-overflow-id=\"".concat(uid, "\"]"));
-    var resizeObserver = new _resizeObserverPolyfill.default(function () {
-      (0, _newArrowCheck2.default)(this, _this4);
-      setLatestValidCount(null);
-    }.bind(this));
-    if (containerDOM) resizeObserver.observe(containerDOM);
-    return function () {
-      (0, _newArrowCheck2.default)(this, _this4);
-
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-    }.bind(this);
-  }.bind(this), [uid]);
+    onMeasure(measureCount);
+  }.bind(this), [measureCount, onMeasure]);
   var renderItems = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     return items.slice(0, count).map(renderItem);
@@ -145,8 +105,7 @@ var Overflow = function Overflow(_ref2) {
     (0, _newArrowCheck2.default)(this, _this2);
     return renderRest(items.slice(count));
   }.bind(this), [count, items, renderRest]);
-  return /*#__PURE__*/_react.default.createElement(_Tag.default.Group, (0, _extends2.default)({}, rest, {
-    "data-urc-overflow-id": uid,
+  return /*#__PURE__*/_react.default.createElement(_Tag.default.Group, (0, _extends2.default)({}, rest, (0, _defineProperty2.default)({}, ID_KEY, uid), {
     className: _style.overflowCls
   }), renderItems, restItems);
 };