Skip to content
This repository was archived by the owner on Jan 19, 2023. It is now read-only.

Commit 54d7f1d

Browse files
fritz-cfritz-c
committed
Enable tweaking of z-index, etc. with exposed react-modal style
1 parent 8fde526 commit 54d7f1d

File tree

2 files changed

+52
-24
lines changed

2 files changed

+52
-24
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ keyRepeatLimit | number | `180` | | Required interval of
9898
keyRepeatKeyupBonus | number | `40` | | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images)
9999
imageTitle | string | | | Image title
100100
toolbarButtons | node[] | | | Array of custom toolbar buttons
101+
reactModalStyle | Object | `{}` | | Set z-index style, etc., for the parent react-modal (format: https://github.com/reactjs/react-modal#styles )
101102
imagePadding | number | `10` | | Padding (px) between the edge of the window and the lightbox
102103
clickOutsideToClose | bool | `true` | | When true, clicks outside of the image close the lightbox
103104

‎src/react-image-lightbox.js‎

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -829,14 +829,32 @@ class ReactImageLightbox extends Component {
829829
}
830830

831831
render() {
832+
const {
833+
animationDisabled,
834+
animationDuration,
835+
clickOutsideToClose,
836+
discourageDownloads,
837+
imageTitle,
838+
nextSrc,
839+
prevSrc,
840+
toolbarButtons,
841+
reactModalStyle,
842+
} = this.props;
843+
const {
844+
zoomLevel,
845+
offsetX,
846+
offsetY,
847+
isClosing,
848+
} = this.state;
849+
832850
const boxSize = this.getLightboxRect();
833851
let transitionStyle = {};
834852

835853
// Transition settings for sliding animations
836-
if (!this.props.animationDisabled && this.isAnimating()) {
854+
if (!animationDisabled && this.isAnimating()) {
837855
transitionStyle = {
838856
...transitionStyle,
839-
transition: `transform ${this.props.animationDuration}ms`,
857+
transition: `transform ${animationDuration}ms`,
840858
};
841859
}
842860

@@ -855,7 +873,7 @@ class ReactImageLightbox extends Component {
855873
}
856874

857875
let imageStyle = { ...baseStyle, ...transitionStyle };
858-
if (this.state.zoomLevel > MIN_ZOOM_LEVEL) {
876+
if (zoomLevel > MIN_ZOOM_LEVEL) {
859877
imageStyle.cursor = 'move';
860878
}
861879

@@ -907,7 +925,7 @@ class ReactImageLightbox extends Component {
907925
imageStyle.height = bestImageInfo.height;
908926

909927
const imageSrc = bestImageInfo.src;
910-
if (this.props.discourageDownloads) {
928+
if (discourageDownloads) {
911929
imageStyle.backgroundImage = `url('${imageSrc}')`;
912930
images.push(
913931
<div
@@ -929,7 +947,7 @@ class ReactImageLightbox extends Component {
929947
style={imageStyle}
930948
src={imageSrc}
931949
key={imageSrc + keyEndings[srcType]}
932-
alt={this.props.imageTitle || translate('Image')}
950+
alt={imageTitle || translate('Image')}
933951
/>
934952
);
935953
}
@@ -947,8 +965,8 @@ class ReactImageLightbox extends Component {
947965
'mainSrc',
948966
'image-current ril-image-current',
949967
this.getTransform({
950-
x: -1 * this.state.offsetX,
951-
y: -1 * this.state.offsetY,
968+
x: -1 * offsetX,
969+
y: -1 * offsetY,
952970
zoom: zoomMultiplier,
953971
})
954972
);
@@ -968,13 +986,13 @@ class ReactImageLightbox extends Component {
968986
let zoomOutButtonHandler = this.handleZoomOutButtonClick;
969987

970988
// Disable zooming in when zoomed all the way in
971-
if (this.state.zoomLevel === MAX_ZOOM_LEVEL) {
989+
if (zoomLevel === MAX_ZOOM_LEVEL) {
972990
zoomInButtonClasses.push(styles.builtinButtonDisabled);
973991
zoomInButtonHandler = noop;
974992
}
975993

976994
// Disable zooming out when zoomed all the way out
977-
if (this.state.zoomLevel === MIN_ZOOM_LEVEL) {
995+
if (zoomLevel === MIN_ZOOM_LEVEL) {
978996
zoomOutButtonClasses.push(styles.builtinButtonDisabled);
979997
zoomOutButtonHandler = noop;
980998
}
@@ -985,11 +1003,11 @@ class ReactImageLightbox extends Component {
9851003
zoomOutButtonHandler = noop;
9861004
}
9871005

988-
// Clear default modal appearance
9891006
const modalStyle = {
9901007
overlay: {
9911008
zIndex: 1000,
9921009
backgroundColor: 'transparent',
1010+
...reactModalStyle.overlay, // Allow style overrides via props
9931011
},
9941012
content: {
9951013
overflow: 'hidden', // Needed, otherwise keyboard shortcuts scroll the page
@@ -1000,6 +1018,7 @@ class ReactImageLightbox extends Component {
10001018
left: 0,
10011019
right: 0,
10021020
bottom: 0,
1021+
...reactModalStyle.content, // Allow style overrides via props
10031022
},
10041023
};
10051024

@@ -1015,18 +1034,18 @@ class ReactImageLightbox extends Component {
10151034
return (
10161035
<Modal
10171036
isOpen
1018-
onRequestClose={this.props.clickOutsideToClose ? this.requestClose : noop}
1019-
style={modalStyle}
1037+
onRequestClose={clickOutsideToClose ? this.requestClose : noop}
10201038
onAfterOpen={() => this.outerEl && this.outerEl.focus()} // Focus on the div with key handlers
1039+
style={modalStyle}
10211040
>
10221041
<div // Floating modal with closing animations
10231042
className={`outer ril-outer ${styles.outer} ${styles.outerAnimating}` +
1024-
(this.state.isClosing ? ` closing ril-closing ${styles.outerClosing}` : '')
1043+
(isClosing ? ` closing ril-closing ${styles.outerClosing}` : '')
10251044
}
10261045
style={{
1027-
transition: `opacity ${this.props.animationDuration}ms`,
1028-
animationDuration: `${this.props.animationDuration}ms`,
1029-
animationDirection: this.state.isClosing ? 'normal' : 'reverse',
1046+
transition: `opacity ${animationDuration}ms`,
1047+
animationDuration: `${animationDuration}ms`,
1048+
animationDirection: isClosing ? 'normal' : 'reverse',
10301049
}}
10311050
ref={el => { this.outerEl = el; }}
10321051
onWheel={this.handleOuterMousewheel}
@@ -1041,12 +1060,12 @@ class ReactImageLightbox extends Component {
10411060

10421061
<div // Image holder
10431062
className={`inner ril-inner ${styles.inner}`}
1044-
onClick={this.props.clickOutsideToClose ? this.closeIfClickInner : noop}
1063+
onClick={clickOutsideToClose ? this.closeIfClickInner : noop}
10451064
>
10461065
{images}
10471066
</div>
10481067

1049-
{!this.props.prevSrc ? '' :
1068+
{!prevSrc ? '' :
10501069
<button // Move to previous image button
10511070
type="button"
10521071
className={`prev-button ril-prev-button ${styles.navButtons} ${styles.navButtonPrev}`}
@@ -1055,7 +1074,7 @@ class ReactImageLightbox extends Component {
10551074
/>
10561075
}
10571076

1058-
{!this.props.nextSrc ? '' :
1077+
{!nextSrc ? '' :
10591078
<button // Move to next image button
10601079
type="button"
10611080
className={`next-button ril-next-button ${styles.navButtons} ${styles.navButtonNext}`}
@@ -1069,7 +1088,7 @@ class ReactImageLightbox extends Component {
10691088
>
10701089
<ul className={`toolbar-left ril-toolbar-left ${styles.toolbarSide} ${styles.toolbarLeftSide}`}>
10711090
<li className={styles.toolbarItem}>
1072-
<span className={styles.toolbarItemChild}>{this.props.imageTitle}</span>
1091+
<span className={styles.toolbarItemChild}>{imageTitle}</span>
10731092
</li>
10741093
</ul>
10751094

@@ -1081,7 +1100,7 @@ class ReactImageLightbox extends Component {
10811100
styles.toolbarRightSide,
10821101
].join(' ')}
10831102
>
1084-
{!this.props.toolbarButtons ? '' : this.props.toolbarButtons.map((button, i) => (
1103+
{!toolbarButtons ? '' : toolbarButtons.map((button, i) => (
10851104
<li key={i} className={styles.toolbarItem}>{button}</li>
10861105
))}
10871106

@@ -1208,15 +1227,22 @@ ReactImageLightbox.propTypes = {
12081227
imageTitle: PropTypes.node,
12091228

12101229
//-----------------------------
1211-
// Other
1230+
// Lightbox style
12121231
//-----------------------------
12131232

1214-
// Array of custom toolbar buttons
1215-
toolbarButtons: PropTypes.arrayOf(PropTypes.node),
1233+
// Set z-index style, etc., for the parent react-modal (format: https://github.com/reactjs/react-modal#styles )
1234+
reactModalStyle: PropTypes.object,
12161235

12171236
// Padding (px) between the edge of the window and the lightbox
12181237
imagePadding: PropTypes.number,
12191238

1239+
//-----------------------------
1240+
// Other
1241+
//-----------------------------
1242+
1243+
// Array of custom toolbar buttons
1244+
toolbarButtons: PropTypes.arrayOf(PropTypes.node),
1245+
12201246
// When true, clicks outside of the image close the lightbox
12211247
clickOutsideToClose: PropTypes.bool,
12221248
};
@@ -1234,6 +1260,7 @@ ReactImageLightbox.defaultProps = {
12341260
keyRepeatLimit: 180,
12351261
keyRepeatKeyupBonus: 40,
12361262

1263+
reactModalStyle: {},
12371264
imagePadding: 10,
12381265
clickOutsideToClose: true,
12391266
};

0 commit comments

Comments
 (0)