plain-design 1.0.0-beta.106 → 1.0.0-beta.108
Sign up to get free protection for your applications and to get access to all the features.
- 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/CascadePanel/index.tsx +1 -1
- 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
@@ -1,5 +1,6 @@
|
|
1
|
-
import {
|
1
|
+
import {globalWatchEffect, onBeforeUnmount, reactive} from "@peryl/react-compose";
|
2
2
|
import {toArray} from '@peryl/utils/toArray';
|
3
|
+
import {createEffects, iEffects} from "@peryl/utils/createEffects";
|
3
4
|
|
4
5
|
/**
|
5
6
|
* 得到元素(input,textarea,editable div,button)的focus状态,如果是多个元素,则元素在失去焦点之后的100ms之后才会派发blur事件,否则期间任何一个元素获取焦点,都会取消派发blur事件这个动作
|
@@ -10,19 +11,26 @@ export function useFocusHandler(
|
|
10
11
|
{
|
11
12
|
getEls,
|
12
13
|
onFocus,
|
13
|
-
onBlur
|
14
|
+
onBlur,
|
15
|
+
effects: setupEffects
|
14
16
|
}: {
|
15
17
|
getEls: () => (HTMLElement | null | undefined) | (HTMLElement | null | undefined)[],
|
16
18
|
onFocus: (e: FocusEvent) => void,
|
17
19
|
onBlur: (e: FocusEvent) => void,
|
20
|
+
effects?: iEffects,
|
18
21
|
}
|
19
22
|
) {
|
20
23
|
|
24
|
+
if (!setupEffects) {
|
25
|
+
setupEffects = createEffects().effects;
|
26
|
+
onBeforeUnmount(() => setupEffects!.clear());
|
27
|
+
}
|
28
|
+
|
21
29
|
const isFocus = reactive({ value: false });
|
30
|
+
|
22
31
|
let blurTimer: any = null;
|
23
32
|
|
24
33
|
const handler = {
|
25
|
-
elements: [] as (HTMLElement | null | undefined)[],
|
26
34
|
onFocus: (e: FocusEvent) => {
|
27
35
|
if (!!blurTimer) {
|
28
36
|
clearTimeout(blurTimer);
|
@@ -41,20 +49,25 @@ export function useFocusHandler(
|
|
41
49
|
},
|
42
50
|
};
|
43
51
|
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
handler.elements.forEach(el => {
|
52
|
+
const { effects } = createEffects();
|
53
|
+
|
54
|
+
setupEffects.push(globalWatchEffect(() => {
|
55
|
+
effects.clear();
|
56
|
+
|
57
|
+
const elements = toArray(getEls());
|
58
|
+
elements.forEach(el => {
|
52
59
|
if (!el) {return;}
|
53
60
|
el.addEventListener('focus', handler.onFocus);
|
54
61
|
el.addEventListener('blur', handler.onBlur);
|
55
62
|
});
|
63
|
+
effects.push(() => elements.forEach(el => {
|
64
|
+
if (!el) {return;}
|
65
|
+
el.removeEventListener('focus', handler.onFocus);
|
66
|
+
el.removeEventListener('blur', handler.onBlur);
|
67
|
+
}));
|
68
|
+
}));
|
56
69
|
|
57
|
-
|
70
|
+
setupEffects.push(() => effects.clear());
|
58
71
|
|
59
72
|
return { isFocus };
|
60
73
|
}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import {UseModelConfig} from "@peryl/react-compose/src/use/useModel";
|
2
2
|
import {useModel} from "@peryl/react-compose";
|
3
3
|
import {createEnum} from "@peryl/utils/createEnum";
|
4
|
+
import {iEffects} from "@peryl/utils/createEffects";
|
4
5
|
|
5
6
|
/**
|
6
7
|
* 多选的时候值的类型
|
@@ -23,6 +24,7 @@ export function useMultipleModel<T>(
|
|
23
24
|
emitter: (val: T) => void,
|
24
25
|
props: { valueType?: typeof eMultipleValueType.TYPE, multiple?: boolean },
|
25
26
|
config?: UseModelConfig<T>,
|
27
|
+
effects?: iEffects
|
26
28
|
) {
|
27
29
|
|
28
30
|
/*最后一次emit的值*/
|
@@ -59,5 +61,5 @@ export function useMultipleModel<T>(
|
|
59
61
|
}
|
60
62
|
emitter(val);
|
61
63
|
}
|
62
|
-
}, config);
|
64
|
+
}, config, effects);
|
63
65
|
}
|