wix-style-react/dist/src/RichTextInputArea/Toolbar/RichTextToolbarLinkButton.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _RichTextToolbarButton = _interopRequireDefault(require("./RichTextToolbarButton"));
var _RichTextInputAreaLinkForm = _interopRequireDefault(require("../Form/RichTextInputAreaLinkForm"));
var _Popover = _interopRequireDefault(require("../../Popover"));
var _Box = _interopRequireDefault(require("../../Box"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbarLinkButton.js";
class RichTextToolbarLinkButton extends _react.default.Component {
  constructor() {
    super(...arguments);
    this.state = {
      isFormShown: false
    };
    /*
    When clicking the button, one of the following occurs:
    1. If the selected text does not contain a link, it will show the link insertion form
    2. If the selected text contains a link, it will detach that link from the text
    */
    this._onButtonClick = () => {
      var {
        onRemove,
        data
      } = this.props;
      var {
        hasRemovableEntityInSelection
      } = data;

      // Checks if the selected text does not contain a link
      if (!hasRemovableEntityInSelection) {
        this.setState({
          isFormShown: true
        });
      } else {
        onRemove();
      }
    };
    this._onSubmit = (event, linkData) => {
      var {
        onSubmit
      } = this.props;
      onSubmit(event, linkData);
      this._onHide();
    };
    this._onHide = () => {
      this.setState({
        isFormShown: false
      });
    };
  }
  render() {
    var {
      dataHook,
      tooltipText,
      isDisabled,
      isActive,
      children,
      data
    } = this.props;
    var {
      isFormShown
    } = this.state;
    var {
      selectedText
    } = data;
    return /*#__PURE__*/_react.default.createElement(_Popover.default, {
      appendTo: "parent",
      placement: "bottom",
      showArrow: true,
      animate: true,
      shown: isFormShown,
      onClickOutside: this._onHide,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 20,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_Popover.default.Element, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 28,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_RichTextToolbarButton.default, {
      dataHook: dataHook,
      onClick: this._onButtonClick,
      tooltipText: tooltipText,
      isDisabled: isDisabled,
      isActive: isActive || this.state.isFormShown,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 29,
        columnNumber: 11
      }
    }, children)), /*#__PURE__*/_react.default.createElement(_Popover.default.Content, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 39,
        columnNumber: 9
      }
    }, /*#__PURE__*/_react.default.createElement(_Box.default, {
      padding: 3,
      width: "216px",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 40,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_RichTextInputAreaLinkForm.default, {
      dataHook: "richtextarea-form",
      onSubmit: this._onSubmit,
      onCancel: this._onHide,
      data: {
        text: selectedText
      },
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 41,
        columnNumber: 13
      }
    }))));
  }
}
var _default = exports.default = RichTextToolbarLinkButton;
//# sourceMappingURL=RichTextToolbarLinkButton.js.map