dbl-components/lib/js/containers/panel-container/panel-container.js

Framework based on bootstrap 5

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _dblUtils=require("dbl-utils");var _complexComponent=_interopRequireWildcard(require("../../complex-component"));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 _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}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 _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 _slicedToArray(r,e){return _arrayWithHoles(r)||_iterableToArrayLimit(r,e)||_unsupportedIterableToArray(r,e)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(r,l){var t=null==r?null:"undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(null!=t){var e,n,i,u,a=[],f=!0,o=!1;try{if(i=(t=t.call(r)).next,0===l){if(Object(t)!==t)return;f=!1}else for(;!(f=(e=i.call(t)).done)&&(a.push(e.value),a.length!==l);f=!0);}catch(r){o=!0,n=r}finally{try{if(!f&&null!=t["return"]&&(u=t["return"](),Object(u)!==u))return}finally{if(o)throw n}}return a}}function _arrayWithHoles(r){if(Array.isArray(r))return r}function _toConsumableArray(r){return _arrayWithoutHoles(r)||_iterableToArray(r)||_unsupportedIterableToArray(r)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(r,a){if(r){if("string"==typeof r)return _arrayLikeToArray(r,a);var t={}.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?_arrayLikeToArray(r,a):void 0}}function _iterableToArray(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function _arrayWithoutHoles(r){if(Array.isArray(r))return _arrayLikeToArray(r)}function _arrayLikeToArray(r,a){(null==a||a>r.length)&&(a=r.length);for(var e=0,n=Array(a);e<a;e++)n[e]=r[e];return n}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 _superPropGet(t,o,e,r){var p=_get(_getPrototypeOf(1&r?t.prototype:t),o,e);return 2&r&&"function"==typeof p?function(t){return p.apply(e,t)}:p}function _get(){return _get="undefined"!=typeof Reflect&&Reflect.get?Reflect.get.bind():function(e,t,r){var p=_superPropBase(e,t);if(p){var n=Object.getOwnPropertyDescriptor(p,t);return n.get?n.get.call(arguments.length<3?e:r):n.value}},_get.apply(null,arguments)}function _superPropBase(t,o){for(;!{}.hasOwnProperty.call(t,o)&&null!==(t=_getPrototypeOf(t)););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 schema={view:{logoLink:{name:"$nameLogoLink",component:"Link",to:"/",content:{name:"$nameLogoImg",classes:"_classes",tag:"img"}},contentTop:{name:"$nameContentTop"},panelMenu:{name:"$namePanelMenu",component:"ListContainer",classes:"py-2 list-unstyled panel-menu",content:"$definitions/contentMenu"},toggleFixed:{name:"$nameToggleFixed",component:"Action",classes:"pin-fixed p-0 shadow-none border-top pt-2 rounded-0 im-toggle-fixed",style:{position:"sticky",bottom:0},content:{name:"$nameIconTF",component:"MenuItem",label:"Mantener abierto",icon:"expand-locked",classes:"$definitions/menuItemClasses"}}},definitions:{menuItemClasses:{".":"",link:"d-block p-2",badge:"bg-danger border-light",icon:"align-middle",label:""},contentMenu:{component:"MenuItem",activeClassName:"active",badge:"$itemBadge",icon:"$item/icon",label:"$item/label",to:"$item/to",name:"$itemName",classes:"$definitions/menuItemClasses",content:"$submenu"},itemContentMenu:{component:"MenuItem",activeClassName:"active",badge:"$itemBadge",icon:"$item/icon",label:"$item/label",to:"$item/to",name:"$subitemName",classes:"$definitions/menuItemClasses",content:null},submenu:{name:"$nameSubmenu",component:"ListContainer",classes:"list-unstyled panel-menu panel-submenu",content:"$definitions/itemContentMenu"}}};var PanelContainer=exports["default"]=/*#__PURE__*/function(_Component){function PanelContainer(props){var _this;_classCallCheck(this,PanelContainer);_this=_callSuper(this,PanelContainer,[props]);_defineProperty(_this,"onWindowResize",function(e){var mobile=e.target.innerWidth<_this.props.breakpoint;if(mobile){_this.onMouseEnter();_this.state.classSet.add("mobile");_this.state.classSet["delete"]("inset")}else{_this.onMouseLeave({force:true});_this.state.classSet["delete"]("mobile");if(_this.props.type==="reveal")_this.state.classSet.add("inset")}_this.onUpdate({mobile:mobile,open:!mobile},true)});_defineProperty(_this,"onChangeLocation",function(){if(_this.state.mobile&&_this.state.open){_this.onUpdate({open:false},true)}});_defineProperty(_this,"onToggleFixed",function(e){_this.onUpdate({fixed:!_this.state.fixed},true)});_defineProperty(_this,"onMouseEnter",function(e){if(!(e!==null&&e!==void 0&&e.force)&&(_this.state.mobile||_this.state.fixed))return;_this.state.classSet.add("expanded");_this.state.classSet["delete"]("close");_this.state.expanded=true;_this.forceUpdate()});_defineProperty(_this,"onMouseLeave",function(e){if(!(e!==null&&e!==void 0&&e.force)&&(_this.state.mobile||_this.state.fixed))return;_this.state.classSet["delete"]("expanded");_this.state.classSet.add("close");_this.state.expanded=false;_this.forceUpdate()});_defineProperty(_this,"onTouchStart",function(e){_this.touchstartX=e.changedTouches[0].screenX});_defineProperty(_this,"onTouchEnd",function(e){_this.touchendX=e.changedTouches[0].screenX;var diff=Math.abs(_this.touchendX-_this.touchstartX);if(diff<18)return;var action=_this.state.mobile?"open":"fixed";if(_this.touchendX<_this.touchstartX){_this.onUpdate(_defineProperty({},action,false),true)}if(_this.touchendX>_this.touchstartX){_this.onUpdate(_defineProperty({},action,true),true)}});_defineProperty(_this,"onUpdate",function(update,dispatch){var newState={};if(typeof update.mobile!=="undefined"){newState.mobile=update.mobile}if(typeof update.open!=="undefined"){newState.open=update.open}if(typeof update.fixed!=="undefined"){if(update.fixed)_this.onMouseEnter();else _this.onMouseLeave({force:true});newState.fixed=update.fixed}_this.setState(newState);if(dispatch){_dblUtils.eventHandler.dispatch(_this.props.name,_defineProperty({},_this.props.name,update))}});_this.events=[["update."+props.name,_this.onUpdate],[props.name+"ToggleFixed",_this.onToggleFixed],["location",_this.onChangeLocation.bind(_this)]];_this.eventHandlers={onMouseEnter:_this.onMouseEnter,onMouseLeave:_this.onMouseLeave,onTouchStart:_this.onTouchStart,onTouchEnd:_this.onTouchEnd};Object.assign(_this.state,_defineProperty({classSet:new Set(["close"]),expanded:false,fixed:false,open:true},props.name+"LogoLink",{to:props.link||"/"}));if(props.type==="reveal")_this.state.classSet.add("inset");return _this}_inherits(PanelContainer,_Component);return _createClass(PanelContainer,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.events.forEach(function(e){return _dblUtils.eventHandler.subscribe.apply(_dblUtils.eventHandler,_toConsumableArray(e))});window.addEventListener("resize",this.onWindowResize);clearTimeout(this.timeoutResize);this.timeoutResize=setTimeout(function(){return _this2.onWindowResize({target:window})},150)}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.events.forEach(function(_ref){var _ref2=_slicedToArray(_ref,1),eName=_ref2[0];return _dblUtils.eventHandler.unsubscribe(eName)});window.removeEventListener("resize",this.onWindowResize);clearTimeout(this.timeoutResize)}},{key:"mutations",value:function mutations(sn,s){var name=this.props.name;switch(sn){case name+"LogoImg":return this.state.expanded?{classes:"logo expanded",_props:{src:this.props.logo,width:this.props.width}}:{classes:"logo",_props:{src:this.props.icon,width:this.props.iconSize}};case name+"ContentTop":var active=!!this.props.contentTop;var content=active?this.jsonRender.buildContent(this.props.contentTop):null;return{active:active,content:content};case name+"IconTF":return{icon:this.state.fixed?"expand-unlocked":"expand-locked",label:this.state.fixed?"Permitir cerrar":"Mantener abierto",activeLabel:this.state.expanded,iconSize:this.props.iconSize};case name+"ToggleFixed":return{active:!this.state.mobile};default:break}if(sn.endsWith("Submenu")){return{active:this.state.expanded}}else if(sn.endsWith("SubItem")){var classes=s.classes;classes.link="d-block ps-4 p-2";return{iconSize:this.props.iconSize,activeLabel:this.state.expanded,exact:!this.state.expanded,classes:classes}}else if(s.component==="MenuItem"){return{iconSize:this.props.iconSize,activeLabel:this.state.expanded,exact:!this.state.expanded}}return this.state[sn]}},{key:"content",value:function content(){var children=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props.children;this.classes=Array.from(this.state.classSet).flat().join(" ");return _superPropGet(PanelContainer,"content",this,3)([children])}},{key:"render",value:function render(){var _this3=this;return this.state.open?/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,{},this.state.mobile&&/*#__PURE__*/_react["default"].createElement("div",{className:"panel-touchClose",onClick:function onClick(){return _this3.onUpdate({open:false},true)}}),_superPropGet(PanelContainer,"render",this,3)([])):/*#__PURE__*/_react["default"].createElement("div",{className:"panel-slide2open",ref:this.ref,onTouchStart:this.onTouchStart,onTouchEnd:this.onTouchEnd})}}])}(_complexComponent["default"]);_defineProperty(PanelContainer,"propTypes",_objectSpread(_objectSpread({},_complexComponent["default"].propTypes),{},{breakpoint:_propTypes["default"].string,contentTop:_propTypes["default"].object,icon:_propTypes["default"].string,iconSize:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number]),link:_propTypes["default"].string,logo:_propTypes["default"].string,type:_propTypes["default"].oneOf(["push","reveal"]),width:_propTypes["default"].oneOfType([_propTypes["default"].string,_propTypes["default"].number])}));_defineProperty(PanelContainer,"jsClass","PanelContainer");_defineProperty(PanelContainer,"defaultProps",_objectSpread(_objectSpread({},_complexComponent["default"].defaultProps),{},{schema:schema,definitions:{},breakpoint:540,iconSize:30,type:"push",width:200,menu:[],classes:{".":"",items:""},rules:_objectSpread(_objectSpread({},(0,_complexComponent.nameSuffixes)(["LogoLink","LogoImg","ContentTop","PanelMenu","ToggleFixed","IconTF"])),{},{"$itemName":["join","$item/name","Item"],"$subitemName":["join","$subItem/name","SubItem"],"$nameSubmenu":["join","$item/name","Submenu"],"$definitions/contentMenu":["iterate","$data/menu","item"],"$definitions/itemContentMenu":["iterate","$item/menu","item"],"$itemBadge":["ignore","$item/badge",null],"$submenu":["if","$item/menu","$definitions/submenu",null]})}));
//# sourceMappingURL=panel-container.js.map