From bcf4527cf49948a1aa09598518bb5c2eab425521 Mon Sep 17 00:00:00 2001 From: Sandra Date: Tue, 14 Aug 2018 20:21:47 +0100 Subject: [PATCH] add default columns --- README.md | 6 ++-- docs/README.md | 8 ++--- docs/SUMMARY.md | 2 +- docs/examples/custom-dynamic-columns.md | 16 +++++++++ docs/examples/dynamic-columns.md | 7 ---- examples/src/ExampleBasic.js | 4 +-- .../src/ExampleCustomComponentSelection.js | 2 +- examples/src/ExampleDynamicLoading.js | 2 +- examples/src/ExampleWithLightbox.js | 2 +- examples/src/app.js | 34 ++++--------------- package.json | 3 +- src/Gallery.js | 15 ++++++-- yarn.lock | 14 +------- 13 files changed, 50 insertions(+), 65 deletions(-) create mode 100644 docs/examples/custom-dynamic-columns.md delete mode 100644 docs/examples/dynamic-columns.md diff --git a/README.md b/README.md index 20ea9bb..4f01390 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ * Responsive, accessible, composable, and customizable image gallery component * Maintains the original aspect ratio of your photos -* Creates a 'masonry' style layout +* Creates a "masonry" style layout * Uses actual image elements, optionally pass in srcSet and sizes attributes * Supports row or column direction layout * Supports passing in a custom image component for implementation of things like image selection, favorites, captions, or whatever your little heart desires! @@ -34,7 +34,7 @@ yarn add react-photo-gallery * [Basic Row Layout](https://codesandbox.io/s/9yx911wl9y) * [Basic Column Layout](https://codesandbox.io/s/r09k1xj614) * [With Lightbox](https://codesandbox.io/s/5vn3lvz2n4) -* [Dynamic Columns](https://codesandbox.io/s/ll7ym48027) +* [Custom Dynamic Columns](https://codesandbox.io/s/ll7ym48027) * [Selection using custom ImageComponent](https://codesandbox.io/s/o7o241q09) * [Sortable with drag and drop](https://codesandbox.io/s/8y7n1r9y5j) @@ -81,7 +81,7 @@ const PHOTO_SET = [ Property | Type | Default | Description :-----------------------|:--------------|:--------------|:-------------------------------- photos | array | undefined | required; array of objects -columns | number | 3 | optional; number of photos per row +columns | number | undefined | optional; number of photos per row; defaults to Gallery's breakpoint choosing onClick | function | undefined | optional; do something when the user clicks a photo; receives arguments event and an object containing the index, photo obj originally sent and the next and previous photos in the gallery if they exist margin | number | 2 | optional; number of margin pixels around each entire image direction | string | 'row' | optional; `column` or `row` based layout diff --git a/docs/README.md b/docs/README.md index d0c672f..ec946bf 100644 --- a/docs/README.md +++ b/docs/README.md @@ -12,9 +12,9 @@ description: A repsonsive image gallery component for React * Responsive, accessible, composable, and customizable image gallery component * Maintains the original aspect ratio of your photos -* Creates a 'masonry' style layout +* Creates a "masonry" style layout * Uses actual image elements, optionally pass in srcSet and sizes attributes -* Supports row or column (masonry) direction layout +* Supports row or column direction layout * Supports passing in a custom image component for implementation of things like image selection, favorites, captions, or whatever your little heart desires! * SSR app compatible @@ -38,7 +38,7 @@ yarn add react-photo-gallery * [Basic Row Layout](https://codesandbox.io/s/9yx911wl9y) * [Basic Column Layout](https://codesandbox.io/s/r09k1xj614) * [With Lightbox](https://codesandbox.io/s/5vn3lvz2n4) -* [Dynamic Columns](https://codesandbox.io/s/ll7ym48027) +* [Custom Dynamic Columns](https://codesandbox.io/s/ll7ym48027) * [Selection using custom ImageComponent](https://codesandbox.io/s/o7o241q09) * [Sortable with drag and drop](https://codesandbox.io/s/8y7n1r9y5j) @@ -85,7 +85,7 @@ const PHOTO_SET = [ Property | Type | Default | Description :-----------------------|:--------------|:--------------|:-------------------------------- photos | array | undefined | required; array of objects -columns | number | 3 | optional; number of photos per row +columns | number | undefined | optional; number of photos per row; defaults to Gallery's breakpoint choosing onClick | function | undefined | optional; do something when the user clicks a photo; receives arguments event and an object containing the index, photo obj originally sent and the next and previous photos in the gallery if they exist margin | number | 2 | optional; number of margin pixels around each entire image direction | string | 'row' | optional; `column` or `row` based layout diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md index 8fb11bd..2bf1dbf 100644 --- a/docs/SUMMARY.md +++ b/docs/SUMMARY.md @@ -5,7 +5,7 @@ * [Basic (Rows)](examples/basic-rows.md) * [Basic (Columns)](examples/basic-columns.md) * [srcSet and sizes](examples/srcset-and-sizes.md) - * [Dynamic Columns](examples/dynamic-columns.md) + * [Custom Dynamic Columns](examples/custom-dynamic-columns.md) * [Lightbox](examples/lightbox.md) * [Selection with custom ImageComponent](examples/selection.md) * [Sortable using drag and drop](examples/sortable.md) diff --git a/docs/examples/custom-dynamic-columns.md b/docs/examples/custom-dynamic-columns.md new file mode 100644 index 0000000..1127cc1 --- /dev/null +++ b/docs/examples/custom-dynamic-columns.md @@ -0,0 +1,16 @@ +# Custom Dynamic Columns + +By default, the Gallery chooses the amount of columns per row, based on the width of itself. The default columns are: + +``` +columns = 1; +if (containerWidth >= 500) columns = 2; +if (containerWidth >= 900) columns = 3; +if (containerWidth >= 1500) columns = 4; +``` + +If you'd like to change the columns based on the container size of your choosing try using [react-measure](https://github.com/souporserious/react-measure) to measure the size of your container. Resize the browser to see this in action. See example: + + + + diff --git a/docs/examples/dynamic-columns.md b/docs/examples/dynamic-columns.md deleted file mode 100644 index c0c3b66..0000000 --- a/docs/examples/dynamic-columns.md +++ /dev/null @@ -1,7 +0,0 @@ -# Dynamic Columns - -Change the columns depending on the size of your container at breakpoints of your choosing. Here I am using [react-measure](https://github.com/souporserious/react-measure) to achieve this. Resize the browser to see this in action. - - - - diff --git a/examples/src/ExampleBasic.js b/examples/src/ExampleBasic.js index 3dd5995..1b258a3 100644 --- a/examples/src/ExampleBasic.js +++ b/examples/src/ExampleBasic.js @@ -1,11 +1,11 @@ import React from 'react'; import Gallery from 'react-photo-gallery'; -const ExampleBasic = ({photos, columns, title, direction}) => { +const ExampleBasic = ({photos, title, direction}) => { return (

{title}

- +
); } diff --git a/examples/src/ExampleCustomComponentSelection.js b/examples/src/ExampleCustomComponentSelection.js index 7982982..2f386b5 100644 --- a/examples/src/ExampleCustomComponentSelection.js +++ b/examples/src/ExampleCustomComponentSelection.js @@ -24,7 +24,7 @@ class ExampleCustomComponentSelection extends React.Component {

Using the ImageComponent prop

Pass in a custom image component to create any visual representation such as selection

- + ); } diff --git a/examples/src/ExampleDynamicLoading.js b/examples/src/ExampleDynamicLoading.js index db9e2de..fd250c5 100644 --- a/examples/src/ExampleDynamicLoading.js +++ b/examples/src/ExampleDynamicLoading.js @@ -51,7 +51,7 @@ class ExampleDynamicLoading extends React.Component { return (

Loading Photos Dynamically in Column Layout

- + {!this.state.loadedAll &&
Loading
}
); diff --git a/examples/src/ExampleWithLightbox.js b/examples/src/ExampleWithLightbox.js index 07a0e21..b3774ff 100644 --- a/examples/src/ExampleWithLightbox.js +++ b/examples/src/ExampleWithLightbox.js @@ -38,7 +38,7 @@ class ExampleWithLightbox extends React.Component { return (

Using with a Lightbox component

- + ({ ...x, srcset: x.srcSet, caption: x.title }))} diff --git a/examples/src/app.js b/examples/src/app.js index 474e492..2cbbcab 100644 --- a/examples/src/app.js +++ b/examples/src/app.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import jsonp from 'jsonp'; -import Measure from 'react-measure'; import ExampleBasic from './ExampleBasic'; import ExampleWithLightbox from './ExampleWithLightbox'; import ExampleCustomComponentSelection from './ExampleCustomComponentSelection'; @@ -62,32 +61,13 @@ class App extends React.Component { if (this.state.photos) { const width = this.state.width; return ( - this.setState({ width: contentRect.bounds.width })}> - { - ({ measureRef }) => { - if (width < 1 ){ - return
; - } - let columns = 1; - if (width >= 480){ - columns = 2; - } - if (width >= 1024){ - columns = 3; - } - if (width >= 1824){ - columns = 4; - } - return
- - - - - -
- } - } - +
+ + + + + +
); } else { return ( diff --git a/package.json b/package.json index 6dc6073..ad791fe 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-photo-gallery", - "version": "6.1.7", + "version": "6.2.0", "description": "Responsive React Photo Gallery Image Component for Masonry Layout", "main": "lib/Gallery.js", "module": "dist/react-photo-gallery.es.js", @@ -47,7 +47,6 @@ "react": "^16.3.2", "react-dom": "^16.3.2", "react-images": "^0.5.18", - "react-measure": "^2.0.2", "react-test-renderer": "^16.1.1", "rollup": "^0.50.0", "rollup-plugin-babel": "^3.0.2", diff --git a/src/Gallery.js b/src/Gallery.js index 2e99283..7cb25b4 100644 --- a/src/Gallery.js +++ b/src/Gallery.js @@ -28,11 +28,21 @@ class Gallery extends React.Component { }; render() { + const containerWidth = this.state.containerWidth; const { ImageComponent = Photo } = this.props; // subtract 1 pixel because the browser may round up a pixel - const { columns, margin, onClick, direction } = this.props; + const { margin, onClick, direction } = this.props; + let { columns } = this.props; + + // set default breakpoints if user doesn't specify columns prop + if (columns === undefined) { + columns = 1; + if (containerWidth >= 500) columns = 2; + if (containerWidth >= 900) columns = 3; + if (containerWidth >= 1500) columns = 4; + } const photos = this.props.photos; - const width = this.state.containerWidth - 1; + const width = containerWidth - 1; let galleryStyle, thumbs; if (direction === 'row') { @@ -78,7 +88,6 @@ Gallery.propTypes = { }; Gallery.defaultProps = { - columns: 3, margin: 2, direction: 'row', }; diff --git a/yarn.lock b/yarn.lock index 4f71706..d4a7e5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3416,10 +3416,6 @@ get-caller-file@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5" -get-node-dimensions@^1.2.0: - version "1.2.1" - resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823" - get-stdin@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe" @@ -6389,14 +6385,6 @@ react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" -react-measure@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.0.2.tgz#072a9a5fafc01dfbadc1fa5fb09fc351037f636c" - dependencies: - get-node-dimensions "^1.2.0" - prop-types "^15.5.10" - resize-observer-polyfill "^1.4.2" - react-prop-toggle@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/react-prop-toggle/-/react-prop-toggle-1.0.2.tgz#8b0b7e74653606b1427cfcf6c4eaa9198330568e" @@ -6714,7 +6702,7 @@ requires-port@1.0.x, requires-port@1.x.x: version "1.0.0" resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" -resize-observer-polyfill@^1.4.2, resize-observer-polyfill@^1.5.0: +resize-observer-polyfill@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"