Skip to content

refactor(ResultPage): v16 适配 #3493

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

Open
irisSong wants to merge 1 commit into
base: feat_v4.x
Choose a base branch
from
Open

refactor(ResultPage): v16 适配 #3493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1076,7 +1076,7 @@
"v15": 1,
"author": "songsong",
"dd": true,
"v16": false
"v16": true
},
{
"version": "3.0.0",
Expand Down
4 changes: 1 addition & 3 deletions src/packages/button/button.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,7 @@ export const Button = React.forwardRef<
onClick={(e) => handleClick(e as any)}
>
<View className="nut-button-wrap">
{loading && (
<Loading className="nut-icon-loading" ariaHidden aria-hidden />
)}
{loading && <Loading className="nut-icon-loading" aria-hidden="true" />}
{!loading && icon}
{children && (
<View
Expand Down
1 change: 1 addition & 0 deletions src/packages/configprovider/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -938,6 +938,7 @@ export type NutCSSVariables =
| 'nutuiResultpageIconMarginBottom'
| 'nutuiResultpageTitleMarginBottom'
| 'nutuiResultpageTitleFontSize'
| 'nutuiResultpageTitleLineHeight'
| 'nutuiResultpageTitleColor'
| 'nutuiResultpageDescriptionFontSize'
| 'nutuiResultpageDescriptionColor'
Expand Down
2 changes: 1 addition & 1 deletion src/packages/resultpage/__test__/__snapshots__/resultpage.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ exports[`should render description correctly 1`] = `
<div
class="nut-resultpage-description"
>
内容描述内容可折行，建议最多不超过两行建议最多不超过两行内容描述内容可折行，建议最多不超过两行建议最多不超过两行
内容描述可折行，建议最多不超过两行建议最多不超过两行内容描述可折行，建议最多不超过两行建议最多不超过两行
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/packages/resultpage/__test__/resultpage.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { ResultPage } from '../resultpage'

test('should render description correctly', () => {
const { container, getByText } = render(
<ResultPage description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行内容描述内容可折行，建议最多不超过两行建议最多不超过两行" />
<ResultPage description="内容描述可折行，建议最多不超过两行建议最多不超过两行内容描述可折行，建议最多不超过两行建议最多不超过两行" />
)
expect(
getByText(
'内容描述内容可折行，建议最多不超过两行建议最多不超过两行内容描述内容可折行，建议最多不超过两行建议最多不超过两行'
'内容描述可折行，建议最多不超过两行建议最多不超过两行内容描述可折行，建议最多不超过两行建议最多不超过两行'
)
).toBeTruthy()
expect(container).toMatchSnapshot()
Expand Down
12 changes: 12 additions & 0 deletions src/packages/resultpage/demo.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import Demo2 from './demos/taro/demo2'
import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'

const ResultPageDemo = () => {
const [translated] = useTranslate({
Expand All @@ -17,20 +19,26 @@ const ResultPageDemo = () => {
noTitle: '无标题',
singleButton: '单按钮',
noButton: '无按钮',
popup: '半弹层内嵌',
dialog: '弹窗内嵌',
},
'zh-TW': {
basic: '基礎用法',
modifyStatus: '修改狀態',
noTitle: '無標題',
singleButton: '單按鈕',
noButton: '無按鈕',
popup: '半彈層內嵌',
dialog: '彈窗內嵌',
},
'en-US': {
basic: 'Basic Usage',
modifyStatus: 'Modify Status',
noTitle: 'No Title',
singleButton: 'Single Button',
noButton: 'No Button',
popup: 'Inside Popup',
dialog: 'Inside Dialog',
},
})
return (
Expand All @@ -47,6 +55,10 @@ const ResultPageDemo = () => {
<Demo4 />
<View className="h2">{translated.noButton}</View>
<Demo5 />
<View className="h2">{translated.popup}</View>
<Demo6 />
<View className="h2">{translated.dialog}</View>
<Demo7 />
</ScrollView>
</>
)
Expand Down
12 changes: 12 additions & 0 deletions src/packages/resultpage/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import Demo2 from './demos/h5/demo2'
import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
import Demo7 from './demos/h5/demo7'

const ResultPageDemo = () => {
const [translated] = useTranslate({
Expand All @@ -14,20 +16,26 @@ const ResultPageDemo = () => {
noTitle: '无标题',
singleButton: '单按钮',
noButton: '无按钮',
popup: '半弹层内嵌',
dialog: '弹窗内嵌',
},
'zh-TW': {
basic: '基礎用法',
modifyStatus: '修改狀態',
noTitle: '無標題',
singleButton: '單按鈕',
noButton: '無按鈕',
popup: '半彈層內嵌',
dialog: '彈窗內嵌',
},
'en-US': {
basic: 'Basic Usage',
modifyStatus: 'Modify Status',
noTitle: 'No Title',
singleButton: 'Single Button',
noButton: 'No Button',
popup: 'Inside Popup',
dialog: 'Inside Dialog',
},
})
return (
Expand All @@ -43,6 +51,10 @@ const ResultPageDemo = () => {
<Demo4 />
<h2>{translated.noButton}</h2>
<Demo5 />
<h2>{translated.popup}</h2>
<Demo6 />
<h2>{translated.dialog}</h2>
<Demo7 />
</div>
</>
)
Expand Down
6 changes: 3 additions & 3 deletions src/packages/resultpage/demos/h5/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ const Demo1 = () => {
<Cell>
<ResultPage
title="成功反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="success"
actions={[
{
text: '次要操作',
text: '负向操作',
},
{
text: '主要操作',
text: '建议操作',
type: 'primary',
},
]}
Expand Down
10 changes: 5 additions & 5 deletions src/packages/resultpage/demos/h5/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React from 'react'
import { ResultPage, Cell } from '@nutui/nutui-react'

const Demo1 = () => {
const Demo2 = () => {
return (
<Cell>
<ResultPage
title="失败反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="error"
actions={[
{
text: '次要操作',
text: '负向操作',
},
{
text: '主要操作',
text: '建议操作',
type: 'primary',
},
]}
/>
</Cell>
)
}
export default Demo1
export default Demo2
6 changes: 3 additions & 3 deletions src/packages/resultpage/demos/h5/demo3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ const Demo1 = () => {
return (
<Cell>
<ResultPage
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="warning"
actions={[
{
text: '次要操作',
text: '负向操作',
},
{
text: '主要操作',
text: '建议操作',
type: 'primary',
},
]}
Expand Down
8 changes: 4 additions & 4 deletions src/packages/resultpage/demos/h5/demo4.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ const Demo1 = () => {
<Cell>
<ResultPage
title="信息反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="info"
actions={[
{
text: '主要操作',
text: '建议操作',
type: 'primary',
},
]}
Expand All @@ -20,11 +20,11 @@ const Demo1 = () => {
<Cell>
<ResultPage
title="信息反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="info"
actions={[
{
text: '次要操作',
text: '负向操作',
},
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/packages/resultpage/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Demo1 = () => {
<Cell>
<ResultPage
title="二次确认"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="waiting"
/>
</Cell>
Expand Down
55 changes: 55 additions & 0 deletions src/packages/resultpage/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, { useState } from 'react'
import { Popup, Cell, ResultPage, Button } from '@nutui/nutui-react'

const contentStyle: React.CSSProperties = {
height: '196px',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}

const actionsStyle: React.CSSProperties = {
height: '92px',
padding: '8px',
display: 'flex',
justifyContent: 'center',
gap: '8px',
boxShadow: '0px 0.5px 0px #FFFFFF inset, 0px 8px 40px rgba(0, 0, 0, 0.12)',
}

const actionButtonStyle: React.CSSProperties = {
flex: 1,
}

const Demo6 = () => {
const [visible, setVisible] = useState(false)

return (
<>
<Cell title="半弹层内嵌结果反馈" onClick={() => setVisible(true)} />
<Popup
visible={visible}
position="bottom"
onClose={() => setVisible(false)}
style={{ height: '282px' }}
>
<div className="demo-content" style={contentStyle}>
<ResultPage
title="反馈标题"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="success"
/>
</div>
<div className="demo-actions" style={actionsStyle}>
<Button type="service" size="large" style={actionButtonStyle}>
操作按钮
</Button>
<Button type="primary" size="large" style={actionButtonStyle}>
操作按钮
</Button>
</div>
</Popup>
</>
)
}
export default Demo6
43 changes: 43 additions & 0 deletions src/packages/resultpage/demos/h5/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React, { useState } from 'react'
import { Dialog, Cell, ResultPage } from '@nutui/nutui-react'

const Demo7 = () => {
const [visible, setVisible] = useState(false)

return (
<>
<Cell title="弹窗内嵌结果反馈" onClick={() => setVisible(true)} />
<Dialog
visible={visible}
hideConfirmButton
hideCancelButton
style={{
'--nutui-dialog-padding': '20px 24px',
'--nutui-dialog-content-margin': '0',
}}
>
<ResultPage
title="反馈标题"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="success"
actions={[
{
text: '负向操作',
onClick: () => {
setVisible(false)
},
},
{
text: '建议操作',
type: 'primary',
onClick: () => {
setVisible(false)
},
},
]}
/>
</Dialog>
</>
)
}
export default Demo7
6 changes: 3 additions & 3 deletions src/packages/resultpage/demos/taro/demo1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ const Demo1 = () => {
<Cell>
<ResultPage
title="成功反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="success"
actions={[
{
text: '次要操作',
text: '负向操作',
},
{
text: '主要操作',
text: '建议操作',
type: 'primary',
},
]}
Expand Down
10 changes: 5 additions & 5 deletions src/packages/resultpage/demos/taro/demo2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React from 'react'
import { ResultPage, Cell } from '@nutui/nutui-react-taro'

const Demo1 = () => {
const Demo2 = () => {
return (
<Cell>
<ResultPage
title="失败反馈"
description="内容描述内容可折行，建议最多不超过两行建议最多不超过两行内容描述内容可折行，建议最多不超过两行建议最多不超过两行"
description="内容描述可折行，建议最多不超过两行建议最多不超过两行"
status="error"
actions={[
{
text: '次要操作',
text: '负向操作',
},
{
text: '主要操作',
text: '建议操作',
type: 'primary',
},
]}
/>
</Cell>
)
}
export default Demo1
export default Demo2
Loading
Loading