Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toast): v14 #2795

Merged
merged 6 commits into from
Dec 4, 2024
Merged

feat(toast): v14 #2795

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a2c5947
feat(toast): v14
irisSong Nov 20, 2024
b887ddb
Merge remote-tracking branch 'upstream/feat_v3.x' into 3.0-toast
irisSong Nov 25, 2024
87bd30b
fix: 适配v14
irisSong Nov 25, 2024
aed440d
feat: add marking
irisSong Nov 25, 2024
7ea224b
fix: modify pr
irisSong Dec 2, 2024
f3a555f
fix: modify pr
irisSong Dec 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -882,6 +882,7 @@
"sort": 1,
"show": true,
"taro": true,
"v14": true,
"author": "VickyYe"
}
]
Expand Down
19 changes: 13 additions & 6 deletions src/packages/toast/Notification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,16 @@
>
<div className={`${classPrefix} ${classes}`} id={`toast-${id}`}>
<div
className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
className={classNames(
`${classPrefix}-inner`,
`${classPrefix}-${position}`,
contentClassName,
`${classPrefix}-inner-${size}`,
`${classPrefix}-inner-${wordBreak}`,
{
[`${classPrefix}-inner-descrption`]: content,
}
)}
style={{
...contentStyle,
}}
Expand All @@ -147,11 +156,9 @@
{title ? (
<div className={`${classPrefix}-title`}>{title}</div>
) : null}
<span
className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`}
>
{content}
</span>
{content ? (
<span className={`${classPrefix}-text`}>{content}</span>
) : null}

Check warning on line 161 in src/packages/toast/Notification.tsx

View check run for this annotation

Codecov / codecov/patch

src/packages/toast/Notification.tsx#L161 

Added line #L161 was not covered by tests
</div>
</div>
</Overlay>
Expand Down
15 changes: 11 additions & 4 deletions src/packages/toast/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,14 @@ const Demo1 = () => {
title="文字提示"
onClick={() => Toast.show('网络失败，请稍后再试~')}
/>
<Cell title="标题提示" onClick={() => Toast.show('标题提示')} />
<Cell
title="标题提示"
onClick={() =>
Toast.show({
title: '成功提示',
})
}
/>
<Cell
title="成功提示"
onClick={() =>
Expand All @@ -23,7 +30,7 @@ const Demo1 = () => {
title="失败提示"
onClick={() =>
Toast.show({
content: '失败提示',
title: '失败提示',
icon: 'fail',
})
}
Expand All @@ -32,7 +39,7 @@ const Demo1 = () => {
title="警告提示"
onClick={() =>
Toast.show({
content: '警告提示',
title: '警告提示',
icon: 'warn',
})
}
Expand All @@ -41,7 +48,7 @@ const Demo1 = () => {
title="加载提示"
onClick={() =>
Toast.show({
content: '加载提示',
title: '加载提示',
icon: 'loading',
})
}
Expand Down
22 changes: 11 additions & 11 deletions src/packages/toast/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ const Demo1 = () => {

const openToast = (
type: string,
content: string,
title?: string,
duration?: number,
icon?: string,
title?: string
content?: string
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
) => {
const changeState = Object.assign(state, {
type,
Expand All @@ -43,27 +43,27 @@ const Demo1 = () => {
<Cell
title="文字提示"
onClick={() => {
openToast('text', '网络失败，请稍后再试~')
openToast(
'text',
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
undefined,
undefined,
undefined,
'网络失败，请稍后再试~'
)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议简化参数传递逻辑

当前实现中传递了多个 undefined 参数，这降低了代码的可读性。建议简化为：

-         openToast(
-           'text',
-           undefined,
-           undefined,
-           undefined,
-           '网络失败，请稍后再试~'
-         )
+         openToast('text', '网络失败，请稍后再试~')

Committable suggestion skipped: line range outside the PR's diff.

setShowToast(true)
}}
/>
<Cell
title="标题提示"
onClick={() => {
openToast(
'text',
'网络失败，请稍后再试~',
undefined,
undefined,
'标题提示'
)
openToast('text', '标题提示')
setShowToast(true)
}}
/>
<Cell
title="成功提示"
onClick={() => {
openToast('success', '成功提示成功提示成功提示')
openToast('success', '成功提示')
setShowToast(true)
}}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/toast/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ The component provides the following CSS variables, which can be used to customi
| \--nutui-toast-text-font-size | the content font-size of toast | `14px` |
| \--nutui-toast-font-color | the text color of toast | `#fff` |
| \--nutui-toast-inner-top | the custom height of content | `50%` |
| \--nutui-toast-inner-padding | the padding value of toast content | `24px 30px` |
| \--nutui-toast-inner-padding | the padding value of toast content | `13px 16px` |
| \--nutui-toast-inner-bg-color | the background color of toast content | `$color-mask` |
| \--nutui-toast-inner-border-radius | the border-radius value of toast content | `12px` |
| \--nutui-toast-inner-border-radius | the border-radius value of toast content | `$radius-xl` |
| \--nutui-toast-inner-text-align | the text alignment of toast | `center` |
4 changes: 2 additions & 2 deletions src/packages/toast/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ Toast.config({ className: 'demo', contentClassName: 'content-demo' })
| \--nutui-toast-text-font-size | `toast`内容文字大小 | `14px` |
| \--nutui-toast-font-color | `toast`文字颜色 | `#fff` |
| \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` |
| \--nutui-toast-inner-padding | `toast`内容区padding值 | `24px 30px` |
| \--nutui-toast-inner-padding | `toast`内容区padding值 | `13px 16px` |
| \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` |
| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `12px` |
| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-xl` |
| \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` |
4 changes: 2 additions & 2 deletions src/packages/toast/doc.taro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ ToastOptions 是 ToastProps 的子集，包含如下属性：msg, title, type, d
| \--nutui-toast-text-font-size | `toast`内容文字大小 | `14px` |
| \--nutui-toast-font-color | `toast`文字颜色 | `#fff` |
| \--nutui-toast-inner-top | `toast`内容区自定义高度 | `50%` |
| \--nutui-toast-inner-padding | `toast`内容区padding值 | `24px 30px` |
| \--nutui-toast-inner-padding | `toast`内容区padding值 | `13px 16px` |
| \--nutui-toast-inner-bg-color | `toast`内容区背景色 | `$color-mask` |
| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `12px` |
| \--nutui-toast-inner-border-radius | `toast`内容区圆角值 | `$radius-xl` |
| \--nutui-toast-inner-text-align | `toast`内容区文本对齐方式 | `center` |
6 changes: 2 additions & 4 deletions src/packages/toast/doc.zh-TW.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# Toast 吐司

#

用於輕提示。

### 引入
Expand Down Expand Up @@ -99,7 +97,7 @@ Toast.config({ className: 'demo', contentClassName: 'content-demo' })
| \--nutui-toast-text-font-size | `toast`內容文字大小 | `14px` |
| \--nutui-toast-font-color | `toast`文字顏色 | `#fff` |
| \--nutui-toast-inner-top | `toast`內容區自定義高度 | `50%` |
| \--nutui-toast-inner-padding | `toast`內容區padding值 | `24px 30px` |
| \--nutui-toast-inner-padding | `toast`內容區padding值 | `13px 16px` |
| \--nutui-toast-inner-bg-color | `toast`內容區背景色 | `$color-mask` |
| \--nutui-toast-inner-border-radius | `toast`內容區圓角值 | `12px` |
| \--nutui-toast-inner-border-radius | `toast`內容區圓角值 | `$radius-xl` |
| \--nutui-toast-inner-text-align | `toast`內容區文本對齊方式 | `center` |
19 changes: 12 additions & 7 deletions src/packages/toast/toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,9 @@
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 30%;
max-width: 95.7%;
min-width: 96px;
max-width: 60%;
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
// max-width: 224px;
font-size: $toast-text-font-size;
text-align: $toast-inner-text-align;
padding: $toast-inner-padding;
Expand All @@ -62,6 +63,11 @@
border-radius: $toast-inner-border-radius;
color: $toast-font-color;

&-descrption {
max-width: 68.2%;
// max-width: 256px;
}

&-normal {
word-break: normal;
word-wrap: normal;
Expand Down Expand Up @@ -101,19 +107,18 @@
&-text {
color: #ffffff;
text-align: $toast-inner-text-align;
&-empty {
margin-bottom: -8px;
}
line-height: 20px;
}

&-title {
color: #ffffff;
font-size: $toast-title-font-size;
font-weight: 500;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

font weight :600

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已修改

text-align: $toast-inner-text-align;
line-height: 22px;
}

&-icon {
.nut-icon {
width: 24px;
height: 24px;
color: #ffffff;
Expand All @@ -124,7 +129,7 @@
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
margin: 3px 0 5px;
color: #ffffff;

&-icon {
Expand Down
32 changes: 17 additions & 15 deletions src/packages/toast/toast.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export interface ToastProps extends BasicComponent {
lockScroll: boolean
size: ToastSize
icon: React.ReactNode
iconSize: string
maskClassName?: string
content: React.ReactNode
contentClassName?: string
Expand All @@ -51,7 +50,6 @@ const defaultProps = {
title: '',
size: 'base', // 设置字体大小，默认base,可选large\small\base
icon: null,
iconSize: '20',
content: '',
msg: '',
type: 'text',
Expand All @@ -78,7 +76,6 @@ export const Toast: FunctionComponent<
position,
contentStyle,
icon,
iconSize,
content,
msg,
duration,
Expand Down Expand Up @@ -165,12 +162,10 @@ export const Toast: FunctionComponent<
}

return {
success: (
<Success className="nut-toast-icon" color="#ffffff" size={iconSize} />
),
fail: <Failure color="#ffffff" size={iconSize} />,
warn: <Tips color="#ffffff" size={iconSize} />,
loading: <Loading color="#ffffff" size={iconSize} />,
success: <Success />,
fail: <Failure />,
warn: <Tips />,
loading: <Loading />,
}[type]
}

Expand Down Expand Up @@ -198,7 +193,16 @@ export const Toast: FunctionComponent<
>
<View className={`${classPrefix} ${classes}`} id={id}>
<View
className={`${classPrefix}-inner ${classPrefix}-${position} ${contentClassName} ${classPrefix}-inner-${size} ${classPrefix}-inner-${wordBreak}`}
className={classNames(
`${classPrefix}-inner`,
`${classPrefix}-${position}`,
contentClassName,
`${classPrefix}-inner-${size}`,
`${classPrefix}-inner-${wordBreak}`,
{
[`${classPrefix}-inner-descrption`]: content || msg,
irisSong marked this conversation as resolved.
Show resolved Hide resolved
}
)}
style={{ ...styles, ...contentStyle }}
>
{hasIcon() ? (
Expand All @@ -209,11 +213,9 @@ export const Toast: FunctionComponent<
{title ? (
<Text className={`${classPrefix}-title`}>{title}</Text>
) : null}
<Text
className={`${classPrefix}-text ${content ? '' : `${classPrefix}-text-empty`}`}
>
{content || msg}
</Text>
{content || msg ? (
<Text className={`${classPrefix}-text`}>{content || msg}</Text>
) : null}
oasis-cloud marked this conversation as resolved.
Show resolved Hide resolved
</View>
</View>
</Overlay>
Expand Down
4 changes: 2 additions & 2 deletions src/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -901,11 +901,11 @@ $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
$toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default;
$toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default;
$toast-font-color: var(--nutui-toast-font-color, $white) !default;
$toast-inner-padding: var(--nutui-toast-inner-padding, 16px 24px) !default;
$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default;
$toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default;
$toast-inner-border-radius: var(
--nutui-toast-inner-border-radius,
16px
$radius-xl
) !default;
$toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;

Expand Down
Loading