Skip to content

Commit 63765f2

Browse files
author
Jonas Gossens
committed
Merge branch 'feature/improveGallery'
2 parents 097d6b4 + 83bdcd6 commit 63765f2

File tree

13 files changed

+819
-318
lines changed

13 files changed

+819
-318
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,5 @@ npm i
8989
```
9090
npm start
9191
```
92+
93+
Alternatively, you can link the components into another project using ``npm run dev``.

‎examples/react-chayns-accordion/Example.jsx

+1
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ export default class AccordionExample extends Component {
183183
head="Accordion (animated badge)"
184184
right={{
185185
close: <Badge>15</Badge>,
186+
open: <Input/>
186187
}}
187188
>
188189
Content

‎examples/react-chayns-file_input/Example.jsx

+23-1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ export default class FileInputExample extends Component {
3131
this.setState({ images: img });
3232
};
3333

34+
onDragEnd = (images) => {
35+
this.setState({ images });
36+
};
37+
3438
upload = () => {
3539
const { images } = this.state;
3640
images.forEach(async (image) => {
@@ -59,18 +63,36 @@ export default class FileInputExample extends Component {
5963
content: { text: 'Bild auswählen', icon: 'ts-image' },
6064
}]}
6165
/>
66+
<h3>Gallery with dragMode and deleteMode</h3>
67+
<Gallery
68+
images={images}
69+
deleteMode
70+
onDelete={this.onDelete}
71+
dragMode
72+
onDragEnd={this.onDragEnd}
73+
style={{ marginBottom: '30px' }}
74+
/>
75+
<h3>Gallery with dragMode</h3>
76+
<Gallery
77+
images={images}
78+
dragMode
79+
onDragEnd={this.onDragEnd}
80+
style={{ marginBottom: '30px' }}
81+
/>
82+
<h3>Gallery with deleteMode</h3>
6283
<Gallery
6384
images={images}
6485
deleteMode
6586
onDelete={this.onDelete}
87+
style={{ marginBottom: '30px' }}
6688
/>
6789
<Button
6890
disabled={!images}
6991
onClick={this.upload}
7092
>
7193
{'Upload'}
7294
</Button>
73-
<p ref={ref => this.logRef = ref}/>
95+
<p ref={ref => this.logRef = ref} />
7496
<FileInput
7597
items={[{
7698
types: [FileInput.types.ALL],

‎examples/react-chayns-gallery/Example.jsx

+61-46
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,67 @@
1-
import React, { PureComponent } from 'react';
1+
import React from 'react';
22

33
import Gallery from '../../src/react-chayns-gallery/component/Gallery';
4+
import Image from '../../src/react-chayns-gallery/component/Image';
5+
import ImageContainer from '../../src/react-chayns-gallery/component/ImageContainer';
46

5-
export default class GalleryExample extends PureComponent {
6-
render() {
7-
const images = [
8-
{
9-
url: 'https://tsimg.cloud/127-89061/9d6979d3ac95a053c532f86af9acfb5af9262020.jpg',
10-
preview: '/9j/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////////////////////////////////////////////////2wBDAVVaWnhpeOuCguv/////////////////////////////////////////////////////////////////////////wAARCAAoADwDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAgABAwT/xAAjEAEAAwABBQABBQAAAAAAAAABAAIRIQMSMUFRgSJCYWKx/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAGBEBAQEBAQAAAAAAAAAAAAAAABEBMVH/2gAMAwEAAhEDEQA/APN2JVc4mViOo9oewyb0qi8+DlgOleQzl+zerRDN9h4iAd4y3khFbnd6fEjXAek+mFMvzPStV7ahv+Tj1acNh3PMUnira1Hh5Zyva1rKvMlcyGVlpOlDZzBDfUdHIM674mBZ5++oba2NR/tFU7jfnr7Le67hmASNIUM7T8MzqNu12mGRGVWr5/awdS36f5eJBxSGJMhmmSrxXfktV3dlKTDXSt3znP2bXqZZsvuUpYUep1C3g/MDbXXllKIWsXXmGUoH/9k=',
11-
width: 640,
12-
height: 426,
13-
},
14-
{
15-
url: 'https://tsimg.cloud/127-89061/2b83dfa29f2f88bcb35372cbfbefe04a3f899d00.jpg',
16-
preview: '/9j/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////////////////////////////////////////////////2wBDAVVaWnhpeOuCguv/////////////////////////////////////////////////////////////////////////wAARCAAoABsDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAECAwT/xAAgEAEAAwABBQADAAAAAAAAAAABAAIRIRIxQVFhAzKh/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFxEBAAMAAAAAAAAAAAAAAAAAAAERIf/aAAwDAQACEQMRAD8A06V9Qy3qD0j+5KpYHuQqqCHJHueIFyxw6SFdgcoJyYx7YrnSb88ydfMuhtjiZ0KtUrm/2GfYrKWfUW/YuQOVOebepf41bdT3yEJQrZrWz3eH1MksOdLCED//2Q==',
17-
},
18-
{
19-
url: 'https://tsimg.cloud/72975-12914/e087202f5badd652fd015d39df83c35065941fe5.png',
20-
},
21-
{
22-
url: 'https://tsimg.space/v1/images/6ffbd340-a77b-e811-80d6-0025905a8161.jpg',
23-
},
24-
{
25-
url: 'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
26-
width: 500,
27-
height: 300,
28-
}
29-
];
7+
export default function GalleryExample() {
8+
const images = ['https://tsimg.cloud/127-89061/9d6979d3ac95a053c532f86af9acfb5af9262020.jpg',
9+
'https://tsimg.cloud/127-89061/2b83dfa29f2f88bcb35372cbfbefe04a3f899d00.jpg',
10+
'https://tsimg.cloud/72975-12914/e087202f5badd652fd015d39df83c35065941fe5.png',
11+
'https://tsimg.space/v1/images/6ffbd340-a77b-e811-80d6-0025905a8161.jpg',
12+
'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
13+
'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
14+
];
3015

31-
return (
32-
<div>
33-
<h3>5 images, different imageServices, 2 with preview</h3>
34-
<Gallery style={{ marginBottom: '30px' }} images={images}/>
35-
<h3>4 images, different imageServices, 2 with preview, height 300px</h3>
36-
<Gallery
37-
style={{ marginBottom: '30px' }}
38-
images={[images[1], images[2], images[3], images[4]]}
39-
height={300}
16+
return (
17+
<div>
18+
<h3>Gallery-Component</h3>
19+
<Gallery
20+
style={{ marginBottom: '30px' }}
21+
images={images}
22+
/>
23+
<Gallery
24+
style={{ marginBottom: '30px' }}
25+
images={[images[0], images[1], images[2], images[3], images[4]]}
26+
/>
27+
<Gallery
28+
style={{ marginBottom: '30px' }}
29+
images={[images[0], images[1], images[2], images[3]]}
30+
/>
31+
<Gallery
32+
style={{ marginBottom: '30px' }}
33+
images={[images[0], images[1], images[2]]}
34+
/>
35+
<Gallery
36+
style={{ marginBottom: '30px' }}
37+
images={[images[0], images[1]]}
38+
/>
39+
<Gallery
40+
style={{ marginBottom: '30px' }}
41+
images={[images[0]]}
42+
/>
43+
<h3>Image-Component</h3>
44+
<Image
45+
image={images[0]}
46+
onClick={console.log}
47+
style={{ width: '100px', height: '100px', marginBottom: '30px' }}
48+
styleLandscape={{ borderRadius: '10px' }}
49+
stylePortrait={{ border: '3px solid black' }}
50+
/>
51+
<h3>ImageContainer-Component</h3>
52+
<ImageContainer
53+
tools={[
54+
{ icon: 'ts-tobit', onClick: console.log },
55+
{ icon: 'ts-wrong', onClick: console.log },
56+
{ icon: 'ts-check', onClick: console.log },
57+
]}
58+
style={{ marginBottom: '30px' }}
59+
>
60+
<Image
61+
image={images[0]}
62+
onClick={console.log}
4063
/>
41-
<h3>3 images, 2 with preview, width 200px</h3>
42-
<Gallery style={{ marginBottom: '30px' }} images={[images[1], images[2], images[3]]} width={200}/>
43-
<h3>2 images with preview</h3>
44-
<Gallery style={{ marginBottom: '30px' }} images={[images[2], images[4]]}/>
45-
<h3>1 image with preview</h3>
46-
<Gallery style={{ marginBottom: '30px' }} images={[images[1]]}/>
47-
<h3>1 image, height 300px</h3>
48-
<Gallery style={{ marginBottom: '30px' }} images={[images[4]]} height={300}/>
49-
</div>
50-
);
51-
}
64+
</ImageContainer>
65+
</div>
66+
);
5267
}

‎src/react-chayns-gallery/README.md

+36-12
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@
33
The Gallery is part of the *chayns-components* package. It can be installed via npm:
44

55
npm install -S chayns-components@latest
6+
7+
## Features ##
68

9+
- Display up to four images in default mode
10+
- Accepts both files and URLs
11+
- Blurred image previews while loading for tsimg.cloud images
12+
- Reordering of the images via Drag & Drop in drag mode
13+
- Deleting of images in delete mode
714

815
## Usage ##
916

@@ -15,33 +22,50 @@ import { Gallery } from 'chayns-components';
1522

1623
You can use the gallery like in the examples:
1724

18-
- [Image upload preview](https://github.com/TobitSoftware/chayns-components/blob/master/examples/react-chayns-file_input/Example.jsx)
25+
- [Image upload preview with dragMode and deleteMode](https://github.com/TobitSoftware/chayns-components/blob/master/examples/react-chayns-file_input/Example.jsx)
1926
- [Image gallery](https://github.com/TobitSoftware/chayns-components/blob/master/examples/react-chayns-gallery/Example.jsx)
2027

21-
## Props ##
28+
## Gallery Props ##
2229

2330
The following properties can be set on the Gallery-Component
2431

2532
| **Property** | **Description** | **Type** | **Default Value** | **Required** |
2633
| ------------ | ---------------------------------------------------- | -------- | ----------------- | ------------ |
2734
| className | CSS-classes that should be set on root-element | string | | |
2835
| style | Styles that should be set on root-element | object | | |
29-
| images | The Images which should be displayed | array | | true |
36+
| images | The Images which should be displayed (file or url) | array | | true |
3037
| onClick | Called when clicked on a image | func | chayns.openImage | |
3138
| deleteMode | Enables the delete mode | bool | false | |
3239
| onDelete | Called when clicked on a delete icon | func | | |
40+
| dragMode | Enables the drag mode | bool | false | |
41+
| onDragEnd | Called on the end of each drag. Returns the new array. | func | | |
3342
| height | Height of the gallery in px, not used in deleteMode | number | width of the gallery | |
3443
| width | Width of the gallery in px | number | 100% | |
3544
| stopPropagation | Stops the click propagation to parent elements | bool | false | |
3645

37-
### Image object ###
46+
### Image Props ###
3847

39-
| **Property** | **Description** | **Type** | **Default Value** | **Required** |
40-
| ------------ | ---------------------------------------------------- | -------- | ----------------- | ------------ |
41-
| url | Image URL that will be displayed in the gallery | string | | true * |
42-
| preview | Base64-encoded image preview | string | | |
43-
| file | Image File that will be displayed in the gallery | object | | true * |
44-
| width | Width of the image (used for aspect ratio) | number | | |
45-
| height | Height of the image (used for aspect ratio) | number | | |
48+
The image shows automatically an preview of the image while the image is loading (only for tsimg.cloud images).
49+
50+
| **Property** | **Description** | **Type** | **Default Value** | **Required** |
51+
| ------------ | ------------------------------------------------------------------------ | ----------- | ----------------- | ------------ |
52+
| image | Image that will be displayed in the gallery (file or url) | string | | true |
53+
| onClick | Called when clicked on the image | string/File | | |
54+
| moreImages | Shows the number on the image | number | | |
55+
| className | CSS-classes that should be set on root-element | string | | |
56+
| classNameLandscape| CSS-classes that should be set on root-element for landscape images | string | | |
57+
| classNamePortrait | CSS-classes that should be set on root-element for portrait images | string | | |
58+
| style | Styles that should be set on root-element | object | | |
59+
| styleLandscape| Styles that should be set on root-element of landscape images | object | | |
60+
| stylePortrait | Styles that should be set on root-element of portrait images | object | | |
61+
62+
### ImageContainer Props ###
63+
64+
The imageContainer displays children in an 1:1 aspect ratio if height or padding-top are not given. It can also add a toolbar to the upper right corner.
4665

47-
*url or file are required
66+
| **Property** | **Description** | **Type** | **Default Value** | **Required** |
67+
| ------------ | ------------------------------------------------------------------------ | ----------- | ----------------- | ------------ |
68+
| children | Children | Node | | true |
69+
| tools | Array of tools shown in the upper right corner | array | | |
70+
| className | CSS-classes that should be set on root-element | string | | |
71+
| style | Styles that should be set on root-element | object | | |

0 commit comments

Comments
 (0)