Skip to content

Commit 811f537

Browse files
Miles-hxyoasis-cloud
Miles-hxy
and
oasis-cloud
authored
fix(signature): demo拆解与规范 (jdf2e#2099)
* fix(signature): demo拆解与规范 * chore: update --------- Co-authored-by: oasis-cloud <suanbanren@foxmail.com>
1 parent ee451a4 commit 811f537

File tree

10 files changed

+209
-447
lines changed

10 files changed

+209
-447
lines changed

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

Lines changed: 6 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,27 @@
11
import '@/packages/signature/demo.scss'
2-
import React, { useRef } from 'react'
2+
import React from 'react'
33
import Taro from '@tarojs/taro'
44
import { useTranslate } from '@/sites/assets/locale/taro'
5-
import { Button, Signature } from '@/packages/nutui.react.taro'
65
import Header from '@/sites/components/header'
6+
import Demo1 from './demos/taro/demo1'
7+
import Demo2 from './demos/taro/demo2'
78

8-
interface T {
9-
basic: string
10-
title: string
11-
tips: string
12-
clear: string
13-
confirm: string
14-
}
15-
interface signatureRefState {
16-
confirm: () => void
17-
clear: () => void
18-
}
199
const SignatureDemo = () => {
20-
const [translated] = useTranslate<T>({
10+
const [translated] = useTranslate({
2111
'zh-CN': {
2212
basic: '基础用法',
2313
title: '修改颜色和签字粗细',
24-
tips: 'Tips: 点击确认按钮, 控制台显示签名图片地址',
25-
clear: '重签',
26-
confirm: '确认',
2714
},
2815
'zh-TW': {
2916
basic: '基础用法',
3017
title: '修改顏色和簽字粗細',
31-
tips: 'Tips: 點擊確認按鈕, 控製臺顯示簽名圖片地址',
32-
clear: '重簽',
33-
confirm: '確認',
3418
},
3519
'en-US': {
3620
basic: 'Basic Usage',
3721
title: 'Modify color and signature thickness',
38-
tips: 'Tips: Click the confirm button and the console will display the signature picture address',
39-
clear: 'clear',
40-
confirm: 'confirm',
4122
},
4223
})
4324

44-
const signatureRef = useRef<signatureRefState>(null)
45-
const signatureRef1 = useRef<signatureRefState>(null)
46-
47-
const confirm = (dataurl: string) => {
48-
console.log('图片地址', dataurl)
49-
}
50-
const clear = () => {
51-
console.log('清除事件')
52-
}
53-
5425
return (
5526
<>
5627
<Header />
@@ -60,59 +31,9 @@ const SignatureDemo = () => {
6031
}`}
6132
>
6233
<h2>{translated.basic}</h2>
63-
<Signature onConfirm={confirm} onClear={clear} ref={signatureRef} />
64-
<div className="demo-btn">
65-
<Button
66-
type="default"
67-
size="small"
68-
style={{ margin: 8 }}
69-
onClick={() => {
70-
signatureRef.current?.clear()
71-
}}
72-
>
73-
{translated.clear}
74-
</Button>
75-
<Button
76-
type="primary"
77-
size="small"
78-
onClick={() => {
79-
signatureRef.current?.confirm()
80-
}}
81-
>
82-
{translated.confirm}
83-
</Button>
84-
</div>
85-
<p className="demo-tips demo1">{translated.tips}</p>
34+
<Demo1 />
8635
<h2> {translated.title}</h2>
87-
<Signature
88-
lineWidth={4}
89-
strokeStyle="green"
90-
onConfirm={confirm}
91-
onClear={clear}
92-
canvasId="testCanvas"
93-
ref={signatureRef1}
94-
/>
95-
<div className="demo-btn">
96-
<Button
97-
size="small"
98-
style={{ margin: 8 }}
99-
onClick={() => {
100-
signatureRef1.current?.clear()
101-
}}
102-
>
103-
{translated.clear}
104-
</Button>
105-
<Button
106-
type="primary"
107-
size="small"
108-
onClick={() => {
109-
signatureRef1.current?.confirm()
110-
}}
111-
>
112-
{translated.confirm}
113-
</Button>
114-
</div>
115-
<p className="demo-tips demo2">{translated.tips}</p>
36+
<Demo2 />
11637
</div>
11738
</>
11839
)

‎src/packages/signature/demo.tsx‎

Lines changed: 6 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,136 +1,32 @@
1-
import React, { useRef } from 'react'
1+
import React from 'react'
22
import './demo.scss'
3-
import { Signature } from './signature'
43
import { useTranslate } from '../../sites/assets/locale'
5-
import Button from '../button'
4+
import Demo1 from './demos/h5/demo1'
5+
import Demo2 from './demos/h5/demo2'
66

7-
interface T {
8-
basic: string
9-
title: string
10-
tips: string
11-
clear: string
12-
confirm: string
13-
}
14-
interface signatureRefState {
15-
confirm: () => void
16-
clear: () => void
17-
}
187
const SignatureDemo = () => {
19-
const [translated] = useTranslate<T>({
8+
const [translated] = useTranslate({
209
'zh-CN': {
2110
basic: '基础用法',
2211
title: '修改颜色和签字粗细',
23-
tips: 'Tips: 点击确认按钮,下方显示签名图片',
24-
clear: '重签',
25-
confirm: '确认',
2612
},
2713
'zh-TW': {
2814
basic: '基础用法',
2915
title: '修改顏色和簽字粗細',
30-
tips: 'Tips: 點擊確認按鈕,下方顯示簽名圖片',
31-
clear: '重簽',
32-
confirm: '確認',
3316
},
3417
'en-US': {
3518
basic: 'Basic Usage',
3619
title: 'Modify color and signature thickness',
37-
tips: 'Tips: click the confirm button, and the signature image is displayed below',
38-
clear: 'clear',
39-
confirm: 'confirm',
4020
},
4121
})
4222

43-
const signatureRef = useRef<signatureRefState>(null)
44-
const signatureRef1 = useRef<signatureRefState>(null)
45-
46-
const confirm = (canvas: HTMLCanvasElement, data: string) => {
47-
const img = document.createElement('img')
48-
img.src = data
49-
const demo = document.querySelector('.demo1') as HTMLElement
50-
demo.appendChild(img)
51-
}
52-
const clear = () => {
53-
const img = document.querySelector('.demo1 img')
54-
if (img) {
55-
img.remove()
56-
}
57-
}
58-
59-
const confirm1 = (canvas: HTMLCanvasElement, data: string) => {
60-
const img = document.createElement('img')
61-
img.src = data
62-
const demo = document.querySelector('.demo2') as HTMLElement
63-
demo.appendChild(img)
64-
}
65-
66-
const clear1 = () => {
67-
const img = document.querySelector('.demo2 img')
68-
if (img) {
69-
img.remove()
70-
}
71-
}
72-
73-
const demoStyles: React.CSSProperties = { margin: '1em 0' }
7423
return (
7524
<>
7625
<div className="demo demo-signature">
7726
<h2>{translated.basic}</h2>
78-
<Signature onConfirm={confirm} onClear={clear} ref={signatureRef} />
79-
<div className="demo-btn">
80-
<Button
81-
type="default"
82-
size="small"
83-
style={{ margin: 8 }}
84-
onClick={() => {
85-
signatureRef.current?.clear()
86-
}}
87-
>
88-
{translated.clear}
89-
</Button>
90-
<Button
91-
type="primary"
92-
size="small"
93-
onClick={() => {
94-
signatureRef.current?.confirm()
95-
}}
96-
>
97-
{translated.confirm}
98-
</Button>
99-
</div>
100-
<p className="demo-tips demo1" style={demoStyles}>
101-
{translated.tips}
102-
</p>
27+
<Demo1 />
10328
<h2> {translated.title}</h2>
104-
<Signature
105-
lineWidth={4}
106-
strokeStyle="green"
107-
onConfirm={confirm1}
108-
onClear={clear1}
109-
ref={signatureRef1}
110-
/>
111-
<div className="demo-btn">
112-
<Button
113-
size="small"
114-
style={{ margin: 8 }}
115-
onClick={() => {
116-
signatureRef1.current?.clear()
117-
}}
118-
>
119-
{translated.clear}
120-
</Button>
121-
<Button
122-
type="primary"
123-
size="small"
124-
onClick={() => {
125-
signatureRef1.current?.confirm()
126-
}}
127-
>
128-
{translated.confirm}
129-
</Button>
130-
</div>
131-
<p className="demo-tips demo2" style={demoStyles}>
132-
{translated.tips}
133-
</p>
29+
<Demo2 />
13430
</div>
13531
</>
13632
)

‎src/packages/signature/demos/h5/demo1.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React, { useRef } from 'react'
2+
import { Signature, Button } from '@nutui/nutui-react'
3+
4+
const Demo1 = () => {
5+
const confirm = (canvas: HTMLCanvasElement, data: string) => {
6+
const img = document.createElement('img')
7+
img.src = data
8+
const demo = document.querySelector('.demo1') as HTMLElement
9+
demo.appendChild(img)
10+
}
11+
const clear = () => {
12+
const img = document.querySelector('.demo1 img')
13+
if (img) {
14+
img.remove()
15+
}
16+
}
17+
const signatureRef = useRef<any>(null)
18+
return (
19+
<>
20+
<Signature onConfirm={confirm} onClear={clear} ref={signatureRef} />
21+
<div className="demo-btn">
22+
<Button
23+
type="default"
24+
size="small"
25+
style={{ margin: 8 }}
26+
onClick={() => {
27+
signatureRef.current?.clear()
28+
}}
29+
>
30+
重签
31+
</Button>
32+
<Button
33+
type="primary"
34+
size="small"
35+
onClick={() => {
36+
signatureRef.current?.confirm()
37+
}}
38+
>
39+
确认
40+
</Button>
41+
</div>
42+
<p className="demo-tips demo1" style={{ margin: '1em 0' }}>
43+
Tips: 点击确认按钮,下方显示签名图片
44+
</p>
45+
</>
46+
)
47+
}
48+
export default Demo1

‎src/packages/signature/demos/h5/demo2.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useRef } from 'react'
2+
import { Signature, Button } from '@nutui/nutui-react'
3+
4+
const Demo2 = () => {
5+
const confirm = (canvas: HTMLCanvasElement, data: string) => {
6+
const img = document.createElement('img')
7+
img.src = data
8+
const demo = document.querySelector('.demo2') as HTMLElement
9+
demo.appendChild(img)
10+
}
11+
12+
const clear = () => {
13+
const img = document.querySelector('.demo2 img')
14+
if (img) {
15+
img.remove()
16+
}
17+
}
18+
19+
const signatureRef = useRef<any>(null)
20+
return (
21+
<>
22+
<Signature
23+
lineWidth={4}
24+
strokeStyle="green"
25+
onConfirm={confirm}
26+
onClear={clear}
27+
ref={signatureRef}
28+
/>
29+
<div className="demo-btn">
30+
<Button
31+
size="small"
32+
style={{ margin: 8 }}
33+
onClick={() => {
34+
signatureRef.current?.clear()
35+
}}
36+
>
37+
重签
38+
</Button>
39+
<Button
40+
type="primary"
41+
size="small"
42+
onClick={() => {
43+
signatureRef.current?.confirm()
44+
}}
45+
>
46+
确认
47+
</Button>
48+
</div>
49+
<p className="demo-tips demo2" style={{ margin: '1em 0' }}>
50+
Tips: 点击确认按钮,下方显示签名图片
51+
</p>
52+
</>
53+
)
54+
}
55+
export default Demo2

0 commit comments

Comments
 (0)