dbl-components/lib/js/forms/fields/field.js

Framework based on bootstrap 5

function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import React,{Fragment,createRef}from"react";import PropTypes from"prop-types";import{randomS4,eventHandler}from"dbl-utils";import Component from"../../component";var Field=/*#__PURE__*/function(_Component){function Field(props){var _this;_classCallCheck(this,Field);_this=_callSuper(this,Field,[props]);_defineProperty(_this,"unique",randomS4());_defineProperty(_this,"state",{value:_this.props.value||_this.props["default"],options:_this.props.options,error:false,pristine:true,dirty:false});_defineProperty(_this,"ContentWrap","div");_defineProperty(_this,"onFocus",function(){var name=_this.props.name;eventHandler.dispatch("focus."+name)});_this.onChange=_this.onChange.bind(_this);_this.onInvalid=_this.onInvalid.bind(_this);_this.onUpdate=_this.onUpdate.bind(_this);_this.input=/*#__PURE__*/createRef();return _this}_inherits(Field,_Component);return _createClass(Field,[{key:"componentDidMount",value:function componentDidMount(){eventHandler.subscribe("update."+this.props.name,this.onUpdate,this.unique);eventHandler.dispatch("ready."+this.props.name)}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.timeoutReturnData);clearTimeout(this.timeoutRevalidate);eventHandler.unsubscribe("update."+this.props.name,this.unique)}},{key:"extractString",value:function extractString(obj){var _this2=this;if(typeof obj==="string")return obj;else if(Array.isArray(obj)){return obj.map(function(e){return _this2.extractString(e)}).flat().join(" ")}else if(/*#__PURE__*/React.isValidElement(obj)){return this.extractString(obj.props.children)}else if(!obj)return"";return obj.toString()}},{key:"returnData",value:function returnData(){var value=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.state.value;var extra=arguments.length>1?arguments[1]:undefined;var _this$props=this.props,name=_this$props.name,id=_this$props.id,data=_this$props.data;var error=this.state.error;var toDispatch=_defineProperty({},name,value);if(id)toDispatch.id=id;if(data)toDispatch.data=data;if(this._reset)this._reset=false;else if(!error){clearTimeout(this.timeoutReturnData);this.timeoutReturnData=setTimeout(function(){eventHandler.dispatch(name,toDispatch,extra)},300)}}},{key:"isInvalid",value:function isInvalid(value){var _this$input$current,_this$input$current2;var _this$props2=this.props,checkValidity=_this$props2.checkValidity,pattern=_this$props2.pattern,required=_this$props2.required;var inputValid=true;(_this$input$current=this.input.current)===null||_this$input$current===void 0||_this$input$current.setCustomValidity("");if(typeof((_this$input$current2=this.input.current)===null||_this$input$current2===void 0?void 0:_this$input$current2.checkValidity)==="function"){inputValid=this.input.current.checkValidity()}var valueInvalid=!value;if(typeof value==="boolean"||typeof value==="number"){valueInvalid=false}var error=!inputValid||required&&valueInvalid;if(!error&&typeof checkValidity==="function")error=!checkValidity(value);else if(pattern)error=!new RegExp(pattern,"i").test(value);if(!required&&!value)error=false;if(error){var _this$input$current3;var errorMessage=this.extractString(this.props.errorMessage);(_this$input$current3=this.input.current)===null||_this$input$current3===void 0||_this$input$current3.setCustomValidity(errorMessage)}return error}},{key:"onInvalid",value:function onInvalid(){var _this$props3=this.props,name=_this$props3.name,required=_this$props3.required;var value=this.state.value;if(!required&&!value)return;this.setState({error:true},function(){return eventHandler.dispatch("invalid."+name,_defineProperty({},name,value))})}},{key:"onChange",value:function onChange(e){var _this3=this;var value=e.target.value;var error=this.isInvalid(value);this.setState({value:value,error:error,pristine:false,dirty:true},function(){return _this3.returnData()})}},{key:"onUpdate",value:function onUpdate(updateObj){var _this4=this;var value=updateObj.value,options=updateObj.options,error=updateObj.error,reset=updateObj.reset,clear=updateObj.clear;var newState={};if(typeof value!=="undefined"){newState.value=value!==null?value:this.props["default"];newState.dirty=newState.value===this.props["default"];newState.pristine=newState.value!==this.props["default"]}if(options)newState.options=options;if(typeof error==="boolean"){newState.error=error;var message="";if(error)message=this.extractString(this.props.errorMessage);this.input.current.setCustomValidity(message)}if(clear){newState.value=newState.value||this.props["default"];return this.setState(newState)}if(reset){newState.value=newState.value||this.props["default"];this._reset=true;return this.setState(newState,this.returnData)}this.setState(newState,function(){if(value===undefined)return;clearTimeout(_this4.timeoutRevalidate);_this4.timeoutRevalidate=setTimeout(function(){//if (this.state.dirty) this.input.current.reportValidity();
var error=_this4.isInvalid(value);if(_this4.state.error!==error)_this4.setState({error:error})},300)})}},{key:"type",get:function get(){return this.props.type}},{key:"inputProps",get:function get(){var _this$props4=this.props,disabled=_this$props4.disabled,readOnly=_this$props4.readOnly,accept=_this$props4.accept,minLength=_this$props4.minLength,required=_this$props4.required,name=_this$props4.name,controlClasses=_this$props4.controlClasses,maxLength=_this$props4.maxLength,list=_this$props4.list,prePlaceholder=_this$props4.placeholder,step=_this$props4.step,noValidate=_this$props4.noValidate,multiple=_this$props4.multiple,autoComplete=_this$props4.autoComplete,min=_this$props4.min,max=_this$props4.max,pattern=_this$props4.pattern,dir=_this$props4.dir,_this$props4$_propsCo=_this$props4._propsControl,_propsControl=_this$props4$_propsCo===void 0?{}:_this$props4$_propsCo,hidden=_this$props4.hidden;var _this$state=this.state,value=_this$state.value,error=_this$state.error;var cn=["form-control"];if(controlClasses)cn.push(controlClasses);if(error)cn.push("is-invalid");if(autoComplete===false){var autocomplete="off";var list1="autocompleteOff"}var placeholder=!!prePlaceholder?this.extractString(prePlaceholder):null;return _objectSpread({id:name,name:name,autoComplete:autocomplete||autoComplete,list:list1||list,pattern:pattern,placeholder:placeholder,hidden:hidden,required:required,type:this.type,value:value,className:cn.flat().join(" "),min:min,max:max,step:step,noValidate:noValidate,disabled:disabled,readOnly:readOnly,ref:this.input,dir:dir,accept:accept,multiple:multiple,maxLength:maxLength,minLength:minLength,onChange:this.onChange,onInvalid:this.onInvalid,onFocus:this.onFocus},_propsControl)}},{key:"labelNode",get:function get(){var _this$props5=this.props,placeholder=_this$props5.placeholder,required=_this$props5.required,name=_this$props5.name,labelClasses=_this$props5.labelClasses,inline=_this$props5.inline,label=_this$props5.label,disabled=_this$props5.disabled;var cn=["form-label",labelClasses];if(inline){cn.shift();cn.push("py-2")}var style={};if(disabled)style["opacity"]=.9;var labelNode=/*#__PURE__*/React.createElement("label",{className:cn.flat().join(" "),htmlFor:name,style:style},label?label:placeholder,required&&/*#__PURE__*/React.createElement("b",{title:"Este campo es indispensable",className:"text-inherit"}," *"));return labelNode}},{key:"inputNode",get:function get(){var inputNode=/*#__PURE__*/React.createElement("input",_objectSpread({},this.inputProps));return inputNode}},{key:"errorMessageNode",get:function get(){var errorMessage=this.props.errorMessage;var error=this.state.error;var errorNode=/*#__PURE__*/React.createElement("p",{className:"m-1 lh-1"},/*#__PURE__*/React.createElement("small",{className:"text-danger"},errorMessage));return error&&errorMessage&&errorNode}},{key:"messageNode",get:function get(){var _this$props6=this.props,message=_this$props6.message,messageClasses=_this$props6.messageClasses;var cnm=["m-1 lh-1"];if(messageClasses)cnm.push(messageClasses);var node=/*#__PURE__*/React.createElement("p",{className:cnm.flat().join(" ")},/*#__PURE__*/React.createElement("small",{},message));return message&&node}},{key:"content",value:function content(){var children=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props.children;var _this$props7=this.props,inline=_this$props7.inline,first=_this$props7.first,placeholder=_this$props7.placeholder,label=_this$props7.label,floating=_this$props7.floating,inlineControlClasses=_this$props7.inlineControlClasses;var cn=["position-relative"];if(inline)cn.push("d-flex align-items-center");if(placeholder&&!label&&floating)cn.push("form-floating");var wrapProps={};var className=cn.flat().join(" ");if(this.ContentWrap!==Fragment)wrapProps.className=className;return/*#__PURE__*/React.createElement(React.Fragment,{},/*#__PURE__*/React.createElement(this.ContentWrap,_objectSpread({},wrapProps),floating&&first==="label"&&label&&this.labelNode,inline?/*#__PURE__*/React.createElement("div",{className:inlineControlClasses},this.inputNode,this.errorMessageNode,this.messageNode):this.inputNode,floating&&(first!=="label"||placeholder&&!label)&&this.labelNode,!inline&&/*#__PURE__*/React.createElement(React.Fragment,{},this.errorMessageNode,this.messageNode),children))}}])}(Component);_defineProperty(Field,"jsClass","Field");_defineProperty(Field,"propTypes",_objectSpread(_objectSpread({},Component.propTypes),{},{accept:PropTypes.string,autoComplete:PropTypes.oneOfType([PropTypes.string,PropTypes.bool]),checkValidity:PropTypes.func,controlClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.arrayOf(PropTypes.string)]),"default":PropTypes.any,disabled:PropTypes.bool,errorMessage:PropTypes.oneOfType([PropTypes.string,PropTypes.bool,PropTypes.node]),first:PropTypes.oneOf(["label","control"]),floating:PropTypes.bool,hidden:PropTypes.bool,inline:PropTypes.bool,inlineControlClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.arrayOf(PropTypes.string)]),label:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),labelClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.arrayOf(PropTypes.string)]),max:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),message:PropTypes.oneOfType([PropTypes.string,PropTypes.bool,PropTypes.node]),messageClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.arrayOf(PropTypes.string)]),min:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),multiple:PropTypes.bool,noValidate:PropTypes.bool,pattern:PropTypes.string,placeholder:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),readOnly:PropTypes.bool,required:PropTypes.bool,step:PropTypes.oneOfType([PropTypes.string,PropTypes.number]),type:PropTypes.string.isRequired,value:PropTypes.any,options:PropTypes.arrayOf(PropTypes.shape({disabled:PropTypes.bool,divider:PropTypes.bool,label:PropTypes.oneOfType([PropTypes.string,PropTypes.node,PropTypes.bool,PropTypes.object]),value:PropTypes.any}))}));_defineProperty(Field,"defaultProps",_objectSpread(_objectSpread({},Component.defaultProps),{},{type:"text","default":"",value:"",first:"label",floating:true}));export{Field as default};;
//# sourceMappingURL=field.js.map