@alifd/chat 0.3.8-beta.4 → 0.3.8

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.
Files changed (9) hide show
  1. package/es/float-button/hooks/useAutoAlign.d.ts +3 -2
  2. package/es/float-button/hooks/useAutoAlign.js +10 -7
  3. package/es/float-button/view/float-button.js +2 -1
  4. package/es/index.js +1 -1
  5. package/lib/float-button/hooks/useAutoAlign.d.ts +3 -2
  6. package/lib/float-button/hooks/useAutoAlign.js +10 -7
  7. package/lib/float-button/view/float-button.js +2 -1
  8. package/lib/index.js +1 -1
  9. package/package.json +1 -1
package/es/float-button/hooks/useAutoAlign.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import type { BalloonProps } from '../types';
1
+ import type { BalloonProps, Margin } from '../types';
2
2
  /**
3
3
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
4
4
  * defaultMaxHeight 用户传的初始希望的面板高度
5
5
  */
6
6
  export declare function useAutoAlign(_dom: HTMLElement | null | undefined, // 弹层dom
7
7
  trigger: HTMLElement | null, // 触发器dom
8
- { enable, defaultAlign, defaultMaxHeight }: {
8
+ { enable, defaultAlign, defaultMaxHeight, safeAreaMargin }: {
9
9
  enable?: boolean;
10
10
  defaultAlign: BalloonProps['align'];
11
11
  defaultMaxHeight?: number;
12
+ safeAreaMargin?: Margin;
12
13
  }): {
13
14
  align: "b" | "br" | "rt" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "lt" | "lb" | "rb" | undefined;
14
15
  update: (dom?: HTMLElement | null | undefined) => void;
package/es/float-button/hooks/useAutoAlign.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { useState, useEffect } from 'react';
2
2
  import { getNearlyEdge, isInScreen, getScreenSize } from '../util';
3
3
  import { useThrottle, useDebounce } from '../../utils';
4
- const DEFAULT_PANE_OFFSET = 20;
5
4
  const DEFAULT_EDGE_OFFSET = 10;
6
5
  /**
7
6
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
@@ -9,7 +8,7 @@ const DEFAULT_EDGE_OFFSET = 10;
9
8
  */
10
9
  export function useAutoAlign(_dom, // 弹层dom
11
10
  trigger, // 触发器dom
12
- { enable, defaultAlign, defaultMaxHeight }) {
11
+ { enable, defaultAlign, defaultMaxHeight, safeAreaMargin }) {
13
12
  var _a;
14
13
  const [align, setAlign] = useState(defaultAlign);
15
14
  const [maxHeight, setMaxHeight] = useState(defaultMaxHeight || ((_a = getScreenSize()) === null || _a === void 0 ? void 0 : _a.height));
@@ -33,26 +32,28 @@ trigger, // 触发器dom
33
32
  const { left, top, width, height } = trigger.getBoundingClientRect();
34
33
  let newAlign = align;
35
34
  let newMaxHeight = maxHeight;
35
+ const safeTopMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[0]) || DEFAULT_EDGE_OFFSET;
36
+ const safeBottomMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[2]) || DEFAULT_EDGE_OFFSET;
36
37
  // 去除bl/br/tl/tr的支持，因为会导致弹层面板高度变矮，所以目前只用了'rt'|'lt'|'rb'|'lb'4种布局
37
38
  switch (edge) {
38
39
  case 'top': {
39
40
  newAlign = subEdge === 'left' ? 'rt' : 'lt';
40
- newMaxHeight = screenHeight - top - DEFAULT_EDGE_OFFSET;
41
+ newMaxHeight = screenHeight - top - safeBottomMargin;
41
42
  break;
42
43
  }
43
44
  case 'right': {
44
45
  newAlign = subEdge === 'top' ? 'lt' : 'lb';
45
- newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
46
+ newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
46
47
  break;
47
48
  }
48
49
  case 'bottom': {
49
50
  newAlign = subEdge === 'left' ? 'rb' : 'lb';
50
- newMaxHeight = top + height - DEFAULT_EDGE_OFFSET;
51
+ newMaxHeight = top + height - safeTopMargin;
51
52
  break;
52
53
  }
53
54
  case 'left': {
54
55
  newAlign = subEdge === 'top' ? 'rt' : 'rb';
55
- newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
56
+ newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
56
57
  break;
57
58
  }
58
59
  }
@@ -60,7 +61,9 @@ trigger, // 触发器dom
60
61
  setAlign(newAlign);
61
62
  }
62
63
  if (newMaxHeight !== maxHeight) {
63
- setMaxHeight(newMaxHeight);
64
+ // 最大高度不能超过屏幕高度减去上下的安全距离
65
+ const limitHeight = Math.max(0, screenHeight - safeTopMargin - safeBottomMargin);
66
+ setMaxHeight(Math.min(newMaxHeight, limitHeight));
64
67
  }
65
68
  };
66
69
  const debounceUpdate = useDebounce(() => update(), 200);
package/es/float-button/view/float-button.js CHANGED
@@ -46,7 +46,8 @@ const FloatButton = forwardRef((props, ref) => {
46
46
  const { align: currentAlign, update: _updateAlign, maxHeight: currentMaxHeight } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
47
47
  enable: autoAlign,
48
48
  defaultAlign: align,
49
- defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px')
49
+ defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px'),
50
+ safeAreaMargin,
50
51
  });
51
52
  const updateAlign = () => {
52
53
  _updateAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`));
package/es/index.js CHANGED
@@ -20,4 +20,4 @@ export { default as CardLoading } from './card-loading';
20
20
  export { default as Origin } from './origin';
21
21
  export { default as Loading } from './loading';
22
22
  export { default as Drawer } from './drawer';
23
- export const version = '0.3.8-beta.4';
23
+ export const version = '0.3.8';
package/lib/float-button/hooks/useAutoAlign.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import type { BalloonProps } from '../types';
1
+ import type { BalloonProps, Margin } from '../types';
2
2
  /**
3
3
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
4
4
  * defaultMaxHeight 用户传的初始希望的面板高度
5
5
  */
6
6
  export declare function useAutoAlign(_dom: HTMLElement | null | undefined, // 弹层dom
7
7
  trigger: HTMLElement | null, // 触发器dom
8
- { enable, defaultAlign, defaultMaxHeight }: {
8
+ { enable, defaultAlign, defaultMaxHeight, safeAreaMargin }: {
9
9
  enable?: boolean;
10
10
  defaultAlign: BalloonProps['align'];
11
11
  defaultMaxHeight?: number;
12
+ safeAreaMargin?: Margin;
12
13
  }): {
13
14
  align: "b" | "br" | "rt" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "lt" | "lb" | "rb" | undefined;
14
15
  update: (dom?: HTMLElement | null | undefined) => void;
package/lib/float-button/hooks/useAutoAlign.js CHANGED
@@ -4,7 +4,6 @@ exports.useAutoAlign = useAutoAlign;
4
4
  const react_1 = require("react");
5
5
  const util_1 = require("../util");
6
6
  const utils_1 = require("../../utils");
7
- const DEFAULT_PANE_OFFSET = 20;
8
7
  const DEFAULT_EDGE_OFFSET = 10;
9
8
  /**
10
9
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
@@ -12,7 +11,7 @@ const DEFAULT_EDGE_OFFSET = 10;
12
11
  */
13
12
  function useAutoAlign(_dom, // 弹层dom
14
13
  trigger, // 触发器dom
15
- { enable, defaultAlign, defaultMaxHeight }) {
14
+ { enable, defaultAlign, defaultMaxHeight, safeAreaMargin }) {
16
15
  var _a;
17
16
  const [align, setAlign] = (0, react_1.useState)(defaultAlign);
18
17
  const [maxHeight, setMaxHeight] = (0, react_1.useState)(defaultMaxHeight || ((_a = (0, util_1.getScreenSize)()) === null || _a === void 0 ? void 0 : _a.height));
@@ -36,26 +35,28 @@ trigger, // 触发器dom
36
35
  const { left, top, width, height } = trigger.getBoundingClientRect();
37
36
  let newAlign = align;
38
37
  let newMaxHeight = maxHeight;
38
+ const safeTopMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[0]) || DEFAULT_EDGE_OFFSET;
39
+ const safeBottomMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[2]) || DEFAULT_EDGE_OFFSET;
39
40
  // 去除bl/br/tl/tr的支持，因为会导致弹层面板高度变矮，所以目前只用了'rt'|'lt'|'rb'|'lb'4种布局
40
41
  switch (edge) {
41
42
  case 'top': {
42
43
  newAlign = subEdge === 'left' ? 'rt' : 'lt';
43
- newMaxHeight = screenHeight - top - DEFAULT_EDGE_OFFSET;
44
+ newMaxHeight = screenHeight - top - safeBottomMargin;
44
45
  break;
45
46
  }
46
47
  case 'right': {
47
48
  newAlign = subEdge === 'top' ? 'lt' : 'lb';
48
- newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
49
+ newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
49
50
  break;
50
51
  }
51
52
  case 'bottom': {
52
53
  newAlign = subEdge === 'left' ? 'rb' : 'lb';
53
- newMaxHeight = top + height - DEFAULT_EDGE_OFFSET;
54
+ newMaxHeight = top + height - safeTopMargin;
54
55
  break;
55
56
  }
56
57
  case 'left': {
57
58
  newAlign = subEdge === 'top' ? 'rt' : 'rb';
58
- newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
59
+ newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
59
60
  break;
60
61
  }
61
62
  }
@@ -63,7 +64,9 @@ trigger, // 触发器dom
63
64
  setAlign(newAlign);
64
65
  }
65
66
  if (newMaxHeight !== maxHeight) {
66
- setMaxHeight(newMaxHeight);
67
+ // 最大高度不能超过屏幕高度减去上下的安全距离
68
+ const limitHeight = Math.max(0, screenHeight - safeTopMargin - safeBottomMargin);
69
+ setMaxHeight(Math.min(newMaxHeight, limitHeight));
67
70
  }
68
71
  };
69
72
  const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 200);
package/lib/float-button/view/float-button.js CHANGED
@@ -48,7 +48,8 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
48
48
  const { align: currentAlign, update: _updateAlign, maxHeight: currentMaxHeight } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
49
49
  enable: autoAlign,
50
50
  defaultAlign: align,
51
- defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px')
51
+ defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px'),
52
+ safeAreaMargin,
52
53
  });
53
54
  const updateAlign = () => {
54
55
  _updateAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`));
package/lib/index.js CHANGED
@@ -46,4 +46,4 @@ var loading_1 = require("./loading");
46
46
  Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return tslib_1.__importDefault(loading_1).default; } });
47
47
  var drawer_1 = require("./drawer");
48
48
  Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return tslib_1.__importDefault(drawer_1).default; } });
49
- exports.version = '0.3.8-beta.4';
49
+ exports.version = '0.3.8';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alifd/chat",
3
- "version": "0.3.8-beta.4",
3
+ "version": "0.3.8",
4
4
  "description": "A configurable component library for chat built on React.",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",