@figlinq/react-chart-editor/lib/components/widgets/EditableText.js

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{useRef}from"react";import{jsx as _jsx}from"react/jsx-runtime";const ENTER_KEYCODE=13;const EditableText=_ref=>{let{type,className,text,disable,autoFocus,placeholder,readOnly,size,onKeyDown,onChange,onUpdate,onWheel}=_ref;const inputRef=useRef();const handleFocus=event=>{event.target.select()};const handleChange=event=>{if(onChange){onChange(event.target.value)}};const handleUpdate=event=>{if(onUpdate){onUpdate(event.target.value)}};const handleKeyDown=event=>{if((event.keyCode||event.which)===ENTER_KEYCODE){inputRef.current.blur()}else{onKeyDown(event)}};const handleWheel=event=>{if(onWheel&&document.activeElement===inputRef.current){onWheel(event)}};return _jsx("input",{ref:inputRef,type:type,className:className||"",value:text,onFocus:handleFocus,onChange:handleChange,onBlur:handleUpdate,disabled:disable,autoFocus:autoFocus,onKeyDown:handleKeyDown,onWheel:handleWheel,placeholder:placeholder,readOnly:readOnly,size:size})};EditableText.propTypes={onChange:PropTypes.func,onUpdate:PropTypes.func,onKeyDown:PropTypes.func,onWheel:PropTypes.func,text:PropTypes.any,placeholder:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),className:PropTypes.string,disable:PropTypes.bool,autoFocus:PropTypes.bool,readOnly:PropTypes.bool,type:PropTypes.oneOf(["text","password"]),size:PropTypes.number};EditableText.defaultProps={readOnly:false,type:"text"};export default EditableText;
//# sourceMappingURL=EditableText.js.map