Skip to content

Commit 011c0d9

Browse files
xiaoyatongxiaoyatong
authored
feat: dialog v15 adaption (#2900)
* feat: dialog v15 adaption * docs: fixed * fix: docs * fix: 修订类型
1 parent 16bfab6 commit 011c0d9

File tree

16 files changed

+149
-126
lines changed

16 files changed

+149
-126
lines changed

‎migrate-from-v2.md‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -152,12 +152,7 @@ plugins: [
152152

153153
#### Button
154154

155-
- 移除 `plain`，通过 `fill="outline"` 实现
156-
- 增加 `ref`，对外暴露组件内 `button` 元素
157-
- CSS 变量中，对 `type` 类型对应的色值的定义，不在暴露到文档中，建议使用默认值，或修改主题变量
158-
- 增加 `fill` 模式类型，`dashed`，修改 `fill` 默认值为 `outline`。
159-
- 增加 `rightIcon`，可满足同时设置左右两个icon的情况。
160-
- 修改 `size` 为 `large` 时的默认 `width` 为 `100%` 的值，如果使用通栏的 `button`，可搭配 `block` 来使用。
155+
- 去掉一些样式变量。如 `$button-default-font-weight` `$button-large-font-weight` 等。
161156

162157
#### Cell
163158

@@ -560,21 +555,9 @@ plugins: [
560555

561556
#### Dialog
562557

563-
- `okText` 重命名为 `confirmText`，规范命名。
564-
- `mask` 重命名为 `overlay`，组件库中统一使用 Overlay 组件作为遮罩层，并使用 overlay 作为是否展示遮罩层的属性值。
565-
- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`，组件库统一到该属性。
566-
- `noOkBtn` 重命名为 `hideConfirmButton`，初始值不变，依然表示是否隐藏确认按钮，主要是为了语义化更强。
567-
- `noCancelBtn` 重命名为 `hideCancelButton`，初始值不变，依然表示是否隐藏取消按钮，主要是为了语义化更强。
568-
- `okBtnDisabled` 重命名为 `disableConfirmButton`，初始值不变，依然表示是否禁用确认按钮，主要是为了语义化更强。
569-
- 移除 `noFooter`，使用 footer 统一处理，当 footer 为空时，及可替代该值。目前 noFooter 也需要手动声明是否为 noFooter；修改后需手动指出 footer={null}
570-
- 移除 `textAlign`，改用样式变量 `--nutui-dialog-content-text-align` 或 SCSS 变量 `$dialog-content-text-align` 控制，默认值为 center。
571-
- 移除 `cancelAutoClose`，改为 `beforeCancel` 和 `beforeClose` 来实现，在点击关闭或取消时，可先触发这两个方法，以确定是否要关闭弹框，如返回true，则关闭；否则不关闭。
572-
- `onOk` 重命名为 `onConfirm`，规范命名。
573-
- `onClosed` 重命名为 `onClose`，规范命名，关闭时触发。
574-
- `onClickSelf` 重命名为 `onClick`，语义不变，仍表示点击弹框自身时触发事件。
575-
- 增加 `overlayStyle` 和 `overlayClassName`，用来配置 Overlay 组件样式。
576-
- 增加 `onOverlayClick`，支持点击overlay时，触发事件。
577-
- `onCancel` 回调不会自动关闭弹层，需主动调用 `Dialog.close(xx)`
558+
- 修改了操作按钮上下布局的样式；
559+
- 当只有一个主操作按钮时，主操作按钮样式撑开；
560+
- 增加了底部icon的大小设置的样式变量；修改右侧按钮的默认值为 16 px；
578561

579562
#### Drag
580563

‎src/config.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -841,6 +841,7 @@
841841
"sort": 12,
842842
"show": true,
843843
"taro": true,
844+
"v15": true,
844845
"author": "yangjinjun3",
845846
"dd": true
846847
},

‎src/packages/button/button.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
padding: 0;
1818
height: $button-default-height;
1919
font-size: $button-default-font-size;
20-
font-weight: $button-default-font-weight;
20+
font-weight: $font-weight;
2121
text-align: center;
2222
cursor: pointer;
2323
transition: $button-transition;
@@ -155,7 +155,6 @@
155155
height: $button-xlarge-height;
156156
padding: $button-xlarge-padding;
157157
font-size: $button-xlarge-font-size;
158-
font-weight: $button-large-font-weight;
159158
border-radius: $radius-base;
160159

161160
.nut-button-text {
@@ -172,15 +171,13 @@
172171
}
173172
&-children {
174173
font-size: $button-xlarge-font-size;
175-
font-weight: $button-large-font-weight;
176174
}
177175
}
178176

179177
&-large {
180178
height: $button-large-height;
181179
padding: $button-large-padding;
182180
font-size: $button-large-font-size;
183-
font-weight: $button-large-font-weight;
184181
border-radius: $radius-s;
185182

186183
.nut-button-text {
@@ -198,7 +195,6 @@
198195

199196
&-children {
200197
font-size: $button-large-font-size;
201-
font-weight: $button-large-font-weight;
202198
}
203199
}
204200

‎src/packages/button/doc.en-US.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@ The component provides the following CSS variables, which can be used to customi
136136
| \--nutui-button-default-disabled-color | Disabled text color for buttons of type default | `$color-text-help` |
137137
| \--nutui-button-default-padding | Padding for buttons of type default | `0 12px` |
138138
| \--nutui-button-default-font-size | The font size of the button with type default | `$font-size-s` |
139-
| \--nutui-button-default-font-weight | The font weight of the button with type default | `$font-weight` |
140139
| \--nutui-button-large-height | The height of the button with size large | `40px` |
141140
| \--nutui-button-large-font-size | The font size of the button with size large | `$font-size-base` |
142141
| \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `12px` |

‎src/packages/button/doc.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,6 @@ import { Button } from '@nutui/nutui-react'
135135
| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
136136
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
137137
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
138-
| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
139138
| \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
140139
| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
141140
| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |

‎src/packages/button/doc.taro.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,6 @@ import { Button } from '@nutui/nutui-react-taro'
148148
| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
149149
| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
150150
| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
151-
| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
152151
| \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
153152
| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
154153
| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |

‎src/packages/button/doc.zh-TW.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@ import { Button } from '@nutui/nutui-react'
136136
| \--nutui-button-default-disabled-color | type 為 default 的按鈕的停用文字色 | `$color-text-help` |
137137
| \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 12px` |
138138
| \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-s` |
139-
| \--nutui-button-default-font-weight | type 為 default 的按鈕的字重 | `$font-weight` |
140139
| \--nutui-button-large-height | size 為 large 的按鈕的高度 | `40px` |
141140
| \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-base` |
142141
| \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `12px` |

‎src/packages/dialog/demos/taro/demo2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Demo2 = () => {
1919

2020
<Cell title="提示弹框" onClick={() => setVisible2(true)} />
2121
<Dialog
22-
title="提示弹框"
22+
title="标题"
2323
visible={visible2}
2424
confirmText="确认"
2525
hideCancelButton

‎src/packages/dialog/dialog.scss‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
flex-direction: column;
88
align-items: center;
99
width: $dialog-width;
10-
// max-height: 67%;
10+
min-width: $dialog-min-width;
11+
max-height: 67%;
1112
min-height: $dialog-min-height;
1213
padding: $dialog-padding;
1314
box-sizing: border-box;
@@ -60,11 +61,17 @@
6061
}
6162

6263
&-bottom {
63-
bottom: -56px;
64+
bottom: -64px;
65+
width: $dialog-bottom-close-icon-size;
66+
height: $dialog-bottom-close-icon-size;
6467
left: 50%;
65-
transform: translateY(-50%);
68+
transform: translateX(-50%);
6669
.nut-icon {
67-
color: $dialog-close-color;
70+
color: $color-text-disabled;
71+
background-color: $color-mask-part;
72+
border-radius: 50%;
73+
width: $dialog-bottom-close-icon-size;
74+
height: $dialog-bottom-close-icon-size;
6875
}
6976
}
7077

@@ -88,7 +95,7 @@
8895
max-height: $dialog-content-max-height;
8996
line-height: $dialog-content-line-height;
9097
font-size: $font-size-base;
91-
color: $color-text;
98+
color: $color-title;
9299
word-wrap: break-word;
93100
word-break: break-all;
94101
white-space: pre-wrap;
@@ -107,20 +114,20 @@
107114

108115
.nut-button {
109116
min-width: 100%;
110-
margin: 0;
117+
}
111118

112-
&.nut-dialog-footer-ok {
113-
order: 1;
114-
}
115-
116-
&.nut-dialog-footer-cancel {
117-
border: 0;
118-
color: $color-text;
119-
order: 2;
120-
display: flex;
121-
align-items: flex-end;
122-
margin-top: $dialog-vertical-footer-ok-margin-top;
123-
}
119+
.nut-dialog-footer-ok {
120+
order: 1;
121+
}
122+
123+
.nut-dialog-footer-cancel {
124+
margin: 0;
125+
color: $color-text;
126+
font-size: $font-size-base;
127+
order: 2;
128+
display: flex;
129+
justify-content: center;
130+
margin-top: $dialog-vertical-footer-ok-margin-top;
124131
}
125132
}
126133

@@ -134,6 +141,12 @@
134141

135142
&-ok {
136143
max-width: $dialog-footer-ok-max-width;
144+
font-weight: $font-weight-bold;
145+
}
146+
&-block {
147+
&.nut-button {
148+
min-width: 100%;
149+
}
137150
}
138151
}
139152
}

‎src/packages/dialog/dialog.taro.tsx‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { MouseEvent } from 'react'
33
import classNames from 'classnames'
44
import { CSSTransition } from 'react-transition-group'
55
import { View } from '@tarojs/components'
6-
import { Close } from '@nutui/icons-react-taro'
6+
import { Failure, Close } from '@nutui/icons-react-taro'
77
import Button from '@/packages/button/index.taro'
88
import { DialogBasicProps } from './config'
99
import { Content } from './content.taro'
@@ -115,22 +115,36 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
115115
}
116116
}
117117

118+
const btnClass =
119+
hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : ''
120+
118121
return (
119122
footer || (
120123
<>
121-
{!hideCancelButton && (
122-
<Button
123-
type="default"
124-
className={`${classPrefix}-footer-cancel`}
125-
onClick={(e) => handleCancel(e)}
126-
>
127-
{cancelText || locale.cancel}
128-
</Button>
129-
)}
124+
{!hideCancelButton &&
125+
(footerDirection === 'vertical' ? (
126+
<View
127+
className={`${classPrefix}-footer-cancel ${btnClass}`}
128+
onClick={(e) => handleCancel(e as any)}
129+
>
130+
{cancelText || locale.cancel}
131+
</View>
132+
) : (
133+
<Button
134+
type="default"
135+
size="large"
136+
className={`${classPrefix}-footer-cancel ${btnClass}`}
137+
onClick={(e) => handleCancel(e)}
138+
>
139+
{cancelText || locale.cancel}
140+
</Button>
141+
))}
142+
130143
{!hideConfirmButton && (
131144
<Button
145+
size="large"
132146
type="primary"
133-
className={classNames(`${classPrefix}-footer-ok`, {
147+
className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
134148
disabled: disableConfirmButton,
135149
})}
136150
disabled={disableConfirmButton}
@@ -157,9 +171,10 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
157171
[`${classPrefix}-close`]: true,
158172
[`${classPrefix}-close-${closeIconPosition}`]: true,
159173
})
174+
const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
160175
return (
161176
<View className={closeClasses} onClick={handleCancel}>
162-
{React.isValidElement(closeIcon) ? closeIcon : <Close />}
177+
{React.isValidElement(closeIcon) ? closeIcon : systomIcon}
163178
</View>
164179
)
165180
}

0 commit comments

Comments
 (0)