@makeen.io/material-ui-kit/distr/molecules/PhotoPicker/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  background-color: transparent;\n  width: 100%;\n  & .MuiLinearProgress-bar1Determinate {\n    background-color: ", ";\n  }\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  border-radius: 4px;\n  background: ", ";\n\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { forwardRef, useCallback, useImperativeHandle } from "react";
import LinearProgress from "@material-ui/core/LinearProgress";
import { useDropzone } from "react-dropzone";
import styled from "styled-components";
import { getImageUrl } from "../../utils";
var ImageWrapper = styled.div(_templateObject(),
function (props) {return props.width || props.theme.sizes.imagePickerDefaultSize.width;},
function (props) {
  if (props.height) {
    return props.height;
  }
  return props.hasImage ?
  "100%" :
  props.theme.sizes.imagePickerDefaultSize.height;
},

function (props) {return props.theme.palette.imagePickerBackgroundColor;});






var PhotoPickerWrapper = styled.div(_templateObject2());



var PhotoUploadProgress = styled(LinearProgress)(_templateObject3(),





function (props) {return props.theme.palette.info.main;});


var Image = function Image(_ref) {var src = _ref.src,alt = _ref.alt;return /*#__PURE__*/React.createElement("img", { src: src, alt: alt });};
export default /*#__PURE__*/forwardRef(function (_ref2, ref) {var initImage = _ref2.initImage,onFileChange = _ref2.onFileChange,children = _ref2.children,uploadProgress = _ref2.uploadProgress,theme = _ref2.theme,name = _ref2.name,height = _ref2.height,width = _ref2.width;
  var image = getImageUrl(initImage);var _React$useState =
    React.useState(image),_React$useState2 = _slicedToArray(_React$useState, 2),currentUrl = _React$useState2[0],setCurrentUrl = _React$useState2[1];
  var onFileDrop = useCallback(function (files) {
    setCurrentUrl(URL.createObjectURL(files[0]));
    onFileChange(files);
  }, []);var _useDropzone =
    useDropzone({
      accept: ["image/png", "image/jpeg", "image/svg+xml"],
      multiple: false,
      onDrop: onFileDrop
    }),getRootProps = _useDropzone.getRootProps,getInputProps = _useDropzone.getInputProps,open = _useDropzone.open;
  var removeImage = function removeImage() {
    setCurrentUrl(null);
    onFileChange(null);
  };
  useImperativeHandle(ref, function () {return {
      openFileWindow: function openFileWindow() {return open();},
      removeCurrentImage: function removeCurrentImage() {return removeImage();}
    };});
  return /*#__PURE__*/React.createElement(PhotoPickerWrapper, null, /*#__PURE__*/
  React.createElement("div", _extends({}, getRootProps()), /*#__PURE__*/
  React.createElement(ImageWrapper, { height: height, width: width, hasImage: !!(currentUrl || initImage) }, /*#__PURE__*/
  React.createElement(Image, { src: currentUrl || initImage })), /*#__PURE__*/
  React.createElement("input", _extends({ name: name }, getInputProps())),
  !!uploadProgress && /*#__PURE__*/React.createElement(PhotoUploadProgress, { variant: "determinate", value: uploadProgress })));
});
//# sourceMappingURL=index.js.map