plain-design 1.0.0-beta.27 → 1.0.0-beta.29
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/plain-design.commonjs.min.js +1 -1
- package/dist/plain-design.min.css +1 -1
- package/dist/plain-design.min.js +1 -1
- package/dist/report.html +2 -2
- package/package.json +2 -2
- package/src/packages/components/CarouselGroup/carousel.scss +2 -2
- package/src/packages/components/Dialog/index.tsx +2 -2
- package/src/packages/components/Popup/index.tsx +3 -3
- package/src/packages/components/VirtualList/useVirtualList.tsx +2 -1
- package/src/packages/components/usePopup/PopupItem.tsx +34 -25
- package/src/packages/components/usePopup/usePopupManager.tsx +1 -1
- package/src/packages/components/usePopup/utils/popup.utils.ts +1 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "plain-design",
|
3
|
-
"version": "1.0.0-beta.
|
3
|
+
"version": "1.0.0-beta.29",
|
4
4
|
"description": "",
|
5
5
|
"main": "dist/plain-design.min.js",
|
6
6
|
"module": "dist/plain-design.commonjs.min.js",
|
@@ -68,7 +68,7 @@
|
|
68
68
|
"fork-ts-checker-webpack-plugin": "^6.2.4",
|
69
69
|
"mini-css-extract-plugin": "^1.4.1",
|
70
70
|
"mockjs": "^1.1.0",
|
71
|
-
"plain-design-composition": "^0.0.
|
71
|
+
"plain-design-composition": "^0.0.180",
|
72
72
|
"postcss": "^8.2.13",
|
73
73
|
"postcss-loader": "^4.2.0",
|
74
74
|
"qs": "^6.10.1",
|
@@ -40,8 +40,8 @@
|
|
40
40
|
transition: background-color 300ms linear;
|
41
41
|
cursor: pointer;
|
42
42
|
pointer-events: auto;
|
43
|
-
background-color: rgba(#
|
44
|
-
color:
|
43
|
+
background-color: rgba(#000000, 0.2);
|
44
|
+
color: white;
|
45
45
|
width: 36px;
|
46
46
|
height: 36px;
|
47
47
|
border-radius: 36px;
|
@@ -254,9 +254,9 @@ export const Dialog = designComponent({
|
|
254
254
|
showing.start();
|
255
255
|
if (!state.init) {
|
256
256
|
state.init = true;
|
257
|
-
await delay();
|
257
|
+
await delay(23);
|
258
258
|
if (!refs.content) {
|
259
|
-
await delay();
|
259
|
+
await delay(23);
|
260
260
|
}
|
261
261
|
} else {
|
262
262
|
await nextTick();
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import {ComponentPropsType,
|
1
|
+
import {ComponentPropsType, computed, designComponent, Fragment, getComponentCls, onBeforeUnmount, PropType, reactive, RenderNode, useClassCache, useModel, useStyleCache, watch, watchEffect} from "plain-design-composition";
|
2
2
|
import {iPopupAnimation, iPopupCustomOption, iPopupDefaultOption, iPopupPlacement, iPopupTrigger, iPopupUseOption, PopupItemProvide} from "../usePopup/utils/popup.utils";
|
3
3
|
import {Reference} from "../Reference";
|
4
4
|
import {usePopup} from "../usePopup";
|
@@ -34,7 +34,7 @@ export const Popup = designComponent({
|
|
34
34
|
beforeHide: { type: Function as PropType<iPopupCustomOption['beforeHide']> }, // 隐藏之前处理动作,返回false则阻止隐藏
|
35
35
|
destroyOnClose: { type: Boolean, default: true, }, // 是否在关闭的时候销毁内容
|
36
36
|
type: { type: String as PropType<iPopupDefaultOption['type']> }, // 类型,在打开一个popup的时候,会将同类型的popup自动关闭
|
37
|
-
|
37
|
+
appendToBody: { type: Boolean as PropType<iPopupDefaultOption['appendToBody']>, default: true }, // 挂载到某个dom节点下
|
38
38
|
offset: { type: Number as PropType<iPopupDefaultOption['offset']> }, // 在direction方向上的距离
|
39
39
|
autoSwitchDirection: { type: Boolean as PropType<iPopupDefaultOption['autoSwitchDirection']>, default: true },// 当空间不够时,是否自动切换direction
|
40
40
|
size: { type: String as PropType<iPopupDefaultOption['size']> }, // popup内容尺寸
|
@@ -230,7 +230,7 @@ export const Popup = designComponent({
|
|
230
230
|
noPadding: props.noPadding,
|
231
231
|
destroyOnClose: props.destroyOnClose,
|
232
232
|
type: props.type,
|
233
|
-
|
233
|
+
appendToBody: props.appendToBody,
|
234
234
|
offset: props.offset,
|
235
235
|
autoSwitchDirection: props.autoSwitchDirection,
|
236
236
|
refreshOnScroll: props.refreshOnScroll,
|
@@ -291,7 +291,8 @@ export function useVirtualList(
|
|
291
291
|
// !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
|
292
292
|
});
|
293
293
|
|
294
|
-
onMounted(() => {
|
294
|
+
onMounted(async () => {
|
295
|
+
await delay(23);
|
295
296
|
let hostHeight = refs.scroll!.refs.host!.offsetHeight;
|
296
297
|
const headEl = refs.scroll!.refs.host!.querySelector('[data-virtual-head]') as undefined | HTMLDivElement;
|
297
298
|
const footEl = refs.scroll!.refs.host!.querySelector('[data-virtual-foot]') as undefined | HTMLDivElement;
|
@@ -370,35 +370,44 @@ export const PopupItem = designComponent({
|
|
370
370
|
PopupItemProvide.provide(state);
|
371
371
|
|
372
372
|
return () => (
|
373
|
-
!!state.option.reference &&
|
374
|
-
|
375
|
-
|
376
|
-
ref={onRef.popup}
|
377
|
-
className={classes.value}
|
378
|
-
data-popup-show={String(state.isShow)}
|
379
|
-
onTransitionEnd={handler.onTransitionend}
|
380
|
-
style={styles.value}
|
381
|
-
onClick={handler.onClickPopup}
|
382
|
-
>
|
383
|
-
{/*slide的情况下,arrow得放body外面,避免被overflow:hidden*/}
|
384
|
-
{!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
|
385
|
-
<div
|
386
|
-
ref={onRef.body}
|
387
|
-
className="popup-item-body"
|
388
|
-
>
|
389
|
-
{/*scale的情况下,arrow得放body里边,一遍能够继承body的transform:scale*/}
|
390
|
-
{!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
|
373
|
+
!!state.option.reference && (
|
374
|
+
(() => {
|
375
|
+
const content = (
|
391
376
|
<div
|
392
|
-
|
393
|
-
|
394
|
-
className=
|
377
|
+
data-id={state.option.id}
|
378
|
+
ref={onRef.popup}
|
379
|
+
className={classes.value}
|
380
|
+
data-popup-show={String(state.isShow)}
|
395
381
|
onTransitionEnd={handler.onTransitionend}
|
382
|
+
style={styles.value}
|
383
|
+
onClick={handler.onClickPopup}
|
396
384
|
>
|
397
|
-
{
|
385
|
+
{/*slide的情况下,arrow得放body外面,避免被overflow:hidden*/}
|
386
|
+
{!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
|
387
|
+
<div
|
388
|
+
ref={onRef.body}
|
389
|
+
className="popup-item-body"
|
390
|
+
>
|
391
|
+
{/*scale的情况下,arrow得放body里边,一遍能够继承body的transform:scale*/}
|
392
|
+
{!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
|
393
|
+
<div
|
394
|
+
ref={onRef.content}
|
395
|
+
style={contentStyles.value}
|
396
|
+
className="popup-item-content"
|
397
|
+
onTransitionEnd={handler.onTransitionend}
|
398
|
+
>
|
399
|
+
{slots.default.isExist() ? slots.default() : state.option.render()}
|
400
|
+
</div>
|
401
|
+
</div>
|
398
402
|
</div>
|
399
|
-
|
400
|
-
|
401
|
-
|
403
|
+
);
|
404
|
+
return state.option.appendToBody ? (
|
405
|
+
<Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
|
406
|
+
{content}
|
407
|
+
</Portal>
|
408
|
+
) : content;
|
409
|
+
})()
|
410
|
+
)
|
402
411
|
);
|
403
412
|
},
|
404
413
|
});
|
@@ -62,7 +62,7 @@ export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.T
|
|
62
62
|
trigger: ePopupTrigger.hover,
|
63
63
|
animation: ePopupAnimation.fade,
|
64
64
|
destroyOnClose: true,
|
65
|
-
|
65
|
+
appendToBody: true,
|
66
66
|
offset: 0,
|
67
67
|
offsetAlign: 0,
|
68
68
|
autoSwitchDirection: true,
|
@@ -62,7 +62,7 @@ export interface iPopupDefaultOption {
|
|
62
62
|
trigger: iPopupTrigger, // 触发类型
|
63
63
|
animation: iPopupAnimation, // 动画类型
|
64
64
|
destroyOnClose: boolean, // 关闭的时候销毁popup
|
65
|
-
|
65
|
+
appendToBody: boolean, // 挂载到某个dom节点下
|
66
66
|
offset: number, // 在direction方向上的距离
|
67
67
|
offsetAlign: number, // 在align方向上的偏移距离
|
68
68
|
autoSwitchDirection: boolean, // 当空间不够时,是否自动切换direction
|