Skip to content

Commit 55d5b91

Browse files
Miles-hxyMiles-hxy
committed
fix: sth about demos
1 parent aafb914 commit 55d5b91

4 files changed

Lines changed: 124 additions & 94 deletions

File tree

‎src/packages/uploader/demo.taro.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import Demo6 from './demos/taro/demo6'
1111
import Demo7 from './demos/taro/demo7'
1212
import Demo8 from './demos/taro/demo8'
1313
import Demo9 from './demos/taro/demo9'
14+
import Demo10 from './demos/taro/demo10'
1415
import Header from '@/sites/components/header'
1516

1617
const UploaderDemo = () => {
@@ -25,6 +26,7 @@ const UploaderDemo = () => {
2526
manualExecution: '选中文件后，通过按钮手动执行上传',
2627
disabled: '禁用状态',
2728
customDeleteIcon: '自定义删除icon',
29+
camera: '直接调起摄像头（移动端生效）',
2830
},
2931
'zh-TW': {
3032
basic: '基础用法',
@@ -36,6 +38,7 @@ const UploaderDemo = () => {
3638
manualExecution: '選取檔後，通過按鈕手動執行上傳',
3739
disabled: '禁用狀態',
3840
customDeleteIcon: '自定義刪除icon',
41+
camera: '直接調起攝像頭（移動端生效）',
3942
},
4043
'en-US': {
4144
basic: 'Basic usage',
@@ -48,6 +51,7 @@ const UploaderDemo = () => {
4851
'After selecting Chinese, manually perform the upload via the button',
4952
disabled: 'Disabled state',
5053
customDeleteIcon: 'Custom DeleteIcon',
54+
camera: 'Direct camera up (mobile)',
5155
},
5256
})
5357

@@ -72,10 +76,12 @@ const UploaderDemo = () => {
7276
<Demo6 />
7377
<View className="h2">{translated.customDeleteIcon}</View>
7478
<Demo7 />
75-
<View className="h2">{translated.manualExecution}</View>
79+
<View className="h2">{translated.camera}</View>
7680
<Demo8 />
77-
<View className="h2">{translated.uploadListDefault}</View>
81+
<View className="h2">{translated.manualExecution}</View>
7882
<Demo9 />
83+
<View className="h2">{translated.uploadListDefault}</View>
84+
<Demo10 />
7985
</ScrollView>
8086
</>
8187
)

‎src/packages/uploader/demos/taro/demo10.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React, { useState } from 'react'
2+
import { Loading, Star } from '@nutui/icons-react'
3+
import { Uploader, Button, FileItem } from '@nutui/nutui-react-taro'
4+
5+
const Demo10 = () => {
6+
const [list, setList] = useState<FileItem[]>([
7+
{
8+
name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
9+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
10+
status: 'success',
11+
message: '上传成功',
12+
},
13+
{
14+
name: '文件2.png',
15+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
16+
status: 'success',
17+
message: '上传成功',
18+
},
19+
{
20+
name: '文件3.png',
21+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
22+
status: 'error',
23+
message: '上传失败',
24+
failIcon: <Star style={{ color: 'white' }} />,
25+
},
26+
{
27+
name: '文件444.png',
28+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
29+
status: 'uploading',
30+
message: '上传中...',
31+
},
32+
{
33+
name: '文件555.png',
34+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
35+
status: 'uploading',
36+
message: '上传中...',
37+
loadingIcon: <Loading className="nut-icon-Loading" color="#fff" />,
38+
},
39+
])
40+
function sleep(time: number) {
41+
return new Promise<void>((resolve) => {
42+
setTimeout(() => {
43+
resolve()
44+
}, time)
45+
})
46+
}
47+
async function upload(file: File) {
48+
await sleep(2000)
49+
if (Math.random() < 0.5) {
50+
return {
51+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
52+
}
53+
}
54+
throw new Error('Fail to upload')
55+
}
56+
return (
57+
<Uploader
58+
upload={(file: File) => upload(file)}
59+
value={list}
60+
onChange={setList}
61+
maxCount="10"
62+
multiple
63+
previewType="list"
64+
style={{ marginBottom: 20 }}
65+
>
66+
<Button type="success" size="small">
67+
上传文件
68+
</Button>
69+
</Uploader>
70+
)
71+
}
72+
export default Demo10

‎src/packages/uploader/demos/taro/demo8.tsx‎

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import React, { useRef } from 'react'
2-
import { Uploader, Button, Cell } from '@nutui/nutui-react-taro'
3-
import { View } from '@tarojs/components'
4-
5-
interface uploadRefState {
6-
submit: () => void
7-
clear: () => void
8-
}
1+
import React from 'react'
2+
import { Cell, Uploader } from '@nutui/nutui-react-taro'
93

104
const Demo8 = () => {
11-
const uploadRef = useRef<uploadRefState>(null)
125
function sleep(time: number) {
136
return new Promise<void>((resolve) => {
147
setTimeout(() => {
@@ -22,35 +15,9 @@ const Demo8 = () => {
2215
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
2316
}
2417
}
25-
const submitUpload = () => {
26-
;(uploadRef.current as uploadRefState).submit()
27-
}
28-
const clearUpload = () => {
29-
;(uploadRef.current as uploadRefState).clear()
30-
}
3118
return (
32-
<Cell style={{ display: 'flex', flexDirection: 'column' }}>
33-
<Uploader
34-
maxCount="5"
35-
multiple
36-
autoUpload={false}
37-
ref={uploadRef}
38-
upload={(file: File) => upload(file)}
39-
style={{ marginBottom: 10 }}
40-
/>
41-
<View style={{ display: 'flex' }}>
42-
<Button
43-
type="success"
44-
size="small"
45-
onClick={submitUpload}
46-
style={{ marginRight: '10px' }}
47-
>
48-
执行上传
49-
</Button>
50-
<Button type="primary" size="small" onClick={clearUpload}>
51-
手动清空上传
52-
</Button>
53-
</View>
19+
<Cell>
20+
<Uploader upload={(file: File) => upload(file)} sourceType={['camera']} />
5421
</Cell>
5522
)
5623
}

‎src/packages/uploader/demos/taro/demo9.tsx‎

Lines changed: 40 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,14 @@
1-
import React, { useState } from 'react'
2-
import { Loading, Star } from '@nutui/icons-react'
3-
import { Uploader, Button, FileItem } from '@nutui/nutui-react-taro'
1+
import React, { useRef } from 'react'
2+
import { Uploader, Button, Cell } from '@nutui/nutui-react-taro'
3+
import { View } from '@tarojs/components'
4+
5+
interface uploadRefState {
6+
submit: () => void
7+
clear: () => void
8+
}
49

510
const Demo9 = () => {
6-
const [list, setList] = useState<FileItem[]>([
7-
{
8-
name: '文件文件文件文件1文件文件文件文件1文件文件文件文件1.png',
9-
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
10-
status: 'success',
11-
message: '上传成功',
12-
},
13-
{
14-
name: '文件2.png',
15-
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
16-
status: 'success',
17-
message: '上传成功',
18-
},
19-
{
20-
name: '文件3.png',
21-
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
22-
status: 'error',
23-
message: '上传失败',
24-
failIcon: <Star style={{ color: 'white' }} />,
25-
},
26-
{
27-
name: '文件444.png',
28-
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
29-
status: 'uploading',
30-
message: '上传中...',
31-
},
32-
{
33-
name: '文件555.png',
34-
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
35-
status: 'uploading',
36-
message: '上传中...',
37-
loadingIcon: <Loading className="nut-icon-Loading" color="#fff" />,
38-
},
39-
])
11+
const uploadRef = useRef<uploadRefState>(null)
4012
function sleep(time: number) {
4113
return new Promise<void>((resolve) => {
4214
setTimeout(() => {
@@ -46,27 +18,40 @@ const Demo9 = () => {
4618
}
4719
async function upload(file: File) {
4820
await sleep(2000)
49-
if (Math.random() < 0.5) {
50-
return {
51-
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
52-
}
21+
return {
22+
url: 'https://m.360buyimg.com/babel/jfs/t1/164410/22/25162/93384/616eac6cE6c711350/0cac53c1b82e1b05.gif',
5323
}
54-
throw new Error('Fail to upload')
24+
}
25+
const submitUpload = () => {
26+
;(uploadRef.current as uploadRefState).submit()
27+
}
28+
const clearUpload = () => {
29+
;(uploadRef.current as uploadRefState).clear()
5530
}
5631
return (
57-
<Uploader
58-
upload={(file: File) => upload(file)}
59-
value={list}
60-
onChange={setList}
61-
maxCount="10"
62-
multiple
63-
previewType="list"
64-
style={{ marginBottom: 20 }}
65-
>
66-
<Button type="success" size="small">
67-
上传文件
68-
</Button>
69-
</Uploader>
32+
<Cell style={{ display: 'flex', flexDirection: 'column' }}>
33+
<Uploader
34+
maxCount="5"
35+
multiple
36+
autoUpload={false}
37+
ref={uploadRef}
38+
upload={(file: File) => upload(file)}
39+
style={{ marginBottom: 10 }}
40+
/>
41+
<View style={{ display: 'flex' }}>
42+
<Button
43+
type="success"
44+
size="small"
45+
onClick={submitUpload}
46+
style={{ marginRight: '10px' }}
47+
>
48+
执行上传
49+
</Button>
50+
<Button type="primary" size="small" onClick={clearUpload}>
51+
手动清空上传
52+
</Button>
53+
</View>
54+
</Cell>
7055
)
7156
}
7257
export default Demo9

0 commit comments

Comments
 (0)