Change code style

Author: SHoltkamp

src/react-chayns-gallery/component/Gallery.jsx

@@ -33,30 +33,32 @@ export default class Gallery extends React.Component {
         return (
             <div className="chayns-gallery" >
                 <div className="gallery-grid">
-                <ImageContainer
-                    className="gallery_item"
-                    url={urls[0]}
-                    onClick={this.openFirstImage}
-                />
-                    {count > 1 ?
-                <ImageContainer
-                    className="gallery_item"
-                    url={urls[1]}
-                    onClick={this.openSecondImage}
-                /> : ''}
-                    {count > 2 ?
-                <ImageContainer
-                    className="gallery_item"
-                    url={urls[2]}
-                    onClick={this.openThirdImage}
-                >
-                    {count > 3 ?
-                        <MoreImages
-                            count={count - 3}
-                            onlyIcon={onlyIcon}
-                        /> : ''
-                    }
-                </ImageContainer> : ''}
+                    <ImageContainer
+                        className="gallery_item"
+                        url={urls[0]}
+                        onClick={this.openFirstImage}
+                    />
+                    {(count > 1) && (
+                        <ImageContainer
+                            className="gallery_item"
+                            url={urls[1]}
+                            onClick={this.openSecondImage}
+                        />
+                    )}
+                    {(count > 2) && (
+                        <ImageContainer
+                            className="gallery_item"
+                            url={urls[2]}
+                            onClick={this.openThirdImage}
+                        >
+                            {(count > 3) && (
+                                <MoreImages
+                                    count={count - 3}
+                                    onlyIcon={onlyIcon}
+                                />
+                            )}
+                        </ImageContainer>
+                    )}
                 </div>
             </div>
         );

src/react-chayns-gallery/component/ImageContainer.jsx

@@ -1,15 +1,23 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import PropTypes from 'prop-types';
 
 
-const ImageContainer = ({ className, url, onClick, children }) => {
+const ImageContainer = ({
+    className,
+    url,
+    onClick,
+    children,
+}) => {
     return(
         <div className={className}>
             <div
-                className='gallery_item_inner'
+                className="gallery_item_inner"
                 style={{ backgroundImage: `url(${url})` }}
                 onClick={onClick}
-            >{children}</div>
+            >
+                {children}
+            </div>
         </div>
     );
 };
@@ -23,6 +31,6 @@ ImageContainer.propTypes = {
 
 ImageContainer.defaultProps = {
     children: undefined
-}
+};
 
 export default ImageContainer;

src/react-chayns-gallery/component/MoreImages.jsx

@@ -9,9 +9,11 @@ const MoreImages = ({ count, onlyIcon }) => {
             <div className="more-images__container">
                 <div className="more-image__text__wrapper">
                     <i className="more-image__icon fa fa-plus"/>
-                    {onlyIcon ? '' :
-                        <div className="more-image__text">{text}</div>
-                    }
+                    {(!onlyIcon) && (
+                        <div className="more-image__text">
+                            {text}
+                        </div>
+                    )}
                 </div>
             </div>
         </div>
@@ -23,6 +25,8 @@ MoreImages.propTypes = {
     onlyIcon: PropTypes.bool
 };
 
-
+MoreImages.defaultProps = {
+    onlyIcon: false
+};
 
 export default MoreImages;

src/react-chayns-gallery/index.scss

@@ -12,10 +12,10 @@
     flex-flow: column;
     position: absolute;
     flex-wrap: wrap;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     .gallery_item {
       height: 50%;
       .gallery_item_inner {