@ucloud-fe/react-components 1.5.3 → 1.5.6

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/Skeleton/Skeleton.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+interface SkeletonProps {
+    /** 是否开启动画 */
+    animated?: boolean;
+    /** 章节的行数 */
+    rows?: number;
+    /** 宽度 */
+    width?: string | number;
+}
+declare const Skeleton: ({ animated, rows, ...rest }: SkeletonProps & HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export default Skeleton;

package/lib/components/Skeleton/Skeleton.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _style = require("./style");
+
+var _excluded = ["animated", "rows"];
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 Skeleton = function Skeleton(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var animated = _ref.animated,
+      _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 1 : _ref$rows,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var content = (0, _react.useMemo)(function () {
+    var _this3 = this;
+
+    (0, _newArrowCheck2.default)(this, _this2);
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, new Array(Math.max(rows, 1)).fill(null).map(function (_, i) {
+      (0, _newArrowCheck2.default)(this, _this3);
+      return /*#__PURE__*/_react.default.createElement("p", {
+        key: i
+      });
+    }.bind(this)));
+  }.bind(this), [rows]);
+  return /*#__PURE__*/_react.default.createElement(_style.SWrap, (0, _extends2.default)({}, rest, {
+    animated: animated
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.contentCls
+  }, content));
+}.bind(void 0);
+
+Skeleton.propTypes = {
+  animated: _propTypes.default.bool,
+  rows: _propTypes.default.number,
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+var _default = Skeleton;
+exports.default = _default;

package/lib/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Skeleton from './Skeleton';
+export default Skeleton;

package/lib/components/Skeleton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Skeleton = _interopRequireDefault(require("./Skeleton"));
+
+var _default = _Skeleton.default;
+exports.default = _default;

package/lib/components/Skeleton/style/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const prefixCls: string;
+export declare const contentCls: string;
+export declare const SWrap: import("react").ForwardRefExoticComponent<{
+    animated?: boolean | undefined;
+    width?: string | number | undefined;
+} & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/Skeleton/style/index.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SWrap = exports.contentCls = exports.prefixCls = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
+var _config = _interopRequireDefault(require("../../../config"));
+
+var _style = require("../../../style");
+
+var _templateObject,
+    _this = void 0;
+
+var _prefixCls = _config.default.prefixCls;
+var prefixCls = _prefixCls + '-skeleton';
+exports.prefixCls = prefixCls;
+var contentCls = prefixCls + '-content';
+exports.contentCls = contentCls;
+var skeletonAnimation = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% {\n        transform: translate(-37.5%)\n    }\n    to {\n        transform: translate(37.5%)\n    }\n"])));
+var SWrap = (0, _style.sWrap)({})((0, _styledBase.default)("div", {
+  target: "e1iw0gz10",
+  label: "SWrap"
+})(function (props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var DT = props.theme.designTokens,
+      animated = props.animated,
+      width = props.width;
+  return /*#__PURE__*/(0, _core.css)(".", contentCls, "{", width && "width: ".concat(width, ";"), " p{overflow:hidden;position:relative;background:", DT.T_COLOR_BG_DEFAULT_DARK, ";height:16px;margin-top:12px;background-clip:content-box;border-radius:2px;", animated && /*#__PURE__*/(0, _core.css)("&::after{content:'';animation:1.5s linear infinite ", skeletonAnimation, ";background:linear-gradient( 90deg,", DT.T_SKELETON_COLOR_BG_LIGHT, " 25%,", DT.T_SKELETON_COLOR_BG_DARK, " 37%,", DT.T_SKELETON_COLOR_BG_LIGHT, " 63% );position:absolute;top:0;bottom:0;height:100%;right:-150%;left:-150%;};label:SWrap;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgY29uZmlnIGZyb20gJ3NyYy9jb25maWcnO1xuaW1wb3J0IHsgc1dyYXAgfSBmcm9tICdzcmMvc3R5bGUnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuZXhwb3J0IGNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLXNrZWxldG9uJztcbmV4cG9ydCBjb25zdCBjb250ZW50Q2xzID0gcHJlZml4Q2xzICsgJy1jb250ZW50JztcblxuY29uc3Qgc2tlbGV0b25BbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtMzcuNSUpXG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMzcuNSUpXG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFNXcmFwID0gc1dyYXA8eyBhbmltYXRlZD86IGJvb2xlYW47IHdpZHRoPzogc3RyaW5nIHwgbnVtYmVyIH0sIEhUTUxEaXZFbGVtZW50Pih7fSkoXG4gICAgc3R5bGVkLmRpdihwcm9wcyA9PiB7XG4gICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgIHRoZW1lOiB7IGRlc2lnblRva2VuczogRFQgfSxcbiAgICAgICAgICAgIGFuaW1hdGVkLFxuICAgICAgICAgICAgd2lkdGhcbiAgICAgICAgfSA9IHByb3BzO1xuICAgICAgICByZXR1cm4gY3NzYFxuICAgICAgICAgICAgLiR7Y29udGVudENsc30ge1xuICAgICAgICAgICAgICAgICR7d2lkdGggJiYgYHdpZHRoOiAke3dpZHRofTtgfVxuICAgICAgICAgICAgICAgIHAge1xuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6ICR7RFQuVF9DT0xPUl9CR19ERUZBVUxUX0RBUkt9O1xuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDEycHg7XG4gICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY2xpcDogY29udGVudC1ib3g7XG4gICAgICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgICAgICAgICAgICAgJHthbmltYXRlZCAmJlxuICAgICAgICAgICAgICAgICAgICBjc3NgXG4gICAgICAgICAgICAgICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYW5pbWF0aW9uOiAxLjVzIGxpbmVhciBpbmZpbml0ZSAke3NrZWxldG9uQW5pbWF0aW9ufTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDkwZGVnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfTElHSFR9IDI1JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0RBUkt9IDM3JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0xJR0hUfSA2MyVcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByaWdodDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGVmdDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIGB9XG4gICAgICAgICAgICAgICAgICAgIDpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgLyogJjpsYXN0LW9mLXR5cGU6bm90KDpmaXJzdC1vZi10eXBlKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogNjAlO1xuICAgICAgICAgICAgICAgICAgICB9ICovXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICBgO1xuICAgIH0pXG4pO1xuIl19 */")), ":first-of-type{margin-top:0;}}};label:SWrap;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCa0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgY29uZmlnIGZyb20gJ3NyYy9jb25maWcnO1xuaW1wb3J0IHsgc1dyYXAgfSBmcm9tICdzcmMvc3R5bGUnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuZXhwb3J0IGNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLXNrZWxldG9uJztcbmV4cG9ydCBjb25zdCBjb250ZW50Q2xzID0gcHJlZml4Q2xzICsgJy1jb250ZW50JztcblxuY29uc3Qgc2tlbGV0b25BbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtMzcuNSUpXG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMzcuNSUpXG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFNXcmFwID0gc1dyYXA8eyBhbmltYXRlZD86IGJvb2xlYW47IHdpZHRoPzogc3RyaW5nIHwgbnVtYmVyIH0sIEhUTUxEaXZFbGVtZW50Pih7fSkoXG4gICAgc3R5bGVkLmRpdihwcm9wcyA9PiB7XG4gICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgIHRoZW1lOiB7IGRlc2lnblRva2VuczogRFQgfSxcbiAgICAgICAgICAgIGFuaW1hdGVkLFxuICAgICAgICAgICAgd2lkdGhcbiAgICAgICAgfSA9IHByb3BzO1xuICAgICAgICByZXR1cm4gY3NzYFxuICAgICAgICAgICAgLiR7Y29udGVudENsc30ge1xuICAgICAgICAgICAgICAgICR7d2lkdGggJiYgYHdpZHRoOiAke3dpZHRofTtgfVxuICAgICAgICAgICAgICAgIHAge1xuICAgICAgICAgICAgICAgICAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6ICR7RFQuVF9DT0xPUl9CR19ERUZBVUxUX0RBUkt9O1xuICAgICAgICAgICAgICAgICAgICBoZWlnaHQ6IDE2cHg7XG4gICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDEycHg7XG4gICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQtY2xpcDogY29udGVudC1ib3g7XG4gICAgICAgICAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDJweDtcbiAgICAgICAgICAgICAgICAgICAgJHthbmltYXRlZCAmJlxuICAgICAgICAgICAgICAgICAgICBjc3NgXG4gICAgICAgICAgICAgICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYW5pbWF0aW9uOiAxLjVzIGxpbmVhciBpbmZpbml0ZSAke3NrZWxldG9uQW5pbWF0aW9ufTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDkwZGVnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfTElHSFR9IDI1JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0RBUkt9IDM3JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0xJR0hUfSA2MyVcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByaWdodDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGVmdDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIGB9XG4gICAgICAgICAgICAgICAgICAgIDpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgLyogJjpsYXN0LW9mLXR5cGU6bm90KDpmaXJzdC1vZi10eXBlKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogNjAlO1xuICAgICAgICAgICAgICAgICAgICB9ICovXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICBgO1xuICAgIH0pXG4pO1xuIl19 */"));
+}.bind(void 0), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CSSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9zdHlsZS9pbmRleC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCBjb25maWcgZnJvbSAnc3JjL2NvbmZpZyc7XG5pbXBvcnQgeyBzV3JhcCB9IGZyb20gJ3NyYy9zdHlsZSc7XG5cbmNvbnN0IHsgcHJlZml4Q2xzOiBfcHJlZml4Q2xzIH0gPSBjb25maWc7XG5leHBvcnQgY29uc3QgcHJlZml4Q2xzID0gX3ByZWZpeENscyArICctc2tlbGV0b24nO1xuZXhwb3J0IGNvbnN0IGNvbnRlbnRDbHMgPSBwcmVmaXhDbHMgKyAnLWNvbnRlbnQnO1xuXG5jb25zdCBza2VsZXRvbkFuaW1hdGlvbiA9IGtleWZyYW1lc2BcbiAgICAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC0zNy41JSlcbiAgICB9XG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgzNy41JSlcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgU1dyYXAgPSBzV3JhcDx7IGFuaW1hdGVkPzogYm9vbGVhbjsgd2lkdGg/OiBzdHJpbmcgfCBudW1iZXIgfSwgSFRNTERpdkVsZW1lbnQ+KHt9KShcbiAgICBzdHlsZWQuZGl2KHByb3BzID0+IHtcbiAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgdGhlbWU6IHsgZGVzaWduVG9rZW5zOiBEVCB9LFxuICAgICAgICAgICAgYW5pbWF0ZWQsXG4gICAgICAgICAgICB3aWR0aFxuICAgICAgICB9ID0gcHJvcHM7XG4gICAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICAgICAuJHtjb250ZW50Q2xzfSB7XG4gICAgICAgICAgICAgICAgJHt3aWR0aCAmJiBgd2lkdGg6ICR7d2lkdGh9O2B9XG4gICAgICAgICAgICAgICAgcCB7XG4gICAgICAgICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogJHtEVC5UX0NPTE9SX0JHX0RFRkFVTFRfREFSS307XG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICAgICAgbWFyZ2luLXRvcDogMTJweDtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jbGlwOiBjb250ZW50LWJveDtcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgICAgICAgICAgICAgICAke2FuaW1hdGVkICYmXG4gICAgICAgICAgICAgICAgICAgIGNzc2BcbiAgICAgICAgICAgICAgICAgICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBhbmltYXRpb246IDEuNXMgbGluZWFyIGluZmluaXRlICR7c2tlbGV0b25BbmltYXRpb259O1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgOTBkZWcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICR7RFQuVF9TS0VMRVRPTl9DT0xPUl9CR19MSUdIVH0gMjUlLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfREFSS30gMzclLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfTElHSFR9IDYzJVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBib3R0b206IDA7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJpZ2h0OiAtMTUwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBsZWZ0OiAtMTUwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgICAgICAgICAgOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICAgICAgICAgICAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAvKiAmOmxhc3Qtb2YtdHlwZTpub3QoOmZpcnN0LW9mLXR5cGUpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiA2MCU7XG4gICAgICAgICAgICAgICAgICAgIH0gKi9cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGA7XG4gICAgfSlcbik7XG4iXX0= */"));
+exports.SWrap = SWrap;

package/lib/components/ThemeProvider/designTokens.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const _default: {
     T_BUTTON_COMMON_COLOR_MASK: string;
     T_BUTTON_PRIMARY_COLOR_BG_DEFAULT: string;
     T_BUTTON_PRIMARY_COLOR_BG_HOVER: string;
@@ -214,6 +214,8 @@ declare const designTokens: {
     T_SHADOW_INSET_LEFT: string;
     T_SHADOW_INSET_RIGHT: string;
     T_SHADOW_INSET_TOP: string;
+    T_SKELETON_COLOR_BG_DARK: string;
+    T_SKELETON_COLOR_BG_LIGHT: string;
     T_SLIDER_COLOR_BG_ACTIVE: string;
     T_SLIDER_COLOR_BG_DEFAULT: string;
     T_SLIDER_COLOR_LINE_ACTIVE: string;
@@ -264,4 +266,4 @@ declare const designTokens: {
     T_WIDTH_MD: string;
     T_WIDTH_SM: string;
 };
-export default designTokens;
+export default _default;

package/lib/components/ThemeProvider/designTokens.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 // Do not edit directly
-// Generated with design-token-editor on 5/12/2022, 2:41:28 PM
-var designTokens = {
+// Generated with design-token-editor on 7/12/2022, 3:06:32 PM
+var _default = {
   // 按钮加载遮罩
   T_BUTTON_COMMON_COLOR_MASK: '#ffffff',
   // 按钮/主/背景色
@@ -437,6 +437,10 @@ var designTokens = {
   T_SHADOW_INSET_RIGHT: 'inset -10px 0 8px -8px rgba(0,0,0,0.12)',
   // 内阴影/上
   T_SHADOW_INSET_TOP: 'inset 0 10px 8px -8px rgba(0,0,0,0.12)',
+  // 骨架屏/背景色/深色
+  T_SKELETON_COLOR_BG_DARK: '#efeff8',
+  // 骨架屏/背景色/浅色
+  T_SKELETON_COLOR_BG_LIGHT: '#f6f6fb',
   // 滑块/背景色/激活
   T_SLIDER_COLOR_BG_ACTIVE: '#f8f8ff',
   // 滑块/背景色/未激活
@@ -536,5 +540,4 @@ var designTokens = {
   // 小号控件宽度
   T_WIDTH_SM: '144px'
 };
-var _default = designTokens;
 exports.default = _default;

package/lib/components/ThemeProvider/designTokensDark.d.ts

@@ -1,4 +1,4 @@
-declare const designTokens: {
+declare const _default: {
     T_BUTTON_COMMON_COLOR_MASK: string;
     T_BUTTON_PRIMARY_COLOR_BG_DEFAULT: string;
     T_BUTTON_PRIMARY_COLOR_BG_HOVER: string;
@@ -214,6 +214,8 @@ declare const designTokens: {
     T_SHADOW_INSET_LEFT: string;
     T_SHADOW_INSET_RIGHT: string;
     T_SHADOW_INSET_TOP: string;
+    T_SKELETON_COLOR_BG_DARK: string;
+    T_SKELETON_COLOR_BG_LIGHT: string;
     T_SLIDER_COLOR_BG_ACTIVE: string;
     T_SLIDER_COLOR_BG_DEFAULT: string;
     T_SLIDER_COLOR_LINE_ACTIVE: string;
@@ -264,4 +266,4 @@ declare const designTokens: {
     T_WIDTH_MD: string;
     T_WIDTH_SM: string;
 };
-export default designTokens;
+export default _default;

package/lib/components/ThemeProvider/designTokensDark.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 // Do not edit directly
-// Generated with design-token-editor on 5/12/2022, 2:41:19 PM
-var designTokens = {
+// Generated with design-token-editor on 7/12/2022, 3:06:24 PM
+var _default = {
   // 按钮加载遮罩
   T_BUTTON_COMMON_COLOR_MASK: '#141A2B',
   // 按钮/主/背景色
@@ -437,6 +437,10 @@ var designTokens = {
   T_SHADOW_INSET_RIGHT: 'inset -10px 0 8px -8px rgba(0,0,0,0.32)',
   // 内阴影/上
   T_SHADOW_INSET_TOP: 'inset 0 10px 8px -8px rgba(0,0,0,0.32)',
+  // 骨架屏/背景色/深色
+  T_SKELETON_COLOR_BG_DARK: '#1F2538',
+  // 骨架屏/背景色/浅色
+  T_SKELETON_COLOR_BG_LIGHT: '#161C2E',
   // 滑块/背景色/激活
   T_SLIDER_COLOR_BG_ACTIVE: '#1B2341',
   // 滑块/背景色/未激活
@@ -536,5 +540,4 @@ var designTokens = {
   // 小号控件宽度
   T_WIDTH_SM: '144px'
 };
-var _default = designTokens;
 exports.default = _default;

package/lib/hooks/useOverflow.js

@@ -21,6 +21,8 @@ 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; }
 
+// https://github.com/que-etc/resize-observer-polyfill/issues/80
+// 由于 ts 官方增加了 contentRect 的类型定义，导致和 resize-observer-polyfill 内部的定义冲突，目前先以 "skipLibCheck" 解决
 var DEFAULT_DEP = [];
 /**
  * 计算容器内的元素最大展示数量
@@ -38,34 +40,47 @@ var useOverflow = function useOverflow(_ref) {
       minCount = _ref$minCount === void 0 ? 0 : _ref$minCount;
   var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DEP;
 
+  // the count of trying to show
   var _useState = (0, _react.useState)(function () {
     (0, _newArrowCheck2.default)(this, _this);
     return Math.min(defaultCount, maxCount);
   }.bind(this)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       count = _useState2[0],
-      setCount = _useState2[1];
+      setCount = _useState2[1]; // the count valid to show
+
 
   var _useState3 = (0, _react.useState)(count),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       measureCount = _useState4[0],
-      setMeasureCount = _useState4[1];
+      setMeasureCount = _useState4[1]; // latest valid count
+
 
   var _useState5 = (0, _react.useState)(null),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       latestValidCount = _useState6[0],
-      setLatestValidCount = _useState6[1];
+      setLatestValidCount = _useState6[1]; // the container element
+
 
   var _useState7 = (0, _react.useState)(true),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       measuring = _useState8[0],
-      setMeasuring = _useState8[1];
+      setMeasuring = _useState8[1]; // save to ref for use in resize observer to avoid frequently create new observer
+
+
+  var measuringRef = (0, _react.useRef)(measuring);
+  (0, _react.useEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this);
+    measuringRef.current = measuring;
+  }.bind(this), [measuring]); // start to measure
 
   var startMeasuring = (0, _react.useCallback)(function () {
     (0, _newArrowCheck2.default)(this, _this);
+    if (measuringRef.current) return;
     setMeasuring(true);
     setLatestValidCount(null);
-  }.bind(this), []);
+  }.bind(this), []); // stop measuring
+
   var endMeasuring = (0, _react.useCallback)(function (measureCount) {
     (0, _newArrowCheck2.default)(this, _this);
     setMeasuring(false);
@@ -73,6 +88,7 @@ var useOverflow = function useOverflow(_ref) {
   }.bind(this), []);
   (0, _react.useEffect)(function () {
     (0, _newArrowCheck2.default)(this, _this);
+    // console.log('reset when deps changed');
     startMeasuring(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }.bind(this), deps);
   (0, _react.useEffect)(function () {
@@ -80,12 +96,7 @@ var useOverflow = function useOverflow(_ref) {
     // reset when config changed
     startMeasuring();
   }.bind(this), [minCount, maxCount, startMeasuring]);
-  var measuringRef = (0, _react.useRef)(measuring);
   (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this);
-    measuringRef.current = measuring;
-  }.bind(this), [measuring]);
-  (0, _react.useLayoutEffect)(function () {
     var _this2 = this;
 
     (0, _newArrowCheck2.default)(this, _this);
@@ -97,8 +108,11 @@ var useOverflow = function useOverflow(_ref) {
         (0, _newArrowCheck2.default)(this, _this2);
 
         if (!measuringRef.current) {
-          startMeasuring();
-        }
+          startMeasuring(); // console.log('reset when width changed');
+        } // else {
+        //     console.log('lock when width changed');
+        // }
+
       }.bind(this));
       resizeObserver.observe(containerDOM);
     }
@@ -110,11 +124,13 @@ var useOverflow = function useOverflow(_ref) {
         resizeObserver.disconnect();
       }
     }.bind(this);
-  }.bind(this), [containerRef, startMeasuring]);
+  }.bind(this), [containerRef, startMeasuring]); // console.log({ count, latestValidCount, maxCount, minCount, measuring });
+  // use layout effect to measure can avoid most shaking
+
   (0, _react.useLayoutEffect)(function () {
     (0, _newArrowCheck2.default)(this, _this);
     var containerDOM = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
-    if (!containerDOM) return;
+    if (!containerDOM) return; // measure end
 
     if (count === latestValidCount) {
       endMeasuring(latestValidCount);
@@ -124,10 +140,13 @@ var useOverflow = function useOverflow(_ref) {
     var newCount = count;
 
     if (containerDOM.offsetWidth >= containerDOM.scrollWidth) {
-      setLatestValidCount(count);
+      setLatestValidCount(count); // try to show more
+
       newCount = Math.min(count + 1, maxCount);
     } else if (containerDOM.offsetWidth < containerDOM.scrollWidth) {
-      if (count === 0) setLatestValidCount(count);
+      // if container with not enough space event when count is 0, it will be set to 0
+      if (count === 0) setLatestValidCount(count); // try to show less
+
       newCount = Math.max(0, minCount, count - 1);
     }
 

package/lib/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ZForm = exports.Upload = exports.Tree = exports.TransferTable = exports.TransferMenu = exports.Transfer = exports.Tooltip = exports.TimePicker = exports.ThemeProvider = exports.Textarea = exports.Tag = exports.Tabs = exports.Table = exports.Switch = exports.SvgIcon = exports.Steps = exports.Spin = exports.Slider = exports.Select = exports.Row = exports.Radio = exports.Progress = exports.Popover = exports.PopConfirm = exports.Pagination = exports.NumberInput = exports.Notice = exports.Modal = exports.Message = exports.Menu = exports.LocaleProvider = exports.Loading = exports.Link = exports.Input = exports.Icon = exports.Grid = exports.Form = exports.EditableTable = exports.EditableList = exports.Drawer = exports.DatePicker = exports.ConfigProvider = exports.Compact = exports.Combine = exports.Collapse = exports.Col = exports.Checkbox = exports.Cascader = exports.Card = exports.Calendar = exports.Button = exports.Breadcrumb = exports.Box = exports.Badge = exports.AutoComplete = exports.ActionList = void 0;
+exports.ZForm = exports.Upload = exports.Tree = exports.TransferTable = exports.TransferMenu = exports.Transfer = exports.Tooltip = exports.TimePicker = exports.ThemeProvider = exports.Textarea = exports.Tag = exports.Tabs = exports.Table = exports.Switch = exports.SvgIcon = exports.Steps = exports.Spin = exports.Slider = exports.Skeleton = exports.Select = exports.Row = exports.Radio = exports.Progress = exports.Popover = exports.PopConfirm = exports.Pagination = exports.NumberInput = exports.Notice = exports.Modal = exports.Message = exports.Menu = exports.LocaleProvider = exports.Loading = exports.Link = exports.Input = exports.Icon = exports.Grid = exports.Form = exports.EditableTable = exports.EditableList = exports.Drawer = exports.DatePicker = exports.ConfigProvider = exports.Compact = exports.Combine = exports.Collapse = exports.Col = exports.Checkbox = exports.Cascader = exports.Card = exports.Calendar = exports.Button = exports.Breadcrumb = exports.Box = exports.Badge = exports.AutoComplete = exports.ActionList = void 0;
 
 var ActionListAll = _interopRequireWildcard(require("./components/ActionList/"));
 
@@ -83,6 +83,8 @@ var RowAll = _interopRequireWildcard(require("./components/Row/"));
 
 var SelectAll = _interopRequireWildcard(require("./components/Select/"));
 
+var SkeletonAll = _interopRequireWildcard(require("./components/Skeleton/"));
+
 var SliderAll = _interopRequireWildcard(require("./components/Slider/"));
 
 var SpinAll = _interopRequireWildcard(require("./components/Spin/"));
@@ -199,6 +201,8 @@ var Row = Object.assign(RowAll.default, RowAll);
 exports.Row = Row;
 var Select = Object.assign(SelectAll.default, SelectAll);
 exports.Select = Select;
+var Skeleton = Object.assign(SkeletonAll.default, SkeletonAll);
+exports.Skeleton = Skeleton;
 var Slider = Object.assign(SliderAll.default, SliderAll);
 exports.Slider = Slider;
 var Spin = Object.assign(SpinAll.default, SpinAll);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucloud-fe/react-components",
-  "version": "1.5.3",
+  "version": "1.5.6",
   "title": "UCloud react components",
   "description": "UCloud react components",
   "keywords": [