24 | {children} 25 |
26 | ); 27 | 28 | Text.propTypes = propTypes; 29 | Text.defaultProps = defaultProps; 30 | 31 | export default Text; 32 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "no-empty-source": null, 5 | "string-quotes": "double", 6 | "at-rule-no-unknown": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "extend", 11 | "at-root", 12 | "debug", 13 | "warn", 14 | "error", 15 | "if", 16 | "else", 17 | "for", 18 | "each", 19 | "while", 20 | "mixin", 21 | "include", 22 | "content", 23 | "return", 24 | "function", 25 | "tailwind", 26 | "apply", 27 | "responsive", 28 | "variants", 29 | "screen" 30 | ] 31 | } 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /example/src/assets/pages/_home.scss: -------------------------------------------------------------------------------- 1 | .intro { 2 | padding-top: 5em; 3 | padding-bottom: 5em; 4 | display: flex; 5 | height: auto; 6 | flex-direction: column; 7 | justify-content: center; 8 | text-align: center; 9 | 10 | .actions { 11 | display: flex; 12 | justify-content: center; 13 | } 14 | 15 | @media (max-width: 550px) { 16 | padding-top: 10em; 17 | padding-bottom: 6em; 18 | 19 | .actions { 20 | flex-direction: column; 21 | 22 | > div { 23 | margin-right: 0 !important; 24 | margin-left: 0 !important; 25 | padding: 10px 20px; 26 | } 27 | 28 | .button { 29 | width: 100%; 30 | margin-top: 0 !important; 31 | margin-bottom: 0 !important; 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/src/components/Title/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { forbidExtraProps, range } from 'airbnb-prop-types'; 5 | import classnames from 'classnames'; 6 | 7 | const propTypes = forbidExtraProps({ 8 | children: PropTypes.node.isRequired, 9 | level: range(1, 7), 10 | }); 11 | 12 | const defaultProps = { 13 | level: 2, 14 | }; 15 | 16 | const Title = ({ 17 | children, 18 | level, 19 | }) => { 20 | const Level = `h${level}`; 21 | return ( 22 |
26 |
28 | );
29 |
30 | SidebarDocs.defaultProps = defaultProps;
31 | SidebarDocs.propTypes = propTypes;
32 |
33 | export default SidebarDocs;
34 |
--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
1 | name: npm-publish
2 | on:
3 | push:
4 | branches:
5 | - master
6 |
7 | jobs:
8 | npm-publish:
9 | name: npm-publish
10 | runs-on: ubuntu-latest
11 | steps:
12 | - name: Checkout repository
13 | uses: actions/checkout@master
14 | - name: Set up Node.js
15 | uses: actions/setup-node@master
16 | with:
17 | node-version: 12
18 | - run: yarn
19 | - run: yarn test
20 | - run: yarn build
21 | - name: Publish if version has been updated
22 | uses: pascalgn/npm-publish-action@4f4bf159e299f65d21cd1cbd96fc5d53228036df
23 | with:
24 | tag_name: "v%s"
25 | tag_message: "v%s"
26 | commit_pattern: "^Release (\\S+)"
27 | env:
28 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
29 | NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
30 |
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "docs",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "export": "yarn build && next export"
10 | },
11 | "dependencies": {
12 | "@mdx-js/loader": "^1.6.6",
13 | "@next/mdx": "^9.4.4",
14 | "@tailwindcss/typography": "^0.1.2",
15 | "@tailwindcss/ui": "^0.3.0",
16 | "autoprefixer": "^9.8.4",
17 | "classnames": "^2.2.6",
18 | "next": "9.4.4",
19 | "netlify-plugin-cache-nextjs": "^1.4.0",
20 | "next-mdx-enhanced": "^3.0.0",
21 | "next-transpile-modules": "^3.3.0",
22 | "postcss-nesting": "^7.0.1",
23 | "prop-types": "^15.7.2",
24 | "react": "16.13.1",
25 | "react-bnb-gallery": "^1.4.4",
26 | "react-dom": "16.13.1",
27 | "tailwindcss": "^1.4.6"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/docs/data/getDocsPages.jsx:
--------------------------------------------------------------------------------
1 | import { frontMatter as installation } from '../pages/docs/installation.mdx';
2 | import { frontMatter as options } from '../pages/docs/options.mdx';
3 | import { frontMatter as license } from '../pages/docs/license.mdx';
4 | import { frontMatter as help } from '../pages/docs/help.mdx';
5 |
6 | export default [
7 | {
8 | slug: 'documentation',
9 | title: 'Documentation',
10 | items: [
11 | {
12 | slug: 'installation',
13 | url: '/docs/installation',
14 | ...installation,
15 | },
16 | {
17 | slug: 'options',
18 | url: '/docs/options',
19 | ...options,
20 | },
21 | ],
22 | },
23 | {
24 | slug: 'license',
25 | url: '/docs/license',
26 | ...license,
27 | },
28 | {
29 | slug: 'help',
30 | url: '/docs/help',
31 | ...help,
32 | },
33 | ];
34 |
--------------------------------------------------------------------------------
/example/src/components/Section/index.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Container from '../Container';
5 | import Rule from '../Rule';
6 | import Title from '../Title';
7 |
8 | import './component.scss';
9 |
10 | const propTypes = {
11 | section: PropTypes.object.isRequired,
12 | };
13 |
14 | const defaultProps = {
15 | section: null,
16 | };
17 |
18 | const Section = ({
19 | section,
20 | children,
21 | }) => (
22 | -
33 | {
34 | items.map(({
35 | slug,
36 | url,
37 | title,
38 | }) => (
39 |
- 40 | 41 | 42 | {title} 43 | 44 | 45 | 46 | )) 47 | } 48 |
11 | Help
12 | Have a question?
13 | Follow the quick start guide on GitHub to get up and running quickly. Please do not use Github Issues to report personal support requests.
14 | For any personal contact, please drop me a line to pepalauisaac@gmail.com.
15 | Found a bug?
16 | If you find a bug, please read the Contribution Guildelines before you report the issue.
17 |
18 |
60 | {children}
61 |
62 | );
63 | };
64 |
65 | Spacing.propTypes = propTypes;
66 | Spacing.defaultProps = defaultProps;
67 |
68 | export default Spacing;
69 |
--------------------------------------------------------------------------------
/src/components/TogglePhotoList/TogglePhotoList.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import classnames from 'classnames';
5 |
6 | import defaultPhrases from '../../defaultPhrases';
7 | import getPhrasePropTypes from '../../utils/getPhrasePropTypes';
8 |
9 | import { forbidExtraProps } from '../../common/prop-types';
10 | import noop from '../../utils/noop';
11 |
12 | const propTypes = forbidExtraProps({
13 | isOpened: PropTypes.bool,
14 | onPress: PropTypes.func,
15 | phrases: PropTypes.shape(getPhrasePropTypes(defaultPhrases)),
16 | });
17 |
18 | const defaultProps = {
19 | isOpened: true,
20 | onPress: noop,
21 | phrases: defaultPhrases,
22 | };
23 |
24 | class TogglePhotoList extends PureComponent {
25 | render() {
26 | const {
27 | isOpened,
28 | onPress,
29 | phrases: {
30 | showPhotoList: showLabel,
31 | hidePhotoList: hideLabel,
32 | },
33 | } = this.props;
34 |
35 | const label = isOpened ? hideLabel : showLabel;
36 |
37 | const className = classnames(
38 | 'gallery-thumbnails--toggle',
39 | isOpened ? 'hide' : 'open',
40 | );
41 |
42 | return (
43 |
50 | );
51 | }
52 | }
53 |
54 | TogglePhotoList.propTypes = propTypes;
55 | TogglePhotoList.defaultProps = defaultProps;
56 |
57 | export default TogglePhotoList;
58 |
--------------------------------------------------------------------------------
/example/src/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Link } from "react-router-dom";
3 |
4 | import Container from '../Container';
5 | import GitHubButton from '../GitHubButton';
6 |
7 | import sections from '../../pages';
8 |
9 | import { ReactComponent as Logo } from './logo.svg';
10 |
11 | class Header extends Component {
12 | renderMenu() {
13 | const items = sections.map(section => {
14 | if (!section.disabled) {
15 | return (
16 | -
29 | {items}
30 |
39 |
52 |
40 |
42 |
45 |
46 |
51 |
14 |
44 |
45 | );
46 |
47 | export default Doc;
48 |
--------------------------------------------------------------------------------
/src/components/Thumbnail/Thumbnail.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import classnames from 'classnames';
5 |
6 | import Image from '../Image';
7 | import PhotoShape from '../../shapes/PhotoShape';
8 |
9 | import {
10 | forbidExtraProps,
11 | nonNegativeInteger,
12 | } from '../../common/prop-types';
13 | import noop from '../../utils/noop';
14 |
15 | import {
16 | THUMBNAIL_WIDTH,
17 | THUMBNAIL_HEIGHT,
18 | } from '../../constants';
19 |
20 | const thumbnailStyle = {
21 | width: THUMBNAIL_WIDTH,
22 | height: THUMBNAIL_HEIGHT,
23 | };
24 |
25 | const propTypes = forbidExtraProps({
26 | active: PropTypes.bool,
27 | photo: PhotoShape,
28 | onPress: PropTypes.func,
29 | number: nonNegativeInteger,
30 | });
31 |
32 | const defaultProps = {
33 | active: false,
34 | photo: null,
35 | onPress: noop,
36 | number: 0,
37 | };
38 |
39 | class Thumbnail extends PureComponent {
40 | render() {
41 | const {
42 | active,
43 | photo,
44 | onPress,
45 | number,
46 | } = this.props;
47 |
48 | const className = classnames(
49 | 'thumbnail-button',
50 | active && 'active',
51 | );
52 |
53 | return (
54 |
69 | );
70 | }
71 | }
72 |
73 | Thumbnail.propTypes = propTypes;
74 | Thumbnail.defaultProps = defaultProps;
75 |
76 | export default Thumbnail;
77 |
--------------------------------------------------------------------------------
/docs/components/Layout/Layout.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import PropTypes from 'prop-types';
3 | import classnames from 'classnames';
4 |
5 | import Header from '../Header';
6 | import Footer from '../Footer';
7 | import Main from '../Main';
8 |
9 | import { LayoutContextProvider } from './context';
10 |
11 | const defaultProps = {
12 | showHeader: true,
13 | showHeaderFixed: false,
14 | showMenuControls: true,
15 | };
16 |
17 | const propTypes = {
18 | showHeader: PropTypes.bool,
19 | showHeaderFixed: PropTypes.bool,
20 | showMenuControls: PropTypes.bool,
21 | children: PropTypes.node.isRequired,
22 | };
23 |
24 | const Layout = ({
25 | showHeader,
26 | showHeaderFixed,
27 | showMenuControls,
28 | children,
29 | }) => {
30 | const [value, setValue] = useState({
31 | navigationOpened: false,
32 | });
33 |
34 | return (
35 |
15 |
16 | {({ navigationOpened }) => (
17 |
20 |
43 |
21 |
42 |
22 |
26 | 23 | {title} 24 |
25 |
27 | {content}
28 |
29 |
41 |
42 | {showHeader && (
43 | setValue({
46 | ...value,
47 | navigationOpened: true,
48 | })}
49 | onMenuClose={() => setValue({
50 | ...value,
51 | navigationOpened: false,
52 | })}
53 | showMenuControls={showMenuControls}
54 | fixed={showHeaderFixed}
55 | />
56 | )}
57 |
58 | {children}
59 |
60 |
61 |
62 |
79 |
87 | );
88 | }
89 | }
90 |
91 | PhotoGrid.propTypes = propTypes;
92 | PhotoGrid.defaultProps = defaultProps;
93 |
94 | export default withSize()(PhotoGrid);
95 |
--------------------------------------------------------------------------------
/docs/pages/docs/installation.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Installation'
3 | layout: 'docs-page'
4 | ---
5 |
6 |
80 | {columns.map((column, index) => (
81 |
86 |
82 | {column}
83 |
84 | ))}
85 |
7 |
12 |
13 | You can install [react-bnb-gallery](https://www.npmjs.com/package/react-bnb-gallery) from [npm](https://www.npmjs.com/).
14 |
15 | ```bash
16 | # Using npm
17 | npm install react-bnb-gallery
18 |
19 | # Using Yarn
20 | yarn add react-bnb-gallery
21 | ```
22 |
23 | 8 | 1 9 | Install the library 10 |
11 |
24 |
29 |
30 | Alternatively, you may use the library CSS by simply adding this line to your project’s entry point:
31 |
32 | ```javascript
33 | import 'react-bnb-gallery/dist/style.css'
34 | ```
35 |
36 | 25 | 2 26 | Import compiled CSS 27 |
28 |
37 |
42 |
43 | Following code is simplest usage:
44 |
45 | ```javascript
46 | import React, { useState } from 'react';
47 | import ReactBnbGallery from 'react-bnb-gallery';
48 |
49 | const PHOTOS = [
50 | 'https://images.unsplash.com/photo-1470238660368-09dd17cab0b5',
51 | 'https://images.unsplash.com/photo-1565472604484-fd8b0414aaf3',
52 | 'https://images.unsplash.com/photo-1594240094495-1b9177b5fefc',
53 | ];
54 |
55 | class GalleryExample = () => {
56 | const [isOpen, setIsOpen] = useState(false);
57 |
58 | return (
59 | <>
60 |
63 | 38 | 3 39 | Start using the library 40 |
41 |
50 |
51 | {installCode}
52 |
53 |
54 |
57 |
58 | {importStyles}
59 |
60 |
61 |
63 |
64 | {usageCode}
65 |
66 |
67 |
2 | 
3 | Friendly, customizable and accessible-ready simple photo gallery based on React.
4 |
7 | 
8 | 
9 | 
10 | 
11 | 
12 |
87 |
95 | );
96 | }
97 | }
98 |
99 | PhotoGrid.propTypes = propTypes;
100 | PhotoGrid.defaultProps = defaultProps;
101 |
102 | export default PhotoGrid;
103 |
--------------------------------------------------------------------------------
/docs/pages/index.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useCallback } from 'react';
2 | import Link from 'next/link';
3 |
4 | import ReactBnbGallery from 'react-bnb-gallery';
5 |
6 | import Head from '../components/Head';
7 | import Layout from '../components/Layout';
8 | import Logo from '../components/Logo';
9 | import PhotoGrid from '../components/PhotoGrid';
10 |
11 | import photos from '../constants/photos';
12 |
13 | const Home = () => {
14 | const [isOpen, setOpen] = useState(false);
15 |
16 | const toggleGallery = useCallback(() => {
17 | setOpen(!isOpen);
18 | }, [isOpen]);
19 |
20 | return (
21 |
88 | {Object.keys(columns).map((i) => (
89 |
94 |
90 | {columns[i]}
91 |
92 | ))}
93 |
24 |
49 |
25 |
48 | 26 | Friendly, customizable and accessible-ready simple photo gallery based on 27 | React 28 | . 29 |
30 |
31 |
38 |
39 |
43 | Get Started
44 |
45 |
46 |
47 |
93 | 
100 |
101 |
41 |
70 |
42 |
69 |
43 |
44 |
45 |
49 |
52 | {!menuOpened && (
53 |
58 | )}
59 | {menuOpened && (
60 |
65 | )}
66 |
67 | )}
68 | -
99 |
- 100 | {photoRendered} 101 | 102 |
demos folder of the repository.
60 |
66 |
61 |
62 | {demostration.code}
63 |
64 |
65 |
67 |
74 |
75 | 10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
13 | You will also see any lint errors in the console. 14 | 15 | ### `npm test` 16 | 17 | Launches the test runner in the interactive watch mode.
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 19 | 20 | ### `npm run build` 21 | 22 | Builds the app for production to the `build` folder.
23 | It correctly bundles React in production mode and optimizes the build for the best performance. 24 | 25 | The build is minified and the filenames include the hashes.
26 | Your app is ready to be deployed! 27 | 28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 29 | 30 | ### `npm run eject` 31 | 32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 33 | 34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 35 | 36 | Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 37 | 38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 39 | 40 | ## Learn More 41 | 42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 43 | 44 | To learn React, check out the [React documentation](https://reactjs.org/). 45 | 46 | ### Code Splitting 47 | 48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting 49 | 50 | ### Analyzing the Bundle Size 51 | 52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size 53 | 54 | ### Making a Progressive Web App 55 | 56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app 57 | 58 | ### Advanced Configuration 59 | 60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration 61 | 62 | ### Deployment 63 | 64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment 65 | 66 | ### `npm run build` fails to minify 67 | 68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify 69 | -------------------------------------------------------------------------------- /example/src/assets/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | display: inline-flex; 3 | align-items: center; 4 | border: $btn-border; 5 | border-radius: $btn-border-radius; 6 | box-shadow: $btn-box-shadow; 7 | cursor: pointer; 8 | text-decoration: none; 9 | 10 | &:focus, 11 | &:active { 12 | outline: none; 13 | } 14 | 15 | &.button__block { 16 | display: block; 17 | width: 100%; 18 | } 19 | 20 | &.button__default { 21 | line-height: $btn-line-height; 22 | height: $btn-height; 23 | padding: $btn-padding-y $btn-padding-x; 24 | font-size: $btn-font-size; 25 | font-weight: $btn-font-weight; 26 | border-width: $btn-border-width; 27 | border-radius: $btn-border-radius; 28 | } 29 | 30 | &.button__small { 31 | line-height: $btn-small-line-height; 32 | height: $btn-small-height; 33 | padding: $btn-small-padding-y $btn-small-padding-x; 34 | font-size: $btn-small-font-size; 35 | font-weight: $btn-small-font-weight; 36 | border-width: $btn-small-border-width; 37 | border-radius: $btn-small-border-radius; 38 | } 39 | 40 | &.button__large { 41 | line-height: $btn-large-line-height; 42 | height: $btn-large-height; 43 | padding: $btn-large-padding-y $btn-large-padding-x; 44 | font-size: $btn-large-font-size; 45 | font-weight: $btn-large-font-weight; 46 | border-width: $btn-large-border-width; 47 | border-radius: $btn-large-border-radius; 48 | } 49 | 50 | &.button__outline { 51 | box-shadow: none; 52 | } 53 | 54 | &.button__primary { 55 | color: $btn-primary-color; 56 | background-color: $btn-primary-background; 57 | border-color: $btn-primary-border; 58 | 59 | &:hover { 60 | color: $btn-primary-hover-color; 61 | background-color: $btn-primary-hover-background; 62 | border-color: $btn-primary-hover-border; 63 | } 64 | 65 | &.button__outline { 66 | color: $btn-primary-outline-color; 67 | background-color: $btn-primary-outline-background; 68 | border-color: $btn-primary-outline-border; 69 | 70 | &:hover { 71 | color: $btn-primary-outline-hover-color; 72 | background-color: $btn-primary-outline-hover-background; 73 | border-color: $btn-primary-outline-hover-border; 74 | } 75 | } 76 | } 77 | 78 | &.button__secondary { 79 | color: $btn-secondary-color; 80 | background-color: $btn-secondary-background; 81 | border-color: $btn-secondary-border; 82 | 83 | &:hover { 84 | color: $btn-secondary-hover-color; 85 | background-color: $btn-secondary-hover-background; 86 | border-color: $btn-secondary-hover-border; 87 | } 88 | 89 | &.button__outline { 90 | color: $btn-secondary-outline-color; 91 | background-color: $btn-secondary-outline-background; 92 | border-color: $btn-secondary-outline-border; 93 | 94 | &:hover { 95 | color: $btn-secondary-outline-hover-color; 96 | background-color: $btn-secondary-outline-hover-background; 97 | border-color: $btn-secondary-outline-hover-border; 98 | } 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /example/src/assets/components/_prism.scss: -------------------------------------------------------------------------------- 1 | code[class*="language-"], 2 | pre[class*="language-"] { 3 | color: $prism-color; 4 | background: none; 5 | text-shadow: $prism-text-shadow; 6 | font-family: $prism-font-family; 7 | text-align: left; 8 | white-space: pre; 9 | word-spacing: normal; 10 | word-break: normal; 11 | word-wrap: normal; 12 | line-height: $prism-line-height; 13 | tab-size: $prism-tab-size; 14 | hyphens: none; 15 | direction: ltr; 16 | } 17 | 18 | :not(pre) > code[class*="language-"], 19 | pre[class*="language-"] { 20 | background: $prism-background; 21 | } 22 | 23 | pre[class*="language-"] { 24 | padding: $prism-block-padding; 25 | margin: $prism-block-margin; 26 | overflow: auto; 27 | border-radius: $prism-block-border-radius; 28 | } 29 | 30 | :not(pre) > code[class*="language-"] { 31 | padding: $prism-code-padding; 32 | border-radius: $prism-code-border-radius; 33 | white-space: normal; 34 | } 35 | 36 | .token.comment, 37 | .token.prolog, 38 | .token.doctype, 39 | .token.cdata { 40 | color: slategray; 41 | } 42 | 43 | .token.punctuation { 44 | color: #f8f8f2; 45 | } 46 | 47 | .namespace { 48 | opacity: 0.7; 49 | } 50 | 51 | .token.property, 52 | .token.tag, 53 | .token.constant, 54 | .token.symbol, 55 | .token.deleted { 56 | color: #f92672; 57 | } 58 | 59 | .token.boolean, 60 | .token.number { 61 | color: #ae81ff; 62 | } 63 | 64 | .token.selector, 65 | .token.attr-name, 66 | .token.string, 67 | .token.char, 68 | .token.builtin, 69 | .token.inserted { 70 | color: #6eba76; 71 | } 72 | 73 | .token.entity, 74 | .token.url, 75 | .language-css .token.string, 76 | .style .token.string, 77 | .token.variable { 78 | color: #f8f8f2; 79 | } 80 | 81 | .token.class-name { 82 | color: #e5c07b; 83 | } 84 | 85 | .token.function { 86 | color: #61afef; 87 | } 88 | 89 | .token.atrule, 90 | .token.attr-value { 91 | color: #e6db74; 92 | } 93 | 94 | .token.operator { 95 | color: #4cb6c2; 96 | } 97 | 98 | .token.keyword { 99 | color: #c678dd; 100 | } 101 | 102 | .token.regex, 103 | .token.important { 104 | color: #fd971f; 105 | } 106 | 107 | .token.important, 108 | .token.bold { 109 | font-weight: bold; 110 | } 111 | .token.italic { 112 | font-style: italic; 113 | } 114 | 115 | .token.entity { 116 | cursor: help; 117 | } 118 | 119 | .command-line-prompt { 120 | border-right: 1px solid #999; 121 | display: block; 122 | float: left; 123 | font-size: 100%; 124 | letter-spacing: -1px; 125 | margin-right: 1em; 126 | pointer-events: none; 127 | 128 | -webkit-user-select: none; 129 | -moz-user-select: none; 130 | -ms-user-select: none; 131 | user-select: none; 132 | } 133 | 134 | .command-line-prompt > span:before { 135 | color: #999; 136 | content: " "; 137 | display: block; 138 | padding-right: 0.8em; 139 | } 140 | 141 | .command-line-prompt > span[data-user]:before { 142 | content: "[" attr(data-user) "@" attr(data-host) "] $"; 143 | } 144 | 145 | .command-line-prompt > span[data-user="root"]:before { 146 | content: "[" attr(data-user) "@" attr(data-host) "] #"; 147 | } 148 | 149 | .command-line-prompt > span[data-prompt]:before { 150 | content: attr(data-prompt); 151 | } 152 | -------------------------------------------------------------------------------- /docs/components/PhotoGrid/photos.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | src: 'https://source.unsplash.com/random/502x502', 4 | width: 502, 5 | height: 502, 6 | }, 7 | { 8 | src: 'https://source.unsplash.com/random/702x702', 9 | width: 702, 10 | height: 702, 11 | }, 12 | { 13 | src: 'https://source.unsplash.com/random/602x802', 14 | width: 602, 15 | height: 802, 16 | }, 17 | /*---------------------------------------------------*/ 18 | { 19 | src: 'https://source.unsplash.com/random/636x703', 20 | width: 636, 21 | height: 703, 22 | }, 23 | { 24 | src: 'https://source.unsplash.com/random/550x425', 25 | width: 550, 26 | height: 425, 27 | }, 28 | { 29 | src: 'https://source.unsplash.com/random/550x800', 30 | width: 550, 31 | height: 800, 32 | }, 33 | /*---------------------------------------------------*/ 34 | { 35 | src: 'https://source.unsplash.com/random/500x500', 36 | width: 500, 37 | height: 500, 38 | }, 39 | { 40 | src: 'https://source.unsplash.com/random/801x724', 41 | width: 801, 42 | height: 727, 43 | }, 44 | { 45 | src: 'https://source.unsplash.com/random/601x856', 46 | width: 601, 47 | height: 856, 48 | }, 49 | /*---------------------------------------------------*/ 50 | { 51 | src: 'https://source.unsplash.com/random/701x860', 52 | width: 701, 53 | height: 860, 54 | }, 55 | { 56 | src: 'https://source.unsplash.com/random/801x1034', 57 | width: 801, 58 | height: 1034, 59 | }, 60 | { 61 | src: 'https://source.unsplash.com/random/801x653', 62 | width: 801, 63 | height: 653, 64 | }, 65 | /*---------------------------------------------------*/ 66 | { 67 | src: 'https://source.unsplash.com/random/551x399', 68 | width: 551, 69 | height: 399, 70 | }, 71 | { 72 | src: 'https://source.unsplash.com/random/501x790', 73 | width: 501, 74 | height: 790, 75 | }, 76 | { 77 | src: 'https://source.unsplash.com/random/701x723', 78 | width: 701, 79 | height: 723, 80 | }, 81 | /*---------------------------------------------------*/ 82 | { 83 | src: 'https://source.unsplash.com/random/801x1037', 84 | width: 801, 85 | height: 1037, 86 | }, 87 | { 88 | src: 'https://source.unsplash.com/random/551x437', 89 | width: 551, 90 | height: 437, 91 | }, 92 | { 93 | src: 'https://source.unsplash.com/random/701x873', 94 | width: 701, 95 | height: 873, 96 | }, 97 | /*---------------------------------------------------*/ 98 | { 99 | src: 'https://source.unsplash.com/random/801x897', 100 | width: 801, 101 | height: 897, 102 | }, 103 | { 104 | src: 'https://source.unsplash.com/random/551x550', 105 | width: 551, 106 | height: 550, 107 | }, 108 | { 109 | src: 'https://source.unsplash.com/random/601x731', 110 | width: 601, 111 | height: 731, 112 | }, 113 | /*---------------------------------------------------*/ 114 | { 115 | src: 'https://source.unsplash.com/random/801x683', 116 | width: 801, 117 | height: 683, 118 | }, 119 | { 120 | src: 'https://source.unsplash.com/random/551x465', 121 | width: 551, 122 | height: 465, 123 | }, 124 | { 125 | src: 'https://source.unsplash.com/random/601x984', 126 | width: 601, 127 | height: 984, 128 | }, 129 | ]; 130 | -------------------------------------------------------------------------------- /docs/pages/docs/options.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Options' 3 | layout: 'docs-page' 4 | --- 5 | 6 | To customize **bnbgallery** you can use the following properties: 7 | 8 | ### `activePhotoIndex` 9 | 10 | `activePhotoIndex: number` 11 | 12 | Initial photo index to show. Defaults to `0`. 13 | 14 | ### `activePhotoPressed` 15 | 16 | `activePhotoPressed: function` 17 | 18 | Called when a photo is pressed. Defaults to `noop`. 19 | 20 | ### `leftKeyPressed` 21 | 22 | `leftKeyPressed: function` 23 | 24 | Called when left key of the keyboard is pressed. Defaults to `noop`. 25 | 26 | ### `nextButtonPressed` 27 | 28 | `nextButtonPressed: function` 29 | 30 | Called when next control button is pressed. Defaults to `noop`. 31 | 32 | ### `onClose` 33 | 34 | `onClose: function` 35 | 36 | Called when the gallery modal is going to close. Defaults to `noop`. 37 | 38 | ### `preloadSize` 39 | 40 | `preloadSize: number` 41 | 42 | The number of photos to preload on gallery initialization. Defaults to `5`. 43 | 44 | ### `prevButtonPressed` 45 | 46 | `prevButtonPressed: function` 47 | 48 | Called when previous control button is pressed. Defaults to `noop`. 49 | 50 | ### `photos` 51 | 52 | `photos: array` 53 | 54 | List of photos. It can be an array of photos URLs or an array of objects. See the [photo object] props bellow. 55 | 56 | ### `phrases` 57 | 58 | `phrases: object` 59 | 60 | List of phrases. Could be used to translate strings. Defaults to `{...}`. 61 | 62 | ### `rightKeyPressed` 63 | 64 | `rightKeyPressed: function` 65 | 66 | Called when right key of the keyboard is pressed. Defaults to `noop`. 67 | 68 | ### `show` 69 | 70 | `show: function` 71 | 72 | Shows the modal when initialized. Defaults to `noop`. 73 | 74 | ### `showThumbnails` 75 | 76 | `showThumbnails: boolean` 77 | 78 | Whether the gallery should show thumbnails. Defaults to `true`. 79 | 80 | ### `keyboard` 81 | 82 | `keyboard: boolean` 83 | 84 | Whether the gallery should react to keyboard events. Defaults to `true`. 85 | 86 | ### `wrap` 87 | 88 | `wrap: boolean` 89 | 90 | Whether the gallery should cycle continuously or have hard stops. Defaults to `false`. 91 | 92 | ### `opacity` 93 | 94 | `opacity: number` 95 | 96 | Sets the opacity level for the component. Defaults to `1`. 97 | 98 | ### `backgroundColor` 99 | 100 | `backgroundColor: string` 101 | 102 | Sets the background color of the gallery component. Defaults to `#000000`. 103 | 104 | ### `zIndex` 105 | 106 | `zIndex: number` 107 | 108 | Specifies the stack order of the component. Defaults to `2000`. 109 | 110 | ## Photo properties 111 | 112 | This props are passed into `ReactBnbGallery`'s photos property: 113 | 114 | ### `photo` 115 | 116 | `photo: string` 117 | 118 | The src attribute value of the image. Defaults to `undefined`. 119 | 120 | ### `number` 121 | 122 | `number: string` 123 | 124 | The current number of the photo. Defaults to `undefined`. 125 | 126 | ### `caption` 127 | 128 | `caption: string` 129 | 130 | Photo description. Defaults to `undefined`. 131 | 132 | ### `subcaption` 133 | 134 | `subcaption: string` 135 | 136 | Photo secondary description, like the photo author or the name of the place where it was taken. Defaults to `undefined`. 137 | 138 | ### `thumbnail` 139 | 140 | `thumbnail: string` 141 | 142 | The url of the photo thumbnail. The preferred size for each thumbnail is `100x67`. Defaults to `undefined`. 143 | -------------------------------------------------------------------------------- /example/src/components/PhotoGrid/photos.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | src: 'https://source.unsplash.com/random/502x502', 4 | width: 502, 5 | height: 502, 6 | }, 7 | { 8 | src: 'https://source.unsplash.com/random/702x702', 9 | width: 702, 10 | height: 702, 11 | }, 12 | { 13 | src: 'https://source.unsplash.com/random/602x802', 14 | width: 602, 15 | height: 802, 16 | }, 17 | /*---------------------------------------------------*/ 18 | { 19 | src: 'https://source.unsplash.com/random/636x703', 20 | width: 636, 21 | height: 703, 22 | }, 23 | { 24 | src: 'https://source.unsplash.com/random/550x425', 25 | width: 550, 26 | height: 425, 27 | }, 28 | { 29 | src: 'https://source.unsplash.com/random/550x800', 30 | width: 550, 31 | height: 800, 32 | }, 33 | /*---------------------------------------------------*/ 34 | { 35 | src: 'https://source.unsplash.com/random/500x500', 36 | width: 500, 37 | height: 500, 38 | }, 39 | { 40 | src: 'https://source.unsplash.com/random/801x724', 41 | width: 801, 42 | height: 727, 43 | }, 44 | { 45 | src: 'https://source.unsplash.com/random/601x856', 46 | width: 601, 47 | height: 856, 48 | }, 49 | /*---------------------------------------------------*/ 50 | { 51 | src: 'https://source.unsplash.com/random/701x860', 52 | width: 701, 53 | height: 860, 54 | }, 55 | { 56 | src: 'https://source.unsplash.com/random/801x1034', 57 | width: 801, 58 | height: 1034, 59 | }, 60 | { 61 | src: 'https://source.unsplash.com/random/801x653', 62 | width: 801, 63 | height: 653, 64 | }, 65 | /*---------------------------------------------------*/ 66 | { 67 | src: 'https://source.unsplash.com/random/551x399', 68 | width: 551, 69 | height: 399, 70 | }, 71 | { 72 | src: 'https://source.unsplash.com/random/501x790', 73 | width: 501, 74 | height: 790, 75 | }, 76 | { 77 | src: 'https://source.unsplash.com/random/701x723', 78 | width: 701, 79 | height: 723, 80 | }, 81 | /*---------------------------------------------------*/ 82 | { 83 | src: 'https://source.unsplash.com/random/801x1037', 84 | width: 801, 85 | height: 1037, 86 | }, 87 | { 88 | src: 'https://source.unsplash.com/random/551x437', 89 | width: 551, 90 | height: 437, 91 | }, 92 | { 93 | src: 'https://source.unsplash.com/random/701x873', 94 | width: 701, 95 | height: 873, 96 | }, 97 | /*---------------------------------------------------*/ 98 | { 99 | src: 'https://source.unsplash.com/random/801x897', 100 | width: 801, 101 | height: 897, 102 | }, 103 | { 104 | src: 'https://source.unsplash.com/random/551x550', 105 | width: 551, 106 | height: 550, 107 | }, 108 | { 109 | src: 'https://source.unsplash.com/random/601x731', 110 | width: 601, 111 | height: 731, 112 | }, 113 | /*---------------------------------------------------*/ 114 | { 115 | src: 'https://source.unsplash.com/random/801x683', 116 | width: 801, 117 | height: 683, 118 | }, 119 | { 120 | src: 'https://source.unsplash.com/random/551x465', 121 | width: 551, 122 | height: 465, 123 | }, 124 | { 125 | src: 'https://source.unsplash.com/random/601x984', 126 | width: 601, 127 | height: 984, 128 | }, 129 | ]; 130 | -------------------------------------------------------------------------------- /src/components/Image/Image.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import classnames from 'classnames'; 5 | 6 | import LoadingSpinner from '../LoadingSpinner'; 7 | 8 | import { 9 | imagePropTypes, 10 | imageDefaultProps, 11 | } from '../../common'; 12 | import { forbidExtraProps } from '../../common/prop-types'; 13 | 14 | const propTypes = forbidExtraProps({ 15 | ...imagePropTypes, 16 | alt: PropTypes.string.isRequired, 17 | src: PropTypes.string.isRequired, 18 | style: PropTypes.object, 19 | className: PropTypes.oneOfType([ 20 | PropTypes.string, 21 | PropTypes.array, 22 | ]), 23 | }); 24 | 25 | const defaultProps = { 26 | ...imageDefaultProps, 27 | style: null, 28 | className: null, 29 | alt: '', 30 | }; 31 | 32 | const defaultState = { 33 | loading: true, 34 | withError: false, 35 | }; 36 | 37 | class Image extends Component { 38 | constructor(props) { 39 | super(props); 40 | const { src } = props; 41 | this.state = { 42 | currentSrc: src, 43 | ...defaultState, 44 | }; 45 | this.onLoad = this.onLoad.bind(this); 46 | this.onError = this.onError.bind(this); 47 | } 48 | 49 | static getDerivedStateFromProps(nextProps, prevState) { 50 | const { src } = nextProps; 51 | const { currentSrc } = prevState; 52 | 53 | if (src !== currentSrc) { 54 | return { 55 | currentSrc: src, 56 | ...defaultState, 57 | }; 58 | } 59 | 60 | return null; 61 | } 62 | 63 | onLoad() { 64 | const { onLoad } = this.props; 65 | 66 | onLoad(); 67 | 68 | this.setState({ 69 | loading: false, 70 | withError: false, 71 | }); 72 | } 73 | 74 | onError() { 75 | const { onError } = this.props; 76 | 77 | onError(); 78 | 79 | this.setState({ 80 | loading: false, 81 | withError: true, 82 | }); 83 | } 84 | 85 | renderImage() { 86 | const { 87 | alt, 88 | src, 89 | style, 90 | className, 91 | } = this.props; 92 | 93 | const { 94 | loading, 95 | withError, 96 | } = this.state; 97 | 98 | const classNames = [ 99 | className, 100 | 'media-image', 101 | ]; 102 | 103 | const components = []; 104 | 105 | // the loading spinner 106 | // TODO: make this 'LoadingSpinner' component customizable 107 | if (loading) { 108 | components.push(
146 | {picture}
147 |
148 | );
149 | }
150 | }
151 |
152 | Image.propTypes = propTypes;
153 | Image.defaultProps = defaultProps;
154 |
155 | export default Image;
156 |
--------------------------------------------------------------------------------
/example/src/photos.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | photo: "https://source.unsplash.com/aZjw7xI3QAA/1144x763",
4 | caption: "Viñales, Pinar del Río, Cuba",
5 | subcaption: "Photo by Simon Matzinger on Unsplash",
6 | thumbnail: "https://source.unsplash.com/aZjw7xI3QAA/100x67",
7 | },
8 | {
9 | photo: "https://source.unsplash.com/c77MgFOt7e0/1144x763",
10 | caption: "La Habana, Cuba",
11 | subcaption: "Photo by Gerardo Sanchez on Unsplash",
12 | thumbnail: "https://source.unsplash.com/c77MgFOt7e0/100x67",
13 | },
14 | {
15 | photo: "https://source.unsplash.com/QdBHnkBdu4g/1144x763",
16 | caption: "Woman smoking a tobacco",
17 | subcaption: "Photo by Hannah Cauhepe on Unsplash",
18 | thumbnail: "https://source.unsplash.com/QdBHnkBdu4g/100x67",
19 | },
20 | {
21 | photo: "https://source.unsplash.com/YIHRJrdgJqw/1144x763",
22 | caption: "Malecon, La Habana, Cuba",
23 | subcaption: "Photo by Emanuel Haas on Unsplash",
24 | thumbnail: "https://source.unsplash.com/YIHRJrdgJqw/100x67",
25 | },
26 | {
27 | photo: "https://source.unsplash.com/tC_SbXEhS5Y/1144x763",
28 | caption: "Yellow car parked near painted concrete houses",
29 | subcaption: "Photo by James Garman on Unsplash",
30 | thumbnail: "https://source.unsplash.com/tC_SbXEhS5Y/100x67",
31 | },
32 | {
33 | photo: "https://source.unsplash.com/h9Iq22JJlGk/1144x763",
34 | caption: "Cuban brown coffee beans beside white ceramic mug",
35 | subcaption: "Photo by Janko Ferlič on Unsplash",
36 | thumbnail: "https://source.unsplash.com/h9Iq22JJlGk/100x67",
37 | },
38 | {
39 | photo: "https://source.unsplash.com/6NT7jy6OU9I/1144x763",
40 | caption: "Orange car on asphalt road",
41 | subcaption: "Photo by Stéphan Valentin on Unsplash",
42 | thumbnail: "https://source.unsplash.com/6NT7jy6OU9I/100x67",
43 | },
44 | {
45 | photo: "https://source.unsplash.com/-vWmir7fGRM/1144x763",
46 | caption: "Three assorted-colored vintage car on road in Havana",
47 | subcaption: "Photo by Persnickety Prints on Unsplash",
48 | thumbnail: "https://source.unsplash.com/-vWmir7fGRM/100x67",
49 | },
50 | {
51 | photo: "https://source.unsplash.com/PubtV8UJxB8/1144x763",
52 | caption: "Man walking on walkway while holding his bicycle",
53 | subcaption: "Photo by Melanie Dretvic on Unsplash",
54 | thumbnail: "https://source.unsplash.com/PubtV8UJxB8/100x67",
55 | },
56 | {
57 | photo: "https://source.unsplash.com/fwtXC2sP7Tg/1144x763",
58 | caption: "Blue \"Lada\" parked beside pink and green house",
59 | subcaption: "Photo by Arno Smit on Unsplash",
60 | thumbnail: "https://source.unsplash.com/fwtXC2sP7Tg/100x67",
61 | },
62 | {
63 | photo: "https://source.unsplash.com/8AJN9q9Rxqw/1144x763",
64 | caption: "Girl with a parrot",
65 | subcaption: "Photo by Ricardo IV Tamayo on Unsplash",
66 | thumbnail: "https://source.unsplash.com/8AJN9q9Rxqw/100x67",
67 | },
68 | {
69 | photo: "https://source.unsplash.com/Q6LO0SCx3n0/1144x763",
70 | caption: "Classic yellow car",
71 | subcaption: "Photo by Flo P on Unsplash",
72 | thumbnail: "https://source.unsplash.com/Q6LO0SCx3n0/100x67",
73 | },
74 | {
75 | photo: "https://source.unsplash.com/kfxPVP_7P7U/1144x763",
76 | caption: "Cuban boy pointing his finger",
77 | subcaption: "Photo by Craig Philbrick on Unsplash",
78 | thumbnail: "https://source.unsplash.com/kfxPVP_7P7U/100x67",
79 | },
80 | {
81 | photo: "https://source.unsplash.com/kI00pEcN4bg/1144x763",
82 | caption: "Man on a horse in Viñales, Cuba",
83 | subcaption: "Photo by Flo P on Unsplash",
84 | thumbnail: "https://source.unsplash.com/kI00pEcN4bg/100x67",
85 | }
86 | ];
87 |
--------------------------------------------------------------------------------
/tests/test-photos.js:
--------------------------------------------------------------------------------
1 | export default [
2 | {
3 | photo: 'https://source.unsplash.com/aZjw7xI3QAA/1144x763',
4 | caption: 'Viñales, Pinar del Río, Cuba',
5 | subcaption: 'Photo by Simon Matzinger on Unsplash',
6 | thumbnail: 'https://source.unsplash.com/aZjw7xI3QAA/100x67',
7 | },
8 | {
9 | photo: 'https://source.unsplash.com/c77MgFOt7e0/1144x763',
10 | caption: 'La Habana, Cuba',
11 | subcaption: 'Photo by Gerardo Sanchez on Unsplash',
12 | thumbnail: 'https://source.unsplash.com/c77MgFOt7e0/100x67',
13 | },
14 | {
15 | photo: 'https://source.unsplash.com/QdBHnkBdu4g/1144x763',
16 | caption: 'Woman smoking a tobacco',
17 | subcaption: 'Photo by Hannah Cauhepe on Unsplash',
18 | thumbnail: 'https://source.unsplash.com/QdBHnkBdu4g/100x67',
19 | },
20 | {
21 | photo: 'https://source.unsplash.com/YIHRJrdgJqw/1144x763',
22 | caption: 'Malecon, La Habana, Cuba',
23 | subcaption: 'Photo by Emanuel Haas on Unsplash',
24 | thumbnail: 'https://source.unsplash.com/YIHRJrdgJqw/100x67',
25 | },
26 | {
27 | photo: 'https://source.unsplash.com/tC_SbXEhS5Y/1144x763',
28 | caption: 'Yellow car parked near painted concrete houses',
29 | subcaption: 'Photo by James Garman on Unsplash',
30 | thumbnail: 'https://source.unsplash.com/tC_SbXEhS5Y/100x67',
31 | },
32 | {
33 | photo: 'https://source.unsplash.com/h9Iq22JJlGk/1144x763',
34 | caption: 'Cuban brown coffee beans beside white ceramic mug',
35 | subcaption: 'Photo by Janko Ferlič on Unsplash',
36 | thumbnail: 'https://source.unsplash.com/h9Iq22JJlGk/100x67',
37 | },
38 | {
39 | photo: 'https://source.unsplash.com/6NT7jy6OU9I/1144x763',
40 | caption: 'Orange car on asphalt road',
41 | subcaption: 'Photo by Stéphan Valentin on Unsplash',
42 | thumbnail: 'https://source.unsplash.com/6NT7jy6OU9I/100x67',
43 | },
44 | {
45 | photo: 'https://source.unsplash.com/-vWmir7fGRM/1144x763',
46 | caption: 'Three assorted-colored vintage car on road in Havana',
47 | subcaption: 'Photo by Persnickety Prints on Unsplash',
48 | thumbnail: 'https://source.unsplash.com/-vWmir7fGRM/100x67',
49 | },
50 | {
51 | photo: 'https://source.unsplash.com/PubtV8UJxB8/1144x763',
52 | caption: 'Man walking on walkway while holding his bicycle',
53 | subcaption: 'Photo by Melanie Dretvic on Unsplash',
54 | thumbnail: 'https://source.unsplash.com/PubtV8UJxB8/100x67',
55 | },
56 | {
57 | photo: 'https://source.unsplash.com/fwtXC2sP7Tg/1144x763',
58 | caption: 'Blue \'Lada\' parked beside pink and green house',
59 | subcaption: 'Photo by Arno Smit on Unsplash',
60 | thumbnail: 'https://source.unsplash.com/fwtXC2sP7Tg/100x67',
61 | },
62 | {
63 | photo: 'https://source.unsplash.com/8AJN9q9Rxqw/1144x763',
64 | caption: 'Girl with a parrot',
65 | subcaption: 'Photo by Ricardo IV Tamayo on Unsplash',
66 | thumbnail: 'https://source.unsplash.com/8AJN9q9Rxqw/100x67',
67 | },
68 | {
69 | photo: 'https://source.unsplash.com/Q6LO0SCx3n0/1144x763',
70 | caption: 'Classic yellow car',
71 | subcaption: 'Photo by Flo P on Unsplash',
72 | thumbnail: 'https://source.unsplash.com/Q6LO0SCx3n0/100x67',
73 | },
74 | {
75 | photo: 'https://source.unsplash.com/kfxPVP_7P7U/1144x763',
76 | caption: 'Cuban boy pointing his finger',
77 | subcaption: 'Photo by Craig Philbrick on Unsplash',
78 | thumbnail: 'https://source.unsplash.com/kfxPVP_7P7U/100x67',
79 | },
80 | {
81 | photo: 'https://source.unsplash.com/kI00pEcN4bg/1144x763',
82 | caption: 'Man on a horse in Viñales, Cuba',
83 | subcaption: 'Photo by Flo P on Unsplash',
84 | thumbnail: 'https://source.unsplash.com/kI00pEcN4bg/100x67',
85 | },
86 | ];
87 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue,
4 | email, or any other method with the owners of this repository before making a change.
5 |
6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
7 |
8 | ## Pull Request Process
9 |
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a
11 | build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment
13 | variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
17 | do not have permission to do that, you may request the second reviewer to merge it for you.
18 |
19 | ## Code of Conduct
20 |
21 | ### Our Pledge
22 |
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 |
30 | ### Our Standards
31 |
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 |
35 | * Using welcoming and inclusive language
36 | * Being respectful of differing viewpoints and experiences
37 | * Gracefully accepting constructive criticism
38 | * Focusing on what is best for the community
39 | * Showing empathy towards other community members
40 |
41 | Examples of unacceptable behavior by participants include:
42 |
43 | * The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | * Trolling, insulting/derogatory comments, and personal or political attacks
46 | * Public or private harassment
47 | * Publishing others' private information, such as a physical or electronic
48 | address, without explicit permission
49 | * Other conduct which could reasonably be considered inappropriate in a
50 | professional setting
51 |
52 | ### Our Responsibilities
53 |
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 |
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 |
64 | ### Scope
65 |
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 |
73 | ### Enforcement
74 |
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at pepalauisaac@gmail.com. All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 |
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 |
86 | ### Attribution
87 |
88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
89 | available at [http://contributor-covenant.org/version/1/4][version]
90 |
91 | [homepage]: http://contributor-covenant.org
92 | [version]: http://contributor-covenant.org/version/1/4/
93 |
--------------------------------------------------------------------------------
/example/src/assets/common/_variables.scss:
--------------------------------------------------------------------------------
1 | /** Colors */
2 | $white: #fff;
3 | $primary: #37a866;
4 | $dark: #111;
5 |
6 | /** Common */
7 | $body-color: $dark;
8 |
9 | /** Typography */
10 | $font-family-sans-serif: "Inter", sans-serif;
11 | $font-family-monospace: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
12 |
13 | $font-size-base: 1rem;
14 | $line-height-base: 1.5;
15 |
16 | $font-weight-normal: 400;
17 | $font-weight-bold: 700;
18 |
19 | $font-size-sm: $font-size-base - 0.1;
20 |
21 | $text-color: $body-color;
22 | $text-font-size: $font-size-base;
23 | $text-line-height: $line-height-base;
24 | $text-link-padding: 0 0.12rem;
25 | $text-link-background: #F7FAFC;
26 | $text-link-background-hover: #C6F6D5;
27 | $text-spacing: 0 0 1rem;
28 |
29 | /** Headings */
30 | $heading-color: $body-color;
31 | $heading-spacing: 0 auto 0.8rem;
32 | $heading-line-height: 1.5;
33 | $heading-font-weight: 700;
34 |
35 | $h1-font-size: 42px;
36 | $h2-font-size: 36px;
37 | $h3-font-size: 28px;
38 | $h4-font-size: 25px;
39 | $h5-font-size: 20px;
40 | $h6-font-size: 15px;
41 |
42 | /** Content */
43 | $container-max-width: 800px;
44 | $container-gutter: 15px;
45 |
46 | /** Links */
47 | $link-color: $primary;
48 | $link-hover-color: $body-color;
49 |
50 | /** Code */
51 | $code-font-family: $font-family-monospace;
52 | $code-background-color: transparent;
53 | $code-text-align: left;
54 | $code-line-height: $line-height-base;
55 | $code-tab-size: 2;
56 | $code-font-weight: $font-weight-normal;
57 |
58 | /** Buttons */
59 | $btn-border-width: 1px;
60 | $btn-border-style: solid;
61 | $btn-border-color: transparent;
62 | $btn-border: $btn-border-width $btn-border-style $btn-border-color;
63 | $btn-border-radius: 2px;
64 | $btn-box-shadow: none;
65 |
66 | $btn-primary-color: $white;
67 | $btn-primary-background: #48bb78;
68 | $btn-primary-border: #48bb78;
69 | $btn-primary-hover-color: $white;
70 | $btn-primary-hover-background: #2f855a;
71 | $btn-primary-hover-border: #2f855a;
72 | $btn-primary-outline-color: #48BB78;
73 | $btn-primary-outline-background: transparent;
74 | $btn-primary-outline-border: #48BB78;
75 | $btn-primary-outline-hover-color: $white;
76 | $btn-primary-outline-hover-background: #48bb78;
77 | $btn-primary-outline-hover-border: #48bb78;
78 |
79 | $btn-secondary-color: #1A202C;
80 | $btn-secondary-background: #EDF2F7;
81 | $btn-secondary-border: #EDF2F7;
82 | $btn-secondary-hover-color: $white;
83 | $btn-secondary-hover-background: #1A202C;
84 | $btn-secondary-hover-border: #1A202C;
85 | $btn-secondary-outline-color: #1A202C;
86 | $btn-secondary-outline-background: transparent;
87 | $btn-secondary-outline-border: #E2E8F0;
88 | $btn-secondary-outline-hover-color: $white;
89 | $btn-secondary-outline-hover-background: #1A202C;
90 | $btn-secondary-outline-hover-border: #1A202C;
91 |
92 | $btn-line-height: 1.6;
93 | $btn-height: 44px;
94 | $btn-padding-y: 0;
95 | $btn-padding-x: 20px;
96 | $btn-font-size: 15px;
97 | $btn-border-width: 2px;
98 | $btn-border-radius: 3px;
99 | $btn-font-weight: $font-weight-bold;
100 |
101 | $btn-small-line-height: 1.6;
102 | $btn-small-height: 36px;
103 | $btn-small-padding-y: 0;
104 | $btn-small-padding-x: 14px;
105 | $btn-small-font-size: 12px;
106 | $btn-small-border-width: 1px;
107 | $btn-small-border-radius: 4px;
108 | $btn-small-font-weight: $font-weight-normal;
109 |
110 | $btn-large-line-height: 1.6;
111 | $btn-large-height: 54px;
112 | $btn-large-padding-y: 0;
113 | $btn-large-padding-x: 24px;
114 | $btn-large-font-size: 17px;
115 | $btn-large-border-width: 2px;
116 | $btn-large-border-radius: 4px;
117 | $btn-large-font-weight: $font-weight-bold;
118 |
119 | /** Header */
120 | $header-background-color: $white;
121 | $header-padding-x: 0;
122 | $header-padding-y: 0.25rem;
123 | $header-navigation-spacing: 1em;
124 | $header-container-max-width: $container-max-width;
125 | $header-border: 4px solid #48BB78;
126 | $header-border-bottom: 1px solid #EDF2F7;
127 |
128 | /** Footer */
129 | $footer-background: #1A202C;
130 | $footer-font-size: $font-size-sm;
131 | $footer-color: #A0AEC0;
132 | $footer-link-color: $white;
133 | $footer-padding: 2em 1em;
134 |
135 | /** Tables */
136 | $table-color: $body-color;
137 | $table-border: none;
138 | $table-odd-background: transparent;
139 | $table-spacing: 1rem;
140 | $table-background-color: $white;
141 | $table-font-size: $font-size-sm;
142 | $table-line-height: $line-height-base;
143 | $table-cell-padding: 0.85rem 2rem 0.85rem 0;
144 | $table-box-shadow: none;
145 | $table-cell-border: 1px solid #E2E8F0;
146 |
147 | /** Prims */
148 | $prism-color: #F7FAFC;
149 | $prism-background: #2D3748;
150 | $prism-font-family: $font-family-monospace;
151 | $prism-line-height: 22px;
152 | $prism-text-shadow: none;
153 | $prism-border-radius: 0.5rem;
154 | $prism-tab-size: 2;
155 | $prism-block-border-radius: $prism-border-radius;
156 | $prism-block-padding: 0 0 1em;
157 | $prism-block-margin: 0.5rem 0 1.5rem;
158 | $prism-code-border-radius: $prism-border-radius;
159 | $prism-code-padding: 0.1em;
160 |
161 | /** Photo Grid */
162 | $photo-grid-gutter: 6px;
163 | $photo-grid-col-max-size: 12%;
164 | $photo-grid-picture-spacing: ($photo-grid-gutter / 2) 0;
165 | $photo-grid-picture-background: #EDF2F7;
166 | $photo-grid-picture-background-loaded: #1A202C;
167 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-bnb-gallery",
3 | "version": "1.4.4",
4 | "description": "Simple photo gallery based on React and Airbnb image gallery",
5 | "author": "Pedro Enrique Palau
139 |
190 |
140 |
189 |
141 |
163 | {this.hasMoreThanOnePhoto && (
164 |
142 | {currentPhoto.caption && (
143 |
153 | {this.hasMoreThanOnePhoto && (
154 | 144 | {currentPhoto.caption} 145 |
146 | )} 147 | {currentPhoto.subcaption && ( 148 |149 | {currentPhoto.subcaption} 150 |
151 | )} 152 |
155 |
161 | )}
162 |
169 |
187 | )}
188 |
175 |
186 | -
179 | {photos.map((photo, index) => (
180 |
- 181 | {this.renderThumbnail(photo, index, this.onThumbnailPress)} 182 | 183 | ))} 184 |
178 |
182 |
217 |
183 |
216 |
184 |
215 |
185 |
214 |
186 |
213 |
187 |
192 |
193 |
212 |
194 |
195 |
196 |