Make visibility of previous/next buttons opt-in

pull/1/head
Daniel Gasienica 7 years ago
parent 142236640e
commit d634a414c3

@ -8,7 +8,11 @@ import classNames from 'classnames';
interface Props { interface Props {
close: () => void; close: () => void;
imageURL?: string; imageURL?: string;
onNext?: () => void;
onPrevious?: () => void;
onSave: () => void; onSave: () => void;
shouldShowNextButton: boolean;
shouldShowPreviousButton: boolean;
} }
const styles = { const styles = {
@ -54,6 +58,11 @@ const IconButton = ({ onClick, type }: IconButtonProps) => (
export class Lightbox extends React.Component<Props, {}> { export class Lightbox extends React.Component<Props, {}> {
private containerRef: HTMLDivElement | null = null; private containerRef: HTMLDivElement | null = null;
public static defaultProps: Partial<Props> = {
shouldShowNextButton: false,
shouldShowPreviousButton: false,
};
public componentDidMount() { public componentDidMount() {
const useCapture = true; const useCapture = true;
document.addEventListener('keyup', this.onKeyUp, useCapture); document.addEventListener('keyup', this.onKeyUp, useCapture);
@ -65,17 +74,33 @@ export class Lightbox extends React.Component<Props, {}> {
} }
public render() { public render() {
const { imageURL } = this.props; const {
imageURL,
shouldShowNextButton,
shouldShowPreviousButton,
} = this.props;
return ( return (
<div style={styles.container} onClick={this.onContainerClick} ref={this.setContainerRef}> <div
style={styles.container}
onClick={this.onContainerClick}
ref={this.setContainerRef}
>
<div style={styles.objectContainer}> <div style={styles.objectContainer}>
<img style={styles.image} src={imageURL} onClick={this.onImageClick}/> <img
style={styles.image}
src={imageURL}
onClick={this.onImageClick}
/>
</div> </div>
<div style={styles.controls}> <div style={styles.controls}>
<IconButton type="close" onClick={this.onClose} /> <IconButton type="close" onClick={this.onClose} />
<IconButton type="save" onClick={this.props.onSave} /> <IconButton type="save" onClick={this.props.onSave} />
<IconButton type="previous" /> {shouldShowPreviousButton ? (
<IconButton type="next" /> <IconButton type="previous" onClick={this.props.onPrevious} />
) : null}
{shouldShowNextButton ? (
<IconButton type="next" onClick={this.props.onNext} />
) : null}
</div> </div>
</div> </div>
); );
@ -83,7 +108,7 @@ export class Lightbox extends React.Component<Props, {}> {
private setContainerRef = (value: HTMLDivElement) => { private setContainerRef = (value: HTMLDivElement) => {
this.containerRef = value; this.containerRef = value;
} };
private onClose = () => { private onClose = () => {
this.props.close(); this.props.close();
@ -102,10 +127,10 @@ export class Lightbox extends React.Component<Props, {}> {
return; return;
} }
this.onClose(); this.onClose();
} };
private onImageClick = (event: React.MouseEvent<HTMLImageElement>) => { private onImageClick = (event: React.MouseEvent<HTMLImageElement>) => {
event.stopPropagation(); event.stopPropagation();
this.onClose(); this.onClose();
} };
} }

Loading…
Cancel
Save