plain-design 1.0.0-beta.83 → 1.0.0-beta.85
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 +5 -4
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/$loading/index.tsx +3 -0
- package/src/packages/components/Application/service/createApplicationServiceManager.tsx +5 -2
- package/src/packages/components/Box/index.tsx +1 -0
- package/src/packages/components/Dialog/index.tsx +10 -20
- package/src/packages/components/PageRenderList/index.tsx +3 -3
- package/src/packages/components/ParagraphItem/index.tsx +1 -0
- package/src/packages/components/Table/table/use/useTableDraggier.row.tsx +18 -6
- package/src/packages/components/ThemeColorSelector/index.tsx +1 -1
- package/src/packages/components/ThemeLocaleSelector/index.tsx +1 -1
- package/src/packages/components/VirtualList/createVirtualDraggier.ts +2 -39
- package/src/packages/components/createAutoScrollManager/index.tsx +41 -0
- package/src/packages/components/createPlainAddressService/index.tsx +12 -6
- package/src/packages/components/createRequestInterceptor/index.ts +1 -1
- package/src/packages/components/createScrollDraggier/index.ts +2 -39
- package/src/packages/components/createTransitionHandler/index.ts +46 -0
- package/src/packages/components/loadFile/index.ts +20 -0
- package/src/packages/components/useDialog/DialogService.tsx +6 -6
- package/src/packages/components/useImage/ImageService.tsx +27 -4
- package/src/packages/components/useLoading/LoadingService.tsx +106 -0
- package/src/packages/components/useLoading/index.tsx +31 -0
- package/src/packages/components/useLoading/loading.service.scss +25 -0
- package/src/packages/components/useLoading/loading.service.utils.tsx +13 -0
- package/src/packages/components/useMessage/Message.tsx +4 -2
- package/src/packages/components/useNotice/Notice.tsx +4 -2
- package/src/packages/entry.tsx +3 -0
- package/src/packages/styles/global.import.scss +1 -1
- package/src/packages/utils/plainDate.ts +2 -2
package/package.json
CHANGED
@@ -84,8 +84,11 @@ export function createApplicationServiceManager<Option extends { hold?: boolean
|
|
84
84
|
option={item}
|
85
85
|
ref={onRefList(i)}
|
86
86
|
onDestroy={() => {
|
87
|
-
options.value.
|
88
|
-
|
87
|
+
const index = options.value.indexOf(item);
|
88
|
+
if (index > -1) {
|
89
|
+
options.value.splice(index, 1);
|
90
|
+
optionIds.splice(index, 1);
|
91
|
+
}
|
89
92
|
}}
|
90
93
|
onReady={() => serviceReadyObserver.onReady({ option: item, ins: refList[i] })}
|
91
94
|
/>
|
@@ -16,6 +16,7 @@ import {InnerTransition} from "../../utils/InnerTransition";
|
|
16
16
|
import {StyleProps, useStyle} from "../../uses/useStyle";
|
17
17
|
import {OpenController} from "../../utils/OpenController";
|
18
18
|
import {ClientZoom} from "../../utils/ClientZoom";
|
19
|
+
import {createTransitionHandler} from "../createTransitionHandler";
|
19
20
|
|
20
21
|
export const Dialog = designComponent({
|
21
22
|
name: '-dialog',
|
@@ -198,24 +199,13 @@ export const Dialog = designComponent({
|
|
198
199
|
* @author 韦胜健
|
199
200
|
* @date 2023/1/19 17:36
|
200
201
|
*/
|
201
|
-
const
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
if (!refs.content) {await delay();}
|
209
|
-
if (!refs.content) {return;}
|
210
|
-
const transitionDuration = Number(window.getComputedStyle(refs.content).transitionDuration.replace('s', '')) * 1000;
|
211
|
-
processState.timer = setTimeout(() => {
|
212
|
-
open.value = staticState.isShow;
|
213
|
-
staticState.isShow ? hooks.onOpen.exec(undefined) : hooks.onClose.exec(undefined);
|
214
|
-
processState.timer = null;
|
215
|
-
}, transitionDuration);
|
216
|
-
};
|
217
|
-
return process;
|
218
|
-
})();
|
202
|
+
const handleTransition = createTransitionHandler({
|
203
|
+
getTransitionElement: () => refs.content,
|
204
|
+
isOpen: open,
|
205
|
+
isShow: { get value() {return staticState.isShow;}, set value(newVal) {staticState.isShow = newVal;} },
|
206
|
+
onOpen: () => hooks.onOpen.exec(undefined),
|
207
|
+
onClose: () => hooks.onClose.exec(undefined),
|
208
|
+
});
|
219
209
|
|
220
210
|
/**
|
221
211
|
* 控制多次执行show的时候,只执行一次,避免派发多次onShow的情况
|
@@ -271,7 +261,7 @@ export const Dialog = designComponent({
|
|
271
261
|
model.value = true;
|
272
262
|
await hooks.onShow.exec(undefined);
|
273
263
|
staticState.isShow = true;
|
274
|
-
|
264
|
+
handleTransition();
|
275
265
|
showing.end();
|
276
266
|
},
|
277
267
|
hide: async () => {
|
@@ -289,7 +279,7 @@ export const Dialog = designComponent({
|
|
289
279
|
model.value = false;
|
290
280
|
await hooks.onHide.exec(undefined);
|
291
281
|
staticState.isShow = false;
|
292
|
-
|
282
|
+
handleTransition();
|
293
283
|
hiding.end();
|
294
284
|
},
|
295
285
|
confirm: throttle(async () => {
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {designComponent} from "plain-design-composition";
|
1
|
+
import {designComponent, onBeforeUnmount} from "plain-design-composition";
|
2
2
|
import {usePageRenderContext} from "../usePageRenderContext";
|
3
3
|
|
4
4
|
export const PageRenderList = designComponent({
|
@@ -9,11 +9,11 @@ export const PageRenderList = designComponent({
|
|
9
9
|
|
10
10
|
const pageRenderContext = usePageRenderContext();
|
11
11
|
|
12
|
-
pageRenderContext.renderHook.use({
|
12
|
+
onBeforeUnmount(pageRenderContext.renderHook.use({
|
13
13
|
separate: false,
|
14
14
|
processor: ({ list, render }) => {list.push({ render, key: '', seq: 1 });},
|
15
15
|
render: () => slots.default()
|
16
|
-
});
|
16
|
+
}));
|
17
17
|
|
18
18
|
return () => {
|
19
19
|
return pageRenderContext.renderHook.exec();
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import {getComponentCls, iMouseEvent, reactive} from "plain-design-composition";
|
2
|
-
import {useAutoScroll} from "../../../Scroll/useAutoScroll";
|
3
2
|
import {createEffects} from "plain-utils/utils/createEffects";
|
4
3
|
import VirtualTable from "../../../VirtualTable";
|
5
4
|
import {iTableHooks} from "../utils/createTableHooks";
|
@@ -10,6 +9,7 @@ import {addClass} from "plain-utils/dom/addClass";
|
|
10
9
|
import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
|
11
10
|
import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
|
12
11
|
import {ClientZoom} from "../../../ClientZoom";
|
12
|
+
import {createAutoScrollManager} from "../../../createAutoScrollManager";
|
13
13
|
|
14
14
|
export function useTableDraggierRow(
|
15
15
|
{
|
@@ -29,8 +29,11 @@ export function useTableDraggierRow(
|
|
29
29
|
model: { value: any[] | null | undefined }
|
30
30
|
}
|
31
31
|
) {
|
32
|
+
|
32
33
|
/*自动滚动*/
|
33
|
-
const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, })
|
34
|
+
/*const autoScroll = useAutoScroll({ getScroll: () => refs.virtual?.refs.scroll, vertical: true, });*/
|
35
|
+
|
36
|
+
const autoScrollManager = createAutoScrollManager(() => refs.virtual?.refs.scroll);
|
34
37
|
|
35
38
|
/*拖拽结束之后要清除的副作用*/
|
36
39
|
const { effects: draggierEffects } = createEffects();
|
@@ -180,13 +183,13 @@ export function useTableDraggierRow(
|
|
180
183
|
|
181
184
|
/*---------------------------------------初始化auto scroll-------------------------------------------*/
|
182
185
|
/*自动滚动*/
|
183
|
-
if (refs.virtual?.refs.scroll?.refs.wrapper) {
|
186
|
+
/*if (refs.virtual?.refs.scroll?.refs.wrapper) {
|
184
187
|
const { scrollHeight, offsetHeight } = refs.virtual.refs.scroll.refs.wrapper;
|
185
188
|
if (scrollHeight > offsetHeight) {
|
186
189
|
autoScroll.showHover();
|
187
190
|
draggierEffects.push(() => {autoScroll.hideHover();});
|
188
191
|
}
|
189
|
-
}
|
192
|
+
}*/
|
190
193
|
};
|
191
194
|
|
192
195
|
const start = (e: iMouseEvent, node: iTableNode) => {
|
@@ -222,16 +225,25 @@ export function useTableDraggierRow(
|
|
222
225
|
const durY = clientY - staticState.startY;
|
223
226
|
let top = staticState.startTop + durY;
|
224
227
|
const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
|
228
|
+
const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
|
229
|
+
const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
|
230
|
+
|
225
231
|
if (top < minTop) {
|
226
232
|
top = minTop;
|
227
233
|
} else {
|
228
|
-
const hostRect = move.staticState!.bodyHostEl.getBoundingClientRect();
|
229
|
-
const maxTop = hostRect.top + hostRect.height - numberState.bodyRowHeight - (staticState.data!.summaryTable?.clientHeight || 0);
|
230
234
|
if (top > maxTop) {
|
231
235
|
top = maxTop;
|
232
236
|
}
|
233
237
|
}
|
234
238
|
|
239
|
+
if (top == minTop) {
|
240
|
+
autoScrollManager.set('top');
|
241
|
+
} else if (top == maxTop) {
|
242
|
+
autoScrollManager.set('bottom');
|
243
|
+
} else {
|
244
|
+
autoScrollManager.set(null);
|
245
|
+
}
|
246
|
+
|
235
247
|
staticState.data!.cloneRowEl.style.top = `${top}px`;
|
236
248
|
if (!!e) {
|
237
249
|
prevClientY = clientY;
|
@@ -8,7 +8,7 @@ import DropdownOption from "../DropdownOption";
|
|
8
8
|
export const ThemeColorSelector = designComponent({
|
9
9
|
name: 'theme-color-selector',
|
10
10
|
inheritPropsType: Dropdown,
|
11
|
-
setup(
|
11
|
+
setup() {
|
12
12
|
|
13
13
|
const classes = useClassCache(() => [
|
14
14
|
getComponentCls('theme-selector'),
|
@@ -7,7 +7,7 @@ import './theme-locale-selector.scss';
|
|
7
7
|
|
8
8
|
export const ThemeLocaleSelector = designComponent({
|
9
9
|
name: 'theme-locale-selector',
|
10
|
-
setup(
|
10
|
+
setup() {
|
11
11
|
const classes = useClassCache(() => [
|
12
12
|
getComponentCls('theme-selector'),
|
13
13
|
getComponentCls('theme-locale-selector'),
|
@@ -10,6 +10,7 @@ import {createWebDraggier, iDraggierData} from "../../utils/createDraggier";
|
|
10
10
|
import {delay} from "plain-utils/utils/delay";
|
11
11
|
import {PlainScroll} from "../Scroll";
|
12
12
|
import {iVirtualList} from "./useVirtualList";
|
13
|
+
import {createAutoScrollManager} from "../createAutoScrollManager";
|
13
14
|
|
14
15
|
/**
|
15
16
|
* 创建虚拟列表的拖拽移动节点管理对象
|
@@ -40,45 +41,7 @@ export function createVirtualDraggier(
|
|
40
41
|
) {
|
41
42
|
|
42
43
|
/*管理自动滚动*/
|
43
|
-
const autoScrollManager = (
|
44
|
-
const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
|
45
|
-
|
46
|
-
const handler = {
|
47
|
-
top: () => {
|
48
|
-
getScroll()?.methods.autoScrollTop();
|
49
|
-
},
|
50
|
-
bottom: () => {
|
51
|
-
getScroll()?.methods.autoScrollBottom();
|
52
|
-
},
|
53
|
-
left: () => {
|
54
|
-
getScroll()?.methods.autoScrollLeft();
|
55
|
-
},
|
56
|
-
right: () => {
|
57
|
-
getScroll()?.methods.autoScrollRight();
|
58
|
-
},
|
59
|
-
stop: () => {
|
60
|
-
getScroll()?.methods.stopAutoScroll();
|
61
|
-
},
|
62
|
-
};
|
63
|
-
|
64
|
-
const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
|
65
|
-
const newVal = val;
|
66
|
-
const oldVal = _state.value;
|
67
|
-
if (newVal == oldVal) {
|
68
|
-
return;
|
69
|
-
}
|
70
|
-
_state.value = val;
|
71
|
-
|
72
|
-
if (!oldVal && !!newVal) {
|
73
|
-
handler[newVal]();
|
74
|
-
} else {
|
75
|
-
handler.stop();
|
76
|
-
}
|
77
|
-
};
|
78
|
-
const get = () => _state.value;
|
79
|
-
const stop = () => getScroll()?.methods.stopAutoScroll();
|
80
|
-
return { get, set, stop };
|
81
|
-
})();
|
44
|
+
const autoScrollManager = createAutoScrollManager(getScroll);
|
82
45
|
|
83
46
|
/*静态变量*/
|
84
47
|
const dragStaticState = createDefaultDraggierStaticState();
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import {PlainScroll} from "../Scroll";
|
2
|
+
|
3
|
+
export function createAutoScrollManager(getScroll: () => PlainScroll | null | undefined) {
|
4
|
+
const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
|
5
|
+
|
6
|
+
const handler = {
|
7
|
+
top: () => {
|
8
|
+
getScroll()?.methods.autoScrollTop();
|
9
|
+
},
|
10
|
+
bottom: () => {
|
11
|
+
getScroll()?.methods.autoScrollBottom();
|
12
|
+
},
|
13
|
+
left: () => {
|
14
|
+
getScroll()?.methods.autoScrollLeft();
|
15
|
+
},
|
16
|
+
right: () => {
|
17
|
+
getScroll()?.methods.autoScrollRight();
|
18
|
+
},
|
19
|
+
stop: () => {
|
20
|
+
getScroll()?.methods.stopAutoScroll();
|
21
|
+
},
|
22
|
+
};
|
23
|
+
|
24
|
+
const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
|
25
|
+
const newVal = val;
|
26
|
+
const oldVal = _state.value;
|
27
|
+
if (newVal == oldVal) {
|
28
|
+
return;
|
29
|
+
}
|
30
|
+
_state.value = val;
|
31
|
+
|
32
|
+
if (!oldVal && !!newVal) {
|
33
|
+
handler[newVal]();
|
34
|
+
} else {
|
35
|
+
handler.stop();
|
36
|
+
}
|
37
|
+
};
|
38
|
+
const get = () => _state.value;
|
39
|
+
const stop = () => getScroll()?.methods.stopAutoScroll();
|
40
|
+
return { get, set, stop };
|
41
|
+
}
|
@@ -8,9 +8,15 @@ export function createPlainAddressService(
|
|
8
8
|
{
|
9
9
|
http,
|
10
10
|
getAddress,
|
11
|
+
getAddressByCodes,
|
12
|
+
getAddressByParentCodes,
|
13
|
+
getAddressByLabel,
|
11
14
|
}: {
|
12
15
|
http: iHttp,
|
13
16
|
getAddress: () => Promise<iAddressSyncMeta[]>,
|
17
|
+
getAddressByCodes?: (codes: string[]) => Promise<iAddressSyncMeta[]>
|
18
|
+
getAddressByParentCodes?: (codes: string[]) => Promise<iAddressSyncMeta[]>
|
19
|
+
getAddressByLabel?: (label: string, type?: typeof eAddressTypeEnum.TYPE) => Promise<iAddressSyncMeta[]>
|
14
20
|
}
|
15
21
|
) {
|
16
22
|
return createAddressService({
|
@@ -32,7 +38,7 @@ export function createPlainAddressService(
|
|
32
38
|
return findAddressList(0);
|
33
39
|
},*/
|
34
40
|
getAddress,
|
35
|
-
getAddressByCodes: async (codes) => {
|
41
|
+
getAddressByCodes: getAddressByCodes || (async (codes) => {
|
36
42
|
const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
|
37
43
|
all: true,
|
38
44
|
orders: { field: 'code', desc: false },
|
@@ -44,8 +50,8 @@ export function createPlainAddressService(
|
|
44
50
|
type: (Deep2Type)[i.deep as 1],
|
45
51
|
parentCode: i.parentCode,
|
46
52
|
}));
|
47
|
-
},
|
48
|
-
getAddressByParentCodes: async (codes) => {
|
53
|
+
}),
|
54
|
+
getAddressByParentCodes: getAddressByParentCodes || (async (codes) => {
|
49
55
|
const nowTime = Date.now();
|
50
56
|
const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
|
51
57
|
all: true,
|
@@ -62,8 +68,8 @@ export function createPlainAddressService(
|
|
62
68
|
type: (Deep2Type)[i.deep as 1],
|
63
69
|
parentCode: i.parentCode,
|
64
70
|
}));
|
65
|
-
},
|
66
|
-
getAddressByLabel: async (label: string, type?: typeof eAddressTypeEnum.TYPE) => {
|
71
|
+
}),
|
72
|
+
getAddressByLabel: getAddressByLabel || (async (label: string, type?: typeof eAddressTypeEnum.TYPE) => {
|
67
73
|
const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
|
68
74
|
all: true,
|
69
75
|
orders: { field: 'code', desc: false },
|
@@ -78,7 +84,7 @@ export function createPlainAddressService(
|
|
78
84
|
type: (Deep2Type)[i.deep as 1],
|
79
85
|
parentCode: i.parentCode,
|
80
86
|
}));
|
81
|
-
},
|
87
|
+
}),
|
82
88
|
});
|
83
89
|
}
|
84
90
|
|
@@ -8,6 +8,7 @@ import {delay} from "plain-utils/utils/delay";
|
|
8
8
|
import {PlainScroll} from "../Scroll";
|
9
9
|
import {createDefaultDraggierReactiveState, createDefaultDraggierStaticState, iVirtualDraggierHandler} from "../VirtualList/createVirtualDraggier";
|
10
10
|
import {iVirtualNode} from "../VirtualList/useVirtualList";
|
11
|
+
import {createAutoScrollManager} from "../createAutoScrollManager";
|
11
12
|
|
12
13
|
/**
|
13
14
|
* 创建虚拟列表的拖拽移动节点管理对象
|
@@ -38,45 +39,7 @@ export function createScrollDraggier(
|
|
38
39
|
) {
|
39
40
|
|
40
41
|
/*管理自动滚动*/
|
41
|
-
const autoScrollManager = (
|
42
|
-
const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
|
43
|
-
|
44
|
-
const handler = {
|
45
|
-
top: () => {
|
46
|
-
getScroll()?.methods.autoScrollTop();
|
47
|
-
},
|
48
|
-
bottom: () => {
|
49
|
-
getScroll()?.methods.autoScrollBottom();
|
50
|
-
},
|
51
|
-
left: () => {
|
52
|
-
getScroll()?.methods.autoScrollLeft();
|
53
|
-
},
|
54
|
-
right: () => {
|
55
|
-
getScroll()?.methods.autoScrollRight();
|
56
|
-
},
|
57
|
-
stop: () => {
|
58
|
-
getScroll()?.methods.stopAutoScroll();
|
59
|
-
},
|
60
|
-
};
|
61
|
-
|
62
|
-
const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
|
63
|
-
const newVal = val;
|
64
|
-
const oldVal = _state.value;
|
65
|
-
if (newVal == oldVal) {
|
66
|
-
return;
|
67
|
-
}
|
68
|
-
_state.value = val;
|
69
|
-
|
70
|
-
if (!oldVal && !!newVal) {
|
71
|
-
handler[newVal]();
|
72
|
-
} else {
|
73
|
-
handler.stop();
|
74
|
-
}
|
75
|
-
};
|
76
|
-
const get = () => _state.value;
|
77
|
-
const stop = () => getScroll()?.methods.stopAutoScroll();
|
78
|
-
return { get, set, stop };
|
79
|
-
})();
|
42
|
+
const autoScrollManager = createAutoScrollManager(getScroll);
|
80
43
|
|
81
44
|
/*静态变量*/
|
82
45
|
const dragStaticState = {
|
@@ -0,0 +1,46 @@
|
|
1
|
+
import {delay} from "plain-utils/utils/delay";
|
2
|
+
|
3
|
+
/**
|
4
|
+
* 创建一个transition管理器
|
5
|
+
* @author 韦胜健
|
6
|
+
* @date 2024.7.1 13:39
|
7
|
+
*/
|
8
|
+
export function createTransitionHandler(
|
9
|
+
{
|
10
|
+
getTransitionElement,
|
11
|
+
isShow,
|
12
|
+
isOpen,
|
13
|
+
onOpen,
|
14
|
+
onClose,
|
15
|
+
}: {
|
16
|
+
/*获取执行transition动画的元素对象*/
|
17
|
+
getTransitionElement: () => HTMLElement | null | undefined,
|
18
|
+
/*当前是否显示,此时过度动画准备开始*/
|
19
|
+
isShow: { value: boolean },
|
20
|
+
/*当前是否已经显示/隐藏,此时过度动画已经结束*/
|
21
|
+
isOpen: { value: boolean },
|
22
|
+
/*已经显示触发动作*/
|
23
|
+
onOpen?: () => void,
|
24
|
+
/*已经隐藏触发动作*/
|
25
|
+
onClose?: () => void,
|
26
|
+
}
|
27
|
+
): (() => void) {
|
28
|
+
const processState = { timer: null as any };
|
29
|
+
const process = async () => {
|
30
|
+
if (processState.timer != null) {
|
31
|
+
clearTimeout(processState.timer);
|
32
|
+
processState.timer = null;
|
33
|
+
}
|
34
|
+
/*等Transition相应show属性之后,再处理,不然读取的transitionDuration为0*/
|
35
|
+
await delay(23);
|
36
|
+
const el = getTransitionElement();
|
37
|
+
if (!el) {return;}
|
38
|
+
const transitionDuration = Number(window.getComputedStyle(el).transitionDuration.replace('s', '')) * 1000;
|
39
|
+
processState.timer = setTimeout(() => {
|
40
|
+
isOpen.value = isShow.value;
|
41
|
+
isShow.value ? onOpen?.() : onClose?.();
|
42
|
+
processState.timer = null;
|
43
|
+
}, transitionDuration);
|
44
|
+
};
|
45
|
+
return process;
|
46
|
+
}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
export function loadFile<T = any>(filePath: string, globalName?: string, Win?: Window): Promise<T> {
|
2
|
+
const _window = Win || window;
|
3
|
+
return new Promise<T>((resolve, reject) => {
|
4
|
+
if (/\.js(\?.*)?/.test(filePath)) {
|
5
|
+
const el = _window.document.createElement('script') as HTMLScriptElement;
|
6
|
+
el.setAttribute('src', filePath);
|
7
|
+
el.onload = () => resolve(!globalName ? undefined : (_window as any)[globalName]);
|
8
|
+
el.onerror = reject;
|
9
|
+
_window.document.body.appendChild(el);
|
10
|
+
} else if (/\.css(\?.*)?/.test(filePath)) {
|
11
|
+
const el = _window.document.createElement('link') as HTMLLinkElement;
|
12
|
+
el.setAttribute('rel', 'stylesheet');
|
13
|
+
el.setAttribute('type', 'text/css');
|
14
|
+
el.setAttribute('href', filePath);
|
15
|
+
el.onload = () => resolve(undefined as any);
|
16
|
+
el.onerror = reject;
|
17
|
+
_window.document.body.appendChild(el);
|
18
|
+
}
|
19
|
+
});
|
20
|
+
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
|
2
2
|
import {closeDialogServiceHook, destroyDialogServiceHook, dialogCustomOptionKeys, DialogServiceEditType, iDialogServiceCustomOption, iDialogServiceOption} from "./dialog.service.utils";
|
3
|
-
import {computed, createHooks, getComponentCls, reactive, ref, toRaw, useRefs} from "plain-design-composition";
|
3
|
+
import {computed, createHooks, getComponentCls, onBeforeUnmount, reactive, ref, toRaw, useRefs} from "plain-design-composition";
|
4
4
|
import {Dialog} from "../Dialog";
|
5
5
|
import {i18n} from "../../i18n";
|
6
6
|
import {DialogAlign, DialogCloseType, DialogPositions} from "../Dialog/utils/dialog.utils";
|
@@ -81,14 +81,14 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
81
81
|
* @author 韦胜健
|
82
82
|
* @date 2022.5.4 21:46
|
83
83
|
*/
|
84
|
-
closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());});
|
84
|
+
onBeforeUnmount(closeDialogServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());}));
|
85
85
|
|
86
86
|
/**
|
87
87
|
* 销毁dialog service观察者对象,用来销毁hold类型的服务
|
88
88
|
* @author 韦胜健
|
89
89
|
* @date 2022/6/2 18:00
|
90
90
|
*/
|
91
|
-
destroyDialogServiceHook.use(opt => {
|
91
|
+
onBeforeUnmount(destroyDialogServiceHook.use(opt => {
|
92
92
|
if (opt === state.option || opt === toRaw(state.option)) {
|
93
93
|
if (!isOpen.value) {
|
94
94
|
/*如果已经关闭,则直接销毁*/
|
@@ -102,13 +102,13 @@ export const DialogService = createApplicationServiceComponent<iDialogServiceOpt
|
|
102
102
|
});
|
103
103
|
}
|
104
104
|
}
|
105
|
-
});
|
105
|
+
}));
|
106
106
|
|
107
|
-
onClose.use(() => {
|
107
|
+
onBeforeUnmount(onClose.use(() => {
|
108
108
|
targetOption.value.dialogProps.onClose?.();
|
109
109
|
/*如果服务为持有服务,则关闭时不销毁*/
|
110
110
|
!targetOption.value.customOption.hold && destroy();
|
111
|
-
});
|
111
|
+
}));
|
112
112
|
|
113
113
|
return {
|
114
114
|
refer: {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import {createCounter} from "plain-utils/utils/createCounter";
|
2
2
|
import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
|
3
|
-
import {computed, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useStyles} from "plain-design-composition";
|
3
|
+
import {computed, createHooks, getComponentCls, iHTMLDivElement, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, Portal, reactive, ref, useRefs, useStyles} from "plain-design-composition";
|
4
4
|
import {KeyboardService} from "../KeyboardService";
|
5
5
|
import {Image} from "../Image";
|
6
6
|
import {Tooltip} from "../Tooltip";
|
@@ -9,6 +9,7 @@ import i18n from "../i18n";
|
|
9
9
|
import Transition from "../Transition";
|
10
10
|
import {APPLICATION_SERVICE_CONTAINER_CLASS} from "../Application/utils/application.utils";
|
11
11
|
import {ClientZoom} from "../ClientZoom";
|
12
|
+
import {createTransitionHandler} from "../createTransitionHandler";
|
12
13
|
|
13
14
|
const nextCount = createCounter("image_preview");
|
14
15
|
|
@@ -22,9 +23,17 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
|
|
22
23
|
name: 'image-preview-service',
|
23
24
|
setup: ({ option, destroy }) => {
|
24
25
|
|
26
|
+
const { refs, onRef } = useRefs({ el: iHTMLDivElement });
|
27
|
+
|
25
28
|
const step = { scale: 0.2, rotate: 90, };
|
26
29
|
|
27
30
|
const isShow = ref(false);
|
31
|
+
const isOpen = ref(false);
|
32
|
+
|
33
|
+
const hooks = {
|
34
|
+
onOpen: createHooks(),
|
35
|
+
onClose: createHooks(),
|
36
|
+
};
|
28
37
|
|
29
38
|
const state = reactive({
|
30
39
|
option,
|
@@ -65,6 +74,7 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
|
|
65
74
|
await state.mounted;
|
66
75
|
isShow.value = true;
|
67
76
|
state.zIndex = nextIndex();
|
77
|
+
handleTransition();
|
68
78
|
|
69
79
|
setTimeout(() => {
|
70
80
|
const activeElement = document.activeElement as HTMLElement;
|
@@ -72,7 +82,10 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
|
|
72
82
|
});
|
73
83
|
};
|
74
84
|
|
75
|
-
const hide = () =>
|
85
|
+
const hide = () => {
|
86
|
+
isShow.value = false;
|
87
|
+
handleTransition();
|
88
|
+
};
|
76
89
|
|
77
90
|
const resetAdjust = () => state.adjust = {
|
78
91
|
scale: null as null | number, // 当前图片缩放大小
|
@@ -204,18 +217,28 @@ export const ImageService = createApplicationServiceComponent<ImageServicePrevie
|
|
204
217
|
onClickMask: hide,
|
205
218
|
};
|
206
219
|
|
220
|
+
const handleTransition = createTransitionHandler({
|
221
|
+
getTransitionElement: () => refs.el,
|
222
|
+
isOpen,
|
223
|
+
isShow,
|
224
|
+
onOpen: () => hooks.onOpen.exec(undefined),
|
225
|
+
onClose: () => hooks.onClose.exec(undefined),
|
226
|
+
});
|
227
|
+
|
207
228
|
onBeforeUnmount(KeyboardService.listen({ esc: () => {isShow.value && hide();} }));
|
208
229
|
|
230
|
+
onBeforeUnmount(hooks.onClose.use(() => {destroy();}));
|
231
|
+
|
209
232
|
return {
|
210
233
|
refer: {
|
211
234
|
isShow,
|
212
|
-
isOpen
|
235
|
+
isOpen,
|
213
236
|
service,
|
214
237
|
},
|
215
238
|
render: () => (
|
216
239
|
<Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
|
217
240
|
<Transition name={getComponentCls('image-preview')} show={isShow.value}>
|
218
|
-
<div className={getComponentCls('image-preview-service')} style={{ zIndex: state.zIndex }} onClick={handler.onClickMask}>
|
241
|
+
<div ref={onRef.el} className={getComponentCls('image-preview-service')} style={{ zIndex: state.zIndex }} onClick={handler.onClickMask}>
|
219
242
|
<div className="image-preview-service-img-wrapper">
|
220
243
|
<Transition switch name={getComponentCls('transition-scale')} key={state.count}>
|
221
244
|
{/*不加这个div,switch动画没有效果,真是奇怪。Button可以,Card可以,就Image不行*/}
|