plain-design 1.0.0-beta.107 → 1.0.0-beta.108

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 (38) hide show
  1. package/dist/plain-design.commonjs.min.js +2 -2
  2. package/dist/plain-design.min.css +1 -1
  3. package/dist/plain-design.min.js +2 -2
  4. package/dist/report.html +2 -2
  5. package/package.json +3 -3
  6. package/src/packages/components/AddressCascade/createAddressCascade.multiple.tsx +5 -6
  7. package/src/packages/components/AddressCascade/createAddressCascade.single.tsx +6 -7
  8. package/src/packages/components/Badge/badge.scss +4 -0
  9. package/src/packages/components/Cascade/createMultipleCascadeRender.tsx +3 -4
  10. package/src/packages/components/Cascade/createSingleCascadeRender.tsx +4 -5
  11. package/src/packages/components/DatePicker/createDateRender.multiple.tsx +5 -5
  12. package/src/packages/components/DatePicker/createDateRender.single.tsx +6 -5
  13. package/src/packages/components/DatePicker/index.tsx +2 -0
  14. package/src/packages/components/DatePicker/useRangeDateRender.tsx +6 -6
  15. package/src/packages/components/Input/useMultipleInput.tsx +4 -3
  16. package/src/packages/components/Input/useSuggestionInput.tsx +3 -4
  17. package/src/packages/components/Input/useTextareaInput.tsx +3 -3
  18. package/src/packages/components/Input/uses/useInputEnterHandler.tsx +10 -6
  19. package/src/packages/components/Object/createObjectRender.multiple.tsx +7 -7
  20. package/src/packages/components/Object/createObjectRender.single.tsx +10 -10
  21. package/src/packages/components/PageThemeUtils/index.tsx +2 -2
  22. package/src/packages/components/Select/createMultipleSelectRender.tsx +10 -6
  23. package/src/packages/components/Select/createPublicSelectRender.tsx +8 -4
  24. package/src/packages/components/Select/createSingleSelectRender.tsx +11 -7
  25. package/src/packages/components/Slider/useSlider.range.tsx +12 -9
  26. package/src/packages/components/Slider/useSlider.single.tsx +7 -8
  27. package/src/packages/components/Table/standard/PlcCheck/PlcCheck.hooks.tsx +2 -2
  28. package/src/packages/components/Table/standard/PlcCheck/PlcCheck.multiple.tsx +4 -5
  29. package/src/packages/components/Table/standard/PlcCheck/PlcCheck.single.tsx +3 -4
  30. package/src/packages/components/TimePicker/createSingleTimeRender.tsx +4 -5
  31. package/src/packages/components/TimePicker/useRangeTimeRender.tsx +6 -6
  32. package/src/packages/components/usePopup/PopupItem.tsx +3 -3
  33. package/src/packages/components/usePopup/trigger/useReferenceTrigger.tsx +51 -45
  34. package/src/packages/components/usePopupEditor/index.tsx +6 -9
  35. package/src/packages/components/useTooltip/index.tsx +5 -6
  36. package/src/packages/uses/useDragHorizontalScroll.ts +4 -5
  37. package/src/packages/uses/useFocusHandler.ts +25 -12
  38. package/src/packages/uses/useMultipleModel.tsx +3 -1
@@ -10,7 +10,7 @@ import {VirtualList} from "../VirtualList";
10
10
  import {delay} from "@peryl/utils/delay";
11
11
  import {handleKeyboard} from "@peryl/utils/keyboard";
12
12
  import {useRenderReference} from "../../uses/useRenderReference";
13
- import {createEffects} from "@peryl/utils/createEffects";
13
+ import {iEffects} from "@peryl/utils/createEffects";
14
14
  import {createPopupEditor} from "../usePopupEditor";
15
15
 
16
16
  export function createPublicSelectRender(
@@ -33,6 +33,7 @@ export function createPublicSelectRender(
33
33
  defaultCurrent,
34
34
  multiple,
35
35
  processRenderPanel,
36
+ effects,
36
37
  }: {
37
38
  /**
38
39
  * 判断选项是否已经选中,用来provide给option组件判断自身是否已经选中
@@ -88,9 +89,13 @@ export function createPublicSelectRender(
88
89
  * @date 2022/8/16 8:40
89
90
  */
90
91
  processRenderPanel?: (defaultRender: () => RenderNode) => RenderNode,
92
+ /**
93
+ * 副作用收集函数
94
+ * @author 韦胜健
95
+ * @date 2024.9.3 22:45
96
+ */
97
+ effects: iEffects,
91
98
  }) {
92
- /*记录副作用函数*/
93
- const { effects } = createEffects();
94
99
 
95
100
  const { refs, onRef } = useRefs({
96
101
  /*用来创建popper的reference对象*/
@@ -391,7 +396,6 @@ export function createPublicSelectRender(
391
396
  };
392
397
 
393
398
  return {
394
- effects,
395
399
  refs,
396
400
  onRef,
397
401
  state,
@@ -3,6 +3,7 @@ import {Input} from "../Input";
3
3
  import {createPublicSelectRender} from "./createPublicSelectRender";
4
4
  import {reactive, useModel} from "@peryl/react-compose";
5
5
  import {delay} from "@peryl/utils/delay";
6
+ import {createEffects} from "@peryl/utils/createEffects";
6
7
 
7
8
  /**
8
9
  * 单选组合函数,支持普通单选以及虚拟列表的方式
@@ -18,15 +19,18 @@ export function createSingleSelectRender(params: iSelectCompositionParams) {
18
19
  inputValue: null as null | string
19
20
  });
20
21
 
22
+ const { effects } = createEffects();
23
+
21
24
  const model = useModel(() => props.modelValue, params.emit.onUpdateModelValue, {
22
25
  onChange: async () => {
23
26
  await delay();
24
27
  state.inputValue = selector.optionListHandler.getMatchLabel();
25
28
  }
26
- });
29
+ }, effects);
27
30
 
28
31
  const selector = createPublicSelectRender(params, {
29
32
  isActivated: props => isMatch({ option: props.val, value: model.value }),
33
+ effects,
30
34
  model,
31
35
  ...(() => {
32
36
  /**
@@ -69,7 +73,7 @@ export function createSingleSelectRender(params: iSelectCompositionParams) {
69
73
  defaultCurrent: undefined,
70
74
  });
71
75
 
72
- selector.effects.push(hooks.renderInput.use(() => {
76
+ effects.push(hooks.renderInput.use(() => {
73
77
 
74
78
  selector.optionListHandler.decode();
75
79
  /*显示文本*/
@@ -106,24 +110,24 @@ export function createSingleSelectRender(params: iSelectCompositionParams) {
106
110
  });
107
111
  }));
108
112
 
109
- selector.effects.push(hooks.onPopperClose.use(() => {
113
+ effects.push(hooks.onPopperClose.use(() => {
110
114
  /*重置input绑定值,防止输入一半取消选择时显示不正确的文本*/
111
115
  state.inputValue = selector.optionListHandler.getMatchLabel();
112
116
  }));
113
117
 
114
- selector.effects.push(hooks.onPopperShow.use(() => {
118
+ effects.push(hooks.onPopperShow.use(() => {
115
119
  state.inputValue = null;
116
120
  }));
117
121
 
118
- selector.effects.push(hooks.onInputTextChange.use((val) => {
122
+ effects.push(hooks.onInputTextChange.use((val) => {
119
123
  /*应用绑定值*/
120
124
  state.inputValue = val;
121
125
  }));
122
126
 
123
- selector.effects.push(hooks.onInputClear.use(() => {
127
+ effects.push(hooks.onInputClear.use(() => {
124
128
  /*点击clear的时候,应用输入绑定值*/
125
129
  state.inputValue = null;
126
130
  }));
127
131
 
128
- return () => selector.effects.clear();
132
+ return effects.clear;
129
133
  }
@@ -1,6 +1,5 @@
1
1
  import {iSliderPublicParams} from "./slider.utils";
2
- import {createEffects} from "@peryl/utils/createEffects";
3
- import {computed, useModel, useStyles} from "@peryl/react-compose";
2
+ import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
4
3
  import {unit} from "@peryl/utils/unit";
5
4
  import {useSliderDotDraggier} from "./useSliderDotDragier";
6
5
 
@@ -14,7 +13,7 @@ export function useSliderRange(
14
13
  utils,
15
14
  }: iSliderPublicParams) {
16
15
 
17
- const { effects } = createEffects();
16
+ const { effects, effectComputed } = createEffectsOfReaction();
18
17
 
19
18
  /**
20
19
  * 创建指示器管理对象
@@ -22,14 +21,16 @@ export function useSliderRange(
22
21
  * @date 2022.12.10 15:43
23
22
  */
24
23
  function createDotManager(type: 'start' | 'end') {
25
- const model = type === "start" ? useModel(() => props.start, event.emit.onUpdateStart, { autoEmit: props.emitImmediate }) :
26
- useModel(() => props.end, event.emit.onUpdateEnd, { autoEmit: props.emitImmediate });
24
+ const model = type === "start" ?
25
+ useModel(() => props.start, event.emit.onUpdateStart, { autoEmit: props.emitImmediate }, effects) :
26
+ useModel(() => props.end, event.emit.onUpdateEnd, { autoEmit: props.emitImmediate }, effects);
27
27
  /**
28
28
  * 当前指示器位置百分比
29
29
  * @author 韦胜健
30
30
  * @date 2022.12.10 15:44
31
31
  */
32
- const percent = computed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
32
+ const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
33
+
33
34
  /**
34
35
  * 指示器行内样式
35
36
  * @author 韦胜健
@@ -51,16 +52,18 @@ export function useSliderRange(
51
52
  } else {
52
53
  styles.transform = `translateY(${length}px)`;
53
54
  }
54
- });
55
+ }, effects);
56
+
55
57
  /**
56
58
  * 指示器tooltip显示文本
57
59
  * @author 韦胜健
58
60
  * @date 2022.12.10 15:44
59
61
  */
60
- const tooltipLabel = computed(() => {
62
+ const tooltipLabel = effectComputed(() => {
61
63
  let ret = model.value;
62
64
  return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
63
65
  });
66
+
64
67
  /**
65
68
  * 指示器拖拽处理对象
66
69
  * @author 韦胜健
@@ -117,7 +120,7 @@ export function useSliderRange(
117
120
  styles.transform = `translateY(${start.percent.value * totalLength.value}px) scaleY(${percentValue})`;
118
121
  styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
119
122
  }
120
- });
123
+ }, effects);
121
124
 
122
125
  /**
123
126
  * 拖拽的时候一直显示tooltip
@@ -1,6 +1,5 @@
1
1
  import {iSliderPublicParams} from "./slider.utils";
2
- import {createEffects} from "@peryl/utils/createEffects";
3
- import {computed, useModel, useStyles} from "@peryl/react-compose";
2
+ import {createEffectsOfReaction, useModel, useStyles} from "@peryl/react-compose";
4
3
  import {unit} from "@peryl/utils/unit";
5
4
  import {useSliderDotDraggier} from "./useSliderDotDragier";
6
5
 
@@ -14,16 +13,16 @@ export function useSliderSingle(
14
13
  editComputed,
15
14
  }: iSliderPublicParams) {
16
15
 
17
- const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate });
16
+ const { effects, effectComputed } = createEffectsOfReaction();
18
17
 
19
- const { effects } = createEffects();
18
+ const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue, { autoEmit: props.emitImmediate }, effects);
20
19
 
21
20
  /**
22
21
  * 当前百分比
23
22
  * @author 韦胜健
24
23
  * @date 2022.12.10 15:42
25
24
  */
26
- const percent = computed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
25
+ const percent = effectComputed(() => Number(((model.value == null ? 0 : Number(model.value)) / props.total).toFixed(2)));
27
26
 
28
27
  /**
29
28
  * 进度条行内样式
@@ -44,7 +43,7 @@ export function useSliderSingle(
44
43
  styles.transform = `scaleY(${percentValue})`;
45
44
  styles.transformOrigin = props.alignEnd ? 'bottom' : 'top';
46
45
  }
47
- });
46
+ }, effects);
48
47
 
49
48
  /**
50
49
  * 指示器行内样式
@@ -60,7 +59,7 @@ export function useSliderSingle(
60
59
  } else {
61
60
  styles.transform = `translateY(${length}px)`;
62
61
  }
63
- });
62
+ }, effects);
64
63
 
65
64
  /**
66
65
  * 指示器拖拽行为
@@ -83,7 +82,7 @@ export function useSliderSingle(
83
82
  * @author 韦胜健
84
83
  * @date 2022.12.10 15:43
85
84
  */
86
- const tooltipLabel = computed(() => {
85
+ const tooltipLabel = effectComputed(() => {
87
86
  let ret = model.value;
88
87
  return !!props.tooltipFormatter ? props.tooltipFormatter(ret || 0) : ret;
89
88
  });
@@ -3,8 +3,8 @@ import {iTableCellRenderScope, iTableRowRenderScope} from "../../table/utils/tab
3
3
 
4
4
  export function createPlcCheckHooks() {
5
5
  return {
6
- onRenderNormal: createSyncHooks<(data: { scope: iTableCellRenderScope, content: RenderNode }) => void>(),
7
- onRenderHead: createSyncHooks<(renderNode: RenderNode) => void>(),
6
+ onRenderNormal: createSyncHooks<(data: { scope: iTableCellRenderScope, content: RenderNode }) => void>(true),
7
+ onRenderHead: createSyncHooks<(renderNode: RenderNode) => void>(true),
8
8
  onClickRow: createHooks<(data: { rowRenderScope: iTableRowRenderScope }) => void>(),
9
9
 
10
10
  onTriggerCheckAll: createHooks(),
@@ -1,12 +1,11 @@
1
1
  import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
2
- import {computed, reactive, toRaw, useModel} from "@peryl/react-compose";
2
+ import {createEffectsOfReaction, reactive, toRaw, useModel} from "@peryl/react-compose";
3
3
  import {toArray} from "@peryl/utils/toArray";
4
4
  import {PlainObject} from "@peryl/utils/event";
5
5
  import {iTableRowRenderScope} from "../../table/utils/table.utils";
6
6
  import {CheckboxStatus} from "../../../../utils/constant";
7
7
  import {Checkbox} from "../../../Checkbox";
8
8
  import {iPlcCheckHooks} from "./PlcCheck.hooks";
9
- import {createEffects} from "@peryl/utils/createEffects";
10
9
  import {iTableRefer} from "../../table/Table";
11
10
  import {Badge} from "../../../Badge";
12
11
  import {Dropdown} from "../../../Dropdown";
@@ -37,21 +36,21 @@ export function usePlcCheckMultiple(
37
36
  }
38
37
  ) {
39
38
 
40
- const { effects } = createEffects();
39
+ const { effects, effectComputed } = createEffectsOfReaction();
41
40
 
42
41
  /**
43
42
  * 双向绑定值
44
43
  * @author 韦胜健
45
44
  * @date 2022.11.27 16:36
46
45
  */
47
- const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any);
46
+ const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any, undefined, effects);
48
47
 
49
48
  /**
50
49
  * 已经选中的keys
51
50
  * @author 韦胜健
52
51
  * @date 2022.11.27 16:36
53
52
  */
54
- const checkKeys = computed(() => {
53
+ const checkKeys = effectComputed(() => {
55
54
  if (!model.value) {return {};}
56
55
  return toArray(model.value).reduce((prev, item) => {
57
56
  prev[item[props.field]] = true;
@@ -1,10 +1,9 @@
1
1
  import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
2
- import {useModel} from "@peryl/react-compose";
2
+ import {createEffectsOfReaction, useModel} from "@peryl/react-compose";
3
3
  import {PlainObject} from "@peryl/utils/event";
4
4
  import {iTableRowRenderScope} from "../../table/utils/table.utils";
5
5
  import {Radio} from "../../../Radio";
6
6
  import {CheckboxStatus} from "../../../../utils/constant";
7
- import {createEffects} from "@peryl/utils/createEffects";
8
7
  import {iPlcCheckHooks} from "./PlcCheck.hooks";
9
8
  import {iTableRefer} from "../../table/Table";
10
9
 
@@ -22,14 +21,14 @@ export function usePlcCheckSingle(
22
21
  }
23
22
  ) {
24
23
 
25
- const { effects } = createEffects();
24
+ const { effects } = createEffectsOfReaction();
26
25
 
27
26
  /**
28
27
  * 双向绑定值
29
28
  * @author 韦胜健
30
29
  * @date 2022.11.27 16:36
31
30
  */
32
- const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any);
31
+ const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any, undefined, effects);
33
32
 
34
33
  const utils = {
35
34
  /**
@@ -1,22 +1,21 @@
1
1
  import {TimePanel} from "./panel/TimePanel";
2
2
  import Input from "../Input";
3
- import {computed, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
3
+ import {createEffectsOfReaction, getComponentCls, reactive, useModel, useRefs} from "@peryl/react-compose";
4
4
  import {delay} from "@peryl/utils/delay";
5
5
  import {PDate, plainDate} from "../../utils/plainDate";
6
6
  import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
7
7
  import {TimePanelLayout} from "./panel/TimeBasePanel";
8
8
  import {debounce} from "@peryl/utils/debounce";
9
9
  import {useRenderReference} from "../../uses/useRenderReference";
10
- import {createEffects} from "@peryl/utils/createEffects";
11
10
  import {createPopupEditor} from "../usePopupEditor";
12
11
 
13
12
  export function createSingleTimeRender({ emit, props, hooks, displayPattern, today, maxmin, editComputed, slots, getPublicPopperAttrs, getInheritPublicTimeAttrs, formatString }: tTimeCompositionParams) {
14
13
 
15
- const { effects } = createEffects();
14
+ const { effects, effectComputed } = createEffectsOfReaction();
16
15
  const { refs, onRef } = useRefs({ input: Input });
17
16
  const reference = useRenderReference();
18
- const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) });
19
- const format = computed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
17
+ const model = useModel(() => props.modelValue, emit.onUpdateModelValue, { onChange: () => delay().then(() => state.input = format.value?.getDisplay()) }, effects);
18
+ const format = effectComputed((): null | PDate => !model.value ? null : plainDate(model.value, formatString.value));
20
19
  const state = reactive({
21
20
  input: format.value?.getDisplay(),
22
21
  hoverColumnType: null as null | TimePanelLayout,
@@ -1,4 +1,4 @@
1
- import {computed, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "@peryl/react-compose";
1
+ import {createEffectsOfReaction, getComponentCls, iHTMLInputElement, reactive, useModel, useRefs} from "@peryl/react-compose";
2
2
  import Input from "../Input";
3
3
  import {delay} from "@peryl/utils/delay";
4
4
  import {useFocusHandler} from "../../uses/useFocusHandler";
@@ -8,16 +8,16 @@ import {TimeRangePanelType} from "./panel/TimeRangePanel";
8
8
  import {limitDatetimeTimePlainData, TimeLayoutToFormat, tTimeCompositionParams} from "./time.utils";
9
9
  import {debounce} from "@peryl/utils/debounce";
10
10
  import {useRenderReference} from "../../uses/useRenderReference";
11
- import {createEffects} from "@peryl/utils/createEffects";
12
11
 
13
12
  export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern, today, onInputClear, maxmin, formatString }: tTimeCompositionParams & { onBlur: () => void, onInputClear?: (range: TimeRangePanelType) => void, }) {
14
- const { effects } = createEffects();
13
+ const { effects, effectComputed } = createEffectsOfReaction();
15
14
  const { refs, onRef } = useRefs({ input: Input, start: iHTMLInputElement, end: iHTMLInputElement, });
16
15
  const reference = useRenderReference();
17
- const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) });
18
- const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) });
16
+ const startModel = useModel(() => props.start, emit.onUpdateStart, { onChange: () => delay().then(() => state.input.start = format.value.start?.getDisplay()) }, effects);
17
+ const endModel = useModel(() => props.end, emit.onUpdateEnd, { onChange: () => delay().then(() => state.input.end = format.value.end?.getDisplay()) }, effects);
19
18
 
20
19
  const { isFocus } = useFocusHandler({
20
+ effects,
21
21
  getEls: () => [refs.start, refs.end],
22
22
  /**
23
23
  * Input失去焦点事件,将文本框的值重置为display的值,以避免显示输入不正确的值
@@ -33,7 +33,7 @@ export function useRangeTimeRender({ props, emit, onBlur, slots, displayPattern,
33
33
  onFocus: emit.onFocus,
34
34
  });
35
35
 
36
- const format = computed((): { start: null | PDate, end: null | PDate } => ({
36
+ const format = effectComputed((): { start: null | PDate, end: null | PDate } => ({
37
37
  start: !startModel.value ? null : plainDate(startModel.value, formatString.value),
38
38
  end: !endModel.value ? null : plainDate(endModel.value, formatString.value),
39
39
  }));
@@ -322,9 +322,9 @@ export const PopupItem = designComponent({
322
322
  * @author 韦胜健
323
323
  * @date 2023/5/16 17:14
324
324
  */
325
- useWatchAutoClear(() => state.option.reference, () => {
326
- const effects: SimpleFunction[] = [];
325
+ useWatchAutoClear(() => state.option.reference, (): (() => void) => {
327
326
  if (!state.option.reference) {return doNothing;}
327
+ const { effects } = createEffects();
328
328
  const parents = getElementParents(state.option.reference).concat(window as any);
329
329
  const onScroll = () => {
330
330
  if (state.option.hideOnScroll) {
@@ -341,7 +341,7 @@ export const PopupItem = designComponent({
341
341
  parent.addEventListener('scroll', onScroll);
342
342
  effects.push(() => {parent.removeEventListener('scroll', onScroll);});
343
343
  });
344
- return () => {effects.forEach(i => i());};
344
+ return effects.clear;
345
345
  });
346
346
 
347
347
  /**
@@ -1,6 +1,6 @@
1
1
  import {ePopupTrigger, iPopupManager, iPopupUseOption} from "../utils/popup.utils";
2
2
  import {createEffects} from "@peryl/utils/createEffects";
3
- import {onBeforeUnmount, SimpleFunction, watchEffect} from "@peryl/react-compose";
3
+ import {globalWatchEffect, onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
4
4
  import {isStopPopup} from "../utils/stopPopup";
5
5
 
6
6
  /**
@@ -28,57 +28,63 @@ export function createReferenceTrigger(
28
28
  }
29
29
  ) {
30
30
  const { effects } = createEffects();
31
+ const { effects: setupEffects } = createEffects();
31
32
 
32
33
  let prev: ReturnType<typeof get> | null = null;
33
34
 
34
- watchEffect(() => {
35
- const { reference, trigger } = get();
36
- if (!!prev && prev.trigger === trigger && prev.reference === reference) {
37
- return;
38
- }
39
- effects.clear();
40
- prev = { reference, trigger };
41
-
42
- if (!reference) {return;}
43
-
44
- const onClick = (e: MouseEvent) => {
45
- if (isStopPopup(e)) {
35
+ setupEffects.push(
36
+ globalWatchEffect(() => {
37
+ const { reference, trigger } = get();
38
+ if (!!prev && prev.trigger === trigger && prev.reference === reference) {
46
39
  return;
47
40
  }
48
- manager.hooks.onTriggerReferenceClick.exec({ e, option: getOption() });
49
- };
50
- const onContextmenu = (e: MouseEvent) => {
51
- e.preventDefault();
52
- manager.hooks.onTriggerReferenceContextmenu.exec({ e, option: getOption() });
53
- };
54
- const onMouseenter = (e: MouseEvent) => {manager.hooks.onTriggerReferenceEnter.exec({ e, option: getOption() });};
55
- const onMouseleave = (e: MouseEvent) => {manager.hooks.onTriggerReferenceLeave.exec({ e, option: getOption() });};
56
- const onMousedown = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousedown.exec({ e, option: getOption() });};
57
- const onMousemove = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousemove.exec({ e, option: getOption() });};
58
- const onFocus = (e: FocusEvent) => {manager.hooks.onTriggerReferenceFocus.exec({ e, option: getOption() });};
59
- const onBlur = (e: FocusEvent) => {manager.hooks.onTriggerReferenceBlur.exec({ e, option: getOption() });};
41
+ effects.clear();
42
+ prev = { reference, trigger };
60
43
 
44
+ if (!reference) {return;}
61
45
 
62
- reference.addEventListener('click', onClick);
63
- reference.addEventListener('contextmenu', onContextmenu);
64
- reference.addEventListener('mouseenter', onMouseenter);
65
- reference.addEventListener('mouseleave', onMouseleave);
66
- reference.addEventListener('mousedown', onMousedown);
67
- reference.addEventListener('mousemove', onMousemove);
68
- reference.addEventListener('focus', onFocus);
69
- reference.addEventListener('blur', onBlur);
46
+ const onClick = (e: MouseEvent) => {
47
+ if (isStopPopup(e)) {
48
+ return;
49
+ }
50
+ manager.hooks.onTriggerReferenceClick.exec({ e, option: getOption() });
51
+ };
52
+ const onContextmenu = (e: MouseEvent) => {
53
+ e.preventDefault();
54
+ manager.hooks.onTriggerReferenceContextmenu.exec({ e, option: getOption() });
55
+ };
56
+ const onMouseenter = (e: MouseEvent) => {manager.hooks.onTriggerReferenceEnter.exec({ e, option: getOption() });};
57
+ const onMouseleave = (e: MouseEvent) => {manager.hooks.onTriggerReferenceLeave.exec({ e, option: getOption() });};
58
+ const onMousedown = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousedown.exec({ e, option: getOption() });};
59
+ const onMousemove = (e: MouseEvent) => {manager.hooks.onTriggerReferenceMousemove.exec({ e, option: getOption() });};
60
+ const onFocus = (e: FocusEvent) => {manager.hooks.onTriggerReferenceFocus.exec({ e, option: getOption() });};
61
+ const onBlur = (e: FocusEvent) => {manager.hooks.onTriggerReferenceBlur.exec({ e, option: getOption() });};
70
62
 
71
- effects.push(() => {
72
- reference.removeEventListener('click', onClick);
73
- reference.removeEventListener('contextmenu', onContextmenu);
74
- reference.removeEventListener('mouseenter', onMouseenter);
75
- reference.removeEventListener('mouseleave', onMouseleave);
76
- reference.removeEventListener('mousedown', onMousedown);
77
- reference.removeEventListener('mousemove', onMousemove);
78
- reference.removeEventListener('focus', onFocus);
79
- reference.removeEventListener('blur', onBlur);
80
- });
81
- });
82
63
 
83
- onBeforeUnmount(() => {effects.clear();});
64
+ reference.addEventListener('click', onClick);
65
+ reference.addEventListener('contextmenu', onContextmenu);
66
+ reference.addEventListener('mouseenter', onMouseenter);
67
+ reference.addEventListener('mouseleave', onMouseleave);
68
+ reference.addEventListener('mousedown', onMousedown);
69
+ reference.addEventListener('mousemove', onMousemove);
70
+ reference.addEventListener('focus', onFocus);
71
+ reference.addEventListener('blur', onBlur);
72
+
73
+ effects.push(() => {
74
+ reference.removeEventListener('click', onClick);
75
+ reference.removeEventListener('contextmenu', onContextmenu);
76
+ reference.removeEventListener('mouseenter', onMouseenter);
77
+ reference.removeEventListener('mouseleave', onMouseleave);
78
+ reference.removeEventListener('mousedown', onMousedown);
79
+ reference.removeEventListener('mousemove', onMousemove);
80
+ reference.removeEventListener('focus', onFocus);
81
+ reference.removeEventListener('blur', onBlur);
82
+ });
83
+ })
84
+ );
85
+
86
+ onBeforeUnmount(() => {
87
+ effects.clear();
88
+ setupEffects.clear();
89
+ });
84
90
  }
@@ -1,6 +1,5 @@
1
1
  import {iPopupEditorOption} from "./popup-editor.utils";
2
- import {computed, onBeforeUnmount, SimpleFunction, watch} from "@peryl/react-compose";
3
- import {createEffects} from "@peryl/utils/createEffects";
2
+ import {createEffectsOfReaction, onBeforeUnmount, SimpleFunction} from "@peryl/react-compose";
4
3
  import {createPopup} from "../usePopup/usePopup";
5
4
  import {iPopupUseOption} from "../usePopup/utils/popup.utils";
6
5
  import {createReferenceTrigger} from "../usePopup/trigger/useReferenceTrigger";
@@ -14,11 +13,11 @@ export function createPopupEditor(
14
13
  }
15
14
  ) {
16
15
 
17
- const { effects } = createEffects();
16
+ const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
18
17
 
19
18
  const popup = createPopup(effects.push);
20
19
 
21
- const reference = computed(() => {
20
+ const reference = effectComputed(() => {
22
21
  let reference = option.reference() as any;
23
22
  if (!reference) {return null;}
24
23
  if ('$el' in reference) {reference = reference.$el;}
@@ -90,11 +89,9 @@ export function createPopupEditor(
90
89
  isShow: () => popup.$popup.manager.methods.isShow(getOption())
91
90
  };
92
91
 
93
- effects.push(
94
- watch(() => option.popperAttrs?.(), () => {
95
- popup.$popup.update(getOption());
96
- })
97
- );
92
+ effectWatch(() => option.popperAttrs?.(), () => {
93
+ popup.$popup.update(getOption());
94
+ });
98
95
 
99
96
  effects.push(() => {
100
97
  popup.$popup.manager.methods.remove(popup.popupId);
@@ -1,5 +1,4 @@
1
- import {createEffects} from '@peryl/utils/createEffects';
2
- import {getComponentCls, nextTick, onBeforeUnmount, reactive, watch} from "@peryl/react-compose";
1
+ import {createEffectsOfReaction, getComponentCls, nextTick, onBeforeUnmount, reactive} from "@peryl/react-compose";
3
2
  import {iPopupService, usePopup} from "../usePopup/usePopup";
4
3
  import {iPopupUseOption} from "../usePopup/utils/popup.utils";
5
4
  import {delay} from "@peryl/utils/delay";
@@ -10,7 +9,7 @@ import {delay} from "@peryl/utils/delay";
10
9
  * @date 2023.1.21 14:06
11
10
  */
12
11
  export function createTooltip(option: iTooltipServiceOption, popup: iPopupService) {
13
- const { effects } = createEffects();
12
+ const { effects, effectWatch } = createEffectsOfReaction();
14
13
 
15
14
  const state = reactive({
16
15
  isEnter: false,
@@ -67,7 +66,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
67
66
  }
68
67
  };
69
68
  effects.push(
70
- watch(
69
+ effectWatch(
71
70
  () => option.tooltip(),
72
71
  ({ message, reference }) => {
73
72
  if (!reference) {
@@ -108,7 +107,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
108
107
 
109
108
  const tooltipHandler = (() => {
110
109
  effects.push(
111
- watch(
110
+ effectWatch(
112
111
  () => option.tooltip().message,
113
112
  val => {
114
113
  popup.$popup.update(getOption());
@@ -122,7 +121,7 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
122
121
  )
123
122
  );
124
123
  effects.push(
125
- watch(
124
+ effectWatch(
126
125
  (): boolean => {
127
126
  const { reference, message } = option.tooltip();
128
127
  if (reference == null || message == null || (typeof message === "string" && !message.trim().length)) {
@@ -1,6 +1,5 @@
1
- import {createEffects} from "@peryl/utils/createEffects";
2
1
  import {ClientZoom} from "../utils/ClientZoom";
3
- import {watch} from "@peryl/react-compose";
2
+ import {createEffectsOfReaction} from "@peryl/react-compose";
4
3
 
5
4
  export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined, config?: { onDragStart: () => void, onDragEnd: () => void }) {
6
5
 
@@ -17,7 +16,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
17
16
  }
18
17
  };
19
18
 
20
- const { effects } = createEffects();
19
+ const { effects, effectWatch } = createEffectsOfReaction();
21
20
 
22
21
  const handler = {
23
22
  mousedown: (e: MouseEvent) => {
@@ -60,7 +59,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
60
59
  },
61
60
  };
62
61
 
63
- effects.push(watch(() => getEl(), el => {
62
+ effectWatch(() => getEl(), el => {
64
63
  if (!!staticState.el) {
65
64
  staticState.el.removeEventListener('mousedown', handler.mousedown);
66
65
  staticState.el.removeEventListener('wheel', handler.onWheel);
@@ -69,7 +68,7 @@ export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefi
69
68
  if (!staticState.el) {return;}
70
69
  staticState.el.addEventListener('mousedown', handler.mousedown);
71
70
  staticState.el.addEventListener('wheel', handler.onWheel);
72
- }));
71
+ });
73
72
 
74
73
  effects.push(() => {
75
74
  if (!!staticState.el) {