@ucloud-fe/react-components 1.5.2 → 1.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/icon.min.js +1 -1
- package/dist/main.min.js +4 -4
- package/lib/__index.js +4 -0
- package/lib/components/Select/Overflow.js +22 -63
- package/lib/components/Select/style/index.js +24 -24
- package/lib/components/Skeleton/Skeleton.d.ts +11 -0
- package/lib/components/Skeleton/Skeleton.js +64 -0
- package/lib/components/Skeleton/index.d.ts +2 -0
- package/lib/components/Skeleton/index.js +13 -0
- package/lib/components/Skeleton/style/index.d.ts +9 -0
- package/lib/components/Skeleton/style/index.js +41 -0
- package/lib/components/ThemeProvider/designTokens.d.ts +4 -2
- package/lib/components/ThemeProvider/designTokens.js +6 -3
- package/lib/components/ThemeProvider/designTokensDark.d.ts +4 -2
- package/lib/components/ThemeProvider/designTokensDark.js +6 -3
- package/lib/components/TimePicker/TimePicker.js +34 -15
- package/lib/hooks/useOverflow.js +35 -16
- package/lib/index.js +5 -1
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
interface SkeletonProps {
|
|
3
|
+
/** 是否开启动画 */
|
|
4
|
+
animation?: boolean;
|
|
5
|
+
/** 章节的行数 */
|
|
6
|
+
rows?: number;
|
|
7
|
+
/** 宽度 */
|
|
8
|
+
width?: string | number;
|
|
9
|
+
}
|
|
10
|
+
declare const Skeleton: ({ animation, rows, ...rest }: SkeletonProps & HTMLAttributes<HTMLDivElement>) => JSX.Element;
|
|
11
|
+
export default Skeleton;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.default = void 0;
|
|
11
|
+
|
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
|
+
|
|
14
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
15
|
+
|
|
16
|
+
var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
|
|
17
|
+
|
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
+
|
|
22
|
+
var _style = require("./style");
|
|
23
|
+
|
|
24
|
+
var _excluded = ["animation", "rows"];
|
|
25
|
+
|
|
26
|
+
var _this = void 0;
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
32
|
+
var Skeleton = function Skeleton(_ref) {
|
|
33
|
+
var _this2 = this;
|
|
34
|
+
|
|
35
|
+
(0, _newArrowCheck2.default)(this, _this);
|
|
36
|
+
var animation = _ref.animation,
|
|
37
|
+
_ref$rows = _ref.rows,
|
|
38
|
+
rows = _ref$rows === void 0 ? 1 : _ref$rows,
|
|
39
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
40
|
+
var content = (0, _react.useMemo)(function () {
|
|
41
|
+
var _this3 = this;
|
|
42
|
+
|
|
43
|
+
(0, _newArrowCheck2.default)(this, _this2);
|
|
44
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, new Array(Math.max(rows, 1)).fill(null).map(function (_, i) {
|
|
45
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
46
|
+
return /*#__PURE__*/_react.default.createElement("p", {
|
|
47
|
+
key: i
|
|
48
|
+
});
|
|
49
|
+
}.bind(this)));
|
|
50
|
+
}.bind(this), [rows]);
|
|
51
|
+
return /*#__PURE__*/_react.default.createElement(_style.SWrap, (0, _extends2.default)({}, rest, {
|
|
52
|
+
animation: animation
|
|
53
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
54
|
+
className: _style.contentCls
|
|
55
|
+
}, content));
|
|
56
|
+
}.bind(void 0);
|
|
57
|
+
|
|
58
|
+
Skeleton.propTypes = {
|
|
59
|
+
animation: _propTypes.default.bool,
|
|
60
|
+
rows: _propTypes.default.number,
|
|
61
|
+
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
62
|
+
};
|
|
63
|
+
var _default = Skeleton;
|
|
64
|
+
exports.default = _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _Skeleton = _interopRequireDefault(require("./Skeleton"));
|
|
11
|
+
|
|
12
|
+
var _default = _Skeleton.default;
|
|
13
|
+
exports.default = _default;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const prefixCls: string;
|
|
3
|
+
export declare const contentCls: string;
|
|
4
|
+
export declare const SWrap: import("react").ForwardRefExoticComponent<{
|
|
5
|
+
animation?: boolean | undefined;
|
|
6
|
+
width?: string | number | undefined;
|
|
7
|
+
} & import("react").HTMLAttributes<HTMLDivElement> & {
|
|
8
|
+
theme?: import("../../../style").Theme | undefined;
|
|
9
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.SWrap = exports.contentCls = exports.prefixCls = void 0;
|
|
9
|
+
|
|
10
|
+
var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
|
|
11
|
+
|
|
12
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
|
+
|
|
14
|
+
var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
|
|
15
|
+
|
|
16
|
+
var _core = require("@emotion/core");
|
|
17
|
+
|
|
18
|
+
var _config = _interopRequireDefault(require("../../../config"));
|
|
19
|
+
|
|
20
|
+
var _style = require("../../../style");
|
|
21
|
+
|
|
22
|
+
var _templateObject,
|
|
23
|
+
_this = void 0;
|
|
24
|
+
|
|
25
|
+
var _prefixCls = _config.default.prefixCls;
|
|
26
|
+
var prefixCls = _prefixCls + '-skeleton';
|
|
27
|
+
exports.prefixCls = prefixCls;
|
|
28
|
+
var contentCls = prefixCls + '-content';
|
|
29
|
+
exports.contentCls = contentCls;
|
|
30
|
+
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"])));
|
|
31
|
+
var SWrap = (0, _style.sWrap)({})((0, _styledBase.default)("div", {
|
|
32
|
+
target: "e1iw0gz10",
|
|
33
|
+
label: "SWrap"
|
|
34
|
+
})(function (props) {
|
|
35
|
+
(0, _newArrowCheck2.default)(this, _this);
|
|
36
|
+
var DT = props.theme.designTokens,
|
|
37
|
+
animation = props.animation,
|
|
38
|
+
width = props.width;
|
|
39
|
+
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;", animation && /*#__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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNDdUIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgY29uZmlnIGZyb20gJ3NyYy9jb25maWcnO1xuaW1wb3J0IHsgc1dyYXAgfSBmcm9tICdzcmMvc3R5bGUnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuZXhwb3J0IGNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLXNrZWxldG9uJztcbmV4cG9ydCBjb25zdCBjb250ZW50Q2xzID0gcHJlZml4Q2xzICsgJy1jb250ZW50JztcblxuY29uc3Qgc2tlbGV0b25BbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtMzcuNSUpXG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMzcuNSUpXG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFNXcmFwID0gc1dyYXA8eyBhbmltYXRpb24/OiBib29sZWFuOyB3aWR0aD86IHN0cmluZyB8IG51bWJlciB9LCBIVE1MRGl2RWxlbWVudD4oe30pKFxuICAgIHN0eWxlZC5kaXYocHJvcHMgPT4ge1xuICAgICAgICBjb25zdCB7XG4gICAgICAgICAgICB0aGVtZTogeyBkZXNpZ25Ub2tlbnM6IERUIH0sXG4gICAgICAgICAgICBhbmltYXRpb24sXG4gICAgICAgICAgICB3aWR0aFxuICAgICAgICB9ID0gcHJvcHM7XG4gICAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICAgICAuJHtjb250ZW50Q2xzfSB7XG4gICAgICAgICAgICAgICAgJHt3aWR0aCAmJiBgd2lkdGg6ICR7d2lkdGh9O2B9XG4gICAgICAgICAgICAgICAgcCB7XG4gICAgICAgICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogJHtEVC5UX0NPTE9SX0JHX0RFRkFVTFRfREFSS307XG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICAgICAgbWFyZ2luLXRvcDogMTJweDtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jbGlwOiBjb250ZW50LWJveDtcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgICAgICAgICAgICAgICAke2FuaW1hdGlvbiAmJlxuICAgICAgICAgICAgICAgICAgICBjc3NgXG4gICAgICAgICAgICAgICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYW5pbWF0aW9uOiAxLjVzIGxpbmVhciBpbmZpbml0ZSAke3NrZWxldG9uQW5pbWF0aW9ufTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDkwZGVnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfTElHSFR9IDI1JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0RBUkt9IDM3JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0xJR0hUfSA2MyVcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByaWdodDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGVmdDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIGB9XG4gICAgICAgICAgICAgICAgICAgIDpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgLyogJjpsYXN0LW9mLXR5cGU6bm90KDpmaXJzdC1vZi10eXBlKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogNjAlO1xuICAgICAgICAgICAgICAgICAgICB9ICovXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICBgO1xuICAgIH0pXG4pO1xuIl19 */")), ":first-of-type{margin-top:0;}}};label:SWrap;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCa0IiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2tlbGV0b24vc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuXG5pbXBvcnQgY29uZmlnIGZyb20gJ3NyYy9jb25maWcnO1xuaW1wb3J0IHsgc1dyYXAgfSBmcm9tICdzcmMvc3R5bGUnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuZXhwb3J0IGNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLXNrZWxldG9uJztcbmV4cG9ydCBjb25zdCBjb250ZW50Q2xzID0gcHJlZml4Q2xzICsgJy1jb250ZW50JztcblxuY29uc3Qgc2tlbGV0b25BbmltYXRpb24gPSBrZXlmcmFtZXNgXG4gICAgMCUge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgtMzcuNSUpXG4gICAgfVxuICAgIHRvIHtcbiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMzcuNSUpXG4gICAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IFNXcmFwID0gc1dyYXA8eyBhbmltYXRpb24/OiBib29sZWFuOyB3aWR0aD86IHN0cmluZyB8IG51bWJlciB9LCBIVE1MRGl2RWxlbWVudD4oe30pKFxuICAgIHN0eWxlZC5kaXYocHJvcHMgPT4ge1xuICAgICAgICBjb25zdCB7XG4gICAgICAgICAgICB0aGVtZTogeyBkZXNpZ25Ub2tlbnM6IERUIH0sXG4gICAgICAgICAgICBhbmltYXRpb24sXG4gICAgICAgICAgICB3aWR0aFxuICAgICAgICB9ID0gcHJvcHM7XG4gICAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICAgICAuJHtjb250ZW50Q2xzfSB7XG4gICAgICAgICAgICAgICAgJHt3aWR0aCAmJiBgd2lkdGg6ICR7d2lkdGh9O2B9XG4gICAgICAgICAgICAgICAgcCB7XG4gICAgICAgICAgICAgICAgICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZDogJHtEVC5UX0NPTE9SX0JHX0RFRkFVTFRfREFSS307XG4gICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTZweDtcbiAgICAgICAgICAgICAgICAgICAgbWFyZ2luLXRvcDogMTJweDtcbiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZC1jbGlwOiBjb250ZW50LWJveDtcbiAgICAgICAgICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMnB4O1xuICAgICAgICAgICAgICAgICAgICAke2FuaW1hdGlvbiAmJlxuICAgICAgICAgICAgICAgICAgICBjc3NgXG4gICAgICAgICAgICAgICAgICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgY29udGVudDogJyc7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYW5pbWF0aW9uOiAxLjVzIGxpbmVhciBpbmZpbml0ZSAke3NrZWxldG9uQW5pbWF0aW9ufTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDkwZGVnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfTElHSFR9IDI1JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0RBUkt9IDM3JSxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgJHtEVC5UX1NLRUxFVE9OX0NPTE9SX0JHX0xJR0hUfSA2MyVcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICApO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgYm90dG9tOiAwO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTAwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByaWdodDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgbGVmdDogLTE1MCU7XG4gICAgICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgICAgIGB9XG4gICAgICAgICAgICAgICAgICAgIDpmaXJzdC1vZi10eXBlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpbi10b3A6IDA7XG4gICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgLyogJjpsYXN0LW9mLXR5cGU6bm90KDpmaXJzdC1vZi10eXBlKSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB3aWR0aDogNjAlO1xuICAgICAgICAgICAgICAgICAgICB9ICovXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICBgO1xuICAgIH0pXG4pO1xuIl19 */"));
|
|
40
|
+
}.bind(void 0), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NrZWxldG9uL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CSSIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Ta2VsZXRvbi9zdHlsZS9pbmRleC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmltcG9ydCBjb25maWcgZnJvbSAnc3JjL2NvbmZpZyc7XG5pbXBvcnQgeyBzV3JhcCB9IGZyb20gJ3NyYy9zdHlsZSc7XG5cbmNvbnN0IHsgcHJlZml4Q2xzOiBfcHJlZml4Q2xzIH0gPSBjb25maWc7XG5leHBvcnQgY29uc3QgcHJlZml4Q2xzID0gX3ByZWZpeENscyArICctc2tlbGV0b24nO1xuZXhwb3J0IGNvbnN0IGNvbnRlbnRDbHMgPSBwcmVmaXhDbHMgKyAnLWNvbnRlbnQnO1xuXG5jb25zdCBza2VsZXRvbkFuaW1hdGlvbiA9IGtleWZyYW1lc2BcbiAgICAwJSB7XG4gICAgICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlKC0zNy41JSlcbiAgICB9XG4gICAgdG8ge1xuICAgICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgzNy41JSlcbiAgICB9XG5gO1xuXG5leHBvcnQgY29uc3QgU1dyYXAgPSBzV3JhcDx7IGFuaW1hdGlvbj86IGJvb2xlYW47IHdpZHRoPzogc3RyaW5nIHwgbnVtYmVyIH0sIEhUTUxEaXZFbGVtZW50Pih7fSkoXG4gICAgc3R5bGVkLmRpdihwcm9wcyA9PiB7XG4gICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgIHRoZW1lOiB7IGRlc2lnblRva2VuczogRFQgfSxcbiAgICAgICAgICAgIGFuaW1hdGlvbixcbiAgICAgICAgICAgIHdpZHRoXG4gICAgICAgIH0gPSBwcm9wcztcbiAgICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgICAgIC4ke2NvbnRlbnRDbHN9IHtcbiAgICAgICAgICAgICAgICAke3dpZHRoICYmIGB3aWR0aDogJHt3aWR0aH07YH1cbiAgICAgICAgICAgICAgICBwIHtcbiAgICAgICAgICAgICAgICAgICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiAke0RULlRfQ09MT1JfQkdfREVGQVVMVF9EQVJLfTtcbiAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAxNnB4O1xuICAgICAgICAgICAgICAgICAgICBtYXJnaW4tdG9wOiAxMnB4O1xuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNsaXA6IGNvbnRlbnQtYm94O1xuICAgICAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7XG4gICAgICAgICAgICAgICAgICAgICR7YW5pbWF0aW9uICYmXG4gICAgICAgICAgICAgICAgICAgIGNzc2BcbiAgICAgICAgICAgICAgICAgICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb250ZW50OiAnJztcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBhbmltYXRpb246IDEuNXMgbGluZWFyIGluZmluaXRlICR7c2tlbGV0b25BbmltYXRpb259O1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgOTBkZWcsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICR7RFQuVF9TS0VMRVRPTl9DT0xPUl9CR19MSUdIVH0gMjUlLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfREFSS30gMzclLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAke0RULlRfU0tFTEVUT05fQ09MT1JfQkdfTElHSFR9IDYzJVxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICk7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHRvcDogMDtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBib3R0b206IDA7XG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiAxMDAlO1xuICAgICAgICAgICAgICAgICAgICAgICAgICAgIHJpZ2h0OiAtMTUwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBsZWZ0OiAtMTUwJTtcbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgYH1cbiAgICAgICAgICAgICAgICAgICAgOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICAgICAgICAgICAgICAgICAgbWFyZ2luLXRvcDogMDtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICAvKiAmOmxhc3Qtb2YtdHlwZTpub3QoOmZpcnN0LW9mLXR5cGUpIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHdpZHRoOiA2MCU7XG4gICAgICAgICAgICAgICAgICAgIH0gKi9cbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9XG4gICAgICAgIGA7XG4gICAgfSlcbik7XG4iXX0= */"));
|
|
41
|
+
exports.SWrap = SWrap;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const
|
|
1
|
+
declare const _default: {
|
|
2
2
|
T_BUTTON_COMMON_COLOR_MASK: string;
|
|
3
3
|
T_BUTTON_PRIMARY_COLOR_BG_DEFAULT: string;
|
|
4
4
|
T_BUTTON_PRIMARY_COLOR_BG_HOVER: string;
|
|
@@ -214,6 +214,8 @@ declare const designTokens: {
|
|
|
214
214
|
T_SHADOW_INSET_LEFT: string;
|
|
215
215
|
T_SHADOW_INSET_RIGHT: string;
|
|
216
216
|
T_SHADOW_INSET_TOP: string;
|
|
217
|
+
T_SKELETON_COLOR_BG_DARK: string;
|
|
218
|
+
T_SKELETON_COLOR_BG_LIGHT: string;
|
|
217
219
|
T_SLIDER_COLOR_BG_ACTIVE: string;
|
|
218
220
|
T_SLIDER_COLOR_BG_DEFAULT: string;
|
|
219
221
|
T_SLIDER_COLOR_LINE_ACTIVE: string;
|
|
@@ -264,4 +266,4 @@ declare const designTokens: {
|
|
|
264
266
|
T_WIDTH_MD: string;
|
|
265
267
|
T_WIDTH_SM: string;
|
|
266
268
|
};
|
|
267
|
-
export default
|
|
269
|
+
export default _default;
|
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
// Do not edit directly
|
|
8
|
-
// Generated with design-token-editor on
|
|
9
|
-
var
|
|
8
|
+
// Generated with design-token-editor on 7/12/2022, 3:06:32 PM
|
|
9
|
+
var _default = {
|
|
10
10
|
// 按钮加载遮罩
|
|
11
11
|
T_BUTTON_COMMON_COLOR_MASK: '#ffffff',
|
|
12
12
|
// 按钮/主/背景色
|
|
@@ -437,6 +437,10 @@ var designTokens = {
|
|
|
437
437
|
T_SHADOW_INSET_RIGHT: 'inset -10px 0 8px -8px rgba(0,0,0,0.12)',
|
|
438
438
|
// 内阴影/上
|
|
439
439
|
T_SHADOW_INSET_TOP: 'inset 0 10px 8px -8px rgba(0,0,0,0.12)',
|
|
440
|
+
// 骨架屏/背景色/深色
|
|
441
|
+
T_SKELETON_COLOR_BG_DARK: '#efeff8',
|
|
442
|
+
// 骨架屏/背景色/浅色
|
|
443
|
+
T_SKELETON_COLOR_BG_LIGHT: '#f6f6fb',
|
|
440
444
|
// 滑块/背景色/激活
|
|
441
445
|
T_SLIDER_COLOR_BG_ACTIVE: '#f8f8ff',
|
|
442
446
|
// 滑块/背景色/未激活
|
|
@@ -536,5 +540,4 @@ var designTokens = {
|
|
|
536
540
|
// 小号控件宽度
|
|
537
541
|
T_WIDTH_SM: '144px'
|
|
538
542
|
};
|
|
539
|
-
var _default = designTokens;
|
|
540
543
|
exports.default = _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const
|
|
1
|
+
declare const _default: {
|
|
2
2
|
T_BUTTON_COMMON_COLOR_MASK: string;
|
|
3
3
|
T_BUTTON_PRIMARY_COLOR_BG_DEFAULT: string;
|
|
4
4
|
T_BUTTON_PRIMARY_COLOR_BG_HOVER: string;
|
|
@@ -214,6 +214,8 @@ declare const designTokens: {
|
|
|
214
214
|
T_SHADOW_INSET_LEFT: string;
|
|
215
215
|
T_SHADOW_INSET_RIGHT: string;
|
|
216
216
|
T_SHADOW_INSET_TOP: string;
|
|
217
|
+
T_SKELETON_COLOR_BG_DARK: string;
|
|
218
|
+
T_SKELETON_COLOR_BG_LIGHT: string;
|
|
217
219
|
T_SLIDER_COLOR_BG_ACTIVE: string;
|
|
218
220
|
T_SLIDER_COLOR_BG_DEFAULT: string;
|
|
219
221
|
T_SLIDER_COLOR_LINE_ACTIVE: string;
|
|
@@ -264,4 +266,4 @@ declare const designTokens: {
|
|
|
264
266
|
T_WIDTH_MD: string;
|
|
265
267
|
T_WIDTH_SM: string;
|
|
266
268
|
};
|
|
267
|
-
export default
|
|
269
|
+
export default _default;
|
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
// Do not edit directly
|
|
8
|
-
// Generated with design-token-editor on
|
|
9
|
-
var
|
|
8
|
+
// Generated with design-token-editor on 7/12/2022, 3:06:24 PM
|
|
9
|
+
var _default = {
|
|
10
10
|
// 按钮加载遮罩
|
|
11
11
|
T_BUTTON_COMMON_COLOR_MASK: '#141A2B',
|
|
12
12
|
// 按钮/主/背景色
|
|
@@ -437,6 +437,10 @@ var designTokens = {
|
|
|
437
437
|
T_SHADOW_INSET_RIGHT: 'inset -10px 0 8px -8px rgba(0,0,0,0.32)',
|
|
438
438
|
// 内阴影/上
|
|
439
439
|
T_SHADOW_INSET_TOP: 'inset 0 10px 8px -8px rgba(0,0,0,0.32)',
|
|
440
|
+
// 骨架屏/背景色/深色
|
|
441
|
+
T_SKELETON_COLOR_BG_DARK: '#1F2538',
|
|
442
|
+
// 骨架屏/背景色/浅色
|
|
443
|
+
T_SKELETON_COLOR_BG_LIGHT: '#161C2E',
|
|
440
444
|
// 滑块/背景色/激活
|
|
441
445
|
T_SLIDER_COLOR_BG_ACTIVE: '#1B2341',
|
|
442
446
|
// 滑块/背景色/未激活
|
|
@@ -536,5 +540,4 @@ var designTokens = {
|
|
|
536
540
|
// 小号控件宽度
|
|
537
541
|
T_WIDTH_SM: '144px'
|
|
538
542
|
};
|
|
539
|
-
var _default = designTokens;
|
|
540
543
|
exports.default = _default;
|
|
@@ -52,11 +52,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
52
52
|
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; }
|
|
53
53
|
|
|
54
54
|
var FooterWithoutMemo = function FooterWithoutMemo(_ref) {
|
|
55
|
+
var _this2 = this;
|
|
56
|
+
|
|
55
57
|
(0, _newArrowCheck2.default)(this, _this);
|
|
56
58
|
var onConfirm = _ref.onConfirm,
|
|
57
59
|
disabled = _ref.disabled,
|
|
58
60
|
_locale = _ref.locale;
|
|
59
61
|
var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
|
|
62
|
+
var handleConfirm = (0, _react.useCallback)(function () {
|
|
63
|
+
(0, _newArrowCheck2.default)(this, _this2);
|
|
64
|
+
onConfirm();
|
|
65
|
+
}.bind(this), [onConfirm]);
|
|
60
66
|
return /*#__PURE__*/_react.default.createElement(_Box.default, {
|
|
61
67
|
className: _style.footerCls,
|
|
62
68
|
container: true,
|
|
@@ -65,7 +71,7 @@ var FooterWithoutMemo = function FooterWithoutMemo(_ref) {
|
|
|
65
71
|
}, /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
66
72
|
styleType: "primary",
|
|
67
73
|
size: "sm",
|
|
68
|
-
onClick:
|
|
74
|
+
onClick: handleConfirm,
|
|
69
75
|
disabled: disabled
|
|
70
76
|
}, locale.confirm));
|
|
71
77
|
}.bind(void 0);
|
|
@@ -97,7 +103,7 @@ var formatToTimeMode = function formatToTimeMode(format) {
|
|
|
97
103
|
var DefaultFormat = 'HH:mm:ss';
|
|
98
104
|
|
|
99
105
|
var TimePicker = function TimePicker(_ref2) {
|
|
100
|
-
var
|
|
106
|
+
var _this3 = this;
|
|
101
107
|
|
|
102
108
|
(0, _newArrowCheck2.default)(this, _this);
|
|
103
109
|
|
|
@@ -138,19 +144,24 @@ var TimePicker = function TimePicker(_ref2) {
|
|
|
138
144
|
setActive = _useState8[1];
|
|
139
145
|
|
|
140
146
|
var defaultTime = (0, _react.useMemo)(function () {
|
|
141
|
-
(0, _newArrowCheck2.default)(this,
|
|
147
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
142
148
|
return (0, _moment.default)().startOf('date');
|
|
143
149
|
}.bind(this), []);
|
|
144
150
|
var avoidBlur = (0, _react.useCallback)(function (e) {
|
|
145
|
-
(0, _newArrowCheck2.default)(this,
|
|
151
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
146
152
|
return e.preventDefault();
|
|
147
153
|
}.bind(this), []);
|
|
148
154
|
var format = _format || DefaultFormat;
|
|
149
|
-
var handleConfirm = (0, _react.useCallback)(function () {
|
|
150
|
-
(0, _newArrowCheck2.default)(this,
|
|
155
|
+
var handleConfirm = (0, _react.useCallback)(function (value) {
|
|
156
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
151
157
|
setActive(false);
|
|
152
158
|
var finalValue = timeValue;
|
|
153
159
|
|
|
160
|
+
if (value !== undefined) {
|
|
161
|
+
onChange(value === null ? null : (0, _moment.default)(+value));
|
|
162
|
+
return;
|
|
163
|
+
}
|
|
164
|
+
|
|
154
165
|
if (useInputValue) {
|
|
155
166
|
var inputTime = inputToTime(inputValue, format);
|
|
156
167
|
|
|
@@ -166,7 +177,7 @@ var TimePicker = function TimePicker(_ref2) {
|
|
|
166
177
|
onChange(finalValue == null ? null : (0, _moment.default)(+finalValue));
|
|
167
178
|
}.bind(this), [format, inputValue, nullable, onChange, timeValue, useInputValue]);
|
|
168
179
|
var handleInputChange = (0, _react.useCallback)(function (e) {
|
|
169
|
-
(0, _newArrowCheck2.default)(this,
|
|
180
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
170
181
|
var s = e.target.value;
|
|
171
182
|
setInputValue(s);
|
|
172
183
|
var inputTime = inputToTime(s, format);
|
|
@@ -174,25 +185,29 @@ var TimePicker = function TimePicker(_ref2) {
|
|
|
174
185
|
setUseInputValue(true);
|
|
175
186
|
}.bind(this), [format]);
|
|
176
187
|
var handleTimeChange = (0, _react.useCallback)(function (v) {
|
|
177
|
-
(0, _newArrowCheck2.default)(this,
|
|
188
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
178
189
|
setTimeValue(v);
|
|
179
190
|
setInputValue(timeToInput(v, format));
|
|
180
191
|
setUseInputValue(false);
|
|
181
192
|
}.bind(this), [format]);
|
|
182
193
|
var handleInputFocus = (0, _react.useCallback)(function () {
|
|
183
|
-
(0, _newArrowCheck2.default)(this,
|
|
194
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
184
195
|
return setActive(true);
|
|
185
196
|
}.bind(this), []);
|
|
186
197
|
var handleInputBlur = (0, _react.useCallback)(function () {
|
|
187
|
-
(0, _newArrowCheck2.default)(this,
|
|
198
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
188
199
|
return setActive(false);
|
|
189
200
|
}.bind(this), []);
|
|
201
|
+
var handleInputClear = (0, _react.useCallback)(function () {
|
|
202
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
203
|
+
nullable && handleConfirm(null);
|
|
204
|
+
}.bind(this), [handleConfirm, nullable]);
|
|
190
205
|
var formatTimeValue = (0, _react.useMemo)(function () {
|
|
191
|
-
(0, _newArrowCheck2.default)(this,
|
|
206
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
192
207
|
return new Date(+(timeValue == null ? defaultTime : timeValue));
|
|
193
208
|
}.bind(this), [defaultTime, timeValue]);
|
|
194
209
|
var isValid = (0, _react.useMemo)(function () {
|
|
195
|
-
(0, _newArrowCheck2.default)(this,
|
|
210
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
196
211
|
|
|
197
212
|
if (useInputValue) {
|
|
198
213
|
var inputTime = inputToTime(inputValue, format);
|
|
@@ -203,12 +218,12 @@ var TimePicker = function TimePicker(_ref2) {
|
|
|
203
218
|
return true;
|
|
204
219
|
}.bind(this), [format, inputValue, nullable, useInputValue]);
|
|
205
220
|
var timeMode = (0, _react.useMemo)(function () {
|
|
206
|
-
(0, _newArrowCheck2.default)(this,
|
|
221
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
207
222
|
return formatToTimeMode(format);
|
|
208
223
|
}.bind(this), [format]);
|
|
209
224
|
var popoverConfigProps = (0, _usePopoverConfig.default)();
|
|
210
225
|
(0, _react.useEffect)(function () {
|
|
211
|
-
(0, _newArrowCheck2.default)(this,
|
|
226
|
+
(0, _newArrowCheck2.default)(this, _this3);
|
|
212
227
|
|
|
213
228
|
if (!active) {
|
|
214
229
|
setTimeValue(value);
|
|
@@ -240,9 +255,13 @@ var TimePicker = function TimePicker(_ref2) {
|
|
|
240
255
|
onBlur: handleInputBlur,
|
|
241
256
|
onFocus: handleInputFocus,
|
|
242
257
|
onClick: handleInputFocus,
|
|
258
|
+
onClear: handleInputClear,
|
|
243
259
|
size: size,
|
|
244
260
|
disabled: disabled,
|
|
245
|
-
clearable: nullable
|
|
261
|
+
clearable: nullable ? {
|
|
262
|
+
autoFocus: false,
|
|
263
|
+
callOnChange: false
|
|
264
|
+
} : false,
|
|
246
265
|
prefix: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
|
|
247
266
|
type: "clock"
|
|
248
267
|
})
|
package/lib/hooks/useOverflow.js
CHANGED
|
@@ -21,6 +21,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
21
21
|
|
|
22
22
|
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; }
|
|
23
23
|
|
|
24
|
+
// https://github.com/que-etc/resize-observer-polyfill/issues/80
|
|
25
|
+
// 由于 ts 官方增加了 contentRect 的类型定义,导致和 resize-observer-polyfill 内部的定义冲突,目前先以 "skipLibCheck" 解决
|
|
24
26
|
var DEFAULT_DEP = [];
|
|
25
27
|
/**
|
|
26
28
|
* 计算容器内的元素最大展示数量
|
|
@@ -38,34 +40,47 @@ var useOverflow = function useOverflow(_ref) {
|
|
|
38
40
|
minCount = _ref$minCount === void 0 ? 0 : _ref$minCount;
|
|
39
41
|
var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DEP;
|
|
40
42
|
|
|
43
|
+
// the count of trying to show
|
|
41
44
|
var _useState = (0, _react.useState)(function () {
|
|
42
45
|
(0, _newArrowCheck2.default)(this, _this);
|
|
43
46
|
return Math.min(defaultCount, maxCount);
|
|
44
47
|
}.bind(this)),
|
|
45
48
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
46
49
|
count = _useState2[0],
|
|
47
|
-
setCount = _useState2[1];
|
|
50
|
+
setCount = _useState2[1]; // the count valid to show
|
|
51
|
+
|
|
48
52
|
|
|
49
53
|
var _useState3 = (0, _react.useState)(count),
|
|
50
54
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
51
55
|
measureCount = _useState4[0],
|
|
52
|
-
setMeasureCount = _useState4[1];
|
|
56
|
+
setMeasureCount = _useState4[1]; // latest valid count
|
|
57
|
+
|
|
53
58
|
|
|
54
59
|
var _useState5 = (0, _react.useState)(null),
|
|
55
60
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
56
61
|
latestValidCount = _useState6[0],
|
|
57
|
-
setLatestValidCount = _useState6[1];
|
|
62
|
+
setLatestValidCount = _useState6[1]; // the container element
|
|
63
|
+
|
|
58
64
|
|
|
59
65
|
var _useState7 = (0, _react.useState)(true),
|
|
60
66
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
61
67
|
measuring = _useState8[0],
|
|
62
|
-
setMeasuring = _useState8[1];
|
|
68
|
+
setMeasuring = _useState8[1]; // save to ref for use in resize observer to avoid frequently create new observer
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
var measuringRef = (0, _react.useRef)(measuring);
|
|
72
|
+
(0, _react.useEffect)(function () {
|
|
73
|
+
(0, _newArrowCheck2.default)(this, _this);
|
|
74
|
+
measuringRef.current = measuring;
|
|
75
|
+
}.bind(this), [measuring]); // start to measure
|
|
63
76
|
|
|
64
77
|
var startMeasuring = (0, _react.useCallback)(function () {
|
|
65
78
|
(0, _newArrowCheck2.default)(this, _this);
|
|
79
|
+
if (measuringRef.current) return;
|
|
66
80
|
setMeasuring(true);
|
|
67
81
|
setLatestValidCount(null);
|
|
68
|
-
}.bind(this), []);
|
|
82
|
+
}.bind(this), []); // stop measuring
|
|
83
|
+
|
|
69
84
|
var endMeasuring = (0, _react.useCallback)(function (measureCount) {
|
|
70
85
|
(0, _newArrowCheck2.default)(this, _this);
|
|
71
86
|
setMeasuring(false);
|
|
@@ -73,6 +88,7 @@ var useOverflow = function useOverflow(_ref) {
|
|
|
73
88
|
}.bind(this), []);
|
|
74
89
|
(0, _react.useEffect)(function () {
|
|
75
90
|
(0, _newArrowCheck2.default)(this, _this);
|
|
91
|
+
// console.log('reset when deps changed');
|
|
76
92
|
startMeasuring(); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
77
93
|
}.bind(this), deps);
|
|
78
94
|
(0, _react.useEffect)(function () {
|
|
@@ -80,12 +96,7 @@ var useOverflow = function useOverflow(_ref) {
|
|
|
80
96
|
// reset when config changed
|
|
81
97
|
startMeasuring();
|
|
82
98
|
}.bind(this), [minCount, maxCount, startMeasuring]);
|
|
83
|
-
var measuringRef = (0, _react.useRef)(measuring);
|
|
84
99
|
(0, _react.useEffect)(function () {
|
|
85
|
-
(0, _newArrowCheck2.default)(this, _this);
|
|
86
|
-
measuringRef.current = measuring;
|
|
87
|
-
}.bind(this), [measuring]);
|
|
88
|
-
(0, _react.useLayoutEffect)(function () {
|
|
89
100
|
var _this2 = this;
|
|
90
101
|
|
|
91
102
|
(0, _newArrowCheck2.default)(this, _this);
|
|
@@ -97,8 +108,11 @@ var useOverflow = function useOverflow(_ref) {
|
|
|
97
108
|
(0, _newArrowCheck2.default)(this, _this2);
|
|
98
109
|
|
|
99
110
|
if (!measuringRef.current) {
|
|
100
|
-
startMeasuring();
|
|
101
|
-
}
|
|
111
|
+
startMeasuring(); // console.log('reset when width changed');
|
|
112
|
+
} // else {
|
|
113
|
+
// console.log('lock when width changed');
|
|
114
|
+
// }
|
|
115
|
+
|
|
102
116
|
}.bind(this));
|
|
103
117
|
resizeObserver.observe(containerDOM);
|
|
104
118
|
}
|
|
@@ -110,11 +124,13 @@ var useOverflow = function useOverflow(_ref) {
|
|
|
110
124
|
resizeObserver.disconnect();
|
|
111
125
|
}
|
|
112
126
|
}.bind(this);
|
|
113
|
-
}.bind(this), [containerRef, startMeasuring]);
|
|
127
|
+
}.bind(this), [containerRef, startMeasuring]); // console.log({ count, latestValidCount, maxCount, minCount, measuring });
|
|
128
|
+
// use layout effect to measure can avoid most shaking
|
|
129
|
+
|
|
114
130
|
(0, _react.useLayoutEffect)(function () {
|
|
115
131
|
(0, _newArrowCheck2.default)(this, _this);
|
|
116
132
|
var containerDOM = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
|
|
117
|
-
if (!containerDOM) return;
|
|
133
|
+
if (!containerDOM) return; // measure end
|
|
118
134
|
|
|
119
135
|
if (count === latestValidCount) {
|
|
120
136
|
endMeasuring(latestValidCount);
|
|
@@ -124,10 +140,13 @@ var useOverflow = function useOverflow(_ref) {
|
|
|
124
140
|
var newCount = count;
|
|
125
141
|
|
|
126
142
|
if (containerDOM.offsetWidth >= containerDOM.scrollWidth) {
|
|
127
|
-
setLatestValidCount(count);
|
|
143
|
+
setLatestValidCount(count); // try to show more
|
|
144
|
+
|
|
128
145
|
newCount = Math.min(count + 1, maxCount);
|
|
129
146
|
} else if (containerDOM.offsetWidth < containerDOM.scrollWidth) {
|
|
130
|
-
if
|
|
147
|
+
// if container with not enough space event when count is 0, it will be set to 0
|
|
148
|
+
if (count === 0) setLatestValidCount(count); // try to show less
|
|
149
|
+
|
|
131
150
|
newCount = Math.max(0, minCount, count - 1);
|
|
132
151
|
}
|
|
133
152
|
|
package/lib/index.js
CHANGED
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
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;
|
|
8
|
+
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;
|
|
9
9
|
|
|
10
10
|
var ActionListAll = _interopRequireWildcard(require("./components/ActionList/"));
|
|
11
11
|
|
|
@@ -83,6 +83,8 @@ var RowAll = _interopRequireWildcard(require("./components/Row/"));
|
|
|
83
83
|
|
|
84
84
|
var SelectAll = _interopRequireWildcard(require("./components/Select/"));
|
|
85
85
|
|
|
86
|
+
var SkeletonAll = _interopRequireWildcard(require("./components/Skeleton/"));
|
|
87
|
+
|
|
86
88
|
var SliderAll = _interopRequireWildcard(require("./components/Slider/"));
|
|
87
89
|
|
|
88
90
|
var SpinAll = _interopRequireWildcard(require("./components/Spin/"));
|
|
@@ -199,6 +201,8 @@ var Row = Object.assign(RowAll.default, RowAll);
|
|
|
199
201
|
exports.Row = Row;
|
|
200
202
|
var Select = Object.assign(SelectAll.default, SelectAll);
|
|
201
203
|
exports.Select = Select;
|
|
204
|
+
var Skeleton = Object.assign(SkeletonAll.default, SkeletonAll);
|
|
205
|
+
exports.Skeleton = Skeleton;
|
|
202
206
|
var Slider = Object.assign(SliderAll.default, SliderAll);
|
|
203
207
|
exports.Slider = Slider;
|
|
204
208
|
var Spin = Object.assign(SpinAll.default, SpinAll);
|