@makeen.io/material-ui-kit/distr/molecules/ImagePicker/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 _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject2() {var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n\n  .close-icon {\n    position: absolute;\n    top: -10px;\n    cursor: pointer;\n    right: -10px;\n    font-size: ", ";\n    color: ", ";\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  border-radius: ", ";\n  background: ", ";\n\n  img {\n    width: 100%;\n    height: 100%;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { useDropzone } from "react-dropzone";
import { MdCancel } from "react-icons/md";
import styled from "styled-components";
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.sizes.imagePickerDefaultSize.borderRadius;},
function (props) {return props.theme.palette.imagePickerBackgroundColor;});






var ImagePickerWrapper = styled.div(_templateObject2(),








function (props) {return props.theme.sizes.imagePickerDefaultSize.closeIconSize;},
function (props) {return props.theme.palette.imagePickerCloseIconColor;});


var Image = function Image(_ref) {var src = _ref.src,alt = _ref.alt;return /*#__PURE__*/React.createElement("img", { src: src, alt: alt });};
export default (function (_ref2) {var defaultValue = _ref2.defaultValue,height = _ref2.height,width = _ref2.width,setFormRegister = _ref2.setFormRegister,setFormValue = _ref2.setFormValue,name = _ref2.name,theme = _ref2.theme;
  var image = defaultValue && [defaultValue.url].concat(_toConsumableArray(defaultValue.variations)).join("/");var _React$useState =
    React.useState(image),_React$useState2 = _slicedToArray(_React$useState, 2),url = _React$useState2[0],setUrl = _React$useState2[1];
  var onFileDrop = function onFileDrop(files) {
    setFormValue(name, files[0]);
    setUrl(URL.createObjectURL(files[0]));
  };
  React.useEffect(function () {
    setFormRegister({ name: name, value: defaultValue }, {});
  }, [name, setFormRegister, setFormValue, defaultValue]);var _useDropzone =
    useDropzone({
      accept: ["image/png", "image/jpeg", "image/svg+xml"],
      multiple: false,
      onDrop: React.useCallback(onFileDrop, [])
    }),getRootProps = _useDropzone.getRootProps,getInputProps = _useDropzone.getInputProps;
  var removeImage = React.useCallback(function () {
    setUrl(null);
    setFormValue(name, null);
  }, []);
  return /*#__PURE__*/React.createElement(ImagePickerWrapper, { theme: theme },
  url && /*#__PURE__*/React.createElement("div", { role: "button", className: "close-icon", tabIndex: 0, onKeyUp: removeImage, onClick: removeImage }, /*#__PURE__*/
  React.createElement(MdCancel, null)), /*#__PURE__*/
  React.createElement("div", _extends({}, getRootProps()), /*#__PURE__*/
  React.createElement(ImageWrapper, { height: height, width: width, hasImage: !!url }, url && /*#__PURE__*/React.createElement(Image, { src: url })), /*#__PURE__*/
  React.createElement("input", _extends({ name: name }, getInputProps()))));
});
//# sourceMappingURL=index.js.map