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

Some common JSX components for www.randytarampi.ca

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import { Photo as PhotoEntity } 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 { Col, Row } from "react-materialize";
import ProgressiveImage from "react-progressive-image";
import { scalePixelValueForWindowDevicePixelRatio, WINDOW_LARGE_BREAKPOINT, WINDOW_LARGE_PHOTO_SCALE } from "../util";
import { PostBodyAsArrayComponent, PostBodyAsStringComponent, PostComponent, PostDateCreatedComponent, PostDatePublishedComponent, PostLocationComponent, PostTagsComponent, PostTitleComponent } from "./post";
export class PhotoComponent extends PostComponent {
  get selected() {
    return this.props.post.getSizedPhotoForDisplay(this.targetWidth);
  }

  get scaledHeight() {
    return computeScaledHeightForPhotoComponent({
      containerWidth: this.props.containerWidth,
      photoHeight: this.selected.height,
      photoWidth: this.selected.width,
      postHtmlId: this.props.post.uid
    });
  }

  get targetWidth() {
    return computeTargetWidthForPhotoComponent(this.props);
  }

  render() {
    var {
      post,
      isLoading,
      source,
      placeholder
    } = this.props;
    var rowClassName = ["post post--photo"];

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

    var rowStyle = {};

    if (this.props.containerWidth >= WINDOW_LARGE_BREAKPOINT) {
      rowStyle.backgroundImage = "linear-gradient(to top right,rgba(0,0,0,0.67),rgba(0,0,0,0.33)),url(".concat(placeholder, ")");
    }

    return /*#__PURE__*/React.createElement(Row, {
      className: rowClassName.join(" "),
      id: post.uid,
      style: rowStyle
    }, /*#__PURE__*/React.createElement(SchemaJsonLdComponent, {
      markup: post.toSchema()
    }), this.props.containerWidth >= WINDOW_LARGE_BREAKPOINT ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Col, {
      className: "post-metadata hide-on-med-and-down",
      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 hide-on-med-and-down",
      l: 8,
      style: {
        backgroundImage: "url(".concat(source, ")"),
        height: this.scaledHeight
      }
    })) : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Col, {
      className: "post-metadata hide-on-med-and-up",
      s: 12,
      style: {
        backgroundImage: "url(".concat(source, ")"),
        height: this.scaledHeight
      }
    }, /*#__PURE__*/React.createElement(PostTitleComponent, {
      post: post,
      title: this.title
    })), /*#__PURE__*/React.createElement(Col, {
      className: "post-metadata hide-on-small-only",
      m: 12,
      style: {
        backgroundImage: "url(".concat(source, ")"),
        height: this.scaledHeight
      }
    }, /*#__PURE__*/React.createElement(PostTitleComponent, {
      post: post,
      title: this.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
    }))));
  }

}
PhotoComponent.propTypes = {
  post: PropTypes.instanceOf(PhotoEntity).isRequired,
  source: PropTypes.string.isRequired,
  placeholder: PropTypes.string.isRequired,
  isLoading: PropTypes.bool.isRequired
};
export var computeScaledHeightForPhotoComponent = (_ref) => {
  var {
    containerWidth,
    photoHeight,
    photoWidth,
    postHtmlId
  } = _ref;
  var scaledHeight = containerWidth * photoHeight / photoWidth;

  if (containerWidth >= WINDOW_LARGE_BREAKPOINT) {
    var photoElement = document.getElementById(postHtmlId);

    if (photoElement) {
      var metadataColumnElement = photoElement.querySelector(".post-metadata.l4");
      scaledHeight = Math.max(scaledHeight * WINDOW_LARGE_PHOTO_SCALE, photoElement && metadataColumnElement ? metadataColumnElement.clientHeight : 0);
    }
  }

  return Math.round(scaledHeight);
};
export var computeTargetWidthForPhotoComponent = (_ref2) => {
  var {
    containerWidth
  } = _ref2;
  return scalePixelValueForWindowDevicePixelRatio(containerWidth);
};
export var ProgressiveImageWrappedPhotoComponent = props => {
  var targetWidth = computeTargetWidthForPhotoComponent(props);
  var placeholder = props.post.getSizedPhotoForLoading(targetWidth);
  var selected = props.post.getSizedPhotoForDisplay(targetWidth);
  return /*#__PURE__*/React.createElement(ProgressiveImage, {
    src: selected.url,
    placeholder: placeholder.url
  }, (source, isLoading) => /*#__PURE__*/React.createElement(PhotoComponent, _extends({}, props, {
    source: source,
    placeholder: placeholder.url,
    isLoading: isLoading
  })));
};
ProgressiveImageWrappedPhotoComponent.propTypes = {
  containerWidth: PropTypes.number.isRequired,
  post: PropTypes.instanceOf(PhotoEntity).isRequired
};
export default ProgressiveImageWrappedPhotoComponent;