@randy.tarampi/jsx/esm/lib/components/gallery.js

Some common JSX components for www.randytarampi.ca

import { Gallery as GalleryEntity } from "@randy.tarampi/js";
import SchemaJsonLdComponent from "@randy.tarampi/schema-dot-org-json-ld-components";
import PropTypes from "prop-types";
import React, { Fragment } from "react";
import { Carousel, Col, Row } from "react-materialize";
import ProgressiveImage from "react-progressive-image";
import { WINDOW_LARGE_BREAKPOINT } from "../util";
import { PhotoComponent } from "./photo";
import { PostBodyAsArrayComponent, PostBodyAsStringComponent, PostDateCreatedComponent, PostDatePublishedComponent, PostLocationComponent, PostTagsComponent, PostTitleComponent } from "./post";
export class GalleryComponent extends PhotoComponent {
  get selected() {
    return this.props.post.largestPhoto.getSizedPhotoForDisplay(this.targetWidth);
  }

  get carouselId() {
    return "".concat(this.props.post.uid, "-carousel");
  }

  render() {
    return this.props.containerWidth >= WINDOW_LARGE_BREAKPOINT ? this._renderLarge() : this._renderSmall();
  }

  _renderSmall() {
    var {
      post
    } = this.props;
    var rowClassName = ["post post--gallery"];
    return /*#__PURE__*/React.createElement(Row, {
      className: rowClassName.join(" "),
      id: post.uid
    }, /*#__PURE__*/React.createElement(SchemaJsonLdComponent, {
      markup: post.toSchema()
    }), /*#__PURE__*/React.createElement(Carousel, {
      options: {
        fullWidth: true,
        indicators: true,
        dist: 0
      },
      carouselId: this.carouselId
    }, post.photos.map((photo, index) => {
      var placeholder = photo.getSizedPhotoForLoading(this.targetWidth);
      var selected = photo.getSizedPhotoForDisplay(this.targetWidth);
      var title = "".concat(this.title, " (").concat(index + 1, "/").concat(post.photos.size, ")"); // NOTE-RT: Needs to be a `div` otherwise `react-materialize` can't cling onto these carousel items

      return /*#__PURE__*/React.createElement("div", {
        key: "".concat(post.uid, "-").concat(index)
      }, /*#__PURE__*/React.createElement(ProgressiveImage, {
        src: selected.url,
        placeholder: placeholder.url
      }, (source, isLoading) => {
        var columnClassName = ["post-metadata"];

        if (isLoading) {
          columnClassName.push("post--loading");
        }

        return /*#__PURE__*/React.createElement(Col, {
          className: columnClassName.join(" "),
          s: 12,
          style: {
            backgroundImage: "url(".concat(source, ")"),
            height: this.scaledHeight
          }
        }, index === 0 ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
          className: "post-metadata hide-on-med-and-up"
        }, /*#__PURE__*/React.createElement(PostTitleComponent, {
          post: post,
          title: title
        })), /*#__PURE__*/React.createElement("div", {
          className: "post-metadata hide-on-small-only hide-on-large-only"
        }, /*#__PURE__*/React.createElement(PostTitleComponent, {
          post: post,
          title: title
        }), /*#__PURE__*/React.createElement(PostDatePublishedComponent, {
          post: post
        }), /*#__PURE__*/React.createElement(PostDateCreatedComponent, {
          post: post,
          label: "Taken:"
        }), /*#__PURE__*/React.createElement(PostLocationComponent, {
          post: post
        }), /*#__PURE__*/React.createElement(PostBodyAsStringComponent, {
          post: post
        }), /*#__PURE__*/React.createElement(PostBodyAsArrayComponent, {
          post: post
        }))) : /*#__PURE__*/React.createElement("div", {
          className: "post-metadata"
        }, /*#__PURE__*/React.createElement(PostTitleComponent, {
          post: post,
          title: title
        })));
      }));
    })));
  }

  _renderLarge() {
    var {
      post
    } = this.props;
    var placeholder = post.largestPhoto.getSizedPhotoForLoading(this.targetWidth).url;
    var rowClassName = ["post post--gallery"];
    return /*#__PURE__*/React.createElement(Row, {
      className: rowClassName.join(" "),
      id: post.uid,
      style: {
        backgroundImage: "linear-gradient(to top right,rgba(0,0,0,0.67),rgba(0,0,0,0.33)),url(".concat(placeholder, ")")
      }
    }, /*#__PURE__*/React.createElement(SchemaJsonLdComponent, {
      markup: post.toSchema()
    }), /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Col, {
      className: "post-metadata",
      l: 4
    }, /*#__PURE__*/React.createElement(PostTitleComponent, {
      post: post,
      title: this.title
    }), /*#__PURE__*/React.createElement(PostBodyAsStringComponent, {
      post: post
    }), /*#__PURE__*/React.createElement(PostBodyAsArrayComponent, {
      post: post
    }), /*#__PURE__*/React.createElement(PostDatePublishedComponent, {
      post: post
    }), /*#__PURE__*/React.createElement(PostDateCreatedComponent, {
      post: post,
      label: "Taken:"
    }), /*#__PURE__*/React.createElement(PostLocationComponent, {
      post: post
    }), /*#__PURE__*/React.createElement(PostTagsComponent, {
      post: post
    })), /*#__PURE__*/React.createElement(Col, {
      className: "post-content",
      l: 8
    }, /*#__PURE__*/React.createElement(Carousel, {
      options: {
        fullWidth: true,
        indicators: true,
        dist: 0
      },
      carouselId: this.carouselId
    }, post.photos.map((photo, index) => {
      var placeholder = photo.getSizedPhotoForLoading(this.targetWidth);
      var selected = photo.getSizedPhotoForDisplay(this.targetWidth); // NOTE-RT: Needs to be a `div` otherwise `react-materialize` can't cling onto these carousel items

      return /*#__PURE__*/React.createElement("div", {
        key: "".concat(post.uid, "-").concat(index)
      }, /*#__PURE__*/React.createElement(ProgressiveImage, {
        src: selected.url,
        placeholder: placeholder.url
      }, (source, isLoading) => /*#__PURE__*/React.createElement("img", {
        className: isLoading ? "post--loading" : "",
        src: source,
        style: {
          height: this.scaledHeight
        }
      })));
    })))));
  }

  resizeCarouselHeight() {
    var carouselElement = document.getElementById(this.carouselId); // NOTE-RT: `react-materialize` won't let me pass a `style` prop to `Carousel`, so we need to manually set this ourselves...

    var expectedCarouselElementHeight = "".concat(this.scaledHeight, "px");

    if (carouselElement && carouselElement.style.height !== expectedCarouselElementHeight) {
      carouselElement.style.height = "".concat(this.scaledHeight, "px");
    }
  }

  componentDidMount() {
    this.resizeCarouselHeight();
  }

  componentDidUpdate() {
    this.resizeCarouselHeight();
  }

}
GalleryComponent.propTypes = {
  post: PropTypes.instanceOf(GalleryEntity).isRequired
};
export default GalleryComponent;