@alifd/chat 0.3.6 → 0.3.7

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 (15) hide show
  1. package/es/float-button/hooks/useAutoHide.js +13 -2
  2. package/es/float-button/hooks/useNestleEdge.d.ts +1 -1
  3. package/es/float-button/hooks/useNestleEdge.js +11 -2
  4. package/es/float-button/main.scss +2 -0
  5. package/es/float-button/util.js +4 -2
  6. package/es/float-button/view/float-button.js +4 -0
  7. package/es/index.js +1 -1
  8. package/lib/float-button/hooks/useAutoHide.js +13 -2
  9. package/lib/float-button/hooks/useNestleEdge.d.ts +1 -1
  10. package/lib/float-button/hooks/useNestleEdge.js +11 -2
  11. package/lib/float-button/main.scss +2 -0
  12. package/lib/float-button/util.js +4 -2
  13. package/lib/float-button/view/float-button.js +4 -0
  14. package/lib/index.js +1 -1
  15. package/package.json +1 -1
package/es/float-button/hooks/useAutoHide.js CHANGED
@@ -9,6 +9,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
9
9
  const positionRef = useRef();
10
10
  const setByMouseEnterRef = useRef(false);
11
11
  const setPosition = ({ left, top }, animation = true) => {
12
+ console.log('useAutoHide setPosition left top dom:', left, top, dom);
12
13
  if (!dom) {
13
14
  return;
14
15
  }
@@ -25,6 +26,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
25
26
  positionRef.current = { left, top };
26
27
  };
27
28
  const triggerHide = (hide, rect) => {
29
+ // console.log('useAutoHide triggerHide hide dom rect:', hide, rect, dom);
28
30
  if (!dom) {
29
31
  return;
30
32
  }
@@ -61,13 +63,18 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
61
63
  }
62
64
  };
63
65
  const setHide = (hide, rect) => {
66
+ // console.log('useAutoHide setHide isHideRef.current hide dom enable:', isHideRef.current, hide, dom, enable);
64
67
  if (isHideRef.current === hide || !dom || !enable) {
65
68
  return;
66
69
  }
67
70
  triggerHide(hide, rect);
68
71
  };
72
+ // 目前这样的逻辑必须要 主动的通过api的方式或者 拖拽小球的方式触发首次隐藏
73
+ // 后续鼠标的移入移出事件才会生效
69
74
  const setHideByMouse = (hide) => {
75
+ // console.log('useAutoHide setHideByMouse hide', hide, isHideRef);
70
76
  if (hide) {
77
+ // 这里加了这个判断会导致首次通过鼠标方式的隐藏不会被触发
71
78
  if (setByMouseEnterRef.current) {
72
79
  setHide(true);
73
80
  setByMouseEnterRef.current = false;
@@ -79,6 +86,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
79
86
  }
80
87
  };
81
88
  const setHideByApi = (hide) => {
89
+ // console.log('useAutoHide setHideByApi hide', hide);
82
90
  setByMouseEnterRef.current = false;
83
91
  setHide(hide);
84
92
  };
@@ -90,9 +98,12 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
90
98
  return;
91
99
  }
92
100
  const enter = () => {
101
+ // console.log('useAutoHide enter');
93
102
  throttleSetHideByMouse(false);
94
103
  };
104
+ // 感觉leave 不应该是离开球，可以是
95
105
  const leave = () => {
106
+ // console.log('useAutoHide leave');
96
107
  throttleSetHideByMouse(true);
97
108
  };
98
109
  dom.addEventListener('mouseenter', enter);
@@ -150,8 +161,8 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
150
161
  const throttleHandleMove = useThrottle(handleMove, 100);
151
162
  return {
152
163
  isHideRef,
153
- handleMove: throttleHandleMove,
154
- setHide: throttleSetHideByApi,
164
+ handleMove: throttleHandleMove, // 拖拽过程中执行
165
+ setHide: throttleSetHideByApi, // 提供外部的执行方法
155
166
  saveRestorePosition,
156
167
  };
157
168
  }
package/es/float-button/hooks/useNestleEdge.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { Margin, Edge, Position } from '../types';
2
2
  /**
3
- * 吸边逻辑
3
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
4
4
  */
5
5
  export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }: {
6
6
  enable?: boolean;
package/es/float-button/hooks/useNestleEdge.js CHANGED
@@ -2,19 +2,24 @@ import { useEffect, useLayoutEffect } from 'react';
2
2
  import { throttle, useDebounce, useThrottle } from '../../utils';
3
3
  import { getScreenSize, getNearlyEdge, adjustBySafeAreaMargin } from '../util';
4
4
  /**
5
- * 吸边逻辑
5
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
6
6
  */
7
7
  export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
8
+ // 首次的问题，首次拿不到dom节点，dom的值是null
8
9
  const update = (animation = true) => {
10
+ // console.log(' useNestleEdge update0', dom);
9
11
  if (!enable || !dom) {
10
12
  return;
11
13
  }
14
+ // console.log(' useNestleEdge update1', dom);
12
15
  // 悬浮球的dom的结构
13
16
  const rect = dom.getBoundingClientRect();
14
17
  const { left, top, width, height } = rect;
15
18
  const { width: screenWidth, height: screenHeight } = getScreenSize();
16
19
  const [edge] = getNearlyEdge(dom, interactiveEdges, rect);
17
20
  let position = { left, top };
21
+ // console.log(' useNestleEdge edge', edge);
22
+ // console.log(' useNestleEdge position', position);
18
23
  switch (edge) {
19
24
  case 'top': {
20
25
  position.top = 0;
@@ -36,7 +41,9 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
36
41
  return;
37
42
  }
38
43
  }
44
+ // console.log(' useNestleEdge position0:', position);
39
45
  position = adjustBySafeAreaMargin(position, { width, height }, safeAreaMargin) || position;
46
+ // console.log(' useNestleEdge position1:', position);
40
47
  if (position.left !== left || position.top !== top) {
41
48
  if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
42
49
  return;
@@ -70,9 +77,11 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
70
77
  const debounceUpdate = useDebounce(() => update(), 100);
71
78
  const throttleUpdate = useThrottle(update, 16);
72
79
  useLayoutEffect(() => {
80
+ // console.log(' useNestleEdge useLayoutEffect');
73
81
  throttleUpdate(false);
74
- });
82
+ }); //, [dom]
75
83
  useEffect(() => {
84
+ // console.log(' useNestleEdge resize');
76
85
  window.addEventListener('resize', debounceUpdate);
77
86
  return () => {
78
87
  window.removeEventListener('resize', debounceUpdate);
package/es/float-button/main.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  .#{$prefix}float-button {
4
4
  position: fixed;
5
5
  z-index: 1001;
6
+ width: fit-content;
7
+ height: fit-content;
6
8
 
7
9
  &-backtop {
8
10
  transition:
package/es/float-button/util.js CHANGED
@@ -63,7 +63,9 @@ export function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
63
63
  return num;
64
64
  };
65
65
  return {
66
- left: makeInRange(position.left, Math.max(0, left), Math.min(width, width - rect.width - right)),
67
- top: makeInRange(position.top, Math.max(0, top), Math.min(height, height - rect.height - bottom)),
66
+ left: makeInRange(position.left, Math.max(0, Math.min(left, width - rect.width - right)), Math.min(width, width - rect.width - right)),
67
+ // 目前这样的写法对顶部距离最小吸边逻辑会有问题
68
+ top: makeInRange(position.top, Math.max(0, Math.min(top, height - rect.height - bottom)), // 最小值
69
+ Math.min(height, height - rect.height - bottom)),
68
70
  };
69
71
  }
package/es/float-button/view/float-button.js CHANGED
@@ -64,7 +64,9 @@ const FloatButton = forwardRef((props, ref) => {
64
64
  safeAreaMargin,
65
65
  interactiveEdges,
66
66
  onUpdate(position, edge) {
67
+ // 隐藏的时候不执行吸边流程
67
68
  if (isHideRef.current) {
69
+ // 更新小球位置，再出现时使用
68
70
  saveRestorePosition(position);
69
71
  return false;
70
72
  }
@@ -97,12 +99,14 @@ const FloatButton = forwardRef((props, ref) => {
97
99
  onDraging(_, e) {
98
100
  draggedRef.current = true;
99
101
  handleMove(e);
102
+ // 隐藏的时候不处理
100
103
  if (isHideRef.current) {
101
104
  return false;
102
105
  }
103
106
  },
104
107
  onDragend() {
105
108
  updateAlign();
109
+ // 不隐藏的时候才处理
106
110
  if (!isHideRef.current) {
107
111
  updateNestleEdge();
108
112
  }
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.6';
23
+ export const version = '0.3.7';
package/lib/float-button/hooks/useAutoHide.js CHANGED
@@ -12,6 +12,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
12
12
  const positionRef = (0, react_1.useRef)();
13
13
  const setByMouseEnterRef = (0, react_1.useRef)(false);
14
14
  const setPosition = ({ left, top }, animation = true) => {
15
+ console.log('useAutoHide setPosition left top dom:', left, top, dom);
15
16
  if (!dom) {
16
17
  return;
17
18
  }
@@ -28,6 +29,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
28
29
  positionRef.current = { left, top };
29
30
  };
30
31
  const triggerHide = (hide, rect) => {
32
+ // console.log('useAutoHide triggerHide hide dom rect:', hide, rect, dom);
31
33
  if (!dom) {
32
34
  return;
33
35
  }
@@ -64,13 +66,18 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
64
66
  }
65
67
  };
66
68
  const setHide = (hide, rect) => {
69
+ // console.log('useAutoHide setHide isHideRef.current hide dom enable:', isHideRef.current, hide, dom, enable);
67
70
  if (isHideRef.current === hide || !dom || !enable) {
68
71
  return;
69
72
  }
70
73
  triggerHide(hide, rect);
71
74
  };
75
+ // 目前这样的逻辑必须要 主动的通过api的方式或者 拖拽小球的方式触发首次隐藏
76
+ // 后续鼠标的移入移出事件才会生效
72
77
  const setHideByMouse = (hide) => {
78
+ // console.log('useAutoHide setHideByMouse hide', hide, isHideRef);
73
79
  if (hide) {
80
+ // 这里加了这个判断会导致首次通过鼠标方式的隐藏不会被触发
74
81
  if (setByMouseEnterRef.current) {
75
82
  setHide(true);
76
83
  setByMouseEnterRef.current = false;
@@ -82,6 +89,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
82
89
  }
83
90
  };
84
91
  const setHideByApi = (hide) => {
92
+ // console.log('useAutoHide setHideByApi hide', hide);
85
93
  setByMouseEnterRef.current = false;
86
94
  setHide(hide);
87
95
  };
@@ -93,9 +101,12 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
93
101
  return;
94
102
  }
95
103
  const enter = () => {
104
+ // console.log('useAutoHide enter');
96
105
  throttleSetHideByMouse(false);
97
106
  };
107
+ // 感觉leave 不应该是离开球，可以是
98
108
  const leave = () => {
109
+ // console.log('useAutoHide leave');
99
110
  throttleSetHideByMouse(true);
100
111
  };
101
112
  dom.addEventListener('mouseenter', enter);
@@ -153,8 +164,8 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
153
164
  const throttleHandleMove = (0, utils_1.useThrottle)(handleMove, 100);
154
165
  return {
155
166
  isHideRef,
156
- handleMove: throttleHandleMove,
157
- setHide: throttleSetHideByApi,
167
+ handleMove: throttleHandleMove, // 拖拽过程中执行
168
+ setHide: throttleSetHideByApi, // 提供外部的执行方法
158
169
  saveRestorePosition,
159
170
  };
160
171
  }
package/lib/float-button/hooks/useNestleEdge.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { Margin, Edge, Position } from '../types';
2
2
  /**
3
- * 吸边逻辑
3
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
4
4
  */
5
5
  export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }: {
6
6
  enable?: boolean;
package/lib/float-button/hooks/useNestleEdge.js CHANGED
@@ -5,19 +5,24 @@ const react_1 = require("react");
5
5
  const utils_1 = require("../../utils");
6
6
  const util_1 = require("../util");
7
7
  /**
8
- * 吸边逻辑
8
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
9
9
  */
10
10
  function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
11
+ // 首次的问题，首次拿不到dom节点，dom的值是null
11
12
  const update = (animation = true) => {
13
+ // console.log(' useNestleEdge update0', dom);
12
14
  if (!enable || !dom) {
13
15
  return;
14
16
  }
17
+ // console.log(' useNestleEdge update1', dom);
15
18
  // 悬浮球的dom的结构
16
19
  const rect = dom.getBoundingClientRect();
17
20
  const { left, top, width, height } = rect;
18
21
  const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();
19
22
  const [edge] = (0, util_1.getNearlyEdge)(dom, interactiveEdges, rect);
20
23
  let position = { left, top };
24
+ // console.log(' useNestleEdge edge', edge);
25
+ // console.log(' useNestleEdge position', position);
21
26
  switch (edge) {
22
27
  case 'top': {
23
28
  position.top = 0;
@@ -39,7 +44,9 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
39
44
  return;
40
45
  }
41
46
  }
47
+ // console.log(' useNestleEdge position0:', position);
42
48
  position = (0, util_1.adjustBySafeAreaMargin)(position, { width, height }, safeAreaMargin) || position;
49
+ // console.log(' useNestleEdge position1:', position);
43
50
  if (position.left !== left || position.top !== top) {
44
51
  if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
45
52
  return;
@@ -73,9 +80,11 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
73
80
  const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 100);
74
81
  const throttleUpdate = (0, utils_1.useThrottle)(update, 16);
75
82
  (0, react_1.useLayoutEffect)(() => {
83
+ // console.log(' useNestleEdge useLayoutEffect');
76
84
  throttleUpdate(false);
77
- });
85
+ }); //, [dom]
78
86
  (0, react_1.useEffect)(() => {
87
+ // console.log(' useNestleEdge resize');
79
88
  window.addEventListener('resize', debounceUpdate);
80
89
  return () => {
81
90
  window.removeEventListener('resize', debounceUpdate);
package/lib/float-button/main.scss CHANGED
@@ -3,6 +3,8 @@
3
3
  .#{$prefix}float-button {
4
4
  position: fixed;
5
5
  z-index: 1001;
6
+ width: fit-content;
7
+ height: fit-content;
6
8
 
7
9
  &-backtop {
8
10
  transition:
package/lib/float-button/util.js CHANGED
@@ -69,7 +69,9 @@ function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
69
69
  return num;
70
70
  };
71
71
  return {
72
- left: makeInRange(position.left, Math.max(0, left), Math.min(width, width - rect.width - right)),
73
- top: makeInRange(position.top, Math.max(0, top), Math.min(height, height - rect.height - bottom)),
72
+ left: makeInRange(position.left, Math.max(0, Math.min(left, width - rect.width - right)), Math.min(width, width - rect.width - right)),
73
+ // 目前这样的写法对顶部距离最小吸边逻辑会有问题
74
+ top: makeInRange(position.top, Math.max(0, Math.min(top, height - rect.height - bottom)), // 最小值
75
+ Math.min(height, height - rect.height - bottom)),
74
76
  };
75
77
  }
package/lib/float-button/view/float-button.js CHANGED
@@ -66,7 +66,9 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
66
66
  safeAreaMargin,
67
67
  interactiveEdges,
68
68
  onUpdate(position, edge) {
69
+ // 隐藏的时候不执行吸边流程
69
70
  if (isHideRef.current) {
71
+ // 更新小球位置，再出现时使用
70
72
  saveRestorePosition(position);
71
73
  return false;
72
74
  }
@@ -99,12 +101,14 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
99
101
  onDraging(_, e) {
100
102
  draggedRef.current = true;
101
103
  handleMove(e);
104
+ // 隐藏的时候不处理
102
105
  if (isHideRef.current) {
103
106
  return false;
104
107
  }
105
108
  },
106
109
  onDragend() {
107
110
  updateAlign();
111
+ // 不隐藏的时候才处理
108
112
  if (!isHideRef.current) {
109
113
  updateNestleEdge();
110
114
  }
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.6';
49
+ exports.version = '0.3.7';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alifd/chat",
3
- "version": "0.3.6",
3
+ "version": "0.3.7",
4
4
  "description": "A configurable component library for chat built on React.",
5
5
  "main": "lib/index.js",
6
6
  "module": "es/index.js",