Skip to content

Commit

Permalink
fix(cell): unify the demos of Cell (jdf2e#1998)
Browse files Browse the repository at this point in the history 
* fix(cell): 文档改造

* fix(cell): demo统一格式

* fix(cell): 去除无关代码

* fix(cell): delete irrelevant imported files
  • Loading branch information
@Alex-huxiyang
Alex-huxiyang authored Mar 8, 2024
1 parent 0c30de8 commit dbb162f
Show file tree
Hide file tree
Showing 20 changed files with 505 additions and 1,287 deletions.
206 changes: 18 additions & 188 deletions src/packages/cell/demo.taro.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
import React from 'react'
import { User, ArrowRight } from '@nutui/icons-react-taro'
import Taro, { redirectTo, navigateTo } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { useTranslate } from '@/sites/assets/locale/taro'
import { Switch, Cell, Button } from '@/packages/nutui.react.taro'
import Header from '@/sites/components/header'
import '@/packages/cell/demo.scss'
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 Demo6 from './demos/taro/demo6'
import Demo7 from './demos/taro/demo7'

interface T {
basic: string
Expand Down Expand Up @@ -87,198 +91,24 @@ const CellDemo = () => {
},
})

const testClick = (
event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
) => {
Taro.showToast({ title: translated.clickEventToast })
}

const onJumpclick = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
link: string
) => {
const replace = false
if (link) {
replace ? redirectTo({ url: link }) : navigateTo({ url: link })
}
}

return (
<>
<Header />
<div className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
<h2>{translated.basic}</h2>
<Cell title={translated.title} extra={translated.extra} />
<Cell
title={translated.title}
description={translated.title1}
extra={translated.extra}
/>
<Cell
title={translated.title2}
onClick={(
event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
) => testClick(event)}
/>
<Cell title={translated.title3} radius="0" />
<Demo1 />
<h2>{translated.content}</h2>
<Cell>
<div>{translated.content}</div>
</Cell>
<Demo2 />
<h2>{translated.title6}</h2>
<Cell
title={
<div style={{ display: 'inline-flex', alignItems: 'center' }}>
<User />
<span
style={{
marginInlineStart: '5px',
}}
>
{translated.title}
</span>
</div>
}
description={
<span>
{translated.title1} <b style={{ color: 'red' }}>1</b>
</span>
}
extra={translated.extra}
/>
<Cell.Group title={translated.customRight}>
<Cell title="Switch" extra={<Switch defaultChecked />} />
</Cell.Group>
<Demo3 />
<h2>{translated.customRight}</h2>
<Demo4 />
<h2>{translated.title5}</h2>
<Cell
align="center"
title={translated.title}
description={translated.title1}
extra={translated.extra}
/>
<Cell.Group
title={translated.title4}
description={translated.description}
>
<Cell
className="nutui-cell-clickable"
title={translated.link}
align="center"
extra={<ArrowRight />}
/>
<Cell
className="nutui-cell-clickable"
title={translated.urlJump}
extra={
<>
<span>/pages/index/index</span>
<ArrowRight
style={{
marginInlineStart: '5px',
}}
/>
</>
}
align="center"
onClick={(
event: React.MouseEvent<HTMLDivElement, globalThis.MouseEvent>
) => onJumpclick(event, '/pages/index/index')}
/>
</Cell.Group>

<Cell.Group>
<Cell
title={
<div style={{ display: 'flex', alignItems: 'flex-end' }}>
<span style={{ fontWeight: '500' }}>{translated.title}</span>
<span
style={{
color: '#8C8C8C',
fontSize: '10px',
marginInlineStart: '5px',
lineHeight: 1.5,
}}
>
{translated.title1}
</span>
</div>
}
extra={
<div style={{ display: 'flex', alignItems: 'center' }}>
More
<ArrowRight
size={12}
style={{
marginInlineStart: '5px',
}}
/>
</div>
}
/>
<Cell>
<div style={{ minHeight: '50px' }}>{translated.content}</div>
</Cell>
<Cell
align="center"
title={
<div
style={{
color: '#8C8C8C',
fontSize: '12px',
}}
>
{translated.title1}
</div>
}
extra={<Button type="primary">Action</Button>}
/>
</Cell.Group>

<Cell.Group>
<Cell
title={
<div style={{ display: 'flex', alignItems: 'center' }}>
<User />
<span
style={{
marginInlineStart: '5px',
}}
>
{translated.title}
</span>
</div>
}
extra={<ArrowRight />}
/>
<Cell>
<div style={{ minHeight: '50px' }}>{translated.content}</div>
</Cell>
<Cell align="center" extra={<Button type="primary">Action</Button>} />
</Cell.Group>

<Cell.Group>
<Cell
title={
<div
style={{ display: 'flex', alignItems: 'center', color: 'blue' }}
>
{translated.title}
</div>
}
/>
<Cell>
<div style={{ color: '#26bf26' }}>{translated.content}</div>
</Cell>
</Cell.Group>

<Cell.Group
divider={false}
title={translated.title7}
description={translated.description1}
>
<Cell title={translated.title} extra={translated.extra} />
<Cell title={translated.title} extra={translated.extra} />
</Cell.Group>
<Demo5 />
<h2>{translated.title4}</h2>
<Demo6 />
<h2>{translated.title7}</h2>
<Demo7 />
</div>
</>
)
Expand Down
Loading

0 comments on commit dbb162f

Please sign in to comment.