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

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=exports.UP_ARROW=exports.DOWN_ARROW=void 0;var _EditableText=_interopRequireDefault(require("./EditableText"));var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _fastIsnumeric=_interopRequireDefault(require("fast-isnumeric"));var _reactRangeslider=_interopRequireDefault(require("react-rangeslider"));var _plotlyIcons=require("plotly-icons");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};const UP_ARROW=exports.UP_ARROW=38;const DOWN_ARROW=exports.DOWN_ARROW=40;function Slider(props){const[value,setValue]=_react.default.useState(props.value);(0,_react.useEffect)(()=>{if(props.value!==value){setValue(props.value)}},[props.value]);return _react.default.createElement(_reactRangeslider.default,{min:props.min,max:props.max,step:props.step,value:value,onChange:setValue,onChangeComplete:()=>{props.onChange(value)},tooltip:false})}__signature__(Slider,"useState{[value, setValue](props.value)}\nuseEffect{}");Slider.propTypes={min:_propTypes.default.number,max:_propTypes.default.number,step:_propTypes.default.number,value:_propTypes.default.number,onChange:_propTypes.default.func.isRequired};class NumericInput extends _react.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(0,_fastIsnumeric.default)(value)||value===""?"numeric-input__number ".concat(this.props.editableClassName?this.props.editableClassName:""):"numeric-input__number +error ".concat(this.props.editableClassName?this.props.editableClassName:"")}UNSAFE_componentWillReceiveProps(nextProps){if(nextProps.value!==this.state.value){this.setState({value:nextProps.value,numericInputClassName:this.getNumericInputClassName(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){const{max,min,integerOnly}=this.props;let updatedValue=newValue;if(updatedValue===""){this.setState({value:this.props.value,numericInputClassName:this.getNumericInputClassName(this.props.value)});return}if(!(0,_fastIsnumeric.default)(updatedValue)){this.setState({value:updatedValue,numericInputClassName:this.getNumericInputClassName(updatedValue)});return}updatedValue=Number(updatedValue);if(integerOnly){updatedValue=Math.floor(updatedValue)}if((0,_fastIsnumeric.default)(min)){updatedValue=Math.max(min,updatedValue)}if((0,_fastIsnumeric.default)(max)){updatedValue=Math.min(max,updatedValue)}this.props.onUpdate(parseFloat(updatedValue.toFixed(4)))}incrementValue(direction){const{defaultValue,min,step=1,stepmode="absolute"}=this.props;const{value}=this.state;let valueUpdate;if((0,_fastIsnumeric.default)(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((0,_fastIsnumeric.default)(defaultValue)){valueUpdate=defaultValue}else{valueUpdate=min||0}}this.updateValue(valueUpdate)}renderArrows(){if(!this.props.showArrows||this.props.showSlider){return null}return _react.default.createElement("div",{className:"numeric-input__caret-box"},_react.default.createElement("div",{className:"numeric-input__caret js-numeric-increase",onClick:this.incrementValue.bind(this,"increase")},_react.default.createElement(_plotlyIcons.CarretUpIcon,{className:"numeric-top-caret-modifier"})),_react.default.createElement("div",{className:"numeric-input__caret js-numeric-decrease",onClick:this.incrementValue.bind(this,"decrease")},_react.default.createElement(_plotlyIcons.CarretDownIcon,{className:"numeric-bottom-caret-modifier"})))}renderSlider(){if(!this.props.showSlider){return null}return _react.default.createElement(Slider,{min:this.props.min,max:this.props.max,step:this.props.step,value:parseFloat(this.state.value),onChange:this.updateValue,tooltip:false})}render(){return _react.default.createElement("div",{className:"numeric-input__wrapper"},_react.default.createElement(_EditableText.default,{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)}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}exports.default=NumericInput;NumericInput.propTypes={defaultValue:_propTypes.default.any,editableClassName:_propTypes.default.string,integerOnly:_propTypes.default.bool,max:_propTypes.default.number,min:_propTypes.default.number,onUpdate:_propTypes.default.func.isRequired,placeholder:_propTypes.default.oneOfType([_propTypes.default.string,_propTypes.default.number]),showArrows:_propTypes.default.bool,showSlider:_propTypes.default.bool,step:_propTypes.default.number,stepmode:_propTypes.default.string,value:_propTypes.default.any,units:_propTypes.default.string};NumericInput.defaultProps={showArrows:true};;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(UP_ARROW,"UP_ARROW","/react-chart-editor/src/components/widgets/NumericInput.js");reactHotLoader.register(DOWN_ARROW,"DOWN_ARROW","/react-chart-editor/src/components/widgets/NumericInput.js");reactHotLoader.register(Slider,"Slider","/react-chart-editor/src/components/widgets/NumericInput.js");reactHotLoader.register(NumericInput,"NumericInput","/react-chart-editor/src/components/widgets/NumericInput.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=NumericInput.js.map