@makeen.io/material-ui-kit/distr/atoms/Editable/ImageEditable.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject2() {var data = _taggedTemplateLiteral(["\n  min-width: 26px;\n  & .upload-new-icon {\n    color: red;\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  min-width: 26px;\n  & .remove-image-icon {\n    color: red;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import RemoveImageIcon from "../../../assets/icons/log-out.svg";
import UploadNewImageIcon from "../../../assets/icons/user-cog.svg";
import { Menu } from "./.."; // todo: circle dependency!!
import { FaPencilAlt } from "react-icons/fa";
import styled from "styled-components";
import EditableWrapper from "./EditableWrapper";
var RemoveImageComp = styled(function (_ref) {var className = _ref.className;return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement(ListItemIcon, { className: className }, /*#__PURE__*/
  React.createElement(UploadNewImageIcon, { className: "remove-image-icon", fontSize: "18", width: "18", height: "18" })), /*#__PURE__*/
  React.createElement(ListItemText, { primary: "Remove Image" }));})(_templateObject());





var UploadNewImageComp = styled(function (_ref2) {var className = _ref2.className;return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
  React.createElement(ListItemIcon, { className: className }, /*#__PURE__*/
  React.createElement(RemoveImageIcon, { className: "upload-new-icon", fontSize: "18", width: "18", height: "18", fill: "red" })), /*#__PURE__*/
  React.createElement(ListItemText, { primary: "Upload New Image" }));})(_templateObject2());





// The props here is the same that's passed to the ExplorerMenu at runtime.
// It can be used to access theme to build dynamic css rules as well as have rules depend on diff prop values
var explorerMenuStyle = function explorerMenuStyle() {return "\n  width: auto;\n  margin-top: 40px;\n  margin-left: -20px;\n";};




var pencilStyle = function pencilStyle() {return "\ntop:10px;\nright:10px;\n";};



var ImageEditable = function ImageEditable(_ref3) {var uploadNewImage = _ref3.uploadNewImage,removeImage = _ref3.removeImage,editableStyle = _ref3.editableStyle,children = _ref3.children;var _React$useState =
    React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),show = _React$useState2[0],set = _React$useState2[1];var _React$useState3 =
    React.useState(false),_React$useState4 = _slicedToArray(_React$useState3, 2),menuOpen = _React$useState4[0],isMenuOpen = _React$useState4[1];
  var itemActions = [
  {
    comp: UploadNewImageComp,
    name: "Upload New Image",
    onClick: function onClick() {
      uploadNewImage();
    }
  },
  {
    comp: RemoveImageComp,
    name: "Remove Image",
    onClick: function onClick() {
      removeImage();
    }
  }];

  var originItems = {
    anchor: {
      horizontal: "right",
      vertical: "bottom"
    },
    transform: {
      horizontal: "left",
      vertical: "bottom"
    }
  };
  var handleSelect = function handleSelect() {return isMenuOpen(true);};
  var handleLeave = function handleLeave() {return set(false);};
  var handleClose = function handleClose() {
    isMenuOpen(false);
    set(false);
  };
  var renderExploreMeny = function renderExploreMeny() {return /*#__PURE__*/React.createElement(Menu, { options: itemActions, menuStyle: explorerMenuStyle, getContentAnchorEl: null, anchorOrigin: originItems.anchor, transformOrigin: originItems.transform, onSelect: handleSelect, onClose: handleClose, closeOnSelect: true }, /*#__PURE__*/
    React.createElement("span", { className: "pencil-icon" }, /*#__PURE__*/
    React.createElement(FaPencilAlt, null)));};
  return /*#__PURE__*/React.createElement(EditableWrapper, { editableStyle: editableStyle, pencilStyle: pencilStyle, onMouseEnter: handleSelect, onMouseLeave: handleLeave },
  children,
  (show || menuOpen) && renderExploreMeny());
};
export default ImageEditable;
//# sourceMappingURL=ImageEditable.js.map