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

Commit 892121f

Browse files
fritz-cfritz-c
committed
Add ril- prefix to class names and add deprecation notice for old ones
Fixes #15
1 parent 3f602ca commit 892121f

File tree

2 files changed

+43
-29
lines changed

2 files changed

+43
-29
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ module.exports = React.createClass({
7272

7373
```
7474

75+
## Deprecation Notice
76+
77+
All unprefixed classes (listed below) will be removed in v4.0.0. Use their `ril-` prefixed alternatives instead.
78+
`close`, `closing`, `download-blocker`, `image-current`, `image-next`, `image-prev`, `inner`, `next-button`, `not-loaded`, `outer`, `prev-button`, `toolbar`, `toolbar-left`, `toolbar-right`, `zoom-in`, `zoom-out`
79+
7580
## Options
7681

7782
Property | Type | Default | Required | Description

‎src/react-image-lightbox.js‎

Lines changed: 38 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -825,27 +825,27 @@ class ReactImageLightbox extends Component {
825825
);
826826
} else {
827827
loadingIcon = (
828-
<div className={`${styles.loadingCircle} ${styles.loadingContainer__icon}`}>
829-
<div className={styles.loadingCirclePoint}></div>
830-
<div className={styles.loadingCirclePoint}></div>
831-
<div className={styles.loadingCirclePoint}></div>
832-
<div className={styles.loadingCirclePoint}></div>
833-
<div className={styles.loadingCirclePoint}></div>
834-
<div className={styles.loadingCirclePoint}></div>
835-
<div className={styles.loadingCirclePoint}></div>
836-
<div className={styles.loadingCirclePoint}></div>
837-
<div className={styles.loadingCirclePoint}></div>
838-
<div className={styles.loadingCirclePoint}></div>
839-
<div className={styles.loadingCirclePoint}></div>
840-
<div className={styles.loadingCirclePoint}></div>
828+
<div className={`ril-loading-circle ${styles.loadingCircle} ${styles.loadingContainer__icon}`}>
829+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
830+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
831+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
832+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
833+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
834+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
835+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
836+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
837+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
838+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
839+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
840+
<div className={`ril-loading-circle-point ${styles.loadingCirclePoint}`}></div>
841841
</div>
842842
);
843843
}
844844

845845
// Fall back to loading icon if the thumbnail has not been loaded
846846
images.push(
847847
<div
848-
className={`${imageClass} ${styles.image} not-loaded`}
848+
className={`${imageClass} ${styles.image} not-loaded ril-not-loaded`}
849849
style={imageStyle}
850850
key={this.props[srcType] + keyEndings[srcType]}
851851
>
@@ -872,7 +872,7 @@ class ReactImageLightbox extends Component {
872872
style={imageStyle}
873873
key={imageSrc + keyEndings[srcType]}
874874
>
875-
<div className={`download-blocker ${styles.downloadBlocker}`} />
875+
<div className={`download-blocker ril-download-blocker ${styles.downloadBlocker}`} />
876876
</div>
877877
);
878878
} else {
@@ -892,11 +892,11 @@ class ReactImageLightbox extends Component {
892892

893893
const zoomMultiplier = this.getZoomMultiplier();
894894
// Next Image (displayed on the right)
895-
addImage('nextSrc', `image-next ${styles.imageNext}`);
895+
addImage('nextSrc', `image-next ril-image-next ${styles.imageNext}`);
896896
// Main Image
897897
addImage(
898898
'mainSrc',
899-
'image-current',
899+
'image-current ril-image-current',
900900
{
901901
transform: `scale3d(${zoomMultiplier}, ${zoomMultiplier}, 1)`,
902902
left: -1 * zoomMultiplier * this.state.offsetX,
@@ -906,7 +906,7 @@ class ReactImageLightbox extends Component {
906906
}
907907
);
908908
// Previous Image (displayed on the left)
909-
addImage('prevSrc', `image-prev ${styles.imagePrev}`);
909+
addImage('prevSrc', `image-prev ril-image-prev ${styles.imagePrev}`);
910910

911911
const noop = () => {};
912912

@@ -951,6 +951,15 @@ class ReactImageLightbox extends Component {
951951
},
952952
};
953953

954+
// DEPRECATION NOTICE
955+
// All unprefixed classes (listed below) will be removed in v4.0.0.
956+
// Use their `ril-` prefixed alternatives instead.
957+
//
958+
// DEPRECATED: close, closing, download-blocker, image-current,
959+
// image-next, image-prev, inner, next-button, not-loaded,
960+
// outer, prev-button, toolbar, toolbar-left, toolbar-right,
961+
// zoom-in, zoom-out
962+
954963
return (
955964
<Modal
956965
isOpen
@@ -959,8 +968,8 @@ class ReactImageLightbox extends Component {
959968
onAfterOpen={() => this.outerEl && this.outerEl.focus()} // Focus on the div with key handlers
960969
>
961970
<div // Floating modal with closing animations
962-
className={`outer ${styles.outer} ${styles.outerAnimating}` +
963-
(this.state.isClosing ? ` closing ${styles.outerClosing}` : '')
971+
className={`outer ril-outer ${styles.outer} ${styles.outerAnimating}` +
972+
(this.state.isClosing ? ` closing ril-closing ${styles.outerClosing}` : '')
964973
}
965974
style={{
966975
transition: `opacity ${this.props.animationDuration}ms`,
@@ -979,7 +988,7 @@ class ReactImageLightbox extends Component {
979988
>
980989

981990
<div // Image holder
982-
className={`inner ${styles.inner}`}
991+
className={`inner ril-inner ${styles.inner}`}
983992
onClick={this.props.clickOutsideToClose ? this.closeIfClickInner : noop}
984993
>
985994
{images}
@@ -988,7 +997,7 @@ class ReactImageLightbox extends Component {
988997
{!this.props.prevSrc ? '' :
989998
<button // Move to previous image button
990999
type="button"
991-
className={`prev-button ${styles.navButtons} ${styles.navButtonPrev}`}
1000+
className={`prev-button ril-prev-button ${styles.navButtons} ${styles.navButtonPrev}`}
9921001
key="prev"
9931002
onClick={!this.isAnimating() ? this.requestMovePrev : noop} // Ignore clicks during animation
9941003
/>
@@ -997,22 +1006,22 @@ class ReactImageLightbox extends Component {
9971006
{!this.props.nextSrc ? '' :
9981007
<button // Move to next image button
9991008
type="button"
1000-
className={`next-button ${styles.navButtons} ${styles.navButtonNext}`}
1009+
className={`next-button ril-next-button ${styles.navButtons} ${styles.navButtonNext}`}
10011010
key="next"
10021011
onClick={!this.isAnimating() ? this.requestMoveNext : noop} // Ignore clicks during animation
10031012
/>
10041013
}
10051014

10061015
<div // Lightbox toolbar
1007-
className={`toolbar ${styles.toolbar}`}
1016+
className={`toolbar ril-toolbar ${styles.toolbar}`}
10081017
>
1009-
<ul className={`toolbar-left ${styles.toolbarSide} ${styles.toolbarLeftSide}`}>
1018+
<ul className={`toolbar-left ril-toolbar-left ${styles.toolbarSide} ${styles.toolbarLeftSide}`}>
10101019
<li className={styles.toolbarItem}>
10111020
<span className={styles.toolbarItemChild}>{this.props.imageTitle}</span>
10121021
</li>
10131022
</ul>
10141023

1015-
<ul className={`toolbar-right ${styles.toolbarSide} ${styles.toolbarRightSide}`}>
1024+
<ul className={`toolbar-right ril-toolbar-right ${styles.toolbarSide} ${styles.toolbarRightSide}`}>
10161025
{!this.props.toolbarButtons ? '' : this.props.toolbarButtons.map((button, i) => (
10171026
<li key={i} className={styles.toolbarItem}>{button}</li>
10181027
))}
@@ -1021,7 +1030,7 @@ class ReactImageLightbox extends Component {
10211030
<button // Lightbox zoom in button
10221031
type="button"
10231032
key="zoom-in"
1024-
className={`zoom-in ${zoomInButtonClasses.join(' ')}`}
1033+
className={`zoom-in ril-zoom-in ${zoomInButtonClasses.join(' ')}`}
10251034
onClick={zoomInButtonHandler}
10261035
/>
10271036
</li>
@@ -1030,7 +1039,7 @@ class ReactImageLightbox extends Component {
10301039
<button // Lightbox zoom out button
10311040
type="button"
10321041
key="zoom-out"
1033-
className={`zoom-out ${zoomOutButtonClasses.join(' ')}`}
1042+
className={`zoom-out ril-zoom-out ${zoomOutButtonClasses.join(' ')}`}
10341043
onClick={zoomOutButtonHandler}
10351044
/>
10361045
</li>
@@ -1039,7 +1048,7 @@ class ReactImageLightbox extends Component {
10391048
<button // Lightbox close button
10401049
type="button"
10411050
key="close"
1042-
className={`close ${styles.toolbarItemChild}` +
1051+
className={`close ril-close ${styles.toolbarItemChild}` +
10431052
` ${styles.builtinButton} ${styles.closeButton}`
10441053
}
10451054
onClick={!this.isAnimating() ? this.requestClose : noop} // Ignore clicks during animation

0 commit comments

Comments
 (0)