@fusioncharts/core/src/toolbox/tools/input.js

JavaScript Data Visualisation Library

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _inheritsLoose2=_interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _tool=_interopRequireDefault(require("./tool"));var _label=_interopRequireDefault(require("./label"));var _inputBox=_interopRequireDefault(require("./input-box"));var _lib=require("../../lib");var labelClickHandler=function labelClickHandler(){var parent=this.getLinkedParent();parent.childChanged&&parent.childChanged({component:"label",clicked:true})},keyUpHandler=function keyUpHandler(e){var value,parent=this.getLinkedParent();e.preventDefault();if(e.originalEvent.which===13){value=e.originalEvent.target.value;parent.childChanged&&parent.childChanged({component:"input-box",clicked:true,value:value})}},blurHandler=function blurHandler(e){var parent=this.getLinkedParent();parent.childChanged&&parent.childChanged({component:"input-box",clicked:true,value:e.originalEvent.target.value})},defaultInputValidator=function defaultInputValidator(){return true};var Input=function(_Tool){function Input(){return _Tool.apply(this,arguments)||this}(0,_inheritsLoose2.default)(Input,_Tool);var _proto=Input.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){_Tool.prototype.__setDefaultConfig.call(this);this.config.validator=defaultInputValidator};_proto.setDimension=function setDimension(dim){if(dim===void 0){dim={}}var tool=this;tool.getChild("label").setDimension(dim);tool.getChild("inputBox").setDimension(dim)};_proto.configureAttributes=function configureAttributes(options){if(options===void 0){options={}}_Tool.prototype.configureAttributes.call(this,options);var tool=this,toolConfig=tool.config;toolConfig.validator=(0,_lib.pluck)(options.validator,toolConfig.validator);tool.addChildren(options)};_proto.addChildren=function addChildren(options){if(options===void 0){options={}}var tool=this;tool.attachChild(_label.default,"label","label").configure(Object.assign(options,{containerInfo:{id:"group",label:"group",isParent:true},hAlign:"left",vAlign:"top"}));tool.attachChild(_inputBox.default,"inputBox","inputBox").configure(Object.assign({},options,{isHidden:true}))};_proto.getLogicalSpace=function getLogicalSpace(){return this.getChild("label").getLogicalSpace()};_proto.draw=function draw(){var tool=this,inputBox=tool.getChild("inputBox");tool.addGraphicalElement({id:"group",el:"group",attr:{name:"input"},container:{id:"group",label:"group",isParent:true},component:tool,label:"group"});tool.getChild("label").addEventListener("fc-click",labelClickHandler);inputBox.addEventListener("keyup",keyUpHandler);inputBox.addEventListener("blur",blurHandler)};_proto.childChanged=function childChanged(info){if(info===void 0){info={}}var _info=info,component=_info.component,clicked=_info.clicked,value=_info.value,tool=this,isValid,label=tool.getChild("label"),inputBox=tool.getChild("inputBox");if(component==="label"){if(clicked){label.hide();inputBox.show()}}else if(component==="input-box"){if(clicked){isValid=this.config.validator(value);if(isValid){label.configure({text:value});inputBox.configure({text:value})}label.show();inputBox.hide()}}};return Input}(_tool.default);var _default=exports.default=Input;