Skip to content

Commit

Permalink
fix(popup): demo拆解与规范 (jdf2e#2122)
Browse files Browse the repository at this point in the history 
* chore: 创建 popup demos 组件内容

* fix(popup): demo拆解与规范

* docs: 调整文案

---------

Co-authored-by: xiaoyatong <[email protected]>
  • Loading branch information
@ZissyW
ZissyW and xiaoyatong authored Mar 25, 2024
1 parent 0efb34a commit b1dbb2d
Show file tree
Hide file tree
Showing 21 changed files with 766 additions and 1,082 deletions.
306 changes: 17 additions & 289 deletions src/packages/popup/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import React, { useState } from 'react'
import { Failure, Heart } from '@nutui/icons-react-taro'
import React from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Cell, Popup } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'

import Demo1 from './demos/taro/demo1'
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 Demo7 from './demos/taro/demo7'
import Demo8 from './demos/taro/demo8'

const PopupDemo = () => {
const [translated] = useTranslate({
'zh-CN': {
Expand Down Expand Up @@ -70,310 +75,33 @@ const PopupDemo = () => {
},
})

const [showBasic, setShowBasic] = useState(false)
const [showTop, setShowTop] = useState(false)
const [showBottom, setShowBottom] = useState(false)
const [scrollPenetration, setScrollPenetration] = useState(false)
const [showLeft, setShowLeft] = useState(false)
const [showRight, setShowRight] = useState(false)
const [showIcon, setShowIcon] = useState(false)
const [showIconPosition, setShowIconPosition] = useState(false)
const [showIconDefine, setShowIconDefine] = useState(false)
const [showBottomRound, setShowBottomRound] = useState(false)
const [showMutiple, setShowMutiple] = useState(false)
const [showMutipleInner, setShowMutipleInner] = useState(false)
const [showOverlayStop, setShowOverlayStop] = useState(false)
const [showCloseIconStop, setShowCloseIconStop] = useState(false)

return (
<>
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>{translated.ce5c5446}</h2>
<Cell
title={translated.c38a08ef}
onClick={() => {
setShowBasic(true)
}}
/>
<Popup
visible={showBasic}
style={{ padding: '30px 50px' }}
onClose={() => {
setShowBasic(false)
}}
>
<View style={{ height: '200px', overflowY: 'scroll' }}>
{Array.from({ length: 20 })
.fill('')
.map((v, i) => (
<Cell key={i}>
<View>{translated.b840c88f}</View>
</Cell>
))}
</View>
</Popup>
<Demo1 />

<h2>{translated.a74a1fd4}</h2>
<Cell
title={translated['8dab2f66']}
onClick={() => {
setShowTop(true)
}}
/>
<Popup
visible={showTop}
destroyOnClose
position="top"
onClose={() => {
setShowTop(false)
}}
/>
<Cell
title={translated.cfbdc781}
onClick={() => {
setShowBottom(true)
}}
/>
<Popup
visible={showBottom}
position="bottom"
onClose={() => {
setShowBottom(false)
}}
lockScroll
>
<ScrollView scrollY style={{ height: '200px' }}>
{Array.from({ length: 200 })
.fill('')
.map((v, i) => (
<View key={i}>
<Cell>
{translated.cfbdc781}-{i}
</Cell>
</View>
))}
</ScrollView>
</Popup>
<Cell
title={translated.c3a3a1d2}
onClick={() => {
setShowLeft(true)
}}
/>
<Popup
visible={showLeft}
style={{ width: '40%', height: '100%' }}
position="left"
onClose={() => {
setShowLeft(false)
}}
/>
<Cell
title={translated.e51e4582}
onClick={() => {
setShowRight(true)
}}
/>
<Popup
visible={showRight}
style={{ width: '40%', height: '100%' }}
position="right"
onClose={() => {
setShowRight(false)
}}
/>
<Demo2 />

<h2>{translated['7db1a8b2']}</h2>
<Cell
title={translated['7db1a8b2']}
onClick={() => {
setShowIcon(true)
}}
/>
<Popup
closeable
visible={showIcon}
left="返回"
title="我是标题"
position="bottom"
onClose={() => {
setShowIcon(false)
}}
/>
<Cell
title={translated.a52bef0c}
onClick={() => {
setShowIconPosition(true)
}}
/>
<Popup
closeable
visible={showIconPosition}
closeIconPosition="top-left"
position="bottom"
onClose={() => {
setShowIconPosition(false)
}}
/>
<Cell
title={translated.d04fcbda}
onClick={() => {
setShowIconDefine(true)
}}
/>
<Popup
closeable
closeIcon={<Heart size="15px" />}
visible={showIconDefine}
style={{ height: '100%' }}
position="bottom"
onClose={() => {
setShowIconDefine(false)
}}
/>
<Demo3 />

<h2>{translated[`7db1a8b3`]}</h2>
<Cell
title={translated[`7db1a8b4`]}
onClick={() => {
setShowOverlayStop(true)
}}
/>
<Popup
visible={showOverlayStop}
style={{ padding: '30px 50px' }}
onClose={() => {
setShowOverlayStop(false)
}}
onOverlayClick={() => {
console.log('onOverlayClick')
return false
}}
>
{translated.b840c88f}
</Popup>
<Cell
title={translated[`7db1a8b5`]}
onClick={() => {
setShowCloseIconStop(true)
}}
/>
<Popup
closeable
closeIcon={<Failure size={12} />}
visible={showCloseIconStop}
closeOnOverlayClick={false}
style={{ height: '40%' }}
position="bottom"
onClose={() => {
setShowIcon(false)
}}
onCloseIconClick={() => {
console.log('onCloseIconClick')
}}
/>
<Demo4 />

<h2>{translated['0aaad620']}</h2>
<Cell
title={translated['0aaad620']}
onClick={() => {
setShowBottomRound(true)
}}
/>
<Popup
visible={showBottomRound}
style={{ height: '20%' }}
position="top"
round
onClose={() => {
setShowBottomRound(false)
}}
/>
<Demo5 />
{/* 等一下3.5.0 */}
{/* <h2>{translated.ea3d02f2}</h2>
<Cell
title={translated.ea3d02f2}
onClick={() => {
setShowMountNode(true)
}}
/>
<Popup
visible={showMountNode}
style={{ padding: '30px 50px' }}
portal={document.body}
onClose={() => {
setShowMountNode(false)
}}
>
body
</Popup> */}
<Demo6 /> */}

<h2>{translated.c9e6df49}</h2>
<Cell
title={translated.c9e6df49}
onClick={() => {
setShowMutiple(true)
}}
/>
<Popup
visible={showMutiple}
style={{ padding: '30px 50px' }}
onClose={() => {
setShowMutiple(false)
}}
>
<span
onClick={() => {
setShowMutipleInner(true)
}}
>
Click It
</span>
</Popup>
<Popup
visible={showMutipleInner}
style={{ padding: '30px 50px' }}
overlayStyle={{ backgroundColor: 'transparent' }}
onClose={() => {
setShowMutipleInner(false)
}}
>
<span
onClick={() => {
setShowMutipleInner(false)
}}
>
close
</span>
</Popup>
<Demo7 />

<h2>{translated.cfbdc782}</h2>
<Cell
title={translated.cfbdc782}
onClick={() => {
setScrollPenetration(true)
}}
/>
<Popup
visible={scrollPenetration}
position="bottom"
onClose={() => {
setShowBottom(false)
}}
lockScroll
>
<ScrollView scrollY style={{ height: '200px' }}>
{Array.from({ length: 200 })
.fill('')
.map((v, i) => (
<Cell key={i}>
{translated.cfbdc782}-{i}
</Cell>
))}
</ScrollView>
</Popup>
<Demo8 />
</div>
</>
)
Expand Down
Loading

0 comments on commit b1dbb2d

Please sign in to comment.