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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _slicedToArray2 = require("babel-runtime/helpers/slicedToArray");

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("babel-runtime/helpers/createClass");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require("babel-runtime/helpers/inherits");

var _inherits3 = _interopRequireDefault(_inherits2);

var _taggedTemplateLiteral2 = require("babel-runtime/helpers/taggedTemplateLiteral");

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _desc, _value, _class;

var _templateObject = (0, _taggedTemplateLiteral3.default)(["\n\tbackground-color: ", ";\n\tbackground-image: url(", ");\n\twidth: ", "px;\n\theight: ", "px;\n"], ["\n\tbackground-color: ", ";\n\tbackground-image: url(", ");\n\twidth: ", "px;\n\theight: ", "px;\n"]),
    _templateObject2 = (0, _taggedTemplateLiteral3.default)(["\n\tmaxWidth: ", "px;\n\tmaxHeight: ", "px;\n\tcursor: ", ";\n\n\t& img {\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n"], ["\n\tmaxWidth: ", "px;\n\tmaxHeight: ", "px;\n\tcursor: ", ";\n\n\t& img {\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n"]);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _styledComponents = require("styled-components");

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _cloudinaryCore = require("cloudinary-core");

var _cloudinaryCore2 = _interopRequireDefault(_cloudinaryCore);

var _reactImageloader = require("react-imageloader");

var _reactImageloader2 = _interopRequireDefault(_reactImageloader);

var _ramda = require("ramda");

var _ramda2 = _interopRequireDefault(_ramda);

var _reactDropzone = require("react-dropzone");

var _reactDropzone2 = _interopRequireDefault(_reactDropzone);

var _superagent = require("superagent");

var _superagent2 = _interopRequireDefault(_superagent);

var _autobindDecorator = require("autobind-decorator");

var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
	var desc = {};
	Object['ke' + 'ys'](descriptor).forEach(function (key) {
		desc[key] = descriptor[key];
	});
	desc.enumerable = !!desc.enumerable;
	desc.configurable = !!desc.configurable;

	if ('value' in desc || desc.initializer) {
		desc.writable = true;
	}

	desc = decorators.slice().reverse().reduce(function (desc, decorator) {
		return decorator(target, property, desc) || desc;
	}, desc);

	if (context && desc.initializer !== void 0) {
		desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
		desc.initializer = undefined;
	}

	if (desc.initializer === void 0) {
		Object['define' + 'Property'](target, property, desc);
		desc = null;
	}

	return desc;
}

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

var PRESET_NAME = "UnAuthed_LimitSize";
var CLOUDINARY_URL = "https://api.cloudinary.com/v1_1/codogo/upload";

var cl = _cloudinaryCore2.default.Cloudinary.new({
	"cloud_name": "codogo"
});

var doggo = "http://i1.kym-cdn.com/entries/icons/original/000/002/203/20533_cooldog.jpg";
var PreloaderStyled = _styledComponents2.default.div(_templateObject, function (_ref) {
	var theme = _ref.theme;
	return theme.colors.white;
}, doggo, function (_ref2) {
	var width = _ref2.width;
	return width;
}, function (_ref3) {
	var height = _ref3.height;
	return height;
});
var Preloader = function Preloader(_ref4) {
	var width = _ref4.width,
	    height = _ref4.height;
	return function () {
		return _react2.default.createElement(PreloaderStyled, {
			width: width,
			height: height
		});
	};
};

var ImageWrapper = _styledComponents2.default.div(_templateObject2, _ramda2.default.prop("width"), _ramda2.default.prop("height"), function (_ref5) {
	var onUpload = _ref5.onUpload,
	    isButton = _ref5.isButton;
	return onUpload || isButton ? "cursor" : "default";
});

var uploadImgToCloudinary = function uploadImgToCloudinary(file) {
	var upload = _superagent2.default.post(CLOUDINARY_URL).field("upload_preset", PRESET_NAME).field("file", file);

	return new Promise(function (good, fail) {
		return upload.end(function (err, response) {
			if (err) {
				fail(err);
			}

			if (response.body.public_id !== "") {
				good(response.body.public_id);
			}
		});
	});
};

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

var CloudinaryImage = (_class = function (_React$Component) {
	(0, _inherits3.default)(CloudinaryImage, _React$Component);

	function CloudinaryImage(props) {
		(0, _classCallCheck3.default)(this, CloudinaryImage);

		var _this = (0, _possibleConstructorReturn3.default)(this, (CloudinaryImage.__proto__ || Object.getPrototypeOf(CloudinaryImage)).call(this, props));

		_this.state = {
			displayUploader: false
		};
		return _this;
	}

	(0, _createClass3.default)(CloudinaryImage, [{
		key: "changeToUploader",
		value: function changeToUploader() {
			this.setState({
				displayUploader: true
			});
		}
	}, {
		key: "onImageDrop",
		value: function onImageDrop(_ref6) {
			var _this2 = this;

			var _ref7 = (0, _slicedToArray3.default)(_ref6, 1),
			    file = _ref7[0];

			uploadImgToCloudinary(file).then(function (cloudinaryID) {
				return _this2.props.onUpload({
					cloudinaryID: cloudinaryID
				});
			}).then(function () {
				return _this2.setState({
					displayUploader: false
				});
			});
		}
	}, {
		key: "render",
		value: function render() {
			var _props = this.props,
			    cloudinaryID = _props.cloudinaryID,
			    height = _props.height,
			    isButton = _props.isButton,
			    onUpload = _props.onUpload,
			    transformation = _props.transformation,
			    transformationPreScale = _props.transformationPreScale,
			    transformations = _props.transformations,
			    transformationsPreScale = _props.transformationsPreScale,
			    url = _props.url,
			    width = _props.width;


			var allTransformations = [].concat((0, _toConsumableArray3.default)(transformationsPreScale || []), [transformationPreScale, {
				crop: "fit",
				dpr: window.devicePixelRatio,
				"fetch_format": "auto",
				height: height,
				quality: "auto",
				width: width
			}], (0, _toConsumableArray3.default)(transformations || []), [transformation]).filter(_ramda2.default.identity);

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

			return _react2.default.createElement(
				ImageWrapper,
				{
					width: width,
					height: height,
					onUpload: onUpload,
					isButton: isButton,
					onClick: !!onUpload && this.changeToUploader
				},
				this.state.displayUploader ? _react2.default.createElement(
					_reactDropzone2.default,
					{
						accept: "image/*",
						onDrop: this.onImageDrop
					},
					"Drop an image, or click to select a file, to upload"
				) : _react2.default.createElement(
					_reactImageloader2.default,
					{
						src: src,
						preloader: Preloader({ width: width, height: height }),
						wrapper: _react2.default.DOM.div,
						style: {
							maxWidth: width,
							maxHeight: height
						}
					},
					"Image load failed!"
				)
			);
		}
	}]);
	return CloudinaryImage;
}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, "changeToUploader", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "changeToUploader"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onImageDrop", [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, "onImageDrop"), _class.prototype)), _class);


CloudinaryImage.defaultProps = {
	width: 640,
	height: 480
};

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

exports.default = CloudinaryImage;

//# sourceMappingURL=cloudinaryImage.js.map