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

plotly.js chart editor react component UI

import Slider from"@figlinq/react-rangeslider";import{mdiMenuDown,mdiMenuUp}from"@mdi/js";import Icon from"@mdi/react";import EditableText from"./EditableText";import{Component}from"react";import PropTypes from"prop-types";import isNumeric from"fast-isnumeric";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const UP_ARROW=38;export const DOWN_ARROW=40;export default class NumericInput extends Component{constructor(props){super(props);this.state={value:props.value,numericInputClassName:this.getNumericInputClassName(props.value)};this.onChange=this.onChange.bind(this);this.updateValue=this.updateValue.bind(this);this.onKeyDown=this.onKeyDown.bind(this);this.onWheel=this.onWheel.bind(this)}getNumericInputClassName(value){return`numeric-input__number ${this.props.editableClassName||""} ${!isNumeric(value)&&value!==""?"+error":""}`}UNSAFE_componentWillReceiveProps(nextProps){if(nextProps.value!==this.state.value){this.setState({value:nextProps.value})}}onKeyDown(e){switch(e.keyCode){case UP_ARROW:this.incrementValue("increase");break;case DOWN_ARROW:this.incrementValue("decrease");break;default:break}}onWheel(e){e.stopPropagation();e.preventDefault();if(e.deltaY>0){this.incrementValue("increase")}else{this.incrementValue("decrease")}}onChange(value){this.setState({value,numericInputClassName:this.getNumericInputClassName(value)})}updateValue(newValue){let optimizeUndoAction=arguments.length>1&&arguments[1]!==undefined?arguments[1]:false;const{max,min,integerOnly,value,onUpdate}=this.props;let updatedValue=newValue;if(updatedValue===""){this.setState({value,numericInputClassName:this.getNumericInputClassName(value)});return}if(!isNumeric(updatedValue)){this.setState({value:updatedValue,numericInputClassName:this.getNumericInputClassName(updatedValue)});return}updatedValue=Number(updatedValue);if(integerOnly){updatedValue=Math.floor(updatedValue)}if(isNumeric(min)){updatedValue=Math.max(min,updatedValue)}if(isNumeric(max)){updatedValue=Math.min(max,updatedValue)}onUpdate(updatedValue,optimizeUndoAction)}incrementValue(direction){const{defaultValue,min,step=1,stepmode="absolute"}=this.props;const{value}=this.state;let valueUpdate;if(isNumeric(value)){const x=parseFloat(value);const absMode=stepmode==="absolute";if(direction==="increase"){valueUpdate=absMode?x+step:x*(1+step)}else{valueUpdate=absMode?x-step:x/(1+step)}}else{if(isNumeric(defaultValue)){valueUpdate=defaultValue}else{valueUpdate=min||0}}this.updateValue(valueUpdate)}renderArrows(){if(!this.props.showArrows||this.props.showSlider){return null}return _jsxs("div",{className:"numeric-input__caret-box",children:[_jsx("div",{className:"numeric-input__caret js-numeric-increase",onClick:this.incrementValue.bind(this,"increase"),children:_jsx(Icon,{path:mdiMenuUp,className:"numeric-top-caret-modifier"})}),_jsx("div",{className:"numeric-input__caret js-numeric-decrease",onClick:this.incrementValue.bind(this,"decrease"),children:_jsx(Icon,{path:mdiMenuDown,className:"numeric-bottom-caret-modifier"})})]})}renderSlider(){if(!this.props.showSlider){return null}return _jsx(Slider,{min:this.props.min,max:this.props.max,step:this.props.step,value:parseFloat(this.state.value),onChange:value=>this.updateValue(value,true),onChangeComplete:value=>this.updateValue(value,false),tooltip:false})}render(){return _jsxs("div",{className:"numeric-input__wrapper",children:[_jsx(EditableText,{className:this.state.numericInputClassName,placeholder:this.props.placeholder,text:this.state.value,type:"text",onChange:this.onChange,onUpdate:this.updateValue,onKeyDown:this.onKeyDown,onWheel:this.onWheel}),this.renderArrows(),this.renderSlider(),this.props.units?this.props.units:null]})}}NumericInput.propTypes={defaultValue:PropTypes.any,editableClassName:PropTypes.string,integerOnly:PropTypes.bool,max:PropTypes.number,min:PropTypes.number,onUpdate:PropTypes.func.isRequired,placeholder:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),showArrows:PropTypes.bool,showSlider:PropTypes.bool,step:PropTypes.number,stepmode:PropTypes.string,value:PropTypes.any,units:PropTypes.string};NumericInput.defaultProps={showArrows:true};
//# sourceMappingURL=NumericInput.js.map