@sheinx/hooks 3.10.1-beta.1 → 3.10.1-beta.3
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/cjs/common/use-boundary/index.d.ts +41 -0
- package/cjs/common/use-boundary/index.d.ts.map +1 -0
- package/cjs/common/use-boundary/index.js +72 -0
- package/cjs/common/use-position-style/get-boundary-style.d.ts +19 -0
- package/cjs/common/use-position-style/get-boundary-style.d.ts.map +1 -0
- package/cjs/common/use-position-style/get-boundary-style.js +57 -0
- package/cjs/common/use-position-style/index.d.ts +1 -1
- package/cjs/common/use-position-style/index.d.ts.map +1 -1
- package/cjs/common/use-position-style/index.js +22 -12
- package/cjs/index.d.ts +1 -0
- package/cjs/index.d.ts.map +1 -1
- package/cjs/index.js +12 -0
- package/esm/common/use-boundary/index.d.ts +41 -0
- package/esm/common/use-boundary/index.d.ts.map +1 -0
- package/esm/common/use-boundary/index.js +66 -0
- package/esm/common/use-position-style/get-boundary-style.d.ts +19 -0
- package/esm/common/use-position-style/get-boundary-style.d.ts.map +1 -0
- package/esm/common/use-position-style/get-boundary-style.js +51 -0
- package/esm/common/use-position-style/index.d.ts +1 -1
- package/esm/common/use-position-style/index.d.ts.map +1 -1
- package/esm/common/use-position-style/index.js +22 -12
- package/esm/index.d.ts +1 -0
- package/esm/index.d.ts.map +1 -1
- package/esm/index.js +1 -0
- package/package.json +1 -1
- package/cjs/common/use-position-style/get-sizing-style.d.ts +0 -13
- package/cjs/common/use-position-style/get-sizing-style.d.ts.map +0 -1
- package/cjs/common/use-position-style/get-sizing-style.js +0 -25
- package/esm/common/use-position-style/get-sizing-style.d.ts +0 -13
- package/esm/common/use-position-style/get-sizing-style.d.ts.map +0 -1
- package/esm/common/use-position-style/get-sizing-style.js +0 -19
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface UseBoundaryOptions {
|
|
3
|
+
/**
|
|
4
|
+
* 延迟清除边界样式的时间(毫秒)
|
|
5
|
+
* @default 300
|
|
6
|
+
*/
|
|
7
|
+
clearDelay?: number;
|
|
8
|
+
}
|
|
9
|
+
export interface UseBoundaryResult {
|
|
10
|
+
/**
|
|
11
|
+
* 当前的边界样式
|
|
12
|
+
*/
|
|
13
|
+
boundaryStyle: React.CSSProperties | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* 设置边界样式的函数
|
|
16
|
+
* - 传入 style 对象:立即设置边界样式
|
|
17
|
+
* - 不传参数或传入 undefined:延迟清除边界样式
|
|
18
|
+
*/
|
|
19
|
+
setBoundaryStyle: (style?: React.CSSProperties) => void;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* useBoundary Hook
|
|
23
|
+
*
|
|
24
|
+
* 用于管理弹出层的边界样式,支持延迟清除功能
|
|
25
|
+
*
|
|
26
|
+
* @param options - 配置选项
|
|
27
|
+
* @returns 包含 boundaryStyle 和 setBoundaryStyle 的对象
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* const { boundaryStyle, setBoundaryStyle } = useBoundary({ clearDelay: 300 });
|
|
32
|
+
*
|
|
33
|
+
* 设置边界样式
|
|
34
|
+
* setBoundaryStyle({ maxHeight: 200, overflowY: 'auto' });
|
|
35
|
+
*
|
|
36
|
+
* 清除边界样式(延迟执行)
|
|
37
|
+
* setBoundaryStyle();
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare const useBoundary: (options?: UseBoundaryOptions) => UseBoundaryResult;
|
|
41
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IAC/C;;;;OAIG;IACH,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,iBAoC9D,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.useBoundary = void 0;
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
11
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
12
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
14
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
|
+
/**
|
|
16
|
+
* useBoundary Hook
|
|
17
|
+
*
|
|
18
|
+
* 用于管理弹出层的边界样式,支持延迟清除功能
|
|
19
|
+
*
|
|
20
|
+
* @param options - 配置选项
|
|
21
|
+
* @returns 包含 boundaryStyle 和 setBoundaryStyle 的对象
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* const { boundaryStyle, setBoundaryStyle } = useBoundary({ clearDelay: 300 });
|
|
26
|
+
*
|
|
27
|
+
* 设置边界样式
|
|
28
|
+
* setBoundaryStyle({ maxHeight: 200, overflowY: 'auto' });
|
|
29
|
+
*
|
|
30
|
+
* 清除边界样式(延迟执行)
|
|
31
|
+
* setBoundaryStyle();
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
var useBoundary = exports.useBoundary = function useBoundary() {
|
|
35
|
+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
36
|
+
var _options$clearDelay = options.clearDelay,
|
|
37
|
+
clearDelay = _options$clearDelay === void 0 ? 300 : _options$clearDelay;
|
|
38
|
+
var _useState = (0, _react.useState)(),
|
|
39
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
40
|
+
boundaryStyle = _useState2[0],
|
|
41
|
+
_setBoundaryStyle = _useState2[1];
|
|
42
|
+
var _useRef = (0, _react.useRef)({
|
|
43
|
+
boundaryTimer: null
|
|
44
|
+
}),
|
|
45
|
+
context = _useRef.current;
|
|
46
|
+
var setBoundaryStyle = function setBoundaryStyle(style) {
|
|
47
|
+
if (!style) {
|
|
48
|
+
// 延迟清除边界样式
|
|
49
|
+
context.boundaryTimer = setTimeout(function () {
|
|
50
|
+
_setBoundaryStyle(undefined);
|
|
51
|
+
}, clearDelay);
|
|
52
|
+
} else {
|
|
53
|
+
// 立即设置边界样式,取消之前的清除定时器
|
|
54
|
+
if (context.boundaryTimer) {
|
|
55
|
+
clearTimeout(context.boundaryTimer);
|
|
56
|
+
context.boundaryTimer = null;
|
|
57
|
+
}
|
|
58
|
+
_setBoundaryStyle(style);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
(0, _react.useEffect)(function () {
|
|
62
|
+
return function () {
|
|
63
|
+
if (context.boundaryTimer) {
|
|
64
|
+
clearTimeout(context.boundaryTimer);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
}, []);
|
|
68
|
+
return {
|
|
69
|
+
boundaryStyle: boundaryStyle,
|
|
70
|
+
setBoundaryStyle: setBoundaryStyle
|
|
71
|
+
};
|
|
72
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
interface Options {
|
|
2
|
+
parentRect: DOMRect;
|
|
3
|
+
boundary: () => HTMLElement | null;
|
|
4
|
+
popupGap?: number;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* 基于 boundary 容器的可用空间调整弹出方向
|
|
8
|
+
* 解决 position='auto' 时方向判断基于视口而非 boundary 的问题
|
|
9
|
+
*/
|
|
10
|
+
export declare const adjustPositionByBoundary: (position: string, { boundary, parentRect, popupGap }: Options) => string;
|
|
11
|
+
export declare const getBoundaryStyle: (position: string, { boundary, parentRect, popupGap }: Options) => {
|
|
12
|
+
maxHeight?: undefined;
|
|
13
|
+
overflowY?: undefined;
|
|
14
|
+
} | {
|
|
15
|
+
maxHeight: number;
|
|
16
|
+
overflowY: "auto";
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=get-boundary-style.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-boundary-style.d.ts","sourceRoot":"","sources":["get-boundary-style.ts"],"names":[],"mappings":"AAAA,UAAU,OAAO;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,aAAc,MAAM,sCAAsC,OAAO,KAAG,MAmBxG,CAAC;AAKF,eAAO,MAAO,gBAAgB,aAAc,MAAM,sCAAqC,OAAO;;;;;;CAgB7F,CAAA"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getBoundaryStyle = exports.adjustPositionByBoundary = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* 基于 boundary 容器的可用空间调整弹出方向
|
|
9
|
+
* 解决 position='auto' 时方向判断基于视口而非 boundary 的问题
|
|
10
|
+
*/
|
|
11
|
+
var adjustPositionByBoundary = exports.adjustPositionByBoundary = function adjustPositionByBoundary(position, _ref) {
|
|
12
|
+
var boundary = _ref.boundary,
|
|
13
|
+
parentRect = _ref.parentRect,
|
|
14
|
+
popupGap = _ref.popupGap;
|
|
15
|
+
var boundaryEl = boundary();
|
|
16
|
+
if (!boundaryEl) return position;
|
|
17
|
+
var boundaryRect = boundaryEl.getBoundingClientRect();
|
|
18
|
+
var gap = popupGap || 0;
|
|
19
|
+
if (position.startsWith('bottom') || position.startsWith('top')) {
|
|
20
|
+
var spaceBelow = boundaryRect.bottom - parentRect.bottom - gap;
|
|
21
|
+
var spaceAbove = parentRect.top - boundaryRect.top - gap;
|
|
22
|
+
if (position.startsWith('bottom') && spaceBelow < spaceAbove) {
|
|
23
|
+
return position.replace('bottom', 'top');
|
|
24
|
+
}
|
|
25
|
+
if (position.startsWith('top') && spaceAbove < spaceBelow) {
|
|
26
|
+
return position.replace('top', 'bottom');
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
return position;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// 第一阶段:支持上下边界的高度限制,为vertical模式的Menu实现的
|
|
33
|
+
// 第二阶段:支持上下边界的高度限制,为Dropdown实现的
|
|
34
|
+
// TODO 后续支持左右边界的宽度限制
|
|
35
|
+
var getBoundaryStyle = exports.getBoundaryStyle = function getBoundaryStyle(position, _ref2) {
|
|
36
|
+
var _maxHeight;
|
|
37
|
+
var boundary = _ref2.boundary,
|
|
38
|
+
parentRect = _ref2.parentRect,
|
|
39
|
+
popupGap = _ref2.popupGap;
|
|
40
|
+
var boundaryEl = boundary();
|
|
41
|
+
if (!boundaryEl) return {};
|
|
42
|
+
var boundaryRect = boundaryEl.getBoundingClientRect();
|
|
43
|
+
var maxHeight;
|
|
44
|
+
if (position.endsWith('-top')) {
|
|
45
|
+
maxHeight = boundaryRect.bottom - parentRect.top;
|
|
46
|
+
} else if (position.endsWith('-bottom')) {
|
|
47
|
+
maxHeight = parentRect.bottom - boundaryRect.top;
|
|
48
|
+
} else if (position.startsWith('bottom')) {
|
|
49
|
+
maxHeight = boundaryRect.bottom - parentRect.bottom - (popupGap || 0);
|
|
50
|
+
} else if (position.startsWith('top')) {
|
|
51
|
+
maxHeight = parentRect.top - boundaryRect.top - (popupGap || 0);
|
|
52
|
+
}
|
|
53
|
+
return {
|
|
54
|
+
maxHeight: Math.max((_maxHeight = maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : 0, 0),
|
|
55
|
+
overflowY: 'auto'
|
|
56
|
+
};
|
|
57
|
+
};
|
|
@@ -19,7 +19,7 @@ export interface PositionStyleConfig {
|
|
|
19
19
|
checkPosition?: boolean;
|
|
20
20
|
offset?: [number, number];
|
|
21
21
|
boundary?: () => HTMLElement | null;
|
|
22
|
-
|
|
22
|
+
setBoundaryStyle?: (v?: React.CSSProperties) => void;
|
|
23
23
|
}
|
|
24
24
|
export declare const usePositionStyle: (config: PositionStyleConfig) => {
|
|
25
25
|
style: React.CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAC3E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAC3E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACtD;AAsBD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CAmX3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.usePositionStyle = exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _getPositionStyle = require("./get-position-style");
|
|
11
|
-
var
|
|
11
|
+
var _getBoundaryStyle = require("./get-boundary-style");
|
|
12
12
|
var _checkPosition = require("./check-position");
|
|
13
13
|
var _checkBorder = require("./check-border");
|
|
14
14
|
var _checkElementSize = require("./check-element-size");
|
|
@@ -63,14 +63,12 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
|
|
|
63
63
|
adjust = _ref.adjust,
|
|
64
64
|
offset = _ref.offset,
|
|
65
65
|
checkPosition = _ref.checkPosition,
|
|
66
|
-
|
|
66
|
+
setBoundaryStyle = _ref.setBoundaryStyle;
|
|
67
67
|
// 初次渲染无样式的时候, 隐藏展示
|
|
68
68
|
var _useState = (0, _react.useState)(hideStyle),
|
|
69
69
|
_useState2 = _slicedToArray(_useState, 2),
|
|
70
70
|
style = _useState2[0],
|
|
71
71
|
setStyle = _useState2[1];
|
|
72
|
-
// const [sizingStyle, setSizingStyle] = useState<React.CSSProperties>();
|
|
73
|
-
|
|
74
72
|
var _React$useRef = _react.default.useRef({
|
|
75
73
|
containerRect: {
|
|
76
74
|
left: 0,
|
|
@@ -91,7 +89,7 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
|
|
|
91
89
|
context = _React$useRef.current;
|
|
92
90
|
var parentElNewPosition = (0, _checkPosition.useCheckElementPosition)(parentElRef, {
|
|
93
91
|
scrollContainer: scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current,
|
|
94
|
-
enable: show && (adjust || checkPosition)
|
|
92
|
+
enable: show && (adjust || checkPosition || !!boundary)
|
|
95
93
|
});
|
|
96
94
|
var parentElBorderWidth = (0, _checkBorder.useCheckElementBorderWidth)(parentElRef, {
|
|
97
95
|
direction: 'horizontal',
|
|
@@ -376,7 +374,18 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
|
|
|
376
374
|
};
|
|
377
375
|
context.parentRect = parentElRef.current.getBoundingClientRect();
|
|
378
376
|
var realPosition = position;
|
|
379
|
-
|
|
377
|
+
|
|
378
|
+
// 运行时检测 boundary 是否返回有效元素
|
|
379
|
+
var boundaryAvailable = typeof boundary === 'function' && boundary() !== null;
|
|
380
|
+
if (boundaryAvailable) {
|
|
381
|
+
// boundary 模式:基于边界容器的可用空间调整方向
|
|
382
|
+
realPosition = (0, _getBoundaryStyle.adjustPositionByBoundary)(realPosition, {
|
|
383
|
+
boundary: boundary,
|
|
384
|
+
parentRect: context.parentRect,
|
|
385
|
+
popupGap: popupGap
|
|
386
|
+
});
|
|
387
|
+
} else if (adjust) {
|
|
388
|
+
// 无 boundary 或 boundary 返回 null 时,fallback 到视口调整
|
|
380
389
|
var popupInfo = getPopUpInfo(context.parentRect);
|
|
381
390
|
context.popUpHeight = popupInfo.height;
|
|
382
391
|
context.popUpWidth = popupInfo.width;
|
|
@@ -400,14 +409,15 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
|
|
|
400
409
|
} else if (realPosition.indexOf('bottom') === 0) {
|
|
401
410
|
newStyle.transformOrigin = 'center top';
|
|
402
411
|
}
|
|
403
|
-
if (
|
|
404
|
-
var
|
|
412
|
+
if (boundaryAvailable && show && popupElRef.current) {
|
|
413
|
+
var newBoundaryStyle = (0, _getBoundaryStyle.getBoundaryStyle)(realPosition, {
|
|
405
414
|
boundary: boundary,
|
|
406
|
-
parentRect: context.parentRect
|
|
415
|
+
parentRect: context.parentRect,
|
|
416
|
+
popupGap: popupGap
|
|
407
417
|
});
|
|
408
418
|
return {
|
|
409
419
|
newStyle: newStyle,
|
|
410
|
-
|
|
420
|
+
newBoundaryStyle: newBoundaryStyle
|
|
411
421
|
};
|
|
412
422
|
}
|
|
413
423
|
return {
|
|
@@ -417,11 +427,11 @@ var usePositionStyle = exports.usePositionStyle = function usePositionStyle(conf
|
|
|
417
427
|
var updateStyle = (0, _usePersistFn.default)(function () {
|
|
418
428
|
var _getStyle = getStyle(),
|
|
419
429
|
newStyle = _getStyle.newStyle,
|
|
420
|
-
|
|
430
|
+
newBoundaryStyle = _getStyle.newBoundaryStyle;
|
|
421
431
|
if (newStyle && !(0, _shallowEqual.default)(style, newStyle)) {
|
|
422
432
|
setStyle(newStyle);
|
|
423
433
|
}
|
|
424
|
-
|
|
434
|
+
setBoundaryStyle === null || setBoundaryStyle === void 0 || setBoundaryStyle(newBoundaryStyle);
|
|
425
435
|
|
|
426
436
|
// 当父元素的滚动容器滚动时,判断是否需要更新弹出层位置,包括是否隐藏弹出层(通过hideStyle隐藏,不是show状态)
|
|
427
437
|
if (show) {
|
package/cjs/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export * from './common/use-filter';
|
|
|
25
25
|
export * from './common/use-scrollbar-width';
|
|
26
26
|
export * from './common/use-component-memo';
|
|
27
27
|
export * from './common/use-collapse-animation';
|
|
28
|
+
export * from './common/use-boundary';
|
|
28
29
|
export * from './components/use-input';
|
|
29
30
|
export * from './components/use-textarea';
|
|
30
31
|
export * from './components/use-form';
|
package/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AAGtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;;AAE1C,wBAAkB"}
|
package/cjs/index.js
CHANGED
|
@@ -311,6 +311,18 @@ Object.keys(_useCollapseAnimation).forEach(function (key) {
|
|
|
311
311
|
}
|
|
312
312
|
});
|
|
313
313
|
});
|
|
314
|
+
var _useBoundary = require("./common/use-boundary");
|
|
315
|
+
Object.keys(_useBoundary).forEach(function (key) {
|
|
316
|
+
if (key === "default" || key === "__esModule") return;
|
|
317
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
318
|
+
if (key in exports && exports[key] === _useBoundary[key]) return;
|
|
319
|
+
Object.defineProperty(exports, key, {
|
|
320
|
+
enumerable: true,
|
|
321
|
+
get: function get() {
|
|
322
|
+
return _useBoundary[key];
|
|
323
|
+
}
|
|
324
|
+
});
|
|
325
|
+
});
|
|
314
326
|
var _useInput = require("./components/use-input");
|
|
315
327
|
Object.keys(_useInput).forEach(function (key) {
|
|
316
328
|
if (key === "default" || key === "__esModule") return;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface UseBoundaryOptions {
|
|
3
|
+
/**
|
|
4
|
+
* 延迟清除边界样式的时间(毫秒)
|
|
5
|
+
* @default 300
|
|
6
|
+
*/
|
|
7
|
+
clearDelay?: number;
|
|
8
|
+
}
|
|
9
|
+
export interface UseBoundaryResult {
|
|
10
|
+
/**
|
|
11
|
+
* 当前的边界样式
|
|
12
|
+
*/
|
|
13
|
+
boundaryStyle: React.CSSProperties | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* 设置边界样式的函数
|
|
16
|
+
* - 传入 style 对象:立即设置边界样式
|
|
17
|
+
* - 不传参数或传入 undefined:延迟清除边界样式
|
|
18
|
+
*/
|
|
19
|
+
setBoundaryStyle: (style?: React.CSSProperties) => void;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* useBoundary Hook
|
|
23
|
+
*
|
|
24
|
+
* 用于管理弹出层的边界样式,支持延迟清除功能
|
|
25
|
+
*
|
|
26
|
+
* @param options - 配置选项
|
|
27
|
+
* @returns 包含 boundaryStyle 和 setBoundaryStyle 的对象
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```tsx
|
|
31
|
+
* const { boundaryStyle, setBoundaryStyle } = useBoundary({ clearDelay: 300 });
|
|
32
|
+
*
|
|
33
|
+
* 设置边界样式
|
|
34
|
+
* setBoundaryStyle({ maxHeight: 200, overflowY: 'auto' });
|
|
35
|
+
*
|
|
36
|
+
* 清除边界样式(延迟执行)
|
|
37
|
+
* setBoundaryStyle();
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare const useBoundary: (options?: UseBoundaryOptions) => UseBoundaryResult;
|
|
41
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,aAAa,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IAC/C;;;;OAIG;IACH,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,aAAa,kBAAkB,KAAQ,iBAoC9D,CAAC"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
3
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
5
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
6
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
7
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
|
+
import { useState, useRef, useEffect } from 'react';
|
|
9
|
+
/**
|
|
10
|
+
* useBoundary Hook
|
|
11
|
+
*
|
|
12
|
+
* 用于管理弹出层的边界样式,支持延迟清除功能
|
|
13
|
+
*
|
|
14
|
+
* @param options - 配置选项
|
|
15
|
+
* @returns 包含 boundaryStyle 和 setBoundaryStyle 的对象
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* const { boundaryStyle, setBoundaryStyle } = useBoundary({ clearDelay: 300 });
|
|
20
|
+
*
|
|
21
|
+
* 设置边界样式
|
|
22
|
+
* setBoundaryStyle({ maxHeight: 200, overflowY: 'auto' });
|
|
23
|
+
*
|
|
24
|
+
* 清除边界样式(延迟执行)
|
|
25
|
+
* setBoundaryStyle();
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export var useBoundary = function useBoundary() {
|
|
29
|
+
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
30
|
+
var _options$clearDelay = options.clearDelay,
|
|
31
|
+
clearDelay = _options$clearDelay === void 0 ? 300 : _options$clearDelay;
|
|
32
|
+
var _useState = useState(),
|
|
33
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
+
boundaryStyle = _useState2[0],
|
|
35
|
+
_setBoundaryStyle = _useState2[1];
|
|
36
|
+
var _useRef = useRef({
|
|
37
|
+
boundaryTimer: null
|
|
38
|
+
}),
|
|
39
|
+
context = _useRef.current;
|
|
40
|
+
var setBoundaryStyle = function setBoundaryStyle(style) {
|
|
41
|
+
if (!style) {
|
|
42
|
+
// 延迟清除边界样式
|
|
43
|
+
context.boundaryTimer = setTimeout(function () {
|
|
44
|
+
_setBoundaryStyle(undefined);
|
|
45
|
+
}, clearDelay);
|
|
46
|
+
} else {
|
|
47
|
+
// 立即设置边界样式,取消之前的清除定时器
|
|
48
|
+
if (context.boundaryTimer) {
|
|
49
|
+
clearTimeout(context.boundaryTimer);
|
|
50
|
+
context.boundaryTimer = null;
|
|
51
|
+
}
|
|
52
|
+
_setBoundaryStyle(style);
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
useEffect(function () {
|
|
56
|
+
return function () {
|
|
57
|
+
if (context.boundaryTimer) {
|
|
58
|
+
clearTimeout(context.boundaryTimer);
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
}, []);
|
|
62
|
+
return {
|
|
63
|
+
boundaryStyle: boundaryStyle,
|
|
64
|
+
setBoundaryStyle: setBoundaryStyle
|
|
65
|
+
};
|
|
66
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
interface Options {
|
|
2
|
+
parentRect: DOMRect;
|
|
3
|
+
boundary: () => HTMLElement | null;
|
|
4
|
+
popupGap?: number;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* 基于 boundary 容器的可用空间调整弹出方向
|
|
8
|
+
* 解决 position='auto' 时方向判断基于视口而非 boundary 的问题
|
|
9
|
+
*/
|
|
10
|
+
export declare const adjustPositionByBoundary: (position: string, { boundary, parentRect, popupGap }: Options) => string;
|
|
11
|
+
export declare const getBoundaryStyle: (position: string, { boundary, parentRect, popupGap }: Options) => {
|
|
12
|
+
maxHeight?: undefined;
|
|
13
|
+
overflowY?: undefined;
|
|
14
|
+
} | {
|
|
15
|
+
maxHeight: number;
|
|
16
|
+
overflowY: "auto";
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=get-boundary-style.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get-boundary-style.d.ts","sourceRoot":"","sources":["get-boundary-style.ts"],"names":[],"mappings":"AAAA,UAAU,OAAO;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,aAAc,MAAM,sCAAsC,OAAO,KAAG,MAmBxG,CAAC;AAKF,eAAO,MAAO,gBAAgB,aAAc,MAAM,sCAAqC,OAAO;;;;;;CAgB7F,CAAA"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 基于 boundary 容器的可用空间调整弹出方向
|
|
3
|
+
* 解决 position='auto' 时方向判断基于视口而非 boundary 的问题
|
|
4
|
+
*/
|
|
5
|
+
export var adjustPositionByBoundary = function adjustPositionByBoundary(position, _ref) {
|
|
6
|
+
var boundary = _ref.boundary,
|
|
7
|
+
parentRect = _ref.parentRect,
|
|
8
|
+
popupGap = _ref.popupGap;
|
|
9
|
+
var boundaryEl = boundary();
|
|
10
|
+
if (!boundaryEl) return position;
|
|
11
|
+
var boundaryRect = boundaryEl.getBoundingClientRect();
|
|
12
|
+
var gap = popupGap || 0;
|
|
13
|
+
if (position.startsWith('bottom') || position.startsWith('top')) {
|
|
14
|
+
var spaceBelow = boundaryRect.bottom - parentRect.bottom - gap;
|
|
15
|
+
var spaceAbove = parentRect.top - boundaryRect.top - gap;
|
|
16
|
+
if (position.startsWith('bottom') && spaceBelow < spaceAbove) {
|
|
17
|
+
return position.replace('bottom', 'top');
|
|
18
|
+
}
|
|
19
|
+
if (position.startsWith('top') && spaceAbove < spaceBelow) {
|
|
20
|
+
return position.replace('top', 'bottom');
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
return position;
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
// 第一阶段:支持上下边界的高度限制,为vertical模式的Menu实现的
|
|
27
|
+
// 第二阶段:支持上下边界的高度限制,为Dropdown实现的
|
|
28
|
+
// TODO 后续支持左右边界的宽度限制
|
|
29
|
+
export var getBoundaryStyle = function getBoundaryStyle(position, _ref2) {
|
|
30
|
+
var _maxHeight;
|
|
31
|
+
var boundary = _ref2.boundary,
|
|
32
|
+
parentRect = _ref2.parentRect,
|
|
33
|
+
popupGap = _ref2.popupGap;
|
|
34
|
+
var boundaryEl = boundary();
|
|
35
|
+
if (!boundaryEl) return {};
|
|
36
|
+
var boundaryRect = boundaryEl.getBoundingClientRect();
|
|
37
|
+
var maxHeight;
|
|
38
|
+
if (position.endsWith('-top')) {
|
|
39
|
+
maxHeight = boundaryRect.bottom - parentRect.top;
|
|
40
|
+
} else if (position.endsWith('-bottom')) {
|
|
41
|
+
maxHeight = parentRect.bottom - boundaryRect.top;
|
|
42
|
+
} else if (position.startsWith('bottom')) {
|
|
43
|
+
maxHeight = boundaryRect.bottom - parentRect.bottom - (popupGap || 0);
|
|
44
|
+
} else if (position.startsWith('top')) {
|
|
45
|
+
maxHeight = parentRect.top - boundaryRect.top - (popupGap || 0);
|
|
46
|
+
}
|
|
47
|
+
return {
|
|
48
|
+
maxHeight: Math.max((_maxHeight = maxHeight) !== null && _maxHeight !== void 0 ? _maxHeight : 0, 0),
|
|
49
|
+
overflowY: 'auto'
|
|
50
|
+
};
|
|
51
|
+
};
|
|
@@ -19,7 +19,7 @@ export interface PositionStyleConfig {
|
|
|
19
19
|
checkPosition?: boolean;
|
|
20
20
|
offset?: [number, number];
|
|
21
21
|
boundary?: () => HTMLElement | null;
|
|
22
|
-
|
|
22
|
+
setBoundaryStyle?: (v?: React.CSSProperties) => void;
|
|
23
23
|
}
|
|
24
24
|
export declare const usePositionStyle: (config: PositionStyleConfig) => {
|
|
25
25
|
style: React.CSSProperties;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAC3E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AACZ,MAAM,MAAM,gBAAgB,GACxB,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,KAAK,GACL,QAAQ,CAAC;AAYb,MAAM,MAAM,YAAY,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,OAAO,CAAC;AAC3E,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,YAAY,GAAG,SAAS,CAAC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IAEd,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,GAAG,gBAAgB,KAAK,IAAI,CAAC;IAErE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACtD;AAsBD,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;CAmX3D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -7,7 +7,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
|
|
|
7
7
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
8
|
import React, { useEffect, useLayoutEffect, useState } from 'react';
|
|
9
9
|
import { getPositionStyle } from "./get-position-style";
|
|
10
|
-
import {
|
|
10
|
+
import { getBoundaryStyle, adjustPositionByBoundary } from "./get-boundary-style";
|
|
11
11
|
import { useCheckElementPosition } from "./check-position";
|
|
12
12
|
import { useCheckElementBorderWidth } from "./check-border";
|
|
13
13
|
import { useCheckElementSize } from "./check-element-size";
|
|
@@ -54,14 +54,12 @@ export var usePositionStyle = function usePositionStyle(config) {
|
|
|
54
54
|
adjust = _ref.adjust,
|
|
55
55
|
offset = _ref.offset,
|
|
56
56
|
checkPosition = _ref.checkPosition,
|
|
57
|
-
|
|
57
|
+
setBoundaryStyle = _ref.setBoundaryStyle;
|
|
58
58
|
// 初次渲染无样式的时候, 隐藏展示
|
|
59
59
|
var _useState = useState(hideStyle),
|
|
60
60
|
_useState2 = _slicedToArray(_useState, 2),
|
|
61
61
|
style = _useState2[0],
|
|
62
62
|
setStyle = _useState2[1];
|
|
63
|
-
// const [sizingStyle, setSizingStyle] = useState<React.CSSProperties>();
|
|
64
|
-
|
|
65
63
|
var _React$useRef = React.useRef({
|
|
66
64
|
containerRect: {
|
|
67
65
|
left: 0,
|
|
@@ -82,7 +80,7 @@ export var usePositionStyle = function usePositionStyle(config) {
|
|
|
82
80
|
context = _React$useRef.current;
|
|
83
81
|
var parentElNewPosition = useCheckElementPosition(parentElRef, {
|
|
84
82
|
scrollContainer: scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current,
|
|
85
|
-
enable: show && (adjust || checkPosition)
|
|
83
|
+
enable: show && (adjust || checkPosition || !!boundary)
|
|
86
84
|
});
|
|
87
85
|
var parentElBorderWidth = useCheckElementBorderWidth(parentElRef, {
|
|
88
86
|
direction: 'horizontal',
|
|
@@ -367,7 +365,18 @@ export var usePositionStyle = function usePositionStyle(config) {
|
|
|
367
365
|
};
|
|
368
366
|
context.parentRect = parentElRef.current.getBoundingClientRect();
|
|
369
367
|
var realPosition = position;
|
|
370
|
-
|
|
368
|
+
|
|
369
|
+
// 运行时检测 boundary 是否返回有效元素
|
|
370
|
+
var boundaryAvailable = typeof boundary === 'function' && boundary() !== null;
|
|
371
|
+
if (boundaryAvailable) {
|
|
372
|
+
// boundary 模式:基于边界容器的可用空间调整方向
|
|
373
|
+
realPosition = adjustPositionByBoundary(realPosition, {
|
|
374
|
+
boundary: boundary,
|
|
375
|
+
parentRect: context.parentRect,
|
|
376
|
+
popupGap: popupGap
|
|
377
|
+
});
|
|
378
|
+
} else if (adjust) {
|
|
379
|
+
// 无 boundary 或 boundary 返回 null 时,fallback 到视口调整
|
|
371
380
|
var popupInfo = getPopUpInfo(context.parentRect);
|
|
372
381
|
context.popUpHeight = popupInfo.height;
|
|
373
382
|
context.popUpWidth = popupInfo.width;
|
|
@@ -391,14 +400,15 @@ export var usePositionStyle = function usePositionStyle(config) {
|
|
|
391
400
|
} else if (realPosition.indexOf('bottom') === 0) {
|
|
392
401
|
newStyle.transformOrigin = 'center top';
|
|
393
402
|
}
|
|
394
|
-
if (
|
|
395
|
-
var
|
|
403
|
+
if (boundaryAvailable && show && popupElRef.current) {
|
|
404
|
+
var newBoundaryStyle = getBoundaryStyle(realPosition, {
|
|
396
405
|
boundary: boundary,
|
|
397
|
-
parentRect: context.parentRect
|
|
406
|
+
parentRect: context.parentRect,
|
|
407
|
+
popupGap: popupGap
|
|
398
408
|
});
|
|
399
409
|
return {
|
|
400
410
|
newStyle: newStyle,
|
|
401
|
-
|
|
411
|
+
newBoundaryStyle: newBoundaryStyle
|
|
402
412
|
};
|
|
403
413
|
}
|
|
404
414
|
return {
|
|
@@ -408,11 +418,11 @@ export var usePositionStyle = function usePositionStyle(config) {
|
|
|
408
418
|
var updateStyle = usePersistFn(function () {
|
|
409
419
|
var _getStyle = getStyle(),
|
|
410
420
|
newStyle = _getStyle.newStyle,
|
|
411
|
-
|
|
421
|
+
newBoundaryStyle = _getStyle.newBoundaryStyle;
|
|
412
422
|
if (newStyle && !shallowEqual(style, newStyle)) {
|
|
413
423
|
setStyle(newStyle);
|
|
414
424
|
}
|
|
415
|
-
|
|
425
|
+
setBoundaryStyle === null || setBoundaryStyle === void 0 || setBoundaryStyle(newBoundaryStyle);
|
|
416
426
|
|
|
417
427
|
// 当父元素的滚动容器滚动时,判断是否需要更新弹出层位置,包括是否隐藏弹出层(通过hideStyle隐藏,不是show状态)
|
|
418
428
|
if (show) {
|
package/esm/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export * from './common/use-filter';
|
|
|
25
25
|
export * from './common/use-scrollbar-width';
|
|
26
26
|
export * from './common/use-component-memo';
|
|
27
27
|
export * from './common/use-collapse-animation';
|
|
28
|
+
export * from './common/use-boundary';
|
|
28
29
|
export * from './components/use-input';
|
|
29
30
|
export * from './components/use-textarea';
|
|
30
31
|
export * from './components/use-form';
|
package/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,UAAU,CAAC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,CAAC;AAGhB,cAAc,eAAe,CAAC;AAE9B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,uBAAuB,CAAC;AAGtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;;AAE1C,wBAAkB"}
|
package/esm/index.js
CHANGED
|
@@ -28,6 +28,7 @@ export * from "./common/use-filter";
|
|
|
28
28
|
export * from "./common/use-scrollbar-width";
|
|
29
29
|
export * from "./common/use-component-memo";
|
|
30
30
|
export * from "./common/use-collapse-animation";
|
|
31
|
+
export * from "./common/use-boundary";
|
|
31
32
|
|
|
32
33
|
//components
|
|
33
34
|
export * from "./components/use-input";
|
package/package.json
CHANGED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
interface Options {
|
|
2
|
-
parentRect: DOMRect;
|
|
3
|
-
boundary: () => HTMLElement | null;
|
|
4
|
-
}
|
|
5
|
-
export declare const getSizingStyle: (position: string, { boundary, parentRect }: Options) => {
|
|
6
|
-
maxHeight?: undefined;
|
|
7
|
-
overflowY?: undefined;
|
|
8
|
-
} | {
|
|
9
|
-
maxHeight: number | undefined;
|
|
10
|
-
overflowY: "auto";
|
|
11
|
-
};
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=get-sizing-style.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"get-sizing-style.d.ts","sourceRoot":"","sources":["get-sizing-style.ts"],"names":[],"mappings":"AAAA,UAAU,OAAO;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CACpC;AAID,eAAO,MAAO,cAAc,aAAc,MAAM,4BAA2B,OAAO;;;;;;CAYjF,CAAA"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getSizingStyle = void 0;
|
|
7
|
-
// 第一阶段:支持上下边界的高度限制,为vertical模式的Menu实现的
|
|
8
|
-
// TODO 后续支持左右边界的宽度限制
|
|
9
|
-
var getSizingStyle = exports.getSizingStyle = function getSizingStyle(position, _ref) {
|
|
10
|
-
var boundary = _ref.boundary,
|
|
11
|
-
parentRect = _ref.parentRect;
|
|
12
|
-
var boundaryEl = boundary();
|
|
13
|
-
if (!boundaryEl) return {};
|
|
14
|
-
var boundaryRect = boundaryEl.getBoundingClientRect();
|
|
15
|
-
var maxHeight;
|
|
16
|
-
if (position.endsWith('-top')) {
|
|
17
|
-
maxHeight = boundaryRect.bottom - parentRect.top;
|
|
18
|
-
} else if (position.endsWith('-bottom')) {
|
|
19
|
-
maxHeight = parentRect.bottom - boundaryRect.top;
|
|
20
|
-
}
|
|
21
|
-
return {
|
|
22
|
-
maxHeight: maxHeight,
|
|
23
|
-
overflowY: 'auto'
|
|
24
|
-
};
|
|
25
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
interface Options {
|
|
2
|
-
parentRect: DOMRect;
|
|
3
|
-
boundary: () => HTMLElement | null;
|
|
4
|
-
}
|
|
5
|
-
export declare const getSizingStyle: (position: string, { boundary, parentRect }: Options) => {
|
|
6
|
-
maxHeight?: undefined;
|
|
7
|
-
overflowY?: undefined;
|
|
8
|
-
} | {
|
|
9
|
-
maxHeight: number | undefined;
|
|
10
|
-
overflowY: "auto";
|
|
11
|
-
};
|
|
12
|
-
export {};
|
|
13
|
-
//# sourceMappingURL=get-sizing-style.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"get-sizing-style.d.ts","sourceRoot":"","sources":["get-sizing-style.ts"],"names":[],"mappings":"AAAA,UAAU,OAAO;IACf,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CACpC;AAID,eAAO,MAAO,cAAc,aAAc,MAAM,4BAA2B,OAAO;;;;;;CAYjF,CAAA"}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// 第一阶段:支持上下边界的高度限制,为vertical模式的Menu实现的
|
|
2
|
-
// TODO 后续支持左右边界的宽度限制
|
|
3
|
-
export var getSizingStyle = function getSizingStyle(position, _ref) {
|
|
4
|
-
var boundary = _ref.boundary,
|
|
5
|
-
parentRect = _ref.parentRect;
|
|
6
|
-
var boundaryEl = boundary();
|
|
7
|
-
if (!boundaryEl) return {};
|
|
8
|
-
var boundaryRect = boundaryEl.getBoundingClientRect();
|
|
9
|
-
var maxHeight;
|
|
10
|
-
if (position.endsWith('-top')) {
|
|
11
|
-
maxHeight = boundaryRect.bottom - parentRect.top;
|
|
12
|
-
} else if (position.endsWith('-bottom')) {
|
|
13
|
-
maxHeight = parentRect.bottom - boundaryRect.top;
|
|
14
|
-
}
|
|
15
|
-
return {
|
|
16
|
-
maxHeight: maxHeight,
|
|
17
|
-
overflowY: 'auto'
|
|
18
|
-
};
|
|
19
|
-
};
|