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.
- package/dist/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.css +1 -1
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +3 -3
- package/src/packages/components/AddressCascade/createAddressCascade.multiple.tsx +5 -6
- package/src/packages/components/AddressCascade/createAddressCascade.single.tsx +6 -7
- package/src/packages/components/Badge/badge.scss +4 -0
- package/src/packages/components/Cascade/createMultipleCascadeRender.tsx +3 -4
- package/src/packages/components/Cascade/createSingleCascadeRender.tsx +4 -5
- package/src/packages/components/DatePicker/createDateRender.multiple.tsx +5 -5
- package/src/packages/components/DatePicker/createDateRender.single.tsx +6 -5
- package/src/packages/components/DatePicker/index.tsx +2 -0
- package/src/packages/components/DatePicker/useRangeDateRender.tsx +6 -6
- package/src/packages/components/Input/useMultipleInput.tsx +4 -3
- package/src/packages/components/Input/useSuggestionInput.tsx +3 -4
- package/src/packages/components/Input/useTextareaInput.tsx +3 -3
- package/src/packages/components/Input/uses/useInputEnterHandler.tsx +10 -6
- package/src/packages/components/Object/createObjectRender.multiple.tsx +7 -7
- package/src/packages/components/Object/createObjectRender.single.tsx +10 -10
- package/src/packages/components/PageThemeUtils/index.tsx +2 -2
- package/src/packages/components/Select/createMultipleSelectRender.tsx +10 -6
- package/src/packages/components/Select/createPublicSelectRender.tsx +8 -4
- package/src/packages/components/Select/createSingleSelectRender.tsx +11 -7
- package/src/packages/components/Slider/useSlider.range.tsx +12 -9
- package/src/packages/components/Slider/useSlider.single.tsx +7 -8
- package/src/packages/components/Table/standard/PlcCheck/PlcCheck.hooks.tsx +2 -2
- package/src/packages/components/Table/standard/PlcCheck/PlcCheck.multiple.tsx +4 -5
- package/src/packages/components/Table/standard/PlcCheck/PlcCheck.single.tsx +3 -4
- package/src/packages/components/TimePicker/createSingleTimeRender.tsx +4 -5
- package/src/packages/components/TimePicker/useRangeTimeRender.tsx +6 -6
- package/src/packages/components/usePopup/PopupItem.tsx +3 -3
- package/src/packages/components/usePopup/trigger/useReferenceTrigger.tsx +51 -45
- package/src/packages/components/usePopupEditor/index.tsx +6 -9
- package/src/packages/components/useTooltip/index.tsx +5 -6
- package/src/packages/uses/useDragHorizontalScroll.ts +4 -5
- package/src/packages/uses/useFocusHandler.ts +25 -12
- 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 {
|
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
|
-
|
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
|
-
|
113
|
+
effects.push(hooks.onPopperClose.use(() => {
|
110
114
|
/*重置input绑定值,防止输入一半取消选择时显示不正确的文本*/
|
111
115
|
state.inputValue = selector.optionListHandler.getMatchLabel();
|
112
116
|
}));
|
113
117
|
|
114
|
-
|
118
|
+
effects.push(hooks.onPopperShow.use(() => {
|
115
119
|
state.inputValue = null;
|
116
120
|
}));
|
117
121
|
|
118
|
-
|
122
|
+
effects.push(hooks.onInputTextChange.use((val) => {
|
119
123
|
/*应用绑定值*/
|
120
124
|
state.inputValue = val;
|
121
125
|
}));
|
122
126
|
|
123
|
-
|
127
|
+
effects.push(hooks.onInputClear.use(() => {
|
124
128
|
/*点击clear的时候,应用输入绑定值*/
|
125
129
|
state.inputValue = null;
|
126
130
|
}));
|
127
131
|
|
128
|
-
return
|
132
|
+
return effects.clear;
|
129
133
|
}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import {iSliderPublicParams} from "./slider.utils";
|
2
|
-
import {
|
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 } =
|
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" ?
|
26
|
-
useModel(() => props.
|
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 =
|
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 =
|
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 {
|
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
|
16
|
+
const { effects, effectComputed } = createEffectsOfReaction();
|
18
17
|
|
19
|
-
const {
|
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 =
|
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 =
|
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 {
|
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 } =
|
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 =
|
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 } =
|
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 {
|
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 } =
|
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 =
|
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 {
|
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 } =
|
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 =
|
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
|
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
|
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
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
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
|
-
|
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
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
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
|
-
|
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 {
|
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 } =
|
16
|
+
const { effects, effectComputed, effectWatch } = createEffectsOfReaction();
|
18
17
|
|
19
18
|
const popup = createPopup(effects.push);
|
20
19
|
|
21
|
-
const reference =
|
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
|
-
|
94
|
-
|
95
|
-
|
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 {
|
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 } =
|
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
|
-
|
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
|
-
|
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
|
-
|
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 {
|
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 } =
|
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
|
-
|
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) {
|