@wix/design-system
Version:
@wix/design-system
156 lines (154 loc) • 6.26 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _RichTextToolbarButton = _interopRequireDefault(require("./RichTextToolbarButton"));
var _RichTextInputAreaLinkForm = _interopRequireDefault(require("../Form/RichTextInputAreaLinkForm"));
var _PopoverNext = _interopRequireDefault(require("../../PopoverNext"));
var _Box = _interopRequireDefault(require("../../Box"));
var _ZIndex = require("../../common/ZIndex");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/RichTextInputArea/Toolbar/RichTextToolbarLinkButton.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var RichTextToolbarLinkButton = /*#__PURE__*/function (_React$Component) {
function RichTextToolbarLinkButton() {
var _this;
(0, _classCallCheck2["default"])(this, RichTextToolbarLinkButton);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, RichTextToolbarLinkButton, [].concat(args));
_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 = function () {
var _this$props = _this.props,
onRemove = _this$props.onRemove,
data = _this$props.data;
var hasRemovableEntityInSelection = data.hasRemovableEntityInSelection;
// Checks if the selected text does not contain a link
if (!hasRemovableEntityInSelection) {
_this.setState({
isFormShown: true
});
} else {
onRemove();
}
};
_this._onSubmit = function (event, linkData) {
var onSubmit = _this.props.onSubmit;
onSubmit(event, linkData);
_this._onHide();
};
_this._onHide = function () {
_this.setState({
isFormShown: false
});
};
return _this;
}
(0, _inherits2["default"])(RichTextToolbarLinkButton, _React$Component);
return (0, _createClass2["default"])(RichTextToolbarLinkButton, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
tooltipText = _this$props2.tooltipText,
isDisabled = _this$props2.isDisabled,
isActive = _this$props2.isActive,
children = _this$props2.children,
data = _this$props2.data;
var isFormShown = this.state.isFormShown;
var selectedText = data.selectedText;
return /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], {
appendTo: "window",
placement: "bottom",
showArrow: true,
zIndex: _ZIndex.ZIndex.modal + 1,
open: isFormShown,
onOpenChange: function onOpenChange(open, reason) {
if (!open && (reason === 'outside-press' || reason === 'escape-key')) {
_this2._onHide();
}
},
autoUpdateOptions: {
animationFrame: true
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 21,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 37,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement("span", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 11
}
}, /*#__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: 39,
columnNumber: 13
}
}, children))), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
padding: 3,
width: "216px",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 51,
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: 52,
columnNumber: 13
}
}))));
}
}]);
}(_react["default"].Component);
var _default = exports["default"] = RichTextToolbarLinkButton;