Skip to content

Commit

Permalink
refactor: (Dialog & Modal) refactor the DOM structure of Dialog and M…
Browse files Browse the repository at this point in the history 
…odal to fix: 1. wrong logic of bodyClassName and bodyStyle 2. the imperfect behavior with long image or content
  • Loading branch information
@awmleer
awmleer committed Feb 28, 2022
1 parent b5db115 commit 577842d
Show file tree
Hide file tree
Showing 5 changed files with 204 additions and 216 deletions.
62 changes: 36 additions & 26 deletions src/components/dialog/dialog.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,45 +20,55 @@
max-width: 500px;
transform: translate(-50%, -50%);
}
.@{class-prefix-dialog}-main {

.@{class-prefix-dialog}-body {
width: 100%;
max-height: 70vh;
font-size: 14px;
background-color: white;
border-radius: 8px;
overflow: hidden;

display: flex;
flex-direction: column;
> * {
flex: none;
}
> .adm-dialog-image-container {
> .adm-dialog-content {
flex: auto;
& + .@{class-prefix-dialog}-body {
padding-top: 12px;
}
}
.@{class-prefix-dialog}-body {
padding: 20px 12px;
&-header-wrapper {
display: flex;
justify-content: center;
}
&-header {
}
&-title {
font-weight: bold;
font-size: 18px;
line-height: 25px;
text-align: center;
}
&-content {
max-height: 70vh;
overflow-x: hidden;
overflow-y: auto;
font-size: 15px;
line-height: 1.4;
color: #333;

&:not(.adm-dialog-with-image) {
padding-top: 20px;
}

.adm-dialog-image-container {
margin-bottom: 12px;
max-height: 40vh;
}
.adm-dialog-header {
margin-bottom: 8px;
padding: 0 12px;
}
.adm-dialog-title {
margin-bottom: 8px;
padding: 0 12px;
font-weight: bold;
font-size: 18px;
line-height: 25px;
text-align: center;
}
.adm-dialog-content {
padding: 0 12px 20px;
max-height: 70vh;
overflow-x: hidden;
overflow-y: auto;
font-size: 15px;
line-height: 1.4;
color: #333;
&-empty {
padding: 0;
height: 12px;
}
}
.@{class-prefix-dialog}-footer {
Expand Down
136 changes: 67 additions & 69 deletions src/components/dialog/dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { useUnmountedRef } from 'ahooks'
import Mask from '../mask'
import { Action, DialogActionButton } from './dialog-action-button'
import Image from '../image'
import Space from '../space'
import {
GetContainer,
renderToContainer,
Expand All @@ -18,8 +17,6 @@ import AutoCenter from '../auto-center'
import { useSpring, animated } from '@react-spring/web'
import { NativeProps, withNativeProps } from '../../utils/native-props'

const classPrefix = `adm-dialog`

export type DialogProps = {
afterClose?: () => void
afterShow?: () => void
Expand Down Expand Up @@ -80,10 +77,69 @@ export const Dialog: FC<DialogProps> = p => {

const [active, setActive] = useState(props.visible)

const body = (
<div
className={classNames(
cls('body'),
props.image && cls('with-image'),
props.bodyClassName
)}
style={props.bodyStyle}
>
{!!props.image && (
<div className={cls('image-container')}>
<Image src={props.image} alt='dialog header image' width='100%' />
</div>
)}
{!!props.header && (
<div className={cls('header')}>
<AutoCenter>{props.header}</AutoCenter>
</div>
)}
{!!props.title && <div className={cls('title')}>{props.title}</div>}
<div
className={classNames(
cls('content'),
!props.content && cls('content-empty')
)}
>
{typeof props.content === 'string' ? (
<AutoCenter>{props.content}</AutoCenter>
) : (
props.content
)}
</div>
<div className={cls('footer')}>
{props.actions.map((row, index) => {
const actions = Array.isArray(row) ? row : [row]
return (
<div className={cls('action-row')} key={index}>
{actions.map((action, index) => (
<DialogActionButton
key={action.key}
action={action}
onAction={async () => {
await Promise.all([
action.onClick?.(),
props.onAction?.(action, index),
])
if (props.closeOnAction) {
props.onClose?.()
}
}}
/>
))}
</div>
)
})}
</div>
</div>
)

const node = withNativeProps(
props,
<div
className={classPrefix}
className={cls()}
style={{
display: active ? 'unset' : 'none',
}}
Expand All @@ -92,77 +148,15 @@ export const Dialog: FC<DialogProps> = p => {
visible={props.visible}
onMaskClick={props.closeOnMaskClick ? props.onClose : undefined}
style={props.maskStyle}
className={classNames(`${classPrefix}-mask`, props.maskClassName)}
className={classNames(cls('mask'), props.maskClassName)}
/>
<div
className={`${classPrefix}-wrap`}
className={cls('wrap')}
style={{
pointerEvents: props.visible ? 'unset' : 'none',
}}
>
<animated.div
style={{
...style,
}}
onClick={e => e.stopPropagation()}
className={`${classPrefix}-main`}
>
{!!props.image && (
<div className={`${classPrefix}-image-container`}>
<Image src={props.image} alt='dialog header image' width='100%' />
</div>
)}
<div
style={props.bodyStyle}
className={classNames(`${classPrefix}-body`, props.bodyClassName)}
>
<Space direction='vertical' block>
{!!props.header && (
<div className={`${classPrefix}-body-header-wrapper`}>
<div className={`${classPrefix}-body-header`}>
{props.header}
</div>
</div>
)}
{!!props.title && (
<div className={`${classPrefix}-body-title`}>{props.title}</div>
)}
{!!props.content && (
<div className={`${classPrefix}-body-content`}>
{typeof props.content === 'string' ? (
<AutoCenter>{props.content}</AutoCenter>
) : (
props.content
)}
</div>
)}
</Space>
</div>
<div className={`${classPrefix}-footer`}>
{props.actions.map((row, index) => {
const actions = Array.isArray(row) ? row : [row]
return (
<div className={`${classPrefix}-action-row`} key={index}>
{actions.map((action, index) => (
<DialogActionButton
key={action.key}
action={action}
onAction={async () => {
await Promise.all([
action.onClick?.(),
props.onAction?.(action, index),
])
if (props.closeOnAction) {
props.onClose?.()
}
}}
/>
))}
</div>
)
})}
</div>
</animated.div>
<animated.div style={style}>{body}</animated.div>
</div>
</div>
)
Expand All @@ -172,3 +166,7 @@ export const Dialog: FC<DialogProps> = p => {
withStopPropagation(props.stopPropagation, node)
)
}

function cls(name: string = '') {
return 'adm-dialog' + (name && '-') + name
}
11 changes: 1 addition & 10 deletions src/components/modal/demos/demo1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,16 +166,7 @@ export default () => {
onClick={() =>
Modal.confirm({
title: '提示',
content: (
<div
style={{
maxHeight: 'calc(70vh - 200px)',
overflowY: 'auto',
}}
>
{lorem.generateParagraphs(7)}
</div>
),
content: <div>{lorem.generateParagraphs(7)}</div>,
})
}
>
Expand Down
68 changes: 35 additions & 33 deletions src/components/modal/modal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,47 +21,53 @@
max-width: 75vw;
transform: translate(-50%, -50%);
}
.@{class-prefix-modal}-main {
.@{class-prefix-modal}-body {
width: 100%;
max-height: 70vh;
box-sizing: border-box;
font-size: 14px;
background-color: white;
border-radius: 8px;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;

display: flex;
flex-direction: column;
> * {
flex: none;
}
> .adm-modal-image-container {
> .adm-modal-content {
flex: auto;
}
.@{class-prefix-modal}-body {
padding: 20px 12px 12px;
display: flex;
flex-direction: column;
> * + * {
margin-top: 8px;
}
&-header-wrapper {
display: flex;
justify-content: center;
}
&-header {
}
&-title {
font-weight: bold;
font-size: 18px;
line-height: 25px;
text-align: center;
}
&-content {
font-size: 15px;
line-height: 1.4;
color: #333;
}

&:not(.adm-modal-with-image) {
padding-top: 20px;
}

.adm-modal-image-container {
margin-bottom: 12px;
max-height: 40vh;
overflow-y: scroll;
}
.adm-modal-header {
margin-bottom: 8px;
padding: 0 12px;
}
.adm-modal-title {
margin-bottom: 8px;
padding: 0 12px;
font-weight: bold;
font-size: 18px;
line-height: 25px;
text-align: center;
}
.adm-modal-content {
padding: 0 12px 12px;
max-height: 70vh;
overflow-x: hidden;
overflow-y: auto;
font-size: 15px;
line-height: 1.4;
color: #333;
}
.adm-modal-close {
position: absolute;
Expand All @@ -73,7 +79,7 @@
}
}

.@{class-prefix-modal}-footer {
.adm-modal-footer {
user-select: none;
padding: 8px 12px 12px;
&.adm-space {
Expand All @@ -94,7 +100,3 @@
}
}
}

.@{class-prefix-modal}-image-container {
overflow-y: auto;
}

0 comments on commit 577842d

Please sign in to comment.