Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make custom controls usable #97

Merged
merged 1 commit into from
Sep 15, 2018
Merged

Make custom controls usable #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ showImageCount | bool | true | Optional. Display imag
onClickImage | func | onClickImage | Optional. Function to execute when lightbox image clicked. Overrides internal implementation of onClickImage.
onClickPrev | func | onClickPrev | Optional. Function to execute when lightbox left arrow clicked. Overrides internal implementation of onClickPrev.
onClickNext | func | onClickNext | Optional. Function to execute when lightbox right arrow clicked. Overrides internal implementation of onClickNext.
currentImageWillChange | func | undefined | Optional. Function to execute before lightbox image change. Useful for tracking current image shown in lightbox. Allows access to gallery object using `this` (See [Programmers notes])
showLightboxThumbnails | bool | false | Optional. Display thumbnails beneath the Lightbox image.
onClickLightboxThumbnail | func | gotoImage | Optional. Function to execute when lightbox thumbnail clicked. Overrides internal function: gotoImage.
lightboxWidth | number | 1024 | Optional. Maximum width of the lightbox carousel; defaults to 1024px.
Expand Down
135 changes: 135 additions & 0 deletions examples/demo6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import Gallery from '../src/Gallery';


class Demo6 extends React.Component {
constructor(props){
super(props);

this.state = {
images: this.props.images,
currentImage: 0
};

this.onCurrentImageChange = this.onCurrentImageChange.bind(this);
this.deleteImage = this.deleteImage.bind(this);
}

onCurrentImageChange(index) {
this.setState({ currentImage: index });
}

deleteImage() {
if (window.confirm(`Are you sure you want to delete image number ${this.state.currentImage}?`)) {
var images = this.state.images.slice();
images.splice(this.state.currentImage, 1)
this.setState({
images: images
});
}
}

render () {
return (
<div style={{
display: "block",
minHeight: "1px",
width: "100%",
border: "1px solid #ddd",
overflow: "auto"}}>
<div style={{
padding: "2px",
color: "#666"
}}>Current image: {this.state.currentImage}</div>
<Gallery
images={this.state.images}
enableLightbox={true}
enableImageSelection={false}
currentImageWillChange={this.onCurrentImageChange}

customControls={[
<button key="deleteImage" onClick={this.deleteImage}>Delete Image</button>
]}
/>
</div>
);
}
}

Demo6.propTypes = {
images: PropTypes.arrayOf(
PropTypes.shape({
src: PropTypes.string.isRequired,
thumbnail: PropTypes.string.isRequired,
srcset: PropTypes.array,
caption: PropTypes.string,
thumbnailWidth: PropTypes.number.isRequired,
thumbnailHeight: PropTypes.number.isRequired
})
).isRequired
};

Demo6.defaultProps = {
images: shuffleArray([
{
src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 174,
caption: "After Rain (Jeshu John - designerspics.com)"
},
{
src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg",
thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 183,
caption: "37H (gratispgraphy.com)"
},
{
src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg",
thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg",
thumbnailWidth: 271,
thumbnailHeight: 320,
caption: "Orange Macro (Tom Eversley - isorepublic.com)"
},
{
src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg",
thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 213,
caption: "201H (gratisography.com)"
},
{
src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg",
thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 213,
caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)"
},
{
src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg",
thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 213,
caption: "Man on BMX (Tom Eversley - isorepublic.com)"
},
{
src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg",
thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 213,
caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)"
},
{
src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg",
thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg",
thumbnailWidth: 257,
thumbnailHeight: 320,
caption: "A photo by 贝莉儿 NG. (unsplash.com)"
}
])
};

ReactDOM.render(<Demo6 />, document.getElementById('demo6'));
5 changes: 5 additions & 0 deletions examples/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,12 @@ <h3><a id="thumbnail-caption" class="anchor" href="#thumbnail-caption" aria-hidd
<h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/examples/demo5.js">Code</a></h4>
<br>

<h3><a id="thumbnail-caption" class="anchor" href="#custom-controls" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Custom Controls
</h3>

<div id="demo6"></div>
<h4><a href="https://github.com/benhowell/react-grid-gallery/blob/master/examples/demo6.js">Code</a></h4>
<br>

<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/benhowell/react-grid-gallery">react-grid-gallery</a> is maintained by <a href="https://github.com/benhowell">Ben Howell</a>.</span>
Expand Down
3 changes: 2 additions & 1 deletion gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ gulp.task('browserify', function() {
'./examples/demo2.js',
'./examples/demo3.js',
'./examples/demo4.js',
'./examples/demo5.js'], {
'./examples/demo5.js',
'./examples/demo6.js'], {
extensions: ['.js', '.jsx']
})
//)
Expand Down
16 changes: 16 additions & 0 deletions src/Gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ class Gallery extends Component {
if (this.props.lightboxWillOpen) {
this.props.lightboxWillOpen.call(this, index);
}
if (this.props.currentImageWillChange) {
this.props.currentImageWillChange.call(this, index);
}

this.setState({
currentImage: index,
Expand All @@ -73,6 +76,9 @@ class Gallery extends Component {
if (this.props.lightboxWillClose) {
this.props.lightboxWillClose.call(this);
}
if (this.props.currentImageWillChange) {
this.props.currentImageWillChange.call(this, 0);
}

this.setState({
currentImage: 0,
Expand All @@ -81,12 +87,18 @@ class Gallery extends Component {
}

gotoPrevious () {
if (this.props.currentImageWillChange) {
this.props.currentImageWillChange.call(this, this.state.currentImage - 1);
}
this.setState({
currentImage: this.state.currentImage - 1
});
}

gotoNext () {
if (this.props.currentImageWillChange) {
this.props.currentImageWillChange.call(this, this.state.currentImage + 1);
}
this.setState({
currentImage: this.state.currentImage + 1
});
Expand All @@ -105,6 +117,9 @@ class Gallery extends Component {
}

gotoImage (index) {
if (this.props.currentImageWillChange) {
this.props.currentImageWillChange.call(this, index);
}
this.setState({
currentImage: index
});
Expand Down Expand Up @@ -331,6 +346,7 @@ Gallery.propTypes = {
currentImage: PropTypes.number,
preloadNextImage: PropTypes.bool,
customControls: PropTypes.arrayOf(PropTypes.node),
currentImageWillChange: PropTypes.func,
enableKeyboardInput: PropTypes.bool,
imageCountSeparator: PropTypes.string,
isOpen: PropTypes.bool,
Expand Down