@randy.tarampi/jsx
Version:
Some common JSX components for www.randytarampi.ca
305 lines (279 loc) • 11.6 kB
JavaScript
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import { Gallery, Photo, Post, POST_ENTITIES } from "@randy.tarampi/js";
import PropTypes from "prop-types";
import React, { PureComponent } from "react";
import { Marker } from "react-google-maps";
import InfoBox from "react-google-maps/lib/components/addons/InfoBox";
import { Col, Row } from "react-materialize";
import ProgressiveImage from "react-progressive-image";
import { Provider, ReactReduxContext } from "react-redux";
import { getSvgPathForPost, scalePixelValueForWindowDevicePixelRatio } from "../util";
import { PostBodyAsArrayComponent, PostBodyAsStringComponent, PostDateCreatedComponent, PostDatePublishedComponent, PostTagsComponent, PostTitleComponent } from "./post";
export var PostMarkerInfoBoxContentComponent = (_ref) => {
var {
post,
title,
style,
isLoading
} = _ref;
var rowClassName = ["marker-info-box-post"];
if (isLoading) {
rowClassName.push("marker-info-box-post--loading");
}
return /*#__PURE__*/React.createElement(Row, {
className: rowClassName.join(" "),
style: style
}, /*#__PURE__*/React.createElement(Col, {
className: "marker-info-box-post-metadata",
s: 12
}, /*#__PURE__*/React.createElement(PostTitleComponent, {
post: post,
title: title
})), /*#__PURE__*/React.createElement(Col, {
className: "marker-info-box-post-metadata hide-on-med-and-down",
s: 6
}, /*#__PURE__*/React.createElement(PostDatePublishedComponent, {
post: post
}), /*#__PURE__*/React.createElement(PostDateCreatedComponent, {
post: post,
label: "Taken:"
})), /*#__PURE__*/React.createElement(Col, {
className: "marker-info-box-post-metadata hide-on-med-and-down",
s: 6
}, /*#__PURE__*/React.createElement(PostTagsComponent, {
tagLinkBase: "/map".concat("/tags"),
post: post
})), [Photo, Gallery].map(postConstructor => postConstructor.type).includes(post.type) ? /*#__PURE__*/React.createElement(Col, {
className: "marker-info-box-post-content hide-on-med-and-down",
s: 12
}, /*#__PURE__*/React.createElement(PostBodyAsStringComponent, {
post: post
}), /*#__PURE__*/React.createElement(PostBodyAsArrayComponent, {
post: post
})) : /*#__PURE__*/React.createElement(Col, {
className: "marker-info-box-post-content",
s: 12
}, /*#__PURE__*/React.createElement(PostBodyAsStringComponent, {
post: post
}), /*#__PURE__*/React.createElement(PostBodyAsArrayComponent, {
post: post
})));
};
PostMarkerInfoBoxContentComponent.propTypes = {
post: PropTypes.oneOfType(POST_ENTITIES.map(PropTypes.instanceOf)).isRequired,
title: PropTypes.string.isRequired,
style: PropTypes.object,
isLoading: PropTypes.bool
};
export class PostMarkerInfoBoxComponent extends PureComponent {
get postInfoBoxElementId() {
return "marker-info-box--".concat(this.props.post.uid);
}
get postInfoBoxElement() {
return document.getElementsByClassName(this.postInfoBoxElementId)[0];
}
get width() {
var postElement = this.postInfoBoxElement;
return postElement ? postElement.clientWidth : Math.round(window.innerWidth * 3 / 4);
}
get height() {
var postElement = this.postInfoBoxElement;
return postElement ? postElement.clientHeight : Math.round(window.innerHeight * 3 / 4);
}
get scaledHeight() {
return this.height;
}
get title() {
return this.props.post.title || "Untitled";
}
render() {
var {
onVisibilityToggle,
isVisible,
post,
store
} = this.props;
return /*#__PURE__*/React.createElement(InfoBox, {
onCloseClick: onVisibilityToggle,
options: {
infoBoxClearance: 20,
enableEventPropagation: true,
boxClass: "marker-info-box marker-info-box__".concat(post.type, " ").concat(this.postInfoBoxElementId),
pixelOffset: {
width: -1 * this.width / 2,
height: -1 * this.height / 2
},
boxStyle: {
backgroundColor: "white"
}
},
defaultVisible: false,
visible: isVisible
}, /*#__PURE__*/React.createElement(Provider, {
store: store
}, /*#__PURE__*/React.createElement(PostMarkerInfoBoxContentComponent, {
post: post,
title: this.title,
style: {
maxWidth: Math.round(window.innerWidth * 3 / 4)
}
})));
}
}
PostMarkerInfoBoxComponent.propTypes = {
post: PropTypes.oneOfType(POST_ENTITIES.map(PropTypes.instanceOf)).isRequired,
isVisible: PropTypes.bool.isRequired,
onVisibilityToggle: PropTypes.func.isRequired,
store: PropTypes.object.isRequired
};
export class PhotoMarkerInfoBoxComponent extends PostMarkerInfoBoxComponent {
get selected() {
return this.props.post.getSizedPhotoForDisplay(this.targetWidth);
}
get scaledHeight() {
return Math.min(Math.round(this.width * this.selected.height / this.selected.width), Math.round(window.innerHeight * 3 / 4));
}
get scaledWidth() {
return Math.round(this.scaledHeight * this.selected.width / this.selected.height);
}
get targetWidth() {
return Math.round(scalePixelValueForWindowDevicePixelRatio(this.width));
}
render() {
var {
onVisibilityToggle,
isVisible,
post,
store
} = this.props;
var placeholder = post.getSizedPhotoForLoading(this.targetWidth);
var selected = post.getSizedPhotoForDisplay(this.targetWidth);
return /*#__PURE__*/React.createElement(ProgressiveImage, {
src: selected.url,
placeholder: placeholder.url
}, (source, isLoading) => /*#__PURE__*/React.createElement(InfoBox, {
onCloseClick: onVisibilityToggle,
options: {
infoBoxClearance: 20,
enableEventPropagation: true,
boxClass: ["marker-info-box", "marker-info-box__".concat(post.type), this.postInfoBoxElementId].join(" "),
pixelOffset: {
width: -1 * this.scaledWidth / 2,
height: -1 * this.scaledHeight / 2
},
boxStyle: {
backgroundImage: isLoading ? "linear-gradient(to top right,rgba(0,0,0,0.67),rgba(0,0,0,0.33)),url(".concat(source, ")") : "url(".concat(source, ")"),
backgroundColor: isLoading ? "white" : null
},
maxWidth: this.scaledWidth
},
defaultVisible: false,
visible: isVisible
}, /*#__PURE__*/React.createElement(Provider, {
store: store
}, /*#__PURE__*/React.createElement(PostMarkerInfoBoxContentComponent, {
isLoading: isLoading,
post: post,
title: this.title,
style: {
height: this.scaledHeight,
width: this.scaledWidth
}
}))));
}
}
PhotoMarkerInfoBoxComponent.propTypes = {
post: PropTypes.oneOfType(POST_ENTITIES.map(PropTypes.instanceOf)).isRequired,
isVisible: PropTypes.bool.isRequired,
onVisibilityToggle: PropTypes.func.isRequired
};
var renderPostMarkerInfoBoxComponentForPost = (_ref2) => {
var {
post,
isVisible,
onVisibilityToggle: _onVisibilityToggle
} = _ref2,
props = _objectWithoutProperties(_ref2, ["post", "isVisible", "onVisibilityToggle"]);
if (!isVisible) {
return null;
}
switch (post.type) {
case Gallery.type:
case Photo.type:
return /*#__PURE__*/React.createElement(PhotoMarkerInfoBoxComponent, _extends({
post: post,
visible: isVisible,
onVisibilityToggle: () => _onVisibilityToggle(!isVisible)
}, props));
case Post.type:
default:
return /*#__PURE__*/React.createElement(PostMarkerInfoBoxComponent, _extends({
post: post,
visible: isVisible,
onVisibilityToggle: () => _onVisibilityToggle(!isVisible)
}, props));
}
};
renderPostMarkerInfoBoxComponentForPost.propTypes = {
post: PropTypes.oneOfType(POST_ENTITIES.map(PropTypes.instanceOf)).isRequired,
isVisible: PropTypes.bool.isRequired,
onVisibilityToggle: PropTypes.func.isRequired
};
export var buildPostMarkerId = post => "marker--".concat(post.uid);
export var PostMarkerComponent = (_ref3) => {
var {
post,
isVisible,
onVisibilityToggle,
setMapCenter
} = _ref3,
props = _objectWithoutProperties(_ref3, ["post", "isVisible", "onVisibilityToggle", "setMapCenter"]);
return /*#__PURE__*/React.createElement(ReactReduxContext.Consumer, null, (_ref4) => {
var {
store
} = _ref4;
return /*#__PURE__*/React.createElement(Marker, {
className: "marker marker__".concat(post.type, " ").concat(buildPostMarkerId(post)),
id: buildPostMarkerId(post),
icon: {
path: getSvgPathForPost(post),
fillColor: "#ec7500",
fillOpacity: 1,
scale: 0.05,
strokeWeight: 1
},
title: post.title,
defaultPosition: {
lat: post.lat,
lng: post.long
},
onClick: () => {
setMapCenter({
lat: post.lat,
lng: post.long
});
onVisibilityToggle(!isVisible);
}
}, renderPostMarkerInfoBoxComponentForPost(_objectSpread({
post,
isVisible,
onVisibilityToggle,
store
}, props)));
});
};
PostMarkerComponent.defaultProps = {
isVisible: false
};
PostMarkerComponent.propTypes = {
post: PropTypes.oneOfType(POST_ENTITIES.map(PropTypes.instanceOf)).isRequired,
isVisible: PropTypes.bool.isRequired,
onVisibilityToggle: PropTypes.func.isRequired,
setMapCenter: PropTypes.func.isRequired
};
export default PostMarkerComponent;