@wix/design-system
Version:
@wix/design-system
57 lines • 2.76 kB
JavaScript
import React from 'react';
import RichTextToolbarButton from './RichTextToolbarButton';
import RichTextInputAreaLinkForm from '../Form/RichTextInputAreaLinkForm';
import PopoverNext from '../../PopoverNext';
import Box from '../../Box';
import { ZIndex } from '../../common/ZIndex';
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(PopoverNext, { appendTo: "window", placement: "bottom", showArrow: true, zIndex: ZIndex.modal + 1, open: isFormShown, onOpenChange: (open, reason) => {
if (!open &&
(reason === 'outside-press' || reason === 'escape-key')) {
this._onHide();
}
}, autoUpdateOptions: { animationFrame: true } },
React.createElement(PopoverNext.Trigger, null,
React.createElement("span", null,
React.createElement(RichTextToolbarButton, { dataHook: dataHook, onClick: this._onButtonClick, tooltipText: tooltipText, isDisabled: isDisabled, isActive: isActive || this.state.isFormShown }, children))),
React.createElement(PopoverNext.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