diff --git a/src/config.json b/src/config.json index 1ba789e265..30c474edac 100644 --- a/src/config.json +++ b/src/config.json @@ -768,6 +768,7 @@ "sort": 15, "show": true, "taro": true, + "v14": true, "author": "songsong" }, { diff --git a/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap b/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap index b95266e7d8..959f6571cd 100644 --- a/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap +++ b/src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap @@ -7,8 +7,28 @@ exports[`should render description correctly 1`] = ` >
+ > + + + , + + +
diff --git a/src/packages/resultpage/demo.taro.tsx b/src/packages/resultpage/demo.taro.tsx index 9db17f32ed..5a68a6ef3c 100644 --- a/src/packages/resultpage/demo.taro.tsx +++ b/src/packages/resultpage/demo.taro.tsx @@ -1,6 +1,7 @@ import React from 'react' import { ScrollView, View } from '@tarojs/components' import { useTranslate } from '@/sites/assets/locale/taro' +import { web } from '@/utils/platform-taro' import Header from '@/sites/components/header' import Demo1 from './demos/taro/demo1' import Demo2 from './demos/taro/demo2' @@ -35,7 +36,7 @@ const ResultPageDemo = () => { return ( <>
- + {translated.basic} {translated.modifyStatus} diff --git a/src/packages/resultpage/demos/h5/demo1.tsx b/src/packages/resultpage/demos/h5/demo1.tsx index 09639ee324..6830bbe059 100644 --- a/src/packages/resultpage/demos/h5/demo1.tsx +++ b/src/packages/resultpage/demos/h5/demo1.tsx @@ -10,10 +10,10 @@ const Demo1 = () => { status="success" actions={[ { - text: '次要按钮', + text: '次要操作', }, { - text: '主要按钮', + text: '主要操作', type: 'primary', }, ]} diff --git a/src/packages/resultpage/demos/h5/demo2.tsx b/src/packages/resultpage/demos/h5/demo2.tsx index 8cdffc6bc5..f6f35d3f3d 100644 --- a/src/packages/resultpage/demos/h5/demo2.tsx +++ b/src/packages/resultpage/demos/h5/demo2.tsx @@ -10,10 +10,10 @@ const Demo1 = () => { status="error" actions={[ { - text: '次要按钮', + text: '次要操作', }, { - text: '主要按钮', + text: '主要操作', type: 'primary', }, ]} diff --git a/src/packages/resultpage/demos/h5/demo3.tsx b/src/packages/resultpage/demos/h5/demo3.tsx index db8e9f13df..1431130b3a 100644 --- a/src/packages/resultpage/demos/h5/demo3.tsx +++ b/src/packages/resultpage/demos/h5/demo3.tsx @@ -9,10 +9,10 @@ const Demo1 = () => { status="warning" actions={[ { - text: '次要按钮', + text: '次要操作', }, { - text: '主要按钮', + text: '主要操作', type: 'primary', }, ]} diff --git a/src/packages/resultpage/demos/h5/demo4.tsx b/src/packages/resultpage/demos/h5/demo4.tsx index 3b8d9f211a..2341b71a0a 100644 --- a/src/packages/resultpage/demos/h5/demo4.tsx +++ b/src/packages/resultpage/demos/h5/demo4.tsx @@ -6,12 +6,12 @@ const Demo1 = () => { <> { diff --git a/src/packages/resultpage/demos/taro/demo1.tsx b/src/packages/resultpage/demos/taro/demo1.tsx index e95ae20274..060547082d 100644 --- a/src/packages/resultpage/demos/taro/demo1.tsx +++ b/src/packages/resultpage/demos/taro/demo1.tsx @@ -10,10 +10,10 @@ const Demo1 = () => { status="success" actions={[ { - text: '次要按钮', + text: '次要操作', }, { - text: '主要按钮', + text: '主要操作', type: 'primary', }, ]} diff --git a/src/packages/resultpage/demos/taro/demo2.tsx b/src/packages/resultpage/demos/taro/demo2.tsx index 6011a58030..0568d97a66 100644 --- a/src/packages/resultpage/demos/taro/demo2.tsx +++ b/src/packages/resultpage/demos/taro/demo2.tsx @@ -10,10 +10,10 @@ const Demo1 = () => { status="error" actions={[ { - text: '次要按钮', + text: '次要操作', }, { - text: '主要按钮', + text: '主要操作', type: 'primary', }, ]} diff --git a/src/packages/resultpage/demos/taro/demo3.tsx b/src/packages/resultpage/demos/taro/demo3.tsx index f8e23acf60..f09bd92518 100644 --- a/src/packages/resultpage/demos/taro/demo3.tsx +++ b/src/packages/resultpage/demos/taro/demo3.tsx @@ -9,10 +9,10 @@ const Demo1 = () => { status="warning" actions={[ { - text: '次要按钮', + text: '次要操作', }, { - text: '主要按钮', + text: '主要操作', type: 'primary', }, ]} diff --git a/src/packages/resultpage/demos/taro/demo4.tsx b/src/packages/resultpage/demos/taro/demo4.tsx index d5e97d7eb1..e2102306f7 100644 --- a/src/packages/resultpage/demos/taro/demo4.tsx +++ b/src/packages/resultpage/demos/taro/demo4.tsx @@ -6,12 +6,12 @@ const Demo1 = () => { <> { diff --git a/src/packages/resultpage/doc.en-US.md b/src/packages/resultpage/doc.en-US.md index 4a306fd216..4709a4d4b6 100644 --- a/src/packages/resultpage/doc.en-US.md +++ b/src/packages/resultpage/doc.en-US.md @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | -| title | title | `ReactNode` | `-`| +| title | title | `ReactNode` | `-` | | description | Description, up to two lines displayed | `ReactNode` | `-` | | status | Status type | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` | | icon | Custom `icon` | `ReactNode` | `-` | @@ -72,13 +72,13 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-resultpage-width | Content area width | `247px` | -| \--nutui-resultpage-icon-size | Width and height of icon | `48px` | -| \--nutui-resultpage-icon-margin-bottom | margin-bottom value of the icon | `16px` | -| \--resultpage-title-margin-bottom | The margin-top value of the title | `9px` | +| \--nutui-resultpage-width | Content area width | `240px` | +| \--nutui-resultpage-icon-size | Width and height of icon | `36px` | +| \--nutui-resultpage-icon-margin-bottom | margin-bottom value of the icon | `12px` | +| \--resultpage-title-margin-bottom | The margin-top value of the title | `12px` | | \--nutui-resultpage-title-font-size | The font size of the title | `$font-size-xl` | | \---nutui-resultpage-title-color | The text color of the title | `$color-title` | | \--nutui-resultpage-description-font-size | Describe the font size | `$font-size-base` | | \--nutui-resultpage-description-color | Describe the text color | `$color-text` | | \--nutui-resultpage-description-line-height | Describe the line height | `20px` | -| \--nutui-resultpage-actions-margin-topt | The margin-top value of the operation area | `21px` | \ No newline at end of file +| \--nutui-resultpage-actions-margin-topt | The margin-top value of the operation area | `16px` | diff --git a/src/packages/resultpage/doc.md b/src/packages/resultpage/doc.md index 51ae5b1989..71b174aab4 100644 --- a/src/packages/resultpage/doc.md +++ b/src/packages/resultpage/doc.md @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| title | 标题 | `ReactNode` | `-`| +| title | 标题 | `ReactNode` | `-` | | description | 描述，最多展示两行 | `ReactNode` | `-` | | status | 状态类型 | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` | | icon | 自定义 `icon` | `ReactNode` | `-` | @@ -72,13 +72,13 @@ import { ResultPage } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-resultpage-width | 内容区域宽度 | `247px` | -| \--nutui-resultpage-icon-size | icon的宽高 | `48px` | -| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `16px` | -| \--resultpage-title-margin-bottom | 标题的margin-top值 | `9px` | +| \--nutui-resultpage-width | 内容区域宽度 | `240px` | +| \--nutui-resultpage-icon-size | icon的宽高 | `36px` | +| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `12px` | +| \--resultpage-title-margin-bottom | 标题的margin-top值 | `12px` | | \--nutui-resultpage-title-font-size | 标题的字体大小 | `$font-size-xl` | | \---nutui-resultpage-title-color | 标题的文字颜色 | `$color-title` | | \--nutui-resultpage-description-font-size | 描述的字体大小 | `$font-size-base` | | \--nutui-resultpage-description-color | 描述的文字颜色 | `$color-text` | | \--nutui-resultpage-description-line-height | 描述的行高 | `20px` | -| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `21px` | \ No newline at end of file +| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `16px` | diff --git a/src/packages/resultpage/doc.taro.md b/src/packages/resultpage/doc.taro.md index 8a12308b7f..a58442854d 100644 --- a/src/packages/resultpage/doc.taro.md +++ b/src/packages/resultpage/doc.taro.md @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| title | 标题 | `ReactNode` | `-`| +| title | 标题 | `ReactNode` | `-` | | description | 描述，最多展示两行 | `ReactNode` | `-` | | status | 状态类型 | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` | | icon | 自定义 `icon` | `ReactNode` | `-` | @@ -72,13 +72,13 @@ import { ResultPage } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-resultpage-width | 内容区域宽度 | `247px` | -| \--nutui-resultpage-icon-size | icon的宽高 | `48px` | -| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `16px` | -| \--resultpage-title-margin-bottom | 标题的margin-top值 | `9px` | +| \--nutui-resultpage-width | 内容区域宽度 | `240px` | +| \--nutui-resultpage-icon-size | icon的宽高 | `36px` | +| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `12px` | +| \--resultpage-title-margin-bottom | 标题的margin-top值 | `12px` | | \--nutui-resultpage-title-font-size | 标题的字体大小 | `$font-size-xl` | | \---nutui-resultpage-title-color | 标题的文字颜色 | `$color-title` | | \--nutui-resultpage-description-font-size | 描述的字体大小 | `$font-size-base` | | \--nutui-resultpage-description-color | 描述的文字颜色 | `$color-text` | | \--nutui-resultpage-description-line-height | 描述的行高 | `20px` | -| \--nutui-resultpage-actions-margin-topt | 操作区域的margin-top值 | `21px` | \ No newline at end of file +| \--nutui-resultpage-actions-margin-top | 操作区域的margin-top值 | `16px` | diff --git a/src/packages/resultpage/doc.zh-TW.md b/src/packages/resultpage/doc.zh-TW.md index 4986b19dba..a244df17cd 100644 --- a/src/packages/resultpage/doc.zh-TW.md +++ b/src/packages/resultpage/doc.zh-TW.md @@ -58,7 +58,7 @@ import { ResultPage } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| title | 標題 | `ReactNode` | `-`| +| title | 標題 | `ReactNode` | `-` | | description | 描述，最多展示兩行 | `ReactNode` | `-` | | status | 狀態類型 | `success` \| `error` \| `warning` \| `info` \| `waiting` | `info` | | icon | 自定義 `icon` | `ReactNode` | `-` | @@ -72,13 +72,13 @@ import { ResultPage } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-resultpage-width | 內容區域寬度 | `247px` | -| \--nutui-resultpage-icon-size | icon的寬高 | `48px` | -| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `16px` | -| \--resultpage-title-margin-bottom | 標題的margin-top值 | `9px` | +| \--nutui-resultpage-width | 內容區域寬度 | `240px` | +| \--nutui-resultpage-icon-size | icon的寬高 | `36px` | +| \--nutui-resultpage-icon-margin-bottom | icon的margin-bottom值 | `12px` | +| \--resultpage-title-margin-bottom | 標題的margin-top值 | `12px` | | \--nutui-resultpage-title-font-size | 標題的字體大小 | `$font-size-xl` | | \---nutui-resultpage-title-color | 標題的文字顏色 | `$color-title` | | \--nutui-resultpage-description-font-size | 描述的字體大小 | `$font-size-base` | | \--nutui-resultpage-description-color | 描述的文字顏色 | `$color-text` | | \--nutui-resultpage-description-line-height | 描述的行高 | `20px` | -| \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `21px` | \ No newline at end of file +| \--nutui-resultpage-actions-margin-topt | 操作區域的margin-top值 | `16px` | diff --git a/src/packages/resultpage/resultpage.scss b/src/packages/resultpage/resultpage.scss index 068eae9c2d..e5d2dbbf67 100644 --- a/src/packages/resultpage/resultpage.scss +++ b/src/packages/resultpage/resultpage.scss @@ -5,10 +5,12 @@ align-items: center; margin: 0 auto; &-icon { - height: $resultpage-icon-size; - width: $resultpage-icon-size; + display: inline-flex; margin-bottom: $resultpage-icon-margin-bottom; - background-size: 100%; + .nut-icon { + height: $resultpage-icon-size; + width: $resultpage-icon-size; + } } &-title { width: $resultpage-width; diff --git a/src/packages/resultpage/resultpage.taro.tsx b/src/packages/resultpage/resultpage.taro.tsx index 7a2fa372bb..ed70021976 100644 --- a/src/packages/resultpage/resultpage.taro.tsx +++ b/src/packages/resultpage/resultpage.taro.tsx @@ -1,6 +1,7 @@ -import React, { FunctionComponent, ReactNode, useState } from 'react' +import React, { FunctionComponent, ReactNode } from 'react' import classNames from 'classnames' -import { View, Text, Image } from '@tarojs/components' +import { Tips, Warning, Failure, Ask, Success } from '@nutui/icons-react-taro' +import { View, Text } from '@tarojs/components' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { Button, @@ -18,6 +19,7 @@ export type ResultPageAction = { disabled?: boolean onClick?: () => () => void } + export interface ResultPageProps extends BasicComponent { title: ReactNode description: ReactNode @@ -54,24 +56,17 @@ export const ResultPage: FunctionComponent< const cls = classNames(classPrefix, className) const defaultStatus: ResultPageStatusOptions = { - success: - 'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png', - error: - 'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png', - warning: - 'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png', - info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png', - waiting: - 'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png', + success: , + error: , + warning: , + info: , + waiting: , } - const [iconSrc] = useState( - `${typeof icon === 'string' && icon ? icon : defaultStatus[status]}` - ) return ( - {typeof icon === 'string' ? ( - - ) : null} + + {icon || defaultStatus[status]} + {typeof title === 'string' && title ? ( {title} ) : ( @@ -90,7 +85,7 @@ export const ResultPage: FunctionComponent< const { text, ...rest } = action return ( - diff --git a/src/packages/resultpage/resultpage.tsx b/src/packages/resultpage/resultpage.tsx index 2323dc667e..1623180ec8 100644 --- a/src/packages/resultpage/resultpage.tsx +++ b/src/packages/resultpage/resultpage.tsx @@ -1,5 +1,6 @@ -import React, { FunctionComponent, ReactNode, useState } from 'react' +import React, { FunctionComponent, ReactNode } from 'react' import classNames from 'classnames' +import { Tips, Warning, Failure, Ask, Success } from '@nutui/icons-react' import { BasicComponent, ComponentDefaults } from '@/utils/typings' import { Button, ButtonFill, ButtonSize, ButtonType } from '../button/button' import { ResultPageStatus, ResultPageStatusOptions } from './types' @@ -49,27 +50,17 @@ export const ResultPage: FunctionComponent< const cls = classNames(classPrefix, className) const defaultStatus: ResultPageStatusOptions = { - success: - 'https://img11.360buyimg.com/imagetools/jfs/t1/233690/33/17768/1251/66543101F2589003b/f5dcaea8e29c23aa.png', - error: - 'https://img14.360buyimg.com/imagetools/jfs/t1/224715/38/17932/1426/66543101F1dbc50e8/eaffdb926b00584b.png', - warning: - 'https://img13.360buyimg.com/imagetools/jfs/t1/200545/24/43507/1219/66543101Fe58cfbe4/c29054555f3bcb4b.png', - info: 'https://img13.360buyimg.com/imagetools/jfs/t1/199421/5/44230/1320/66543100F23a9466e/0e9eadd5cebf07fb.png', - waiting: - 'https://img11.360buyimg.com/imagetools/jfs/t1/226266/21/17859/1428/66543101F2dc4c3f3/44e2ae2b51c6e0ed.png', + success: , + error: , + warning: , + info: , + waiting: , } - const [imgStyle] = useState({ - backgroundImage: `url(${typeof icon === 'string' && icon ? icon : defaultStatus[status]})`, - backgroundSize: '100% 100%', - }) return (
- {typeof icon === 'string' ? ( -
- ) : ( - icon - )} +
+ {icon || defaultStatus[status]} +
{typeof title === 'string' && title ? (
{title}
) : ( @@ -86,7 +77,9 @@ export const ResultPage: FunctionComponent< const { text, ...rest } = action return (
- +
) })} diff --git a/src/packages/resultpage/types.ts b/src/packages/resultpage/types.ts index 9f01264b7e..eb02bf4fc5 100644 --- a/src/packages/resultpage/types.ts +++ b/src/packages/resultpage/types.ts @@ -1,5 +1,5 @@ export type ResultPageStatusOptions = { - [key: string]: string + [key: string]: React.ReactNode } export type ResultPageStatus = diff --git a/src/styles/variables.scss b/src/styles/variables.scss index d471a05575..a8b1c720bc 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2408,15 +2408,15 @@ $loading-color: var(--nutui-loading-color, $color-text-help) !default; $loading-font-size: var(--nutui-loading-font-size, $font-size-s) !default; // ResultPage -$resultpage-width: var(--nutui-resultpage-width, 247px) !default; -$resultpage-icon-size: var(--nutui-resultpage-icon-size, 48px) !default; +$resultpage-width: var(--nutui-resultpage-width, 240px) !default; +$resultpage-icon-size: var(--nutui-resultpage-icon-size, 36px) !default; $resultpage-icon-margin-bottom: var( --nutui-resultpage-icon-margin-bottom, - 16px + 12px ) !default; $resultpage-title-margin-bottom: var( --nutui-resultpage-title-margin-bottom, - 9px + 12px ) !default; $resultpage-title-font-size: var( --nutui-resultpage-title-font-size, @@ -2440,5 +2440,5 @@ $resultpage-description-line-height: var( ) !default; $resultpage-actions-margin-top: var( --nutui-resultpage-actions-margin-top, - 21px + 16px ) !default;