+
,
+
{renderOverlay()}
]
}
renderCountOverlay(more) {
- const {images} = this.props;
- const {countFrom} = this.state;
+ const { images } = this.props;
+ const { countFrom } = this.state;
const extra = images.length - (countFrom && countFrom > 5 ? 5 : countFrom);
- return [more &&
, more &&
]
+ return [more &&
, more &&
]
}
- render(){
- const {modal, index, countFrom} = this.state;
- const {images} = this.props;
+ render() {
+ const { modal, index, countFrom } = this.state;
+ const { images } = this.props;
const imagesToShow = [...images];
- if(countFrom && images.length > countFrom) {
+ if (countFrom && images.length > countFrom) {
imagesToShow.length = countFrom;
}
- return(
-
- {[1, 3, 4].includes(imagesToShow.length) && this.renderOne()}
- {imagesToShow.length >= 2 && imagesToShow.length != 4 && this.renderTwo()}
- {imagesToShow.length >= 4 && this.renderThree()}
+ return (
+
+ {[1, 3, 4].includes(imagesToShow.length) && this.renderOne()}
+ {imagesToShow.length >= 2 && imagesToShow.length != 4 && this.renderTwo()}
+ {imagesToShow.length >= 4 && this.renderThree()}
- {modal && }
-
+ {modal &&
}
+
)
}
diff --git a/src/css/style.css b/src/css/style.css
index bd5a4f6..189d1f0 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,5 @@
-@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
-@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css';
+/* @import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
+@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'; */
/* Images Component CSS */
@@ -93,6 +93,9 @@
font-size: 3%;
}
+.border{
+ position: relative;
+}
.border:hover .slide {
bottom: 0;
height: auto;
From 98663ad47f6710f71130c1ced2dc877c1a7b3e78 Mon Sep 17 00:00:00 2001
From: ManiloxGT <60653867+ManelGonzalez-ops@users.noreply.github.com>
Date: Sun, 2 May 2021 15:56:38 +0200
Subject: [PATCH 2/3] renamed Grida to Grid for better semantics
---
demo/src/index.js | 11 ++++++-----
src/components/Images.js | 39 +++++++++++++++++++--------------------
2 files changed, 25 insertions(+), 25 deletions(-)
diff --git a/demo/src/index.js b/demo/src/index.js
index 71d88f1..945d18c 100644
--- a/demo/src/index.js
+++ b/demo/src/index.js
@@ -5,11 +5,12 @@ import FbImageLibrary from '../../src'
const images = ['https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350',
'https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg',
- 'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg',
- 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
- 'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
- "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
- "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"]
+ 'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg',
+ // 'https://cdn.pixabay.com/photo/2016/10/27/22/53/heart-1776746_960_720.jpg',
+ // 'https://images.pexels.com/photos/257840/pexels-photo-257840.jpeg?auto=compress&cs=tinysrgb&h=350',
+ // "https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&h=350",
+ // "https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg"
+]
class Demo extends Component {
render() {
diff --git a/src/components/Images.js b/src/components/Images.js
index 537009c..cf8c3d7 100644
--- a/src/components/Images.js
+++ b/src/components/Images.js
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
-import { Image, Grid, Row, Col } from 'react-bootstrap';
-import Grida from "@material-ui/core/Grid";
+import {Grid} from "@material-ui/core";
import Modal from './Modal'
import PropTypes from 'prop-types';
@@ -50,11 +49,11 @@ class Images extends Component {
const { countFrom } = this.state;
const overlay = images.length > countFrom && countFrom == 1 ? this.renderCountOverlay(true) : this.renderOverlay();
- return (
-
+ return (
+
{overlay}
-
- )
+
+ )
}
@@ -64,15 +63,15 @@ class Images extends Component {
const overlay = images.length > countFrom && [2, 3].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay();
const conditionalRender = [3, 4].includes(images.length) || images.length > +countFrom && [3, 4].includes(+countFrom);
- return (
-
+
{this.renderOverlay()}
-
-
+
+
{overlay}
-
- )
+
+ )
}
@@ -82,17 +81,17 @@ class Images extends Component {
const overlay = !countFrom || countFrom > 5 || images.length > countFrom && [4, 5].includes(+countFrom) ? this.renderCountOverlay(true) : this.renderOverlay(conditionalRender ? 3 : 4);
const conditionalRender = images.length == 4 || images.length > +countFrom && +countFrom == 4;
- return (
-
+ return (
+
{this.renderOverlay(conditionalRender ? 1 : 2)}
-
-
+
+
{this.renderOverlay(conditionalRender ? 2 : 3)}
-
-
+
+
{overlay}
-
- )
+
+ )
}
From 83cb6a6c4a404b3908ebd52aba18bfaa51335f12 Mon Sep 17 00:00:00 2001
From: ManiloxGT <60653867+ManelGonzalez-ops@users.noreply.github.com>
Date: Sun, 2 May 2021 16:05:09 +0200
Subject: [PATCH 3/3] removed react-bootstrap dependency from package.json
---
package-lock.json | 220 ++--------------------------------------------
package.json | 1 -
2 files changed, 5 insertions(+), 216 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 93866b6..a01f88d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
"dependencies": {
"@material-ui/core": "^3.1.2",
"@material-ui/icons": "^3.0.1",
- "react-bootstrap": "^0.32.4",
"react-image-lightbox": "^5.0.0"
},
"devDependencies": {
@@ -30,15 +29,6 @@
"regenerator-runtime": "^0.13.4"
}
},
- "node_modules/@babel/runtime-corejs2": {
- "version": "7.14.0",
- "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.14.0.tgz",
- "integrity": "sha512-btR4E8JiGlmmDI5YgirlG9z3T91rBdxnVh2YuEStrHDcekffaaIeK+CE0S4IaYUyYhMa7rFDfF2GEO79XNbLEA==",
- "dependencies": {
- "core-js": "^2.6.5",
- "regenerator-runtime": "^0.13.4"
- }
- },
"node_modules/@insin/npm-install-webpack-plugin": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@insin/npm-install-webpack-plugin/-/npm-install-webpack-plugin-5.0.0.tgz",
@@ -3424,6 +3414,7 @@
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
"integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
"deprecated": "core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+ "dev": true,
"hasInstallScript": true
},
"node_modules/core-util-is": {
@@ -6968,6 +6959,7 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dev": true,
"dependencies": {
"loose-envify": "^1.0.0"
}
@@ -8411,11 +8403,6 @@
"integrity": "sha1-edk9LTM2PW/dKXCzNdkUGtWR15s=",
"dev": true
},
- "node_modules/keycode": {
- "version": "2.2.0",
- "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
- "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
- },
"node_modules/killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -11399,18 +11386,6 @@
"react-is": "^16.8.1"
}
},
- "node_modules/prop-types-extra": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
- "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
- "dependencies": {
- "react-is": "^16.3.2",
- "warning": "^4.0.0"
- },
- "peerDependencies": {
- "react": ">=0.14.0"
- }
- },
"node_modules/proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -11676,37 +11651,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/react-bootstrap": {
- "version": "0.32.4",
- "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.4.tgz",
- "integrity": "sha512-xj+JfaPOvnvr3ow0aHC7Y3HaBKZNR1mm361hVxVzVX3fcdJNIrfiodbQ0m9nLBpNxiKG6FTU2lq/SbTDYT2vew==",
- "dependencies": {
- "@babel/runtime-corejs2": "^7.0.0",
- "classnames": "^2.2.5",
- "dom-helpers": "^3.2.0",
- "invariant": "^2.2.4",
- "keycode": "^2.2.0",
- "prop-types": "^15.6.1",
- "prop-types-extra": "^1.0.1",
- "react-overlays": "^0.8.0",
- "react-prop-types": "^0.4.0",
- "react-transition-group": "^2.0.0",
- "uncontrollable": "^5.0.0",
- "warning": "^3.0.0"
- },
- "peerDependencies": {
- "react": "^0.14.9 || >=15.3.0",
- "react-dom": "^0.14.9 || >=15.3.0"
- }
- },
- "node_modules/react-bootstrap/node_modules/warning": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
- "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
- "dependencies": {
- "loose-envify": "^1.0.0"
- }
- },
"node_modules/react-deep-force-update": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz",
@@ -11781,50 +11725,6 @@
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17"
}
},
- "node_modules/react-overlays": {
- "version": "0.8.3",
- "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
- "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
- "dependencies": {
- "classnames": "^2.2.5",
- "dom-helpers": "^3.2.1",
- "prop-types": "^15.5.10",
- "prop-types-extra": "^1.0.1",
- "react-transition-group": "^2.2.0",
- "warning": "^3.0.0"
- },
- "peerDependencies": {
- "react": "^0.14.9 || >=15.3.0",
- "react-dom": "^0.14.9 || >=15.3.0"
- }
- },
- "node_modules/react-overlays/node_modules/warning": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
- "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
- "dependencies": {
- "loose-envify": "^1.0.0"
- }
- },
- "node_modules/react-prop-types": {
- "version": "0.4.0",
- "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
- "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
- "dependencies": {
- "warning": "^3.0.0"
- },
- "peerDependencies": {
- "react": ">=0.14.0"
- }
- },
- "node_modules/react-prop-types/node_modules/warning": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
- "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
- "dependencies": {
- "loose-envify": "^1.0.0"
- }
- },
"node_modules/react-proxy": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz",
@@ -14450,17 +14350,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
- "node_modules/uncontrollable": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz",
- "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==",
- "dependencies": {
- "invariant": "^2.2.4"
- },
- "peerDependencies": {
- "react": ">=15.0.0"
- }
- },
"node_modules/underscore": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
@@ -16532,15 +16421,6 @@
"regenerator-runtime": "^0.13.4"
}
},
- "@babel/runtime-corejs2": {
- "version": "7.14.0",
- "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.14.0.tgz",
- "integrity": "sha512-btR4E8JiGlmmDI5YgirlG9z3T91rBdxnVh2YuEStrHDcekffaaIeK+CE0S4IaYUyYhMa7rFDfF2GEO79XNbLEA==",
- "requires": {
- "core-js": "^2.6.5",
- "regenerator-runtime": "^0.13.4"
- }
- },
"@insin/npm-install-webpack-plugin": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/@insin/npm-install-webpack-plugin/-/npm-install-webpack-plugin-5.0.0.tgz",
@@ -19580,7 +19460,8 @@
"core-js": {
"version": "2.6.12",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
- "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+ "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+ "dev": true
},
"core-util-is": {
"version": "1.0.2",
@@ -22571,6 +22452,7 @@
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
"integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+ "dev": true,
"requires": {
"loose-envify": "^1.0.0"
}
@@ -23713,11 +23595,6 @@
"integrity": "sha1-edk9LTM2PW/dKXCzNdkUGtWR15s=",
"dev": true
},
- "keycode": {
- "version": "2.2.0",
- "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
- "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ="
- },
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -26215,15 +26092,6 @@
"react-is": "^16.8.1"
}
},
- "prop-types-extra": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
- "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
- "requires": {
- "react-is": "^16.3.2",
- "warning": "^4.0.0"
- }
- },
"proxy-addr": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -26445,35 +26313,6 @@
"prop-types": "^15.6.2"
}
},
- "react-bootstrap": {
- "version": "0.32.4",
- "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.32.4.tgz",
- "integrity": "sha512-xj+JfaPOvnvr3ow0aHC7Y3HaBKZNR1mm361hVxVzVX3fcdJNIrfiodbQ0m9nLBpNxiKG6FTU2lq/SbTDYT2vew==",
- "requires": {
- "@babel/runtime-corejs2": "^7.0.0",
- "classnames": "^2.2.5",
- "dom-helpers": "^3.2.0",
- "invariant": "^2.2.4",
- "keycode": "^2.2.0",
- "prop-types": "^15.6.1",
- "prop-types-extra": "^1.0.1",
- "react-overlays": "^0.8.0",
- "react-prop-types": "^0.4.0",
- "react-transition-group": "^2.0.0",
- "uncontrollable": "^5.0.0",
- "warning": "^3.0.0"
- },
- "dependencies": {
- "warning": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
- "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
- "requires": {
- "loose-envify": "^1.0.0"
- }
- }
- }
- },
"react-deep-force-update": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/react-deep-force-update/-/react-deep-force-update-1.1.2.tgz",
@@ -26531,47 +26370,6 @@
"warning": "^4.0.3"
}
},
- "react-overlays": {
- "version": "0.8.3",
- "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.8.3.tgz",
- "integrity": "sha512-h6GT3jgy90PgctleP39Yu3eK1v9vaJAW73GOA/UbN9dJ7aAN4BTZD6793eI1D5U+ukMk17qiqN/wl3diK1Z5LA==",
- "requires": {
- "classnames": "^2.2.5",
- "dom-helpers": "^3.2.1",
- "prop-types": "^15.5.10",
- "prop-types-extra": "^1.0.1",
- "react-transition-group": "^2.2.0",
- "warning": "^3.0.0"
- },
- "dependencies": {
- "warning": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
- "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
- "requires": {
- "loose-envify": "^1.0.0"
- }
- }
- }
- },
- "react-prop-types": {
- "version": "0.4.0",
- "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz",
- "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=",
- "requires": {
- "warning": "^3.0.0"
- },
- "dependencies": {
- "warning": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
- "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
- "requires": {
- "loose-envify": "^1.0.0"
- }
- }
- }
- },
"react-proxy": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/react-proxy/-/react-proxy-1.1.8.tgz",
@@ -28831,14 +28629,6 @@
"which-boxed-primitive": "^1.0.2"
}
},
- "uncontrollable": {
- "version": "5.1.0",
- "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz",
- "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==",
- "requires": {
- "invariant": "^2.2.4"
- }
- },
"underscore": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.7.0.tgz",
diff --git a/package.json b/package.json
index f421fef..84a016b 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
"dependencies": {
"@material-ui/core": "^3.1.2",
"@material-ui/icons": "^3.0.1",
- "react-bootstrap": "^0.32.4",
"react-image-lightbox": "^5.0.0"
},
"peerDependencies": {