@figlinq/react-chart-editor/lib/components/widgets/text_editors/RichText/LinkEditor.js

plotly.js chart editor react component UI

import{Component}from"react";import PropTypes from"prop-types";import{RETURN_KEY,ESCAPE_KEY}from"../../../../lib/constants";import{findDOMNode}from"react-dom";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";class LinkEditor extends Component{constructor(props){super(props);this.state={position:this.getUpdatedPosition(props),originalLinkURL:props.linkURL}}componentDidMount(){if(this.props.linkURL.trim()===""){findDOMNode(this.input).focus()}}UNSAFE_componentWillReceiveProps(nextProps){const{props}=this;if(nextProps.linkID!==props.linkID){this.setState({position:this.getUpdatedPosition(props)})}}componentDidUpdate(){findDOMNode(this.input).setSelectionRange(this.props.linkURL.length,this.props.linkURL.length)}getUpdatedPosition(props){const{x,y}=props.coordinates;return{x,y}}onInputChange(urlValue){const{linkID,onURLChange}=this.props;onURLChange(linkID,urlValue)}onInputKeyDown(ev){const{key}=ev;if(key===RETURN_KEY){ev.preventDefault();this.props.onClose(this.props.linkID)}if(key===ESCAPE_KEY){ev.preventDefault();this.onInputChange(this.state.originalLinkURL);this.props.onClose(this.props.linkID)}}render(){const{localize:_}=this.context;const{position}=this.state;const{onBlur,onFocus,linkURL}=this.props;const placeholderText=_("Enter Link URL");const urlText=_("URL");return _jsxs("div",{className:"rich-text-editor__link-editor",style:{left:position.x,top:position.y},children:[_jsx("span",{className:"rich-text-editor__link-editor__label",children:urlText}),_jsx("input",{className:"rich-text-editor__link-editor__input",onBlur:onBlur,onFocus:onFocus,onChange:ev=>this.onInputChange(ev.target.value),onKeyDown:ev=>this.onInputKeyDown(ev),ref:input=>this.input=input,value:linkURL,placeholder:placeholderText})]})}}LinkEditor.propTypes={linkID:PropTypes.string.isRequired,linkURL:PropTypes.string.isRequired,onBlur:PropTypes.func.isRequired,onFocus:PropTypes.func.isRequired,onClose:PropTypes.func.isRequired,onURLChange:PropTypes.func.isRequired,coordinates:PropTypes.shape({x:PropTypes.number,y:PropTypes.number})};LinkEditor.defaultProps={coordinates:{x:0,y:0}};LinkEditor.contextTypes={localize:PropTypes.func.isRequired};export default LinkEditor;
//# sourceMappingURL=LinkEditor.js.map