Skip to content

Commit

Permalink
fix(dialog-box): destoryOnClose transition
Browse files Browse the repository at this point in the history
  • Loading branch information
@GaoNeng-wWw
GaoNeng-wWw committed Sep 7, 2024
1 parent d3be75b commit 988d54e
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 65 deletions.
22 changes: 16 additions & 6 deletions packages/renderless/src/dialog-box/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const watchVisible =
if (val) {
state.closed = false
emit('open')
state.render = true
/* istanbul ignore next */
on(el, 'scroll', api.updatePopper)

Expand All @@ -107,9 +108,9 @@ export const watchVisible =
emit('close')
}

if (props.destroyOnClose) {
nextTick(() => state.key++)
}
// if (props.destroyOnClose) {
// nextTick(() => state.key++)
// }

if (props.rightSlide) {
const dialogBoxDom = el.querySelector(constants.DIALOG_BOX_CLASS) || el
Expand Down Expand Up @@ -245,9 +246,18 @@ export const afterEnter = (emit: IDialogBoxRenderlessParams['emit']) => (): void
emit('opened')
}

export const afterLeave = (emit: IDialogBoxRenderlessParams['emit']) => (): void => {
emit('closed')
}
export const afterLeave =
(
emit: IDialogBoxRenderlessParams['emit'],
state: IDialogBoxRenderlessParams['state'],
props: IDialogBoxRenderlessParams['props']
) =>
(): void => {
emit('closed')
if (props.destroyOnClose) {
state.render = false
}
}

const findPopoverComponent = ({
vm,
Expand Down
5 changes: 3 additions & 2 deletions packages/renderless/src/dialog-box/vue.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ const initState = ({
style: computed(() => api.computedStyle()),
animationName: computed(() => api.computedAnimationName()),
current,
dragStyle: null
dragStyle: null,
render: props.destroyOnClose
})

return state
Expand Down Expand Up @@ -144,7 +145,7 @@ const initApi = ({
unMounted: unMounted({ api, parent, props }),
computedAnimationName: computedAnimationName({ constants, props }),
afterEnter: afterEnter(emit),
afterLeave: afterLeave(emit),
afterLeave: afterLeave(emit, state, props),
hideScrollbar: hideScrollbar(lockScrollClass),
showScrollbar: showScrollbar(lockScrollClass),
handleDrag: handleDrag({ parent, props, state, emit, vm }),
Expand Down
1 change: 1 addition & 0 deletions packages/renderless/types/dialog-box.type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export interface IDialogBoxState {
rendered?: boolean
mouseUpWrapperFlag: boolean
mouseDownWrapperFlag: boolean
render: boolean
}

export interface IDialogBoxApi {
Expand Down
41 changes: 24 additions & 17 deletions packages/theme/src/dialog-box/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,17 @@
height: 100vh;
display: flex;
flex-direction: column;

.@{dialog-box-prefix-cls}__content {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
}

&.is-center {

.@{dialog-box-prefix-cls}__header,
.@{dialog-box-prefix-cls}__footer {
text-align: center;
Expand All @@ -60,8 +68,7 @@
}

& &__header {
padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal)
var(--ti-dialog-box-head-padding-bottom);
padding: var(--ti-dialog-box-head-padding-top) var(--ti-dialog-box-head-padding-horizontal) var(--ti-dialog-box-head-padding-bottom);
background: var(--ti-dialog-box-bg-color);
font-weight: var(--ti-dialog-box-head-title-font-weight);
display: flex;
Expand All @@ -75,10 +82,12 @@
.@{dialog-box-prefix-cls}__title {
flex: 1;
}

.@{dialog-box-prefix-cls}__btn-tools {
display: flex;
justify-content: space-between;
}

.@{dialog-box-prefix-cls}__headerbtn {
position: relative;
border: none;
Expand All @@ -94,7 +103,7 @@
border-radius: var(--ti-dialog-box-btn-border-radius);
}

& + .@{dialog-box-prefix-cls}__headerbtn {
&+.@{dialog-box-prefix-cls}__headerbtn {
margin-left: 8px;
}

Expand Down Expand Up @@ -135,7 +144,7 @@
overflow: hidden;
}

> span {
>span {
max-height: 120px;
overflow-y: auto;
}
Expand All @@ -146,8 +155,7 @@
}

& &__footer {
padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal)
var(--ti-dialog-box-footer-margin-bottom);
padding: var(--ti-dialog-box-footer-padding-top) var(--ti-dialog-box-footer-padding-horizontal) var(--ti-dialog-box-footer-margin-bottom);
text-align: var(--ti-dialog-box-footer-align);
box-sizing: border-box;

Expand Down Expand Up @@ -180,28 +188,22 @@
}

.@{dialog-box-prefix-cls}__header {
padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right)
var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left);
padding: var(--ti-dialog-box-drawer-header-padding-top) var(--ti-dialog-box-drawer-header-padding-right) var(--ti-dialog-box-drawer-header-padding-bottom) var(--ti-dialog-box-drawer-header-padding-left);
border-bottom: 1px solid var(--ti-dialog-box-drawer-divider-border-color);

&btn {
right: calc(
var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) -
(var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2
);
right: calc(var(--ti-dialog-box-btn-position-right) - var(--ti-dialog-box-drawer-padding-right) - (var(--ti-dialog-box-btn-width) - var(--ti-dialog-box-close-icon-size)) / 2);
}
}

.@{dialog-box-prefix-cls}__body {
flex: 1;
overflow: auto;
padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right)
var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
padding: var(--ti-dialog-box-drawer-body-padding-top) var(--ti-dialog-box-drawer-body-padding-right) var(--ti-dialog-box-drawer-body-padding-bottom) var(--ti-dialog-box-drawer-body-padding-left);
}

.@{dialog-box-prefix-cls}__footer {
padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right)
var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
padding: var(--ti-dialog-box-drawer-footer-padding-top) var(--ti-dialog-box-drawer-footer-padding-right) var(--ti-dialog-box-drawer-footer-padding-bottom) var(--ti-dialog-box-drawer-footer-padding-left);
border-top: 1px solid var(--ti-dialog-box-drawer-divider-border-color);
text-align: var(--ti-dialog-box-drawer-footer-text-align);
}
Expand Down Expand Up @@ -290,6 +292,11 @@

.dialog-fade-leave-active {
animation: dialog-fade-out 0.3s;

.tiny-dialog-box,
.tiny-dialog-box__content {
animation: dialog-fade-out 0.3s;
}
}

@keyframes dialog-fade-in {
Expand Down Expand Up @@ -340,4 +347,4 @@
top: 0 !important;
left: 0 !important;
}
}
}
82 changes: 42 additions & 40 deletions packages/vue/src/dialog-box/src/pc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
@click.self="handleWrapperClick"
@mouseup="useMouseEventUp"
@mousedown="useMouseEventDown"
key="1"
>
<transition :name="dialogTransition">
<transition :name="dialogTransition || state.animationname">
<div
ref="dialog"
v-show="visible"
v-if="destroyOnClose ? visible : true"
:class="[
{
'is-fullscreen': state.isFull,
Expand All @@ -34,45 +34,47 @@
class="tiny-dialog-box"
:key="state.key"
>
<div v-if="showHeader" ref="header" class="tiny-dialog-box__header" @mousedown="handleDrag">
<slot name="title">
<span class="tiny-dialog-box__title">{{ title }}</span>
</slot>
<div class="tiny-dialog-box__btn-tools">
<button
v-if="resize && !state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(true)"
>
<icon-fullscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="resize && state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(false)"
>
<icon-minscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="showClose"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Close"
@click="handleClose('close', $event)"
>
<icon-close class="tiny-svg-size tiny-dialog-box__close" />
</button>
<div v-if="state.render" class="tiny-dialog-box__content" key="content">
<div v-if="showHeader" ref="header" class="tiny-dialog-box__header" @mousedown="handleDrag">
<slot name="title">
<span class="tiny-dialog-box__title">{{ title }}</span>
</slot>
<div class="tiny-dialog-box__btn-tools">
<button
v-if="resize && !state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(true)"
>
<icon-fullscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="resize && state.isFull"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Resize"
@click="toggleFullScreen(false)"
>
<icon-minscreen class="tiny-svg-size tiny-dialog-box__resize" />
</button>
<button
v-if="showClose"
type="button"
class="tiny-dialog-box__headerbtn"
aria-label="Close"
@click="handleClose('close', $event)"
>
<icon-close class="tiny-svg-size tiny-dialog-box__close" />
</button>
</div>
</div>
<div class="tiny-dialog-box__body">
<slot></slot>
</div>
<div v-if="slots.footer" ref="footer" class="tiny-dialog-box__footer">
<slot name="footer" :before-close="beforeClose"></slot>
</div>
</div>
<div class="tiny-dialog-box__body">
<slot></slot>
</div>
<div v-if="slots.footer" ref="footer" class="tiny-dialog-box__footer">
<slot name="footer" :before-close="beforeClose"></slot>
</div>
</div>
</transition>
Expand Down

0 comments on commit 988d54e

Please sign in to comment.