From a2c594767c49b7af9873872fffb1e59c630e7bd2 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 20 Nov 2024 19:51:45 +0800 Subject: [PATCH 1/5] feat(toast): v14 --- src/packages/toast/Notification.tsx | 19 +++++++++++++------ src/packages/toast/demos/h5/demo1.tsx | 15 +++++++++++---- src/packages/toast/demos/taro/demo1.tsx | 22 +++++++++++----------- src/packages/toast/toast.scss | 16 +++++++++++----- src/packages/toast/toast.taro.tsx | 19 +++++++++++++------ src/styles/variables.scss | 2 +- 6 files changed, 60 insertions(+), 33 deletions(-) diff --git a/src/packages/toast/Notification.tsx b/src/packages/toast/Notification.tsx index 4a7dddba22..733128dc3e 100644 --- a/src/packages/toast/Notification.tsx +++ b/src/packages/toast/Notification.tsx @@ -138,7 +138,16 @@ export default class Notification extends React.PureComponent< >
{title}
) : null} - - {content} - + {content ? ( + {content} + ) : null}
diff --git a/src/packages/toast/demos/h5/demo1.tsx b/src/packages/toast/demos/h5/demo1.tsx index 37016161ea..afbecc008c 100644 --- a/src/packages/toast/demos/h5/demo1.tsx +++ b/src/packages/toast/demos/h5/demo1.tsx @@ -8,7 +8,14 @@ const Demo1 = () => { title="文字提示" onClick={() => Toast.show('网络失败，请稍后再试~')} /> - Toast.show('标题提示')} /> + + Toast.show({ + title: '成功提示', + }) + } + /> @@ -23,7 +30,7 @@ const Demo1 = () => { title="失败提示" onClick={() => Toast.show({ - content: '失败提示', + title: '失败提示', icon: 'fail', }) } @@ -32,7 +39,7 @@ const Demo1 = () => { title="警告提示" onClick={() => Toast.show({ - content: '警告提示', + title: '警告提示', icon: 'warn', }) } @@ -41,7 +48,7 @@ const Demo1 = () => { title="加载提示" onClick={() => Toast.show({ - content: '加载提示', + title: '加载提示', icon: 'loading', }) } diff --git a/src/packages/toast/demos/taro/demo1.tsx b/src/packages/toast/demos/taro/demo1.tsx index c26eb81bcc..91b6c3730d 100644 --- a/src/packages/toast/demos/taro/demo1.tsx +++ b/src/packages/toast/demos/taro/demo1.tsx @@ -13,10 +13,10 @@ const Demo1 = () => { const openToast = ( type: string, - content: string, + title?: string, duration?: number, icon?: string, - title?: string + content?: string ) => { const changeState = Object.assign(state, { type, @@ -43,27 +43,27 @@ const Demo1 = () => { { - openToast('text', '网络失败，请稍后再试~') + openToast( + 'text', + undefined, + undefined, + undefined, + '网络失败，请稍后再试~' + ) setShowToast(true) }} /> { - openToast( - 'text', - '网络失败，请稍后再试~', - undefined, - undefined, - '标题提示' - ) + openToast('text', '标题提示') setShowToast(true) }} /> { - openToast('success', '成功提示成功提示成功提示') + openToast('success', '成功提示') setShowToast(true) }} /> diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss index 78af89391c..06071582c4 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -51,7 +51,9 @@ justify-content: center; align-items: center; min-width: 30%; - max-width: 95.7%; + max-width: 64%; + // min-width: 112px; + // max-width: 240px; font-size: $toast-text-font-size; text-align: $toast-inner-text-align; padding: $toast-inner-padding; @@ -60,6 +62,11 @@ border-radius: $toast-inner-border-radius; color: $toast-font-color; + &-descrption { + max-width: 95.7%; + // max-width: 359px; + } + &-normal { word-break: normal; word-wrap: normal; @@ -99,9 +106,7 @@ &-text { color: #ffffff; text-align: $toast-inner-text-align; - &-empty { - margin-bottom: -8px; - } + line-height: 20px; } &-title { @@ -109,6 +114,7 @@ font-size: $toast-title-font-size; font-weight: 500; text-align: $toast-inner-text-align; + line-height: 22px; } &-icon { @@ -122,7 +128,7 @@ display: flex; align-items: center; justify-content: center; - margin-bottom: 8px; + margin: 3px 0 5px; color: #ffffff; &-icon { diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx index 2e3d059480..109911ad6d 100644 --- a/src/packages/toast/toast.taro.tsx +++ b/src/packages/toast/toast.taro.tsx @@ -198,7 +198,16 @@ export const Toast: FunctionComponent< > {hasIcon() ? ( @@ -209,11 +218,9 @@ export const Toast: FunctionComponent< {title ? ( {title} ) : null} - - {content || msg} - + {content || msg ? ( + {content || msg} + ) : null} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e00ca3545b..ecf0a53505 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -898,7 +898,7 @@ $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 24px) !default; $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default; $toast-inner-border-radius: var( --nutui-toast-inner-border-radius, From 87bd30b5538499f5463e2c6e31364a3249d97522 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 25 Nov 2024 11:13:14 +0800 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E9=80=82=E9=85=8Dv14?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/toast/doc.en-US.md | 4 ++-- src/packages/toast/doc.md | 4 ++-- src/packages/toast/doc.taro.md | 4 ++-- src/packages/toast/doc.zh-TW.md | 6 ++---- src/packages/toast/toast.scss | 13 ++++++------- src/packages/toast/toast.taro.tsx | 13 ++++--------- src/styles/variables.scss | 4 ++-- 7 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/packages/toast/doc.en-US.md b/src/packages/toast/doc.en-US.md index d871b8c6ce..b8a9bac995 100644 --- a/src/packages/toast/doc.en-US.md +++ b/src/packages/toast/doc.en-US.md @@ -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` | diff --git a/src/packages/toast/doc.md b/src/packages/toast/doc.md index 74d3b1d520..8e79977684 100644 --- a/src/packages/toast/doc.md +++ b/src/packages/toast/doc.md @@ -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` | diff --git a/src/packages/toast/doc.taro.md b/src/packages/toast/doc.taro.md index 2c2cc17d84..e812421ca3 100644 --- a/src/packages/toast/doc.taro.md +++ b/src/packages/toast/doc.taro.md @@ -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` | diff --git a/src/packages/toast/doc.zh-TW.md b/src/packages/toast/doc.zh-TW.md index 9f072e24d9..3a33f2a283 100644 --- a/src/packages/toast/doc.zh-TW.md +++ b/src/packages/toast/doc.zh-TW.md @@ -1,7 +1,5 @@ # Toast 吐司 -# - 用於輕提示。 ### 引入 @@ -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` | diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss index c51f808460..1b48720d1c 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -52,10 +52,9 @@ flex-direction: column; justify-content: center; align-items: center; - min-width: 30%; - max-width: 64%; - // min-width: 112px; - // max-width: 240px; + min-width: 96px; + max-width: 60%; + // max-width: 224px; font-size: $toast-text-font-size; text-align: $toast-inner-text-align; padding: $toast-inner-padding; @@ -65,8 +64,8 @@ color: $toast-font-color; &-descrption { - max-width: 95.7%; - // max-width: 359px; + max-width: 68.2%; + // max-width: 256px; } &-normal { @@ -119,7 +118,7 @@ line-height: 22px; } - &-icon { + .nut-icon { width: 24px; height: 24px; color: #ffffff; diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx index 109911ad6d..5249e8faf1 100644 --- a/src/packages/toast/toast.taro.tsx +++ b/src/packages/toast/toast.taro.tsx @@ -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 @@ -51,7 +50,6 @@ const defaultProps = { title: '', size: 'base', // 设置字体大小，默认base,可选large\small\base icon: null, - iconSize: '20', content: '', msg: '', type: 'text', @@ -78,7 +76,6 @@ export const Toast: FunctionComponent< position, contentStyle, icon, - iconSize, content, msg, duration, @@ -165,12 +162,10 @@ export const Toast: FunctionComponent< } return { - success: ( - - ), - fail: , - warn: , - loading: , + success: , + fail: , + warn: , + loading: , }[type] } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index e842a57d0c..5c9dabc92d 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -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, 13px 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; From aed440d3bf39f66b2ae02fcd000a1eb67d879030 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 25 Nov 2024 11:18:01 +0800 Subject: [PATCH 3/5] feat: add marking --- src/config.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/config.json b/src/config.json index 1ba789e265..5af5997cbd 100644 --- a/src/config.json +++ b/src/config.json @@ -882,6 +882,7 @@ "sort": 1, "show": true, "taro": true, + "v14": true, "author": "VickyYe" } ] From 7ea224b34a33d8779ca9344022b057c67afe86ae Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Mon, 2 Dec 2024 14:24:16 +0800 Subject: [PATCH 4/5] fix: modify pr --- src/packages/toast/demos/taro/demo1.tsx | 19 +++++++++++-------- src/packages/toast/toast.taro.tsx | 12 +++--------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/packages/toast/demos/taro/demo1.tsx b/src/packages/toast/demos/taro/demo1.tsx index 91b6c3730d..d9d856a268 100644 --- a/src/packages/toast/demos/taro/demo1.tsx +++ b/src/packages/toast/demos/taro/demo1.tsx @@ -2,7 +2,13 @@ import React, { useState } from 'react' import { Cell, Toast } from '@nutui/nutui-react-taro' const Demo1 = () => { - const [state, setState] = useState({ + const [state, setState] = useState<{ + content?: string + type: string + duration?: number + icon?: string + title?: string + }>({ content: 'toast', type: 'text', duration: 2, @@ -43,13 +49,10 @@ const Demo1 = () => { { - openToast( - 'text', - undefined, - undefined, - undefined, - '网络失败，请稍后再试~' - ) + setState({ + type: 'text', + content: '网络失败，请稍后再试~', + }) setShowToast(true) }} /> diff --git a/src/packages/toast/toast.taro.tsx b/src/packages/toast/toast.taro.tsx index 5249e8faf1..178b1c8d8b 100644 --- a/src/packages/toast/toast.taro.tsx +++ b/src/packages/toast/toast.taro.tsx @@ -36,10 +36,6 @@ export interface ToastProps extends BasicComponent { visible: boolean wordBreak?: ToastWordBreak onClose: () => void - /** - * @deprecated Please use `content` prop instead. - */ - msg: React.ReactNode } const defaultProps = { @@ -51,7 +47,6 @@ const defaultProps = { size: 'base', // 设置字体大小，默认base,可选large\small\base icon: null, content: '', - msg: '', type: 'text', closeOnOverlayClick: false, lockScroll: false, @@ -77,7 +72,6 @@ export const Toast: FunctionComponent< contentStyle, icon, content, - msg, duration, type, title, @@ -200,7 +194,7 @@ export const Toast: FunctionComponent< `${classPrefix}-inner-${size}`, `${classPrefix}-inner-${wordBreak}`, { - [`${classPrefix}-inner-descrption`]: content || msg, + [`${classPrefix}-inner-descrption`]: content, } )} style={{ ...styles, ...contentStyle }} @@ -213,8 +207,8 @@ export const Toast: FunctionComponent< {title ? ( {title} ) : null} - {content || msg ? ( - {content || msg} + {content ? ( + {content} ) : null} From f3a555fee5028db1e6557164e4cc39bf4fd6ee64 Mon Sep 17 00:00:00 2001 From: songchenglin3 <353833373@qq.com> Date: Wed, 4 Dec 2024 14:42:13 +0800 Subject: [PATCH 5/5] fix: modify pr --- src/packages/toast/demos/h5/demo1.tsx | 2 +- src/packages/toast/toast.scss | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/packages/toast/demos/h5/demo1.tsx b/src/packages/toast/demos/h5/demo1.tsx index afbecc008c..6d09f7cf3f 100644 --- a/src/packages/toast/demos/h5/demo1.tsx +++ b/src/packages/toast/demos/h5/demo1.tsx @@ -21,7 +21,7 @@ const Demo1 = () => { onClick={() => Toast.show({ title: '成功提示', - content: '成功提示成功提示成功提示', + content: '简介表述最多展示十二个字', icon: 'success', }) } diff --git a/src/packages/toast/toast.scss b/src/packages/toast/toast.scss index 1b48720d1c..37d9a41226 100644 --- a/src/packages/toast/toast.scss +++ b/src/packages/toast/toast.scss @@ -55,6 +55,7 @@ min-width: 96px; max-width: 60%; // max-width: 224px; + box-sizing: border-box; font-size: $toast-text-font-size; text-align: $toast-inner-text-align; padding: $toast-inner-padding; @@ -113,7 +114,7 @@ &-title { color: #ffffff; font-size: $toast-title-font-size; - font-weight: 500; + font-weight: 600; text-align: $toast-inner-text-align; line-height: 22px; }