wix-style-react
Version:
wix-style-react
50 lines • 2.4 kB
JavaScript
import React from 'react';
import RichTextToolbarButton from './RichTextToolbarButton';
import RichTextInputAreaLinkForm from '../Form/RichTextInputAreaLinkForm';
import Popover from '../../Popover';
import Box from '../../Box';
class RichTextToolbarLinkButton extends React.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 = () => {
const { onRemove, data } = this.props;
const { hasRemovableEntityInSelection } = data;
// Checks if the selected text does not contain a link
if (!hasRemovableEntityInSelection) {
this.setState({ isFormShown: true });
}
else {
onRemove();
}
};
this._onSubmit = (event, linkData) => {
const { onSubmit } = this.props;
onSubmit(event, linkData);
this._onHide();
};
this._onHide = () => {
this.setState({ isFormShown: false });
};
}
render() {
const { dataHook, tooltipText, isDisabled, isActive, children, data } = this.props;
const { isFormShown } = this.state;
const { selectedText } = data;
return (React.createElement(Popover, { appendTo: "parent", placement: "bottom", showArrow: true, animate: true, shown: isFormShown, onClickOutside: this._onHide },
React.createElement(Popover.Element, null,
React.createElement(RichTextToolbarButton, { dataHook: dataHook, onClick: this._onButtonClick, tooltipText: tooltipText, isDisabled: isDisabled, isActive: isActive || this.state.isFormShown }, children)),
React.createElement(Popover.Content, null,
React.createElement(Box, { padding: 3, width: "216px" },
React.createElement(RichTextInputAreaLinkForm, { dataHook: "richtextarea-form", onSubmit: this._onSubmit, onCancel: this._onHide, data: { text: selectedText } })))));
}
}
export default RichTextToolbarLinkButton;
//# sourceMappingURL=RichTextToolbarLinkButton.js.map