plain-design 1.0.0-beta.82 → 1.0.0-beta.84
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 +2 -0
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +2 -2
- 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/Paragraph/index.tsx +46 -0
- package/src/packages/components/Paragraph/paragraph.scss +12 -0
- package/src/packages/components/ParagraphItem/index.tsx +21 -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 +5 -0
- package/src/packages/utils/plainDate.ts +2 -2
@@ -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不行*/}
|
@@ -0,0 +1,106 @@
|
|
1
|
+
import {createApplicationServiceComponent} from "../Application/service/createApplicationServiceComponent";
|
2
|
+
import {closeLoadingServiceHook, iLoadingServiceOption} from "./loading.service.utils";
|
3
|
+
import {computed, createHooks, getComponentCls, iHTMLDivElement, onBeforeUnmount, reactive, ref, useClasses, useRefs, useStyles} from "plain-design-composition";
|
4
|
+
import {ThemeStatus} from "../../uses/useStyle";
|
5
|
+
import {createTransitionHandler} from "../createTransitionHandler";
|
6
|
+
import './loading.service.scss';
|
7
|
+
import {delay} from "plain-utils/utils/delay";
|
8
|
+
import {createEffects} from "plain-utils/utils/createEffects";
|
9
|
+
|
10
|
+
export const LoadingService = createApplicationServiceComponent<iLoadingServiceOption>({
|
11
|
+
name: 'loading-service',
|
12
|
+
setup({ option, destroy }) {
|
13
|
+
|
14
|
+
const { refs, onRef } = useRefs({ el: iHTMLDivElement });
|
15
|
+
|
16
|
+
const isShow = ref(false);
|
17
|
+
const isOpen = ref(false);
|
18
|
+
|
19
|
+
const { effects: setupEffects } = createEffects();
|
20
|
+
const { effects: timerEffects } = createEffects();
|
21
|
+
|
22
|
+
const state = reactive({
|
23
|
+
option,
|
24
|
+
percent: 0,
|
25
|
+
});
|
26
|
+
|
27
|
+
const classes = useClasses(() => [
|
28
|
+
getComponentCls('loading-service'),
|
29
|
+
{
|
30
|
+
'loading-service-show': isShow.value
|
31
|
+
}
|
32
|
+
]);
|
33
|
+
|
34
|
+
const innerStyles = useStyles(style => {style.transform = `scaleX(${state.percent})`;});
|
35
|
+
|
36
|
+
const hooks = {
|
37
|
+
onOpen: createHooks(),
|
38
|
+
onClose: createHooks(),
|
39
|
+
};
|
40
|
+
|
41
|
+
const targetOption = computed(() => {
|
42
|
+
return {
|
43
|
+
...state.option,
|
44
|
+
status: state.option.status || ThemeStatus.primary,
|
45
|
+
maxTime: state.option.maxTime === undefined ? 60 * 1000 : state.option.maxTime
|
46
|
+
};
|
47
|
+
});
|
48
|
+
|
49
|
+
async function service(option: iLoadingServiceOption) {
|
50
|
+
state.option = option;
|
51
|
+
await delay(23);
|
52
|
+
isShow.value = true;
|
53
|
+
handleTransition();
|
54
|
+
await delay(78);
|
55
|
+
state.percent = 0.2;
|
56
|
+
|
57
|
+
if (targetOption.value.maxTime) {
|
58
|
+
const timer = setTimeout(() => hide(), targetOption.value.maxTime);
|
59
|
+
timerEffects.push(() => clearTimeout(timer));
|
60
|
+
}
|
61
|
+
|
62
|
+
const maxPercent = 0.9;
|
63
|
+
let spacePrefix = '0.0';
|
64
|
+
const interval = setInterval(() => {
|
65
|
+
const space = Number(`${spacePrefix}${Math.ceil(Math.random() * 10)}`);
|
66
|
+
state.percent = Math.min(maxPercent, state.percent + (space));
|
67
|
+
if (state.percent > 0.75 && spacePrefix.length === 3) {spacePrefix += '0';}
|
68
|
+
if (state.percent >= maxPercent) {clearInterval(interval);}
|
69
|
+
}, 500);
|
70
|
+
timerEffects.push(() => clearInterval(interval));
|
71
|
+
}
|
72
|
+
|
73
|
+
const hide = async () => {
|
74
|
+
state.percent = 1;
|
75
|
+
timerEffects.clear();
|
76
|
+
await delay(150);
|
77
|
+
isShow.value = false;
|
78
|
+
handleTransition();
|
79
|
+
};
|
80
|
+
|
81
|
+
const handleTransition = createTransitionHandler({
|
82
|
+
getTransitionElement: () => refs.el,
|
83
|
+
isShow, isOpen,
|
84
|
+
onOpen: () => hooks.onOpen.exec(undefined),
|
85
|
+
onClose: () => hooks.onClose.exec(undefined),
|
86
|
+
});
|
87
|
+
|
88
|
+
setupEffects.push(closeLoadingServiceHook.use(id => {(!id || (id === state.option.id)) && (hide());}));
|
89
|
+
setupEffects.push(hooks.onClose.use(() => {destroy();}));
|
90
|
+
|
91
|
+
onBeforeUnmount(setupEffects.clear);
|
92
|
+
|
93
|
+
return {
|
94
|
+
refer: {
|
95
|
+
service,
|
96
|
+
isShow,
|
97
|
+
isOpen,
|
98
|
+
},
|
99
|
+
render: () => (
|
100
|
+
<div ref={onRef.el} className={classes.value} data-service-id={state.option.id}>
|
101
|
+
<div className="loading-service-inner" style={innerStyles.value}/>
|
102
|
+
</div>
|
103
|
+
)
|
104
|
+
};
|
105
|
+
},
|
106
|
+
});
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import {closeLoadingServiceHook, iLoadingServiceOption} from "./loading.service.utils";
|
2
|
+
import {createApplicationService} from "../Application/service/createApplicationService";
|
3
|
+
import {createApplicationServiceManager} from "../Application/service/createApplicationServiceManager";
|
4
|
+
import {LoadingService} from "./LoadingService";
|
5
|
+
import {createCounter} from "plain-utils/utils/createCounter";
|
6
|
+
|
7
|
+
interface iLoadingServiceFunction {
|
8
|
+
(option?: iLoadingServiceOption): () => void;
|
9
|
+
}
|
10
|
+
|
11
|
+
const nextLoadingId = createCounter('loading');
|
12
|
+
|
13
|
+
export const useLoading = createApplicationService(
|
14
|
+
'loading',
|
15
|
+
createApplicationServiceManager({ name: 'loading', Service: LoadingService }),
|
16
|
+
(getManager) => {
|
17
|
+
|
18
|
+
const service: iLoadingServiceFunction = (_option) => {
|
19
|
+
const option: iLoadingServiceOption = _option || {};
|
20
|
+
!option.id && (option.id = nextLoadingId());
|
21
|
+
|
22
|
+
getManager().then(async manager => {await manager.service(option);});
|
23
|
+
|
24
|
+
return () => closeLoadingServiceHook.exec(option!.id!);
|
25
|
+
};
|
26
|
+
|
27
|
+
return { $loading: service };
|
28
|
+
},
|
29
|
+
);
|
30
|
+
|
31
|
+
export default useLoading;
|
@@ -0,0 +1,25 @@
|
|
1
|
+
@include comp(loading-service) {
|
2
|
+
position: fixed;
|
3
|
+
top: 0;
|
4
|
+
left: 0;
|
5
|
+
right: 0;
|
6
|
+
height: 2px;
|
7
|
+
transition: all ease 300ms;
|
8
|
+
|
9
|
+
&:not(.loading-service-show) {
|
10
|
+
opacity: 0;
|
11
|
+
}
|
12
|
+
|
13
|
+
&.loading-service-show {
|
14
|
+
opacity: 1;
|
15
|
+
}
|
16
|
+
|
17
|
+
.loading-service-inner {
|
18
|
+
position: absolute;
|
19
|
+
inset: 0;
|
20
|
+
height: 100%;
|
21
|
+
background-color: plv(primary-6);
|
22
|
+
transition: all ease 500ms;
|
23
|
+
transform-origin: top left;
|
24
|
+
}
|
25
|
+
}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import {ThemeStatus} from "../../uses/useStyle";
|
2
|
+
import {createHooks} from "plain-design-composition";
|
3
|
+
|
4
|
+
export interface iLoadingServiceOption {
|
5
|
+
id?: string,
|
6
|
+
hold?: boolean,
|
7
|
+
status?: typeof ThemeStatus.TYPE,
|
8
|
+
color?: string,
|
9
|
+
maxTime?: number | null,
|
10
|
+
onClose?: () => void,
|
11
|
+
}
|
12
|
+
|
13
|
+
export const closeLoadingServiceHook = createHooks<(id?: string) => void>();
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
|
1
|
+
import {designComponent, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
|
2
2
|
import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
|
3
3
|
import Icon from "../Icon";
|
4
4
|
import './message.scss';
|
@@ -51,7 +51,9 @@ export const Message = designComponent({
|
|
51
51
|
let closeTimer: number | null = null;
|
52
52
|
!!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
|
53
53
|
|
54
|
-
|
54
|
+
onBeforeUnmount(
|
55
|
+
closeMessageServiceHook.use(id => {(!id || id === props.option.id) && close();})
|
56
|
+
);
|
55
57
|
|
56
58
|
return {
|
57
59
|
refer: {
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import './notice.scss';
|
2
|
-
import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
|
2
|
+
import {designComponent, getComponentCls, iMouseEvent, nextIndex, onBeforeUnmount, onMounted, PropType, useClasses} from "plain-design-composition";
|
3
3
|
import {closeNoticeServiceHook, iNoticeServiceOption} from "./noitice.service.utils";
|
4
4
|
import Icon from "../Icon";
|
5
5
|
|
@@ -47,7 +47,9 @@ export const Notice = designComponent({
|
|
47
47
|
let closeTimer: number | null = null;
|
48
48
|
!!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
|
49
49
|
|
50
|
-
|
50
|
+
onBeforeUnmount(
|
51
|
+
closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();})
|
52
|
+
);
|
51
53
|
|
52
54
|
return {
|
53
55
|
refer: {
|
package/src/packages/entry.tsx
CHANGED
@@ -74,6 +74,7 @@ export {ImageUploader} from './components/ImageUploader';
|
|
74
74
|
export {Upload} from './components/Upload';
|
75
75
|
export {$file} from './components/$file';
|
76
76
|
export {$image} from './components/$image';
|
77
|
+
export {$loading} from './components/$loading';
|
77
78
|
export {useTooltip} from './components/useTooltip';
|
78
79
|
export {i18n} from './components/i18n';
|
79
80
|
export {KeepAlive} from './components/KeepAlive';
|
@@ -121,6 +122,9 @@ export {PageCard} from './components/PageCard';
|
|
121
122
|
export {PageCardTitle} from './components/PageCardTitle';
|
122
123
|
export {PageCardContent} from './components/PageCardContent';
|
123
124
|
export {RollingNumber} from './components/RollingNumber';
|
125
|
+
export {Paragraph} from './components/Paragraph';
|
126
|
+
export {ParagraphItem} from './components/ParagraphItem';
|
127
|
+
export {ImagePreviewer} from './components/ImagePreviewer/ImagePreviewer';
|
124
128
|
|
125
129
|
export {VirtualTable} from './components/VirtualTable';
|
126
130
|
export {Table} from './components/Table';
|
@@ -273,6 +277,7 @@ export type{iRequestInterceptor} from './components/createRequestInterceptor';
|
|
273
277
|
export {createVirtualDraggier} from './components/createVirtualDraggier';
|
274
278
|
export {createWebDraggier} from './components/createWebDraggier';
|
275
279
|
export {createScrollDraggier} from './components/createScrollDraggier';
|
280
|
+
export {loadFile} from './components/loadFile'
|
276
281
|
|
277
282
|
// @ts-ignore
|
278
283
|
setComponentPrefix(globalComponentPrefix);
|
@@ -192,11 +192,11 @@ const parse = (str: string | undefined | null, format: string) => {
|
|
192
192
|
* @author 韦胜健
|
193
193
|
* @date 2021/1/18 10:30
|
194
194
|
*/
|
195
|
-
const today = (displayFormat
|
195
|
+
const today = (displayFormat = 'YYYY-MM-DD', valueFormat = 'YYYY-MM-DD') => {
|
196
196
|
return wrapDate(new Date(), { displayFormat, valueFormat });
|
197
197
|
};
|
198
198
|
|
199
|
-
const now = (displayFormat
|
199
|
+
const now = (displayFormat = 'YYYY-MM-DD HH:mm:ss', valueFormat = 'YYYY-MM-DD HH:mm:ss') => {
|
200
200
|
return wrapDate(new Date(), { displayFormat, valueFormat });
|
201
201
|
};
|
202
202
|
|