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

Framework based on bootstrap 5

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _dblUtils=require("dbl-utils");var _component=_interopRequireDefault(require("../../component"));function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}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(var _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 _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)}var Field=exports["default"]=/*#__PURE__*/function(_Component){function Field(props){var _this;_classCallCheck(this,Field);_this=_callSuper(this,Field,[props]);_defineProperty(_this,"unique",(0,_dblUtils.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;_dblUtils.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__*/(0,_react.createRef)();return _this}_inherits(Field,_Component);return _createClass(Field,[{key:"componentDidMount",value:function componentDidMount(){_dblUtils.eventHandler.subscribe("update."+this.props.name,this.onUpdate,this.unique);_dblUtils.eventHandler.dispatch("ready."+this.props.name)}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.timeoutReturnData);clearTimeout(this.timeoutRevalidate);_dblUtils.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["default"].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(){_dblUtils.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 _dblUtils.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["default"].createElement("label",{className:cn.flat().join(" "),htmlFor:name,style:style},label?label:placeholder,required&&/*#__PURE__*/_react["default"].createElement("b",{title:"Este campo es indispensable",className:"text-inherit"}," *"));return labelNode}},{key:"inputNode",get:function get(){var inputNode=/*#__PURE__*/_react["default"].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["default"].createElement("p",{className:"m-1 lh-1"},/*#__PURE__*/_react["default"].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["default"].createElement("p",{className:cnm.flat().join(" ")},/*#__PURE__*/_react["default"].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!==_react.Fragment)wrapProps.className=className;return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,{},/*#__PURE__*/_react["default"].createElement(this.ContentWrap,_objectSpread({},wrapProps),floating&&first==="label"&&label&&this.labelNode,inline?/*#__PURE__*/_react["default"].createElement("div",{className:inlineControlClasses},this.inputNode,this.errorMessageNode,this.messageNode):this.inputNode,floating&&(first!=="label"||placeholder&&!label)&&this.labelNode,!inline&&/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,{},this.errorMessageNode,this.messageNode),children))}}])}(_component["default"]);_defineProperty(Field,"jsClass","Field");_defineProperty(Field,"propTypes",_objectSpread(_objectSpread({},_component["default"].propTypes),{},{accept:_propTypes["default"].string,autoComplete:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].bool]),checkValidity:_propTypes["default"].func,controlClasses:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].arrayOf(_propTypes["default"].string)]),"default":_propTypes["default"].any,disabled:_propTypes["default"].bool,errorMessage:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].bool,_propTypes["default"].node]),first:_propTypes["default"].oneOf(["label","control"]),floating:_propTypes["default"].bool,hidden:_propTypes["default"].bool,inline:_propTypes["default"].bool,inlineControlClasses:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].arrayOf(_propTypes["default"].string)]),label:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].node]),labelClasses:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].arrayOf(_propTypes["default"].string)]),max:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number]),message:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].bool,_propTypes["default"].node]),messageClasses:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].arrayOf(_propTypes["default"].string)]),min:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number]),multiple:_propTypes["default"].bool,noValidate:_propTypes["default"].bool,pattern:_propTypes["default"].string,placeholder:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].node]),readOnly:_propTypes["default"].bool,required:_propTypes["default"].bool,step:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number]),type:_propTypes["default"].string.isRequired,value:_propTypes["default"].any,options:_propTypes["default"].arrayOf(_propTypes["default"].shape({disabled:_propTypes["default"].bool,divider:_propTypes["default"].bool,label:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].node,_propTypes["default"].bool,_propTypes["default"].object]),value:_propTypes["default"].any}))}));_defineProperty(Field,"defaultProps",_objectSpread(_objectSpread({},_component["default"].defaultProps),{},{type:"text","default":"",value:"",first:"label",floating:true}));;
//# sourceMappingURL=field.js.map