@bifrostui/utils 1.5.0 → 2.0.0-alpha.0
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/dist/directionLocationUtil.d.ts +12 -27
- package/dist/directionLocationUtil.js +55 -101
- package/dist/getBoundingClientRect/index.miniapp.d.ts +2 -1
- package/dist/getBoundingClientRect/index.miniapp.js +5 -34
- package/dist/getRootElement/index.d.ts +2 -0
- package/dist/{getRootContainer → getRootElement}/index.js +8 -8
- package/dist/getRootElement/index.miniapp.d.ts +3 -0
- package/dist/{getRootContainer → getRootElement}/index.miniapp.js +4 -4
- package/dist/hooks/index.d.ts +2 -2
- package/dist/hooks/index.js +0 -8
- package/dist/hooks/useDidMountEffect.d.ts +1 -1
- package/dist/hooks/useTouchEmulator.d.ts +1 -7
- package/dist/hooks/useTouchEmulator.js +10 -36
- package/dist/index.d.ts +4 -4
- package/dist/index.js +6 -19
- package/dist/isMini.d.ts +1 -2
- package/dist/isMini.js +0 -3
- package/dist/themeCreator/createTheme.d.ts +10 -0
- package/dist/themeCreator/createTheme.js +61 -0
- package/dist/themeCreator/cssVarToValue.d.ts +5 -0
- package/dist/themeCreator/cssVarToValue.js +52 -0
- package/dist/themeCreator/index.d.ts +3 -0
- package/dist/themeCreator/index.js +25 -0
- package/dist/themeCreator/index.types.d.ts +37 -0
- package/dist/themeCreator/index.types.js +15 -0
- package/es/directionLocationUtil.d.ts +12 -27
- package/es/directionLocationUtil.js +55 -91
- package/es/getBoundingClientRect/index.miniapp.d.ts +2 -1
- package/es/getBoundingClientRect/index.miniapp.js +5 -34
- package/es/getRootElement/index.d.ts +2 -0
- package/es/getRootElement/index.js +9 -0
- package/es/getRootElement/index.miniapp.d.ts +3 -0
- package/es/{getRootContainer → getRootElement}/index.miniapp.js +4 -4
- package/es/hooks/index.d.ts +2 -2
- package/es/hooks/index.js +1 -10
- package/es/hooks/useDidMountEffect.d.ts +1 -1
- package/es/hooks/useTouchEmulator.d.ts +1 -7
- package/es/hooks/useTouchEmulator.js +10 -29
- package/es/index.d.ts +4 -4
- package/es/index.js +3 -15
- package/es/isMini.d.ts +1 -2
- package/es/isMini.js +0 -2
- package/es/themeCreator/createTheme.d.ts +10 -0
- package/es/themeCreator/createTheme.js +37 -0
- package/es/themeCreator/cssVarToValue.d.ts +5 -0
- package/es/themeCreator/cssVarToValue.js +29 -0
- package/es/themeCreator/index.d.ts +3 -0
- package/es/themeCreator/index.js +3 -0
- package/es/themeCreator/index.types.d.ts +37 -0
- package/es/themeCreator/index.types.js +1 -0
- package/package.json +3 -2
- package/dist/domUtils/index.d.ts +0 -12
- package/dist/domUtils/index.js +0 -46
- package/dist/domUtils/index.miniapp.d.ts +0 -2
- package/dist/domUtils/index.miniapp.js +0 -86
- package/dist/getRootContainer/index.d.ts +0 -2
- package/dist/getRootContainer/index.miniapp.d.ts +0 -3
- package/es/domUtils/index.d.ts +0 -12
- package/es/domUtils/index.js +0 -22
- package/es/domUtils/index.miniapp.d.ts +0 -2
- package/es/domUtils/index.miniapp.js +0 -54
- package/es/getRootContainer/index.d.ts +0 -2
- package/es/getRootContainer/index.js +0 -9
- package/es/getRootContainer/index.miniapp.d.ts +0 -3
package/dist/isMini.d.ts
CHANGED
package/dist/isMini.js
CHANGED
@@ -20,14 +20,12 @@ __export(isMini_exports, {
|
|
20
20
|
isAlipay: () => isAlipay,
|
21
21
|
isMini: () => isMini,
|
22
22
|
isMiniapp: () => isMiniapp,
|
23
|
-
isTt: () => isTt,
|
24
23
|
isWeapp: () => isWeapp
|
25
24
|
});
|
26
25
|
module.exports = __toCommonJS(isMini_exports);
|
27
26
|
const isMini = typeof process.env.TARO_ENV === "string";
|
28
27
|
const isWeapp = process.env.TARO_ENV === "weapp";
|
29
28
|
const isAlipay = process.env.TARO_ENV === "alipay";
|
30
|
-
const isTt = process.env.TARO_ENV === "tt";
|
31
29
|
const isMiniapp = () => {
|
32
30
|
return isMini;
|
33
31
|
};
|
@@ -36,6 +34,5 @@ const isMiniapp = () => {
|
|
36
34
|
isAlipay,
|
37
35
|
isMini,
|
38
36
|
isMiniapp,
|
39
|
-
isTt,
|
40
37
|
isWeapp
|
41
38
|
});
|
@@ -0,0 +1,10 @@
|
|
1
|
+
import { MountThemeVarsOptions, ThemeCreatorOptions } from './index.types';
|
2
|
+
/**
|
3
|
+
* 挂载自定义主题
|
4
|
+
*/
|
5
|
+
declare const mountThemeVars: (options: MountThemeVarsOptions) => void;
|
6
|
+
/**
|
7
|
+
* 创建主题
|
8
|
+
*/
|
9
|
+
declare const createTheme: (options: ThemeCreatorOptions) => string;
|
10
|
+
export { createTheme, mountThemeVars };
|
@@ -0,0 +1,61 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
+
var __export = (target, all) => {
|
6
|
+
for (var name in all)
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
8
|
+
};
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
11
|
+
for (let key of __getOwnPropNames(from))
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
14
|
+
}
|
15
|
+
return to;
|
16
|
+
};
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
18
|
+
var createTheme_exports = {};
|
19
|
+
__export(createTheme_exports, {
|
20
|
+
createTheme: () => createTheme,
|
21
|
+
mountThemeVars: () => mountThemeVars
|
22
|
+
});
|
23
|
+
module.exports = __toCommonJS(createTheme_exports);
|
24
|
+
const convertToCss = (styles) => {
|
25
|
+
let result = "";
|
26
|
+
const cssVarKeys = Object.keys(styles);
|
27
|
+
cssVarKeys.forEach((key, index) => {
|
28
|
+
const value = styles[key];
|
29
|
+
if (value.includes("PX")) {
|
30
|
+
result += "/* prettier-ignore */\n ";
|
31
|
+
}
|
32
|
+
result += `${key}: ${value};
|
33
|
+
${index === cssVarKeys.length - 1 ? "" : " "}`;
|
34
|
+
});
|
35
|
+
return result;
|
36
|
+
};
|
37
|
+
const mountThemeVars = (options) => {
|
38
|
+
const { theme = "", container } = options || {};
|
39
|
+
const style = document.createElement("style");
|
40
|
+
style.type = "text/css";
|
41
|
+
style.appendChild(document.createTextNode(theme));
|
42
|
+
if (!container) {
|
43
|
+
document.head.appendChild(style);
|
44
|
+
return;
|
45
|
+
}
|
46
|
+
container.appendChild(style);
|
47
|
+
};
|
48
|
+
const createTheme = (options) => {
|
49
|
+
const {
|
50
|
+
rootSelector = ":root, [data-color-mode='light'][data-theme]",
|
51
|
+
cssVars = {}
|
52
|
+
} = options || {};
|
53
|
+
const rootContent = `${rootSelector} {
|
54
|
+
${convertToCss(cssVars)} }`;
|
55
|
+
return rootContent;
|
56
|
+
};
|
57
|
+
// Annotate the CommonJS export names for ESM import in node:
|
58
|
+
0 && (module.exports = {
|
59
|
+
createTheme,
|
60
|
+
mountThemeVars
|
61
|
+
});
|
@@ -0,0 +1,52 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
+
var __export = (target, all) => {
|
6
|
+
for (var name in all)
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
8
|
+
};
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
11
|
+
for (let key of __getOwnPropNames(from))
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
14
|
+
}
|
15
|
+
return to;
|
16
|
+
};
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
18
|
+
var cssVarToValue_exports = {};
|
19
|
+
__export(cssVarToValue_exports, {
|
20
|
+
cssVarToValue: () => cssVarToValue
|
21
|
+
});
|
22
|
+
module.exports = __toCommonJS(cssVarToValue_exports);
|
23
|
+
var import_registry = require("@bifrostui/styles/registry");
|
24
|
+
const cssVarToValue = (options) => {
|
25
|
+
var _a;
|
26
|
+
const {
|
27
|
+
cssVar,
|
28
|
+
themeVars = (_a = import_registry.defaultLight) == null ? void 0 : _a.cssVars,
|
29
|
+
_visitedKeys = /* @__PURE__ */ new Set()
|
30
|
+
} = options || {};
|
31
|
+
if (!cssVar)
|
32
|
+
return "";
|
33
|
+
const variableKey = cssVar.replace(/^var\(/, "").replace(/\)$/, "");
|
34
|
+
const variableValue = themeVars == null ? void 0 : themeVars[variableKey];
|
35
|
+
if (_visitedKeys.has(variableKey)) {
|
36
|
+
console.warn(`\u68C0\u6D4B\u5230CSS\u53D8\u91CF\u5FAA\u73AF\u5F15\u7528: ${variableKey}`);
|
37
|
+
return variableValue;
|
38
|
+
}
|
39
|
+
const nextVisited = new Set(_visitedKeys).add(variableKey);
|
40
|
+
if (variableValue && variableValue.startsWith("var(")) {
|
41
|
+
return cssVarToValue({
|
42
|
+
cssVar: variableValue,
|
43
|
+
themeVars,
|
44
|
+
_visitedKeys: nextVisited
|
45
|
+
});
|
46
|
+
}
|
47
|
+
return variableValue;
|
48
|
+
};
|
49
|
+
// Annotate the CommonJS export names for ESM import in node:
|
50
|
+
0 && (module.exports = {
|
51
|
+
cssVarToValue
|
52
|
+
});
|
@@ -0,0 +1,25 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
7
|
+
for (let key of __getOwnPropNames(from))
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
10
|
+
}
|
11
|
+
return to;
|
12
|
+
};
|
13
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
15
|
+
var themeCreator_exports = {};
|
16
|
+
module.exports = __toCommonJS(themeCreator_exports);
|
17
|
+
__reExport(themeCreator_exports, require("./createTheme"), module.exports);
|
18
|
+
__reExport(themeCreator_exports, require("./cssVarToValue"), module.exports);
|
19
|
+
__reExport(themeCreator_exports, require("./index.types"), module.exports);
|
20
|
+
// Annotate the CommonJS export names for ESM import in node:
|
21
|
+
0 && (module.exports = {
|
22
|
+
...require("./createTheme"),
|
23
|
+
...require("./cssVarToValue"),
|
24
|
+
...require("./index.types")
|
25
|
+
});
|
@@ -0,0 +1,37 @@
|
|
1
|
+
/**
|
2
|
+
* 挂载自定义主题选项
|
3
|
+
*/
|
4
|
+
export interface MountThemeVarsOptions {
|
5
|
+
theme: string;
|
6
|
+
container?: HTMLElement;
|
7
|
+
}
|
8
|
+
export interface ThemeCreatorOptions {
|
9
|
+
/**
|
10
|
+
* 主题所挂在的根选择器
|
11
|
+
* @default `:root, [data-color-mode='light'][data-theme]`
|
12
|
+
*/
|
13
|
+
rootSelector?: string;
|
14
|
+
/**
|
15
|
+
* 主题全局变量
|
16
|
+
*/
|
17
|
+
cssVars: Record<string, string>;
|
18
|
+
}
|
19
|
+
/**
|
20
|
+
* css变量转值
|
21
|
+
*/
|
22
|
+
export interface CssVarToValueOptions {
|
23
|
+
/**
|
24
|
+
* 当前主题
|
25
|
+
*/
|
26
|
+
cssVar: string;
|
27
|
+
/**
|
28
|
+
* 当前主题模式
|
29
|
+
* @default defaultLight
|
30
|
+
*/
|
31
|
+
themeVars?: Record<string, string>;
|
32
|
+
/**
|
33
|
+
* 记录已解析的变量路径
|
34
|
+
* 函数内部使用参数
|
35
|
+
*/
|
36
|
+
_visitedKeys?: Set<string>;
|
37
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
var __defProp = Object.defineProperty;
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
5
|
+
var __copyProps = (to, from, except, desc) => {
|
6
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
7
|
+
for (let key of __getOwnPropNames(from))
|
8
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
9
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
10
|
+
}
|
11
|
+
return to;
|
12
|
+
};
|
13
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
14
|
+
var index_types_exports = {};
|
15
|
+
module.exports = __toCommonJS(index_types_exports);
|
@@ -22,41 +22,26 @@ export declare const getDirectionLocationStyle: ({ childrenOffset, arrowDirectio
|
|
22
22
|
tipOffset: any;
|
23
23
|
arrowLocation: any;
|
24
24
|
offsetSpacing: any;
|
25
|
-
}) =>
|
26
|
-
styles:
|
27
|
-
top: number;
|
28
|
-
left: number;
|
29
|
-
transform: string;
|
30
|
-
visibility: string;
|
31
|
-
};
|
25
|
+
}) => {
|
26
|
+
styles: any;
|
32
27
|
childrenStyle: any;
|
33
|
-
}
|
28
|
+
};
|
34
29
|
/**
|
35
30
|
* 获取气泡位置和箭头位置
|
36
31
|
*/
|
37
|
-
export declare const getStylesAndLocation: ({ scrollRoot, childrenRef,
|
32
|
+
export declare const getStylesAndLocation: ({ scrollRoot, childrenRef, arrowDirection, arrowLocation, offsetSpacing, selector, }: {
|
38
33
|
scrollRoot?: Element;
|
39
|
-
childrenRef
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
}) =>
|
45
|
-
styles:
|
46
|
-
childrenStyle: {};
|
47
|
-
newArrowDirection: string;
|
48
|
-
newArrowLocation: string;
|
49
|
-
} | {
|
50
|
-
styles: {
|
51
|
-
top: number;
|
52
|
-
left: number;
|
53
|
-
transform: string;
|
54
|
-
visibility: string;
|
55
|
-
};
|
34
|
+
childrenRef: any;
|
35
|
+
arrowDirection: any;
|
36
|
+
arrowLocation: any;
|
37
|
+
offsetSpacing: any;
|
38
|
+
selector: any;
|
39
|
+
}) => {
|
40
|
+
styles: any;
|
56
41
|
childrenStyle: any;
|
57
42
|
newArrowDirection: any;
|
58
43
|
newArrowLocation: any;
|
59
|
-
}
|
44
|
+
};
|
60
45
|
export declare const triggerEventTransform: ({ trigger, click, show, hide }: {
|
61
46
|
trigger: any;
|
62
47
|
click: any;
|
@@ -1,31 +1,12 @@
|
|
1
|
-
var __async = (__this, __arguments, generator) => {
|
2
|
-
return new Promise((resolve, reject) => {
|
3
|
-
var fulfilled = (value) => {
|
4
|
-
try {
|
5
|
-
step(generator.next(value));
|
6
|
-
} catch (e) {
|
7
|
-
reject(e);
|
8
|
-
}
|
9
|
-
};
|
10
|
-
var rejected = (value) => {
|
11
|
-
try {
|
12
|
-
step(generator.throw(value));
|
13
|
-
} catch (e) {
|
14
|
-
reject(e);
|
15
|
-
}
|
16
|
-
};
|
17
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
18
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
19
|
-
});
|
20
|
-
};
|
21
|
-
import { getScrollRect, getClientRect } from "./domUtils";
|
22
|
-
import getBoundingClientRect from "./getBoundingClientRect";
|
23
1
|
const directionCssMap = {
|
24
2
|
left: "right",
|
25
3
|
right: "left",
|
26
4
|
top: "bottom",
|
27
5
|
bottom: "top"
|
28
6
|
};
|
7
|
+
const isBodyScroll = (scrollRoot) => {
|
8
|
+
return scrollRoot === document.body;
|
9
|
+
};
|
29
10
|
const getNewDirectionLocation = ({
|
30
11
|
scrollRoot,
|
31
12
|
scrollRootOffset,
|
@@ -48,15 +29,14 @@ const getNewDirectionLocation = ({
|
|
48
29
|
top: sTop,
|
49
30
|
bottom: sBottom,
|
50
31
|
left: sLeft,
|
51
|
-
right: sRight
|
52
|
-
width: pageWidth,
|
53
|
-
height: pageHeight
|
32
|
+
right: sRight
|
54
33
|
} = scrollRootOffset;
|
55
|
-
const
|
56
|
-
const
|
57
|
-
const
|
58
|
-
const
|
59
|
-
const
|
34
|
+
const pageWidth = document.documentElement.clientWidth || document.body.clientWidth;
|
35
|
+
const pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
|
36
|
+
const maxTop = isBodyScroll(scrollRoot) ? 0 : sTop;
|
37
|
+
const maxBottom = isBodyScroll(scrollRoot) ? pageHeight : sBottom;
|
38
|
+
const maxLeft = isBodyScroll(scrollRoot) ? 0 : sLeft;
|
39
|
+
const maxRight = isBodyScroll(scrollRoot) ? pageWidth : sRight;
|
60
40
|
let newArrowDirection = arrowDirection;
|
61
41
|
let newArrowLocation = arrowLocation;
|
62
42
|
const isDirectionTop = arrowDirection === "top";
|
@@ -91,14 +71,16 @@ const getNewDirectionLocation = ({
|
|
91
71
|
newArrowLocation
|
92
72
|
};
|
93
73
|
};
|
94
|
-
const getDirectionLocationStyle = (
|
74
|
+
const getDirectionLocationStyle = ({
|
95
75
|
childrenOffset,
|
96
76
|
arrowDirection,
|
97
77
|
tipOffset,
|
98
78
|
arrowLocation,
|
99
79
|
offsetSpacing
|
100
|
-
}) {
|
101
|
-
const
|
80
|
+
}) => {
|
81
|
+
const scrollTop = window.scrollY >= 0 && window.scrollY || document.documentElement.scrollTop;
|
82
|
+
const scrollLeft = window.scrollX >= 0 && window.scrollX || document.documentElement.scrollLeft;
|
83
|
+
const styles = {};
|
102
84
|
const {
|
103
85
|
width: cWidth,
|
104
86
|
height: cHeight,
|
@@ -112,125 +94,107 @@ const getDirectionLocationStyle = (_0) => __async(void 0, [_0], function* ({
|
|
112
94
|
childrenStyle = { width: `${cWidth}px`, height: `${cHeight}px` };
|
113
95
|
}
|
114
96
|
const { width, height } = tipOffset;
|
115
|
-
let styleTop;
|
116
|
-
let styleLeft;
|
117
97
|
if (arrowDirection === "top") {
|
118
|
-
|
98
|
+
styles.top = cTop - offsetSpacing - height;
|
119
99
|
switch (arrowLocation) {
|
120
100
|
case "left":
|
121
|
-
|
101
|
+
styles.left = cLeft;
|
122
102
|
break;
|
123
103
|
case "center":
|
124
|
-
|
104
|
+
styles.left = cLeft + (cWidth - width) / 2;
|
125
105
|
break;
|
126
106
|
case "right":
|
127
|
-
|
107
|
+
styles.left = cRight - width;
|
128
108
|
break;
|
129
109
|
case "none":
|
130
|
-
|
110
|
+
styles.left = cLeft;
|
131
111
|
break;
|
132
112
|
default:
|
133
113
|
break;
|
134
114
|
}
|
135
115
|
} else if (arrowDirection === "bottom") {
|
136
|
-
|
116
|
+
styles.top = cBottom + offsetSpacing;
|
137
117
|
switch (arrowLocation) {
|
138
118
|
case "left":
|
139
|
-
|
119
|
+
styles.left = cLeft;
|
140
120
|
break;
|
141
121
|
case "center":
|
142
|
-
|
122
|
+
styles.left = cLeft + (cWidth - width) / 2;
|
143
123
|
break;
|
144
124
|
case "right":
|
145
|
-
|
125
|
+
styles.left = cRight - width;
|
146
126
|
break;
|
147
127
|
case "none":
|
148
|
-
|
128
|
+
styles.left = cLeft;
|
149
129
|
break;
|
150
130
|
default:
|
151
131
|
break;
|
152
132
|
}
|
153
133
|
} else if (arrowDirection === "left") {
|
154
|
-
|
134
|
+
styles.left = cLeft - offsetSpacing - width;
|
155
135
|
switch (arrowLocation) {
|
156
136
|
case "top":
|
157
|
-
|
137
|
+
styles.top = cTop;
|
158
138
|
break;
|
159
139
|
case "center":
|
160
|
-
|
140
|
+
styles.top = cTop + (cHeight - height) / 2;
|
161
141
|
break;
|
162
142
|
case "bottom":
|
163
|
-
|
143
|
+
styles.top = cBottom - height;
|
164
144
|
break;
|
165
145
|
case "none":
|
166
|
-
|
146
|
+
styles.top = cTop;
|
167
147
|
break;
|
168
148
|
default:
|
169
149
|
break;
|
170
150
|
}
|
171
151
|
} else if (arrowDirection === "right") {
|
172
|
-
|
152
|
+
styles.left = cRight + offsetSpacing;
|
173
153
|
switch (arrowLocation) {
|
174
154
|
case "top":
|
175
|
-
|
155
|
+
styles.top = cTop;
|
176
156
|
break;
|
177
157
|
case "center":
|
178
|
-
|
158
|
+
styles.top = cTop + (cHeight - height) / 2;
|
179
159
|
break;
|
180
160
|
case "bottom":
|
181
|
-
|
161
|
+
styles.top = cBottom - height;
|
182
162
|
break;
|
183
163
|
case "none":
|
184
|
-
|
164
|
+
styles.top = cTop;
|
185
165
|
break;
|
186
166
|
default:
|
187
167
|
break;
|
188
168
|
}
|
189
169
|
}
|
190
|
-
if (
|
191
|
-
|
170
|
+
if (styles.top) {
|
171
|
+
styles.top = `${styles.top + scrollTop}px`;
|
192
172
|
}
|
193
|
-
if (
|
194
|
-
|
173
|
+
if (styles.left) {
|
174
|
+
styles.left = `${styles.left + scrollLeft}px`;
|
195
175
|
}
|
196
|
-
const styles = {
|
197
|
-
top: 0,
|
198
|
-
left: 0,
|
199
|
-
transform: `translate3d(${styleLeft}, ${styleTop}, 0)`,
|
200
|
-
visibility: ""
|
201
|
-
};
|
202
176
|
return { styles, childrenStyle };
|
203
|
-
}
|
204
|
-
const getStylesAndLocation = (
|
205
|
-
scrollRoot,
|
177
|
+
};
|
178
|
+
const getStylesAndLocation = ({
|
179
|
+
scrollRoot = document.body,
|
206
180
|
childrenRef,
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
}) {
|
181
|
+
arrowDirection,
|
182
|
+
arrowLocation,
|
183
|
+
offsetSpacing,
|
184
|
+
selector
|
185
|
+
}) => {
|
212
186
|
if (!(childrenRef == null ? void 0 : childrenRef.current)) {
|
213
187
|
console.error(
|
214
188
|
"\u7EC4\u4EF6\u5305\u88F9\u7684children\u53EF\u80FD\u662F\u4E00\u4E2A\u7EC4\u4EF6\uFF0C\u60A8\u7684\u5F53\u524D\u5199\u6CD5\u53EF\u80FD\u5BFC\u81F4ref\u6CA1\u6709\u7ED1\u5B9A\u5230children\u4E0A\uFF0C\u8BF7\u5C1D\u8BD5\u5BF9children\u5BF9\u5E94\u7684\u7EC4\u4EF6\u4F7F\u7528/* @__PURE__ */ React.forwardRef\u6765\u89E3\u51B3"
|
215
189
|
);
|
216
190
|
return null;
|
217
191
|
}
|
218
|
-
const childrenOffset =
|
219
|
-
const
|
220
|
-
if (
|
221
|
-
return
|
222
|
-
|
223
|
-
|
224
|
-
newArrowDirection: arrowDirection,
|
225
|
-
newArrowLocation: arrowLocation
|
226
|
-
};
|
227
|
-
}
|
228
|
-
let scrollRootOffset;
|
229
|
-
if (scrollRoot) {
|
230
|
-
scrollRootOffset = yield getBoundingClientRect(scrollRoot);
|
231
|
-
} else {
|
232
|
-
scrollRootOffset = yield getClientRect();
|
233
|
-
}
|
192
|
+
const childrenOffset = childrenRef.current.getBoundingClientRect();
|
193
|
+
const $rtDom = document.querySelector(selector);
|
194
|
+
if (!$rtDom)
|
195
|
+
return null;
|
196
|
+
const tipOffset = $rtDom.getBoundingClientRect();
|
197
|
+
const scrollRootOffset = scrollRoot.getBoundingClientRect();
|
234
198
|
const { newArrowDirection, newArrowLocation } = getNewDirectionLocation({
|
235
199
|
scrollRoot,
|
236
200
|
scrollRootOffset,
|
@@ -240,7 +204,7 @@ const getStylesAndLocation = (_0) => __async(void 0, [_0], function* ({
|
|
240
204
|
arrowLocation,
|
241
205
|
offsetSpacing
|
242
206
|
});
|
243
|
-
const { styles, childrenStyle } =
|
207
|
+
const { styles, childrenStyle } = getDirectionLocationStyle({
|
244
208
|
childrenOffset,
|
245
209
|
arrowDirection: newArrowDirection,
|
246
210
|
tipOffset,
|
@@ -254,7 +218,7 @@ const getStylesAndLocation = (_0) => __async(void 0, [_0], function* ({
|
|
254
218
|
newArrowDirection,
|
255
219
|
newArrowLocation
|
256
220
|
};
|
257
|
-
}
|
221
|
+
};
|
258
222
|
const onMouseEnter = "onMouseEnter";
|
259
223
|
const onMouseLeave = "onMouseLeave";
|
260
224
|
const onClick = "onClick";
|
@@ -1 +1,2 @@
|
|
1
|
-
|
1
|
+
import type { TaroElement } from '@tarojs/runtime';
|
2
|
+
export default function getBoundingClientRect(ele: TaroElement): Promise<DOMRect>;
|
@@ -1,39 +1,10 @@
|
|
1
|
-
var __async = (__this, __arguments, generator) => {
|
2
|
-
return new Promise((resolve, reject) => {
|
3
|
-
var fulfilled = (value) => {
|
4
|
-
try {
|
5
|
-
step(generator.next(value));
|
6
|
-
} catch (e) {
|
7
|
-
reject(e);
|
8
|
-
}
|
9
|
-
};
|
10
|
-
var rejected = (value) => {
|
11
|
-
try {
|
12
|
-
step(generator.throw(value));
|
13
|
-
} catch (e) {
|
14
|
-
reject(e);
|
15
|
-
}
|
16
|
-
};
|
17
|
-
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
|
18
|
-
step((generator = generator.apply(__this, __arguments)).next());
|
19
|
-
});
|
20
|
-
};
|
21
1
|
import Taro from "@tarojs/taro";
|
22
|
-
import { isTt, isWeapp } from "../isMini";
|
23
2
|
function getBoundingClientRect(ele) {
|
24
|
-
return
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
}
|
29
|
-
const query = Taro.createSelectorQuery();
|
30
|
-
result = yield new Promise((resolve) => {
|
31
|
-
query.select(`#${ele.uid}`).boundingClientRect().exec(([res]) => {
|
32
|
-
resolve(res);
|
33
|
-
});
|
34
|
-
});
|
35
|
-
}
|
36
|
-
return result;
|
3
|
+
return new Promise((resolve) => {
|
4
|
+
const query = Taro.createSelectorQuery();
|
5
|
+
query.select(`#${ele.uid}`).boundingClientRect().exec(([res]) => {
|
6
|
+
resolve(res);
|
7
|
+
});
|
37
8
|
});
|
38
9
|
}
|
39
10
|
export {
|
@@ -0,0 +1,9 @@
|
|
1
|
+
const getRootElement = (rootEle) => {
|
2
|
+
const rootElement = typeof rootEle === "function" ? rootEle() : rootEle;
|
3
|
+
const defaultRootElement = document.body;
|
4
|
+
return rootElement || defaultRootElement;
|
5
|
+
};
|
6
|
+
var getRootElement_default = getRootElement;
|
7
|
+
export {
|
8
|
+
getRootElement_default as default
|
9
|
+
};
|
@@ -1,13 +1,13 @@
|
|
1
1
|
import Taro from "@tarojs/taro";
|
2
|
-
const
|
2
|
+
const getRootElement = (rootEle) => {
|
3
3
|
const currentPages = Taro.getCurrentPages() || [];
|
4
4
|
const currentPage = currentPages[currentPages.length - 1];
|
5
5
|
const pageElement = currentPage == null ? void 0 : currentPage.$taroPath;
|
6
6
|
const defaultRootElement = document.getElementById(pageElement);
|
7
|
-
const rootElement = typeof
|
8
|
-
return rootElement ||
|
7
|
+
const rootElement = typeof rootEle === "function" ? rootEle() : rootEle;
|
8
|
+
return rootElement || defaultRootElement;
|
9
9
|
};
|
10
|
-
var index_miniapp_default =
|
10
|
+
var index_miniapp_default = getRootElement;
|
11
11
|
export {
|
12
12
|
index_miniapp_default as default
|
13
13
|
};
|
package/es/hooks/index.d.ts
CHANGED
@@ -1,11 +1,11 @@
|
|
1
1
|
import useDidMountEffect from './useDidMountEffect';
|
2
2
|
import useEventCallback from './useEventCallback';
|
3
3
|
import useForkRef from './useForkRef';
|
4
|
-
import useTouchEmulator
|
4
|
+
import useTouchEmulator from './useTouchEmulator';
|
5
5
|
import useValue from './useValue';
|
6
6
|
import useDomReady from './useDomReady';
|
7
7
|
import useSize from './useSize';
|
8
8
|
import useDomCss from './useDomCss';
|
9
9
|
import useTouch from './useTouch';
|
10
10
|
import useUniqueId from './useUniqueId';
|
11
|
-
export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator,
|
11
|
+
export { useValue, useForkRef, useEventCallback, useDidMountEffect, useTouchEmulator, useDomReady, useSize, useDomCss, useTouch, useUniqueId, };
|