codogo-react-widgets/lib/components/cloudinaryImage.js

Provides a unified way to access the styling of commonly used widgets across different apps

import _toConsumableArray from "babel-runtime/helpers/toConsumableArray";
import _taggedTemplateLiteral from "babel-runtime/helpers/taggedTemplateLiteral";

var _templateObject = _taggedTemplateLiteral(["\n\tbackground-color: ", ";\n\t", ";\n\t"], ["\n\tbackground-color: ", ";\n\t", ";\n\t"]);

import React from "react";
import styled from "styled-components";
import cloudinary from "cloudinary-core";
import * as R from "ramda";
import { compose, withHandlers } from "recompose";

//------------------------------

var PRESET_NAME = "UnAuthed_LimitSize";
var CLOUDINARY_URL = "https://api.cloudinary.com/v1_1/codogo/upload";
var DEFAULT_IMAGE = "Codogo-Logo-C_rgkd8u";
var cl = cloudinary.Cloudinary.new({ cloud_name: "codogo" });

var Preloader = styled.div(_templateObject, function (_ref) {
	var theme = _ref.theme;
	return theme.colors.lightgray;
}, function (props) {
	if (props.width && props.height) {
		return "\n\t\t\t\twidth: " + props.width + "px;\n\t\t\t\theight: " + props.height + "px;\n\t\t\t";
	} else if (props.aspectRatio) {
		return "\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding-top: " + 100 / props.aspectRatio + "%;\n\t\t\t";
	} else {
		return "\n\t\t\t\twidth: 100%;\n\t\t\t\tpadding-top: 75%;\n\t\t\t";
	}
});

var enhance = compose(withHandlers({
	renderPreloader: function renderPreloader(props) {
		return function () {
			return React.createElement(Preloader, props);
		};
	}
}));

var CloudinaryImage = enhance(function (_ref2) {
	var cloudinaryID = _ref2.cloudinaryID,
	    cloudinaryId = _ref2.cloudinaryId,
	    height = _ref2.height,
	    transformation = _ref2.transformation,
	    transformationPreScale = _ref2.transformationPreScale,
	    transformations = _ref2.transformations,
	    transformationsPreScale = _ref2.transformationsPreScale,
	    url = _ref2.url,
	    uri = _ref2.uri,
	    width = _ref2.width;

	var allTransformations = [].concat(_toConsumableArray(transformationsPreScale || []), [transformationPreScale, {
		crop: "fill",
		dpr: window.devicePixelRatio,
		fetch_format: "auto",
		height: height,
		quality: "auto",
		width: width
	}], _toConsumableArray(transformations || []), [transformation]).filter(R.identity);

	var src = cl.url(uri || url || cloudinaryID || cloudinaryId || DEFAULT_IMAGE, {
		secure: true,
		type: url || uri ? "fetch" : undefined,
		transformation: allTransformations
	});

	return React.createElement("img", {
		alt: "TODO: introduce a new loading component",
		src: src,
		style: {
			width: width || "100%",
			height: height || "auto"
		},
		className: true
	});
});

CloudinaryImage.commonTransforms = {
	smartSquare: {
		aspect_ratio: 1,
		gravity: "auto",
		crop: "fill"
	}
};

CloudinaryImage.getUrl = function (_ref3) {
	var uri = _ref3.uri,
	    url = _ref3.url,
	    cloudinaryId = _ref3.cloudinaryId,
	    cloudinaryID = _ref3.cloudinaryID,
	    id = _ref3.id;
	return cl.url(uri || url || cloudinaryId || cloudinaryID || id || DEFAULT_IMAGE, {
		secure: true,
		type: url || uri ? "fetch" : undefined
	});
};

export default CloudinaryImage;