Skip to content

feat: demos for popup & dialog #2574

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

Merged
Miles-hxy merged 2 commits into from
Sep 6, 2024
Merged

feat: demos for popup & dialog #2574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95c4b82
feat: demos for popup & dialog
xiaoyatong Sep 6, 2024
dd2c803
fix: demo编号
Miles-hxy Sep 6, 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
4 changes: 2 additions & 2 deletions src/packages/popup/demos/h5/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react'

const Demo4 = () => {
const Demo5 = () => {
const [showBottomRound, setShowBottomRound] = useState(false)

return (
Expand All @@ -24,4 +24,4 @@ const Demo4 = () => {
</>
)
}
export default Demo4
export default Demo5
4 changes: 2 additions & 2 deletions src/packages/popup/demos/h5/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react'

const Demo5 = () => {
const Demo6 = () => {
const [showMountNode, setShowMountNode] = useState(false)

return (
Expand All @@ -25,4 +25,4 @@ const Demo5 = () => {
</>
)
}
export default Demo5
export default Demo6
37 changes: 34 additions & 3 deletions src/packages/popup/demos/h5/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react'
import { Popup, Cell, Dialog } from '@nutui/nutui-react'

const Demo6 = () => {
const Demo7 = () => {
const [showMutiple, setShowMutiple] = useState(false)
const [showMutipleInner, setShowMutipleInner] = useState(false)
const [showDialog, setShowDialog] = useState(false)

return (
<>
Expand Down Expand Up @@ -44,7 +45,37 @@ const Demo6 = () => {
close
</span>
</Popup>

<Cell
title="PopUp + Dialog"
onClick={() => {
setShowDialog(true)
}}
/>

<Popup
closeable
visible={showDialog}
style={{ height: '100%' }}
position="bottom"
onClose={() => {
setShowDialog(false)
}}
>
<Cell
title="打开 Dialog"
style={{ margin: '20% 20px', width: '80%' }}
onClick={() =>
Dialog.alert({
title: '提示',
content: '支持函数调用和组件调用两种方式。',
hideCancelButton: true,
confirmText: '确认',
})
}
/>
</Popup>
Comment on lines +56 to +77

@coderabbitai coderabbitai Bot Sep 6, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

配置 Popup 组件和 Dialog 调用

Popup 组件配置为可关闭，并设置在屏幕底部显示。这种配置适合移动设备的用户体验。Dialog.alert 方法被用于在 Popup 内部触发一个对话框，展示了一个确认按钮而隐藏了取消按钮，这可能适用于某些场景，但可能限制了用户的操作选择。

根据之前的评论，建议对对话框的标题和内容进行本地化改进，以更好地适应用户需求。以下是建议的更改：

-              title: '提示',
-              content: '支持函数调用和组件调用两种方式。',
+              title: '操作提示',
+              content: '您可以通过函数调用或组件方式打开此对话框。',
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Popup
closeable
visible={showDialog}
style={{ height: '100%' }}
position="bottom"
onClose={() => {
setShowDialog(false)
}}
>
<Cell
title="打开 Dialog"
style={{ margin: '20% 20px', width: '80%' }}
onClick={() =>
Dialog.alert({
title: '提示',
content: '支持函数调用和组件调用两种方式。',
hideCancelButton: true,
confirmText: '确认',
})
}
/>
</Popup>
<Popup
closeable
visible={showDialog}
style={{ height: '100%' }}
position="bottom"
onClose={() => {
setShowDialog(false)
}}
>
<Cell
title="打开 Dialog"
style={{ margin: '20% 20px', width: '80%' }}
onClick={() =>
Dialog.alert({
title: '操作提示',
content: '您可以通过函数调用或组件方式打开此对话框。',
hideCancelButton: true,
confirmText: '确认',
})
}
/>
</Popup>

</>
)
}
export default Demo6
export default Demo7
4 changes: 2 additions & 2 deletions src/packages/popup/demos/taro/demo5.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react-taro'

const Demo4 = () => {
const Demo5 = () => {
const [showBottomRound, setShowBottomRound] = useState(false)

return (
Expand All @@ -24,4 +24,4 @@ const Demo4 = () => {
</>
)
}
export default Demo4
export default Demo5
4 changes: 2 additions & 2 deletions src/packages/popup/demos/taro/demo6.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react-taro'

const Demo5 = () => {
const Demo6 = () => {
const [showMountNode, setShowMountNode] = useState(false)

return (
Expand All @@ -25,4 +25,4 @@ const Demo5 = () => {
</>
)
}
export default Demo5
export default Demo6
42 changes: 39 additions & 3 deletions src/packages/popup/demos/taro/demo7.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react-taro'
import { Popup, Cell, Dialog } from '@nutui/nutui-react-taro'

const Demo6 = () => {
const Demo7 = () => {
const [showMutiple, setShowMutiple] = useState(false)
const [showMutipleInner, setShowMutipleInner] = useState(false)
const [showDialog, setShowDialog] = useState(false)

return (
<>
Expand All @@ -13,6 +14,7 @@ const Demo6 = () => {
setShowMutiple(true)
}}
/>

<Popup
visible={showMutiple}
style={{ padding: '30px 50px' }}
Expand Down Expand Up @@ -44,7 +46,41 @@ const Demo6 = () => {
close
</span>
</Popup>

<Cell
title="PopUp + Dialog"
onClick={() => {
setShowDialog(true)
}}
/>

<Popup
closeable
visible={showDialog}
style={{ height: '100%' }}
position="bottom"
onClose={() => {
setShowDialog(false)
}}
>
<Cell
title="打开 Dialog"
style={{ margin: '20% 20px', width: '80%' }}
onClick={() =>
Dialog.open('test', {
title: 'Dialog',
content: '可通过 Dialog.open 打开对话框',
onConfirm: () => {
Dialog.close('test')
},
onCancel: () => {
Dialog.close('test')
},
})
}
/>
Comment on lines +66 to +81

@coderabbitai coderabbitai Bot Sep 6, 2024

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Dialog.open 方法使用正确。

包含标题、内容及确认和取消操作的处理。建议将 Dialog.close('test') 调用抽象为一个函数，以提高代码的可维护性。

考虑将 Dialog.close('test') 调用抽象为一个函数，以便在确认和取消处理函数中重用，提高代码的可维护性。

</Popup>
</>
)
}
export default Demo6
export default Demo7
4 changes: 2 additions & 2 deletions src/packages/popup/demos/taro/demo8.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { useState } from 'react'
import { Popup, Cell } from '@nutui/nutui-react-taro'
import { ScrollView } from '@tarojs/components'

const Demo6 = () => {
const Demo8 = () => {
const [scrollPenetration, setScrollPenetration] = useState(false)

return (
Expand All @@ -25,4 +25,4 @@ const Demo6 = () => {
</>
)
}
export default Demo6
export default Demo8