@makeen.io/material-ui-kit/distr/molecules/RichEditor/component/customLink.js

Makeen UI components kit. Based on material-ui.

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  position: relative;\n\n  .ql-custom-link {\n    &__dropdown {\n      transition: opacity 0.5s ease-in-out;\n      min-width: 510px;\n\n      background: white;\n\n      position: absolute;\n      top: 100%;\n      left: 0;\n      z-index: 20;\n      padding: 16px 16px 12px 16px;\n\n      box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);\n\n      border-radius: 4px;\n\n      &.show {\n        visibility: visible;\n        opacity: 1;\n      }\n\n      &.hide {\n        visibility: hidden;\n        opacity: 0;\n      }\n    }\n\n    &__input-block {\n      width: 100%;\n      height: 48px;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n\n      &:not(:first-child) {\n        margin-top: 7px;\n      }\n    }\n\n    &__input {\n      height: 48px;\n      font-family: AmazonEmber;\n      font-size: 15px;\n      font-weight: normal;\n      font-stretch: normal;\n      font-style: normal;\n      line-height: 1.33;\n      letter-spacing: normal;\n\n      width: calc(100% - 134px);\n\n      margin: 0;\n\n      .MuiOutlinedInput-input {\n        height: 100%;\n      }\n    }\n\n    &__btn {\n      width: 118px !important;\n      height: 48px !important;\n      border-radius: 4px;\n      background: ", " !important;\n      font-size: 16px;\n      font-weight: bold;\n      font-stretch: normal;\n      font-style: normal;\n      line-height: 1.25;\n      letter-spacing: normal;\n      text-align: center;\n      color: ", " !important;\n      outline: none;\n\n      &:active {\n        background: ", " !important;\n      }\n      margin: 0 0 0 16px;\n    }\n\n    &__link {\n      font-family: AmazonEmber;\n      font-size: 12px;\n      font-weight: normal;\n      font-stretch: normal;\n      font-style: normal;\n      line-height: 1.33;\n      letter-spacing: normal;\n      color: #8f9bb3;\n\n      margin-top: 4px;\n      padding-left: 17px;\n\n      display: block;\n    }\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { Fragment } from "react";
import TextField from "@material-ui/core/TextField";
import Tooltip from "@material-ui/core/Tooltip";
import { makeStyles } from "@material-ui/core/styles";
import { Icon } from "../../../atoms";
import styled from "styled-components";
var Link = function Link() {return /*#__PURE__*/React.createElement(Icon, { name: "link" });};
var useStyles = makeStyles(function (theme) {
  return {
    textfieldRoot: {
      "& .MuiInput-underline:after": {
        borderBottomColor: theme.palette.colors.primary[500]
      },
      "& .MuiOutlinedInput-root": {
        "&.Mui-focused fieldset": {
          borderColor: theme.palette.colors.primary[500]
        }
      },
      "& label.Mui-focused": {
        color: theme.palette.colors.primary[500]
      }
    }
  };
});
var CustomLinkWrapper = styled.div(_templateObject(),

































































function (_ref) {var theme = _ref.theme;return theme.palette.colors.primary[100];},







function (_ref2) {var theme = _ref2.theme;return theme.palette.colors.primary[500];},



function (_ref3) {var theme = _ref3.theme;return theme.palette.colors.primary[300];});





















var CustomLink = function CustomLink(props) {var
    link = props.link,text = props.text;var _React$useState =
    React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),isShowDropdown = _React$useState2[0],toggleDropdown = _React$useState2[1];var _React$useState3 =
    React.useState(text ? text : ""),_React$useState4 = _slicedToArray(_React$useState3, 2),customText = _React$useState4[0],updateText = _React$useState4[1];var _React$useState5 =
    React.useState(""),_React$useState6 = _slicedToArray(_React$useState5, 2),userLink = _React$useState6[0],updateUserLink = _React$useState6[1];
  var contentBlock = null;
  var handleClickOutside = function handleClickOutside(event) {
    if (isShowDropdown &&
    contentBlock &&
    !contentBlock.contains(event.target)) {
      toggleDropdown(false);
    }
  };
  window.addEventListener("click", handleClickOutside);
  var styles = useStyles();
  return /*#__PURE__*/React.createElement(CustomLinkWrapper, { className: "ql-formats", ref: function ref(item) {
      contentBlock = item;
    } }, /*#__PURE__*/
  React.createElement(Tooltip, { title: "Link" }, /*#__PURE__*/
  React.createElement("button", { className: "ql-custom-link", "data-tooltip": "Link", onClick: function onClick() {return toggleDropdown(!isShowDropdown);} }, /*#__PURE__*/
  React.createElement(Link, null))), /*#__PURE__*/
  React.createElement("div", { className: "ql-custom-link__dropdown ".concat(isShowDropdown ? "show" : "hide") },
  link && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/
  React.createElement("div", { className: "ql-custom-link__input-block" }, /*#__PURE__*/
  React.createElement(TextField, { classes: { root: styles.textfieldRoot }, label: "Button Title", value: customText, onChange: function onChange(e) {return updateText(e.target.value);}, className: "ql-custom-link__input", margin: "normal", variant: "outlined" }), /*#__PURE__*/
  React.createElement("button", { className: "ql-custom-link__btn", onClick: function onClick() {return props.onInsertLink(customText);} }, "Insert Link")), /*#__PURE__*/
  React.createElement("a", { href: link, target: "_blank", rel: "noopener noreferrer", className: "ql-custom-link__link" }, link)),
  !link && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/
  React.createElement("div", { className: "ql-custom-link__input-block" }, /*#__PURE__*/
  React.createElement(TextField, { classes: { root: styles.textfieldRoot }, label: "Button Title", value: customText, onChange: function onChange(e) {return updateText(e.target.value);}, className: "ql-custom-link__input", margin: "normal", variant: "outlined" })), /*#__PURE__*/
  React.createElement("div", { className: "ql-custom-link__input-block" }, /*#__PURE__*/
  React.createElement(TextField, { classes: { root: styles.textfieldRoot }, label: "Button Link", value: userLink, onChange: function onChange(e) {return updateUserLink(e.target.value);}, className: "ql-custom-link__input", margin: "normal", variant: "outlined" }), /*#__PURE__*/
  React.createElement("button", { className: "ql-custom-link__btn", onClick: function onClick() {return props.onInsertLink({
        text: customText,
        url: userLink
      });} }, "Insert Link")), /*#__PURE__*/
  React.createElement("a", { href: link, target: "_blank", rel: "noopener noreferrer", className: "ql-custom-link__link" }, link))));
};
CustomLink.defaultProps = {
  link: "",
  onInsertLink: function onInsertLink() {return {};},
  text: ""
};
export default CustomLink;
//# sourceMappingURL=customLink.js.map