Skip to content

Commit c18f8a0

Browse files
zWingzzWingz
committed
feat: 🎸 refactor img position && add showList props
1 parent 52d2ac0 commit c18f8a0

File tree

18 files changed

+266
-365
lines changed

18 files changed

+266
-365
lines changed

‎doc/Api.mdx‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,24 @@ route: /api
77

88
## Image
99

10-
| func | desc | params | default |
11-
| --------- | ------------------------- | --------------------- | --------- |
12-
| src | Image src | string | --- |
13-
| height | image height | string \| number | --- |
14-
| width | image width | string \| number | 100 |
15-
| style | style | CSSProperties | {} |
16-
| group | group for `Preview` | string \| number | 'default' |
17-
| objectFit | image object-fit property | ObjectFitProperty | 'cover' |
18-
| preview | enbale for `Preview` | boolean | true |
19-
| imgProps | props for `img` | ImgHTMLAttributes | --- |
20-
| mask | enable mask for `Image` | boolean | true |
21-
| onClick | onClick callback | (src: string) => void | --- |
22-
| onError | onError callback | (src: string) => void | --- |
23-
| onLoad | onLoad callback | (src: string) => void | --- |
24-
| onDelete | onDelete callback | (src: string) => void | --- |
25-
| className | className for `Image` | string | --- |
26-
| observer | observer for lazyLoad | IntersectionObserver | --- |
10+
| func | desc | params | default |
11+
| --------------- | ------------------------------- | --------------------- | --------- |
12+
| src | Image src | string | --- |
13+
| height | image height | string \| number | --- |
14+
| width | image width | string \| number | 100 |
15+
| style | style | CSSProperties | {} |
16+
| group | group for `Preview` | string \| number | 'default' |
17+
| objectFit | image object-fit property | ObjectFitProperty | 'cover' |
18+
| preview | enbale for `Preview` | boolean | true |
19+
| imgProps | props for `img` | ImgHTMLAttributes | --- |
20+
| mask | enable mask for `Image` | boolean | true |
21+
| onClick | onClick callback | (src: string) => void | --- |
22+
| onError | onError callback | (src: string) => void | --- |
23+
| onLoad | onLoad callback | (src: string) => void | --- |
24+
| onDelete | onDelete callback | (src: string) => void | --- |
25+
| className | className for `Image` | string | --- |
26+
| observer | observer for lazyLoad | IntersectionObserver | --- |
27+
| showPreviewList | show preview-list in PreviewApi | boolean | true |
2728

2829
```typescript
2930
type iImageProp = {
@@ -42,22 +43,24 @@ type iImageProp = {
4243
onDelete?: (src: string) => void
4344
className?: string
4445
observer?: IntersectionObserver
46+
showPreviewList?: boolean
4547
}
4648
```
4749
4850
## PreviewApi
4951
50-
| func | desc | params |
51-
| ------- | ------------------- | ------------------------------------------------------------------------------------ |
52-
| preview | preview a image | image:\[String\|Number\]: imageSrc or image index of list \n list:Array: Images List |
53-
| show | open the previewer | |
54-
| hide | close the previewer | |
55-
| destroy | destroy the ins | |
52+
| func | desc | params |
53+
| -------- | ------------------- | ------------------------------------------------------------------------------------ |
54+
| preview | preview a image | image:\[String\|Number\]: imageSrc or image index of list \n list:Array: Images List |
55+
| show | open the previewer | |
56+
| hide | close the previewer | |
57+
| destroy | destroy the ins | |
58+
| showList | show image list | boolean; default true |
5659
5760
```typescript
5861
type PreviewApi = {
5962
destroy: () => void
60-
preview: (current: number | string, list?: Array<string>): void
63+
preview: (current: number | string, list?: Array<string>, showList?: boolean = true): void
6164
show: () => void
6265
hide: () => void
6366
}

‎doc/index.mdx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ const Images = (function() {
9292

9393
### Preview
9494

95-
Preview image without use component `Image`
95+
#### Preview image without use component `Image`
9696

9797
<Playground>
9898
{() => {
@@ -109,3 +109,21 @@ Preview image without use component `Image`
109109
})
110110
}}
111111
</Playground>
112+
113+
#### hide preview-list
114+
115+
<Playground>
116+
{() => {
117+
const img = Images.slice(0, 3)
118+
return img.map(each => {
119+
return (
120+
<img
121+
src={each}
122+
key={each}
123+
style={{ width: '200px', height: '200px', objectFit: 'cover' }}
124+
onClick={() => PreviewApi.preview(each, img, false)}
125+
/>
126+
)
127+
})
128+
}}
129+
</Playground>

‎icomoon/demo.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ <h1>Font Test Drive</h1>
7373
</label>
7474
<input id="testText" type="text" class="phl size1of1 mvl"
7575
placeholder="Type some text to test..." value=""/>
76-
<div id="testDrive" class="icon-">&nbsp;
76+
<div id="testDrive" class="icon-" style="font-family: icomoon">&nbsp;
7777
</div>
7878
</div>
7979
<!--<![endif]-->

‎icomoon/fonts/icomoon.eot‎

-148 Bytes
Binary file not shown.

‎icomoon/fonts/icomoon.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎icomoon/fonts/icomoon.ttf‎

-148 Bytes
Binary file not shown.

‎icomoon/fonts/icomoon.woff‎

-148 Bytes
Binary file not shown.

‎icomoon/selection.json‎

Lines changed: 1 addition & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,113 +1 @@
1-
{
2-
"IcoMoonType": "selection",
3-
"icons": [
4-
{
5-
"icon": {
6-
"paths": [
7-
"M533.333 51.2c-247.467 0-448 200.533-448 448s200.533 448 448 448 448-200.533 448-448-200.533-448-448-448zM533.333 861.866c-200.533 0-362.667-162.133-362.667-362.667s162.133-362.667 362.667-362.667 362.667 162.133 362.667 362.667-162.133 362.667-362.667 362.667zM691.2 341.333c-17.067-17.067-42.667-17.067-59.733 0l-98.133 98.133-98.133-98.133c-17.067-17.067-42.667-17.067-59.733 0s-17.067 42.667 0 59.733l98.133 98.133-98.133 98.133c-17.067 17.067-17.067 42.667 0 59.733 8.533 8.533 21.333 12.8 29.867 12.8s21.333-4.267 29.867-12.8l98.133-98.133 98.133 98.133c8.533 8.533 21.333 12.8 29.867 12.8s21.333-4.267 29.867-12.8c17.067-17.067 17.067-42.667 0-59.733l-98.133-98.133 98.133-98.133c17.067-17.067 17.067-42.667 0-59.733z"
8-
],
9-
"isMulticolor": false,
10-
"isMulticolor2": false,
11-
"tags": [
12-
"MOMP-5"
13-
],
14-
"defaultCode": 59652,
15-
"grid": 0
16-
},
17-
"properties": {
18-
"id": 5,
19-
"order": 11,
20-
"ligatures": "",
21-
"prevSize": 32,
22-
"code": 59652,
23-
"name": "close"
24-
},
25-
"setIdx": 0,
26-
"setId": 3,
27-
"iconIdx": 4
28-
},
29-
{
30-
"icon": {
31-
"paths": [
32-
"M712.533 486.4l-298.667-256c-21.333-12.8-46.933-12.8-64 4.267-12.8 21.333-12.8 46.933 4.267 64l260.267 221.867-260.267 221.867c-17.067 17.067-21.333 42.667-4.267 59.733 8.533 12.8 21.333 17.067 34.133 17.067 8.533 0 21.333-4.267 29.867-8.533l298.667-256c8.533-8.533 12.8-21.333 12.8-34.133s-4.267-25.6-12.8-34.133z"
33-
],
34-
"isMulticolor": false,
35-
"isMulticolor2": false,
36-
"tags": [
37-
"MOMP-21"
38-
],
39-
"defaultCode": 59668,
40-
"grid": 0
41-
},
42-
"properties": {
43-
"id": 21,
44-
"order": 8,
45-
"ligatures": "",
46-
"prevSize": 32,
47-
"code": 59668,
48-
"name": "next"
49-
},
50-
"setIdx": 0,
51-
"setId": 3,
52-
"iconIdx": 20
53-
},
54-
{
55-
"icon": {
56-
"paths": [
57-
"M366.933 132.266c-153.6 51.2-260.267 192-281.6 349.867-25.6 260.267 174.933 477.867 426.667 477.867 132.267 0 260.267-64 345.6-174.933 12.8-21.333 12.8-46.933-8.533-59.733s-46.933-12.8-59.733 8.533c-85.333 115.2-230.4 166.4-371.2 123.733-136.533-38.4-234.667-166.4-243.2-307.2-12.8-192 140.8-358.4 337.067-358.4 89.6 0 174.933 38.4 243.2 98.133l-123.733 123.733c-12.8 12.8-8.533 34.133 8.533 34.133h260.267c21.333 0 38.4-17.067 38.4-38.4v-260.267c0-17.067-21.333-25.6-29.867-12.8l-93.867 93.867c-115.2-110.933-285.867-153.6-448-98.133z"
58-
],
59-
"isMulticolor": false,
60-
"isMulticolor2": false,
61-
"tags": [
62-
"MOMP-24_刷新"
63-
],
64-
"defaultCode": 59674,
65-
"grid": 0
66-
},
67-
"properties": {
68-
"id": 27,
69-
"order": 10,
70-
"ligatures": "",
71-
"prevSize": 32,
72-
"code": 59674,
73-
"name": "rotate"
74-
},
75-
"setIdx": 0,
76-
"setId": 3,
77-
"iconIdx": 26
78-
}
79-
],
80-
"height": 1024,
81-
"metadata": {
82-
"name": "icomoon"
83-
},
84-
"preferences": {
85-
"showGlyphs": true,
86-
"showQuickUse": true,
87-
"showQuickUse2": true,
88-
"showSVGs": true,
89-
"fontPref": {
90-
"prefix": "icon-",
91-
"metadata": {
92-
"fontFamily": "icomoon"
93-
},
94-
"metrics": {
95-
"emSize": 1024,
96-
"baseline": 6.25,
97-
"whitespace": 50
98-
},
99-
"embed": false
100-
},
101-
"imagePref": {
102-
"prefix": "icon-",
103-
"png": true,
104-
"useClassSelector": true,
105-
"color": 0,
106-
"bgColor": 16777215,
107-
"classSelector": ".icon"
108-
},
109-
"historySize": 50,
110-
"showCodes": true,
111-
"gridSize": 16
112-
}
113-
}
1+
{"IcoMoonType":"selection","icons":[{"icon":{"paths":["M563.8 512l262.5-312.9c4.4-5.2 0.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7l-216.5 258.1-216.5-258.1c-3-3.6-7.5-5.7-12.3-5.7h-79.8c-6.8 0-10.5 7.9-6.1 13.1l262.5 312.9-262.5 312.9c-1.177 1.378-1.894 3.18-1.894 5.15 0 4.391 3.559 7.95 7.95 7.95 0.015 0 0.031-0 0.046-0l-0.002 0h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1l-262.5-312.9z"],"attrs":[{}],"isMulticolor":false,"isMulticolor2":false,"grid":0,"tags":["close"]},"attrs":[{}],"properties":{"order":6,"id":0,"name":"close","prevSize":32,"code":59652},"setIdx":0,"setId":4,"iconIdx":0},{"icon":{"paths":["M712.533 486.4l-298.667-256c-21.333-12.8-46.933-12.8-64 4.267-12.8 21.333-12.8 46.933 4.267 64l260.267 221.867-260.267 221.867c-17.067 17.067-21.333 42.667-4.267 59.733 8.533 12.8 21.333 17.067 34.133 17.067 8.533 0 21.333-4.267 29.867-8.533l298.667-256c8.533-8.533 12.8-21.333 12.8-34.133s-4.267-25.6-12.8-34.133z"],"isMulticolor":false,"isMulticolor2":false,"tags":["next"],"defaultCode":59668,"grid":0},"properties":{"id":2,"order":8,"ligatures":"","prevSize":32,"code":59668,"name":"next"},"setIdx":1,"setId":3,"iconIdx":1},{"icon":{"paths":["M366.933 132.266c-153.6 51.2-260.267 192-281.6 349.867-25.6 260.267 174.933 477.867 426.667 477.867 132.267 0 260.267-64 345.6-174.933 12.8-21.333 12.8-46.933-8.533-59.733s-46.933-12.8-59.733 8.533c-85.333 115.2-230.4 166.4-371.2 123.733-136.533-38.4-234.667-166.4-243.2-307.2-12.8-192 140.8-358.4 337.067-358.4 89.6 0 174.933 38.4 243.2 98.133l-123.733 123.733c-12.8 12.8-8.533 34.133 8.533 34.133h260.267c21.333 0 38.4-17.067 38.4-38.4v-260.267c0-17.067-21.333-25.6-29.867-12.8l-93.867 93.867c-115.2-110.933-285.867-153.6-448-98.133z"],"isMulticolor":false,"isMulticolor2":false,"tags":["rotate"],"defaultCode":59674,"grid":0},"properties":{"id":3,"order":9,"ligatures":"","prevSize":32,"code":59674,"name":"rotate"},"setIdx":1,"setId":3,"iconIdx":2}],"height":1024,"metadata":{"name":"icomoon"},"preferences":{"showGlyphs":true,"showQuickUse":true,"showQuickUse2":true,"showSVGs":true,"fontPref":{"prefix":"icon-","metadata":{"fontFamily":"icomoon"},"metrics":{"emSize":1024,"baseline":6.25,"whitespace":50},"embed":false},"imagePref":{"prefix":"icon-","png":true,"useClassSelector":true,"color":0,"bgColor":16777215,"classSelector":".icon","name":"icomoon","height":32,"columns":16,"margin":16},"historySize":50,"showCodes":true,"gridSize":16}}

‎icomoon/style.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
@font-face {
22
font-family: 'icomoon';
3-
src: url('fonts/icomoon.eot?5zyc2o');
4-
src: url('fonts/icomoon.eot?5zyc2o#iefix') format('embedded-opentype'),
5-
url('fonts/icomoon.ttf?5zyc2o') format('truetype'),
6-
url('fonts/icomoon.woff?5zyc2o') format('woff'),
7-
url('fonts/icomoon.svg?5zyc2o#icomoon') format('svg');
3+
src: url('fonts/icomoon.eot?899oi1');
4+
src: url('fonts/icomoon.eot?899oi1#iefix') format('embedded-opentype'),
5+
url('fonts/icomoon.ttf?899oi1') format('truetype'),
6+
url('fonts/icomoon.woff?899oi1') format('woff'),
7+
url('fonts/icomoon.svg?899oi1#icomoon') format('svg');
88
font-weight: normal;
99
font-style: normal;
1010
}

‎index.d.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ declare module '@zzwing/react-image' {
1818
onDelete?: (src: string) => void
1919
className?: string
2020
observer?: IntersectionObserver
21+
showPreviewList?: boolean
2122
}
2223
export class Image extends PureComponent<iImageProp> {}
2324
export interface PreviewInterface {
24-
(current: number | string, list?: Array<string>): void
25+
(current: number | string, list?: string[], showList?: boolean): void
2526
}
2627
export interface PreviewInstance {
2728
preview: PreviewInterface

0 commit comments

Comments
 (0)