Develop (#17)

fix: images max width,select input

README.md

@@ -27,10 +27,12 @@ or
 <a href="https://react-responsive-gallery-demo.herokuapp.com" target="_blank"> Try out the live gallery demo .</a> 
 <i>(it's take few seconds until app is loading)</i><br/>
 * Some of the gallery features are not available in the live demo : cols padding , imagesStyle and images order(s,m,l).
+<br/><br/>
 
 <h3>Playground</h3>
 You can play with the library in 
-<a href="https://codesandbox.io/s/react-responsive-gallery-playground-dpqtg?file=/src/App.js" target="_blank"> this sandbox playground .</a>
+<a href="https://codesandbox.io/s/react-responsive-gallery-playground-dpqtg" target="_blank"> Codesandbox</a> or in
+<a href="https://stackblitz.com/edit/react-responsive-gallery" target="_blank"> Stackblitz</a> .
 
 <br/>
 <h3>Basic using example</h3>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-responsive-gallery",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React responsive gallery",
   "main": "dist/index.js",
   "repository": {

src/components/Gallery/Gallery.tsx

@@ -95,6 +95,7 @@ const Gallery = ({
                       id={img?.id || img.src}
                       selectableItems={selectableItems}
                       onSelect={onSelect}
+                      imagesMaxWidth={gallerySizes.imagesMaxWidth}
                     />
                   )}
                   <Image

src/components/Gallery/Select/Select.tsx

@@ -19,13 +19,20 @@ const StyledCheckbox = styled.input.attrs<CheckboxProps>(
   })
 )<CheckboxProps>``;
 
-const StyledDiv = styled.div`
+const StyledDiv = styled.div<{ imagesMaxWidth: number }>`
   position: absolute;
   top: 5px;
-  right: 15px;
+  ${(props) =>
+    props.imagesMaxWidth &&
+    `left: calc(${props.imagesMaxWidth}% - 28px - 5px);`}
 `;
 
-const Select = ({ id, selectableItems, onSelect }: SelectProps) => {
+const Select = ({
+  id,
+  selectableItems,
+  onSelect,
+  imagesMaxWidth,
+}: SelectProps) => {
   const [selectedValues, selectDispatch] = useReducer(
     selectReducer,
     convertSelectableItems(selectableItems) || selectInitialState
@@ -41,7 +48,7 @@ const Select = ({ id, selectableItems, onSelect }: SelectProps) => {
   };
 
   return (
-    <StyledDiv>
+    <StyledDiv imagesMaxWidth={imagesMaxWidth}>
       <StyledSelect>
         <StyledCheckbox
           className="select-input"

src/components/Gallery/Select/Select.types.ts

@@ -10,4 +10,5 @@ export type SelectProps = {
   id: string;
   selectableItems?: Array<string>;
   onSelect?: (id: string, val: boolean) => void;
+  imagesMaxWidth: number;
 };