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

Commit 42abcdc

Browse files
fritz-cfritz-c
committed
Convert styles from radium to css-modules
1 parent 7730e55 commit 42abcdc

File tree

3 files changed

+75
-90
lines changed

3 files changed

+75
-90
lines changed

‎src/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
module.exports = require('./react-image-lightbox');
1+
module.exports = require('./react-image-lightbox').default;

‎src/react-image-lightbox.js‎

Lines changed: 70 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,19 @@ class ReactImageLightbox extends Component {
5353
// Vertical offset from center
5454
offsetY: 0,
5555
};
56+
57+
this.requestClose = this.requestClose.bind(this);
58+
this.requestMovePrev = this.requestMovePrev.bind(this);
59+
this.requestMoveNext = this.requestMoveNext.bind(this);
60+
this.closeIfClickInner = this.closeIfClickInner.bind(this);
61+
this.handleZoomInButtonClick = this.handleZoomInButtonClick.bind(this);
62+
this.handleZoomOutButtonClick = this.handleZoomOutButtonClick.bind(this);
63+
this.handleImageDoubleClick = this.handleImageDoubleClick.bind(this);
64+
this.handleImageMouseWheel = this.handleImageMouseWheel.bind(this);
65+
this.handleOuterMousewheel = this.handleOuterMousewheel.bind(this);
66+
this.handleOuterMouseMove = this.handleOuterMouseMove.bind(this);
67+
this.handleOuterMouseDown = this.handleOuterMouseDown.bind(this);
68+
this.handleOuterMouseUp = this.handleOuterMouseUp.bind(this);
5669
}
5770

5871
componentWillMount() {
@@ -710,37 +723,43 @@ class ReactImageLightbox extends Component {
710723
}
711724

712725
render() {
713-
// Transition settings for sliding animations
714726
let transitionStyle = {};
727+
728+
// Transition settings for sliding animations
715729
if (!this.props.animationDisabled && this.isAnimating()) {
716-
transitionStyle = styles.imageAnimating(this.props.animationDuration);
730+
transitionStyle = {
731+
...transitionStyle,
732+
transition: ['transform', 'left', 'top', 'right', 'bottom']
733+
.map(x => `${x} ${this.props.animationDuration}ms`)
734+
.join(', '),
735+
};
717736
}
718737

719738
// Key endings to differentiate between images with the same src
720739
let keyEndings = {};
721-
this.getSrcTypes().forEach(srcType => {
722-
keyEndings[srcType.name] = srcType.keyEnding;
740+
this.getSrcTypes().forEach(({ name, keyEnding }) => {
741+
keyEndings[name] = keyEnding;
723742
});
724743

725744
// Images to be displayed
726745
let images = [];
727-
const addImage = (srcType, imageClass, baseStyle) => {
746+
const addImage = (srcType, imageClass, baseStyle = {}) => {
728747
// Ignore types that have no source defined for their full size image
729748
if (!this.props[srcType]) {
730749
return;
731750
}
732751

733-
let imageStyle = [styles.image, baseStyle, transitionStyle];
752+
let imageStyle = { ...baseStyle, ...transitionStyle };
734753
if (this.state.zoomLevel > MIN_ZOOM_LEVEL) {
735-
imageStyle.push({ cursor: 'move' });
754+
imageStyle['cursor'] = 'move';
736755
}
737756

738757
const bestImageInfo = this.getBestImageForType(srcType);
739758
if (bestImageInfo === null) {
740759
// Fall back to loading icon if the thumbnail has not been loaded
741760
images.push(
742761
<div
743-
className={imageClass + ' not-loaded'}
762+
className={`${imageClass} ${styles.image} not-loaded`}
744763
style={imageStyle}
745764
key={this.props[srcType] + keyEndings[srcType]}
746765
/>
@@ -749,74 +768,73 @@ class ReactImageLightbox extends Component {
749768
return;
750769
}
751770

752-
imageStyle.push({
753-
width : bestImageInfo.width,
754-
height : bestImageInfo.height,
755-
});
771+
imageStyle['width'] = bestImageInfo.width;
772+
imageStyle['height'] = bestImageInfo.height;
756773

757774
const imageSrc = bestImageInfo.src;
758775
if (this.props.discourageDownloads) {
759-
imageStyle.push({ backgroundImage: 'url(\'' + imageSrc + '\')' });
760-
imageStyle.push(styles.imageDiscourager);
776+
imageStyle['backgroundImage'] = `url('${imageSrc}')`;
761777
images.push(
762778
<div
763-
className={imageClass}
779+
className={`${imageClass} ${styles.image} ${styles.imageDiscourager}`}
764780
onDoubleClick={this.handleImageDoubleClick}
765781
onWheel={this.handleImageMouseWheel}
766782
style={imageStyle}
767783
key={imageSrc + keyEndings[srcType]}
768784
>
769-
<div className="download-blocker" style={[styles.downloadBlocker]} />
785+
<div className="download-blocker ${styles.downloadBlocker}" />
770786
</div>
771787
);
772788
} else {
773789
images.push(
774790
<img
775-
className={imageClass}
791+
className={`${imageClass} ${styles.image}`}
776792
onDoubleClick={this.handleImageDoubleClick}
777793
onWheel={this.handleImageMouseWheel}
778794
style={imageStyle}
779795
src={imageSrc}
780796
key={imageSrc + keyEndings[srcType]}
781-
alt={translate('Image')}
797+
alt={this.props.imageTitle || translate('Image')}
782798
/>
783799
);
784800
}
785801
};
786802

787803
const zoomMultiplier = this.getZoomMultiplier();
788804
// Next Image (displayed on the right)
789-
addImage('nextSrc', 'image-next', styles.imageNext);
805+
addImage('nextSrc', `image-next ${styles.imageNext}`);
790806
// Main Image
791807
addImage(
792808
'mainSrc',
793809
'image-current',
794-
styles.imageCurrent(
795-
zoomMultiplier,
796-
zoomMultiplier * this.state.offsetX,
797-
zoomMultiplier * this.state.offsetY
798-
)
810+
{
811+
transform: `scale3d(${zoomMultiplier}, ${zoomMultiplier}, 1)`,
812+
left: -1 * zoomMultiplier * this.state.offsetX,
813+
right: zoomMultiplier * this.state.offsetX,
814+
top: -1 * zoomMultiplier * this.state.offsetY,
815+
bottom: zoomMultiplier * this.state.offsetY,
816+
}
799817
);
800818
// Previous Image (displayed on the left)
801-
addImage('prevSrc', 'image-prev', styles.imagePrev);
819+
addImage('prevSrc', `image-prev ${styles.imagePrev}`);
802820

803821
const noop = function(){};
804822

805823
// Prepare styles and handlers for the zoom in/out buttons
806-
let zoomInButtonStyle = [styles.toolbarItemChild, styles.builtinButton, styles.zoomInButton];
807-
let zoomOutButtonStyle = [styles.toolbarItemChild, styles.builtinButton, styles.zoomOutButton];
824+
let zoomInButtonClasses = [styles.toolbarItemChild, styles.builtinButton, styles.zoomInButton];
825+
let zoomOutButtonClasses = [styles.toolbarItemChild, styles.builtinButton, styles.zoomOutButton];
808826
let zoomInButtonHandler = this.handleZoomInButtonClick;
809827
let zoomOutButtonHandler = this.handleZoomOutButtonClick;
810828

811829
// Disable zooming in when zoomed all the way in
812830
if (this.state.zoomLevel === MAX_ZOOM_LEVEL) {
813-
zoomInButtonStyle.push(styles.builtinButtonDisabled);
831+
zoomInButtonClasses.push(styles.builtinButtonDisabled);
814832
zoomInButtonHandler = noop;
815833
}
816834

817835
// Disable zooming out when zoomed all the way out
818836
if (this.state.zoomLevel === MIN_ZOOM_LEVEL) {
819-
zoomOutButtonStyle.push(styles.builtinButtonDisabled);
837+
zoomOutButtonClasses.push(styles.builtinButtonDisabled);
820838
zoomOutButtonHandler = noop;
821839
}
822840

@@ -844,22 +862,23 @@ class ReactImageLightbox extends Component {
844862
style={modalStyle}
845863
>
846864
<div // Floating modal with closing animations
847-
className={'outer' + (this.state.isClosing ? ' closing' : '')}
848865
onWheel={this.handleOuterMousewheel}
849866
onMouseMove={this.handleOuterMouseMove}
850867
onMouseDown={this.handleOuterMouseDown}
851868
onMouseUp={this.handleOuterMouseUp}
852-
style={[
853-
styles.outer,
854-
styles.outerAnimating(this.props.animationDuration, this.state.isClosing),
855-
this.state.isClosing ? styles.outerClosing : {},
856-
]}
869+
className={`outer ${styles.outer} ${styles.outerAnimating}` +
870+
(this.state.isClosing ? ` closing ${styles.outerClosing}` : '')
871+
}
872+
style={{
873+
transition: `opacity ${this.props.animationDuration}ms`,
874+
animationDuration: `${this.props.animationDuration}ms`,
875+
animationDirection: this.state.isClosing ? 'normal' : 'reverse',
876+
}}
857877
>
858878

859879
<div // Image holder
860-
className="inner"
880+
className={`inner ${styles.inner}`}
861881
onClick={this.props.clickOutsideToClose ? this.closeIfClickInner : noop}
862-
style={[styles.inner]}
863882
>
864883
{images}
865884
</div>
@@ -876,59 +895,53 @@ class ReactImageLightbox extends Component {
876895
{!this.props.nextSrc ? '' :
877896
<button // Move to next image button
878897
type="button"
879-
className="next-button"
898+
className={`next-button ${styles.navButtons} ${styles.navButtonNext}`}
880899
key="next"
881-
style={[styles.navButtons, styles.navButtonNext]}
882900
onClick={!this.isAnimating() ? this.requestMoveNext : noop} // Ignore clicks during animation
883901
/>
884902
}
885903

886904
<div // Lightbox toolbar
887-
className="toolbar"
888-
style={[styles.toolbar]}
905+
className={`toolbar ${styles.toolbar}`}
889906
>
890-
<ul className="toolbar-left" style={[styles.toolbarSide, styles.toolbarLeftSide]}>
891-
<li style={[styles.toolbarItem]}>
892-
<span style={[styles.toolbarItemChild]}>{this.props.imageTitle}</span>
907+
<ul className={`toolbar-left ${styles.toolbarSide} ${styles.toolbarLeftSide}`}>
908+
<li className={styles.toolbarItem}>
909+
<span className={styles.toolbarItemChild}>{this.props.imageTitle}</span>
893910
</li>
894911
</ul>
895912

896-
<ul className="toolbar-right" style={[styles.toolbarSide, styles.toolbarRightSide]}>
913+
<ul className={`toolbar-right ${styles.toolbarSide} ${styles.toolbarRightSide}`}>
897914
{!this.props.toolbarButtons ? '' : this.props.toolbarButtons.map(function(button, i) {
898-
return (<li key={i} style={[styles.toolbarItem]}>{button}</li>);
915+
return (<li key={i} className={styles.toolbarItem}>{button}</li>);
899916
})}
900917

901-
<li style={[styles.toolbarItem]}>
918+
<li className={styles.toolbarItem}>
902919
<button // Lightbox zoom in button
903920
type="button"
904921
key="zoom-in"
905-
className="zoom-in"
906-
style={zoomInButtonStyle}
922+
className={`zoom-in ${zoomInButtonClasses.join(' ')}`}
907923
onClick={zoomInButtonHandler}
908924
/>
909925
</li>
910926

911-
<li style={[styles.toolbarItem]}>
927+
<li className={styles.toolbarItem}>
912928
<button // Lightbox zoom out button
913929
type="button"
914930
key="zoom-out"
915-
className="zoom-out"
916-
style={zoomOutButtonStyle}
931+
className={`zoom-out ${zoomOutButtonClasses.join(' ')}`}
917932
onClick={zoomOutButtonHandler}
918933
/>
919934
</li>
920935

921-
<li style={[styles.toolbarItem]}>
936+
<li className={styles.toolbarItem}>
922937
<button // Lightbox close button
923938
type="button"
924939
key="close"
925-
className="close"
926-
style={[styles.toolbarItemChild, styles.builtinButton, styles.closeButton]}
940+
className={`close ${styles.toolbarItemChild} ${styles.builtinButton} ${styles.closeButton}`}
927941
onClick={!this.isAnimating() ? this.requestClose : noop} // Ignore clicks during animation
928942
/>
929943
</li>
930944
</ul>
931-
932945
</div>
933946
</div>
934947
</Modal>
@@ -1053,4 +1066,4 @@ ReactImageLightbox.defaultProps = {
10531066
clickOutsideToClose: true,
10541067
};
10551068

1056-
module.exports = ReactImageLightbox;
1069+
export default ReactImageLightbox;

‎src/style.scss‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,10 @@ $toolbarHeight: 50px;
178178
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') no-repeat center;
179179
}
180180

181+
.outerAnimating {
182+
animation-name: closeWindow;
183+
}
184+
181185
// // Use fallback styles for browsers without flexbox support
182186
// if (Util.getIEVersion() < 10) {
183187
// styles.toolbar = {
@@ -210,35 +214,3 @@ $toolbarHeight: 50px;
210214
// right: 0;
211215
// };
212216
// }
213-
214-
// outerAnimating(duration, isClosing) {
215-
// return {
216-
// transition: 'opacity ' + String(duration) + 'ms;
217-
// animationDuration: String(duration) + 'ms;
218-
// animationDirection: isClosing ? 'normal': 'reverse;
219-
// animationName: closeWindow;
220-
// };
221-
// }
222-
223-
// imageCurrent(zoomRatio, offsetX, offsetY) {
224-
// return {
225-
// transform: 'scale3d(' + zoomRatio + ',' + zoomRatio + ',1) ;
226-
// left: -1 * offsetX;
227-
// right: offsetX;
228-
// top: -1 * offsetY;
229-
// bottom: offsetY;
230-
// };
231-
// }
232-
233-
// imageAnimating(duration) {
234-
// return {
235-
// transition: [
236-
// 'transform ' + String(duration) + 'ms;
237-
// 'left ' + String(duration) + 'ms;
238-
// 'top ' + String(duration) + 'ms;
239-
// 'right ' + String(duration) + 'ms;
240-
// 'bottom ' + String(duration) + 'ms;
241-
// ].join(', ');
242-
// };
243-
// }
244-

0 commit comments

Comments
 (0)