dbl-components/lib/js/react-router-schema/with-route-wrapper.js

Framework based on bootstrap 5

"use strict";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)}Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _react=_interopRequireWildcard(require("react"));var _reactRouterDom=require("react-router-dom");var _dblUtils=require("dbl-utils");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 _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}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 _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 _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 _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}/**
 * Wrapper component to manage class names and styles in the body element
 * based on the current route and its props.
 * @param {Object} WrappedComponent - The component to wrap (Controller).
 * @param {Object} route - The current route object containing name, style, and other properties.
 * @returns {JSX.Element} - The wrapped component with added functionality.
 */var withRouteWrapper=function withRouteWrapper(WrappedComponent,route){return function RouteWrapper(props){var location=(0,_reactRouterDom.useLocation)();var navigate=(0,_reactRouterDom.useNavigate)();var params=(0,_reactRouterDom.useParams)();var timeoutRef=(0,_react.useRef)(null);var _React$useReducer=_react["default"].useReducer(function(x){return x+1},0),_React$useReducer2=_slicedToArray(_React$useReducer,2),forceUpdate=_React$useReducer2[1];// 💥 Nos suscribimos a cambios de ruta para forzar re-render
(0,_react.useLayoutEffect)(function(){var callback=function callback(nlocation){clearTimeout(timeoutRef.current);timeoutRef.current=setTimeout(function(){if(nlocation.pathname!==location.pathname)forceUpdate()},50)};_dblUtils.eventHandler.subscribe("location",callback,"wrapper-"+props.name);return function(){_dblUtils.eventHandler.unsubscribe("location",callback,"wrapper-"+props.name)}},[]);// 🎨 Actualiza clases y estilos del body cada que cambia el pathname
(0,_react.useLayoutEffect)(function(){var viewClassName=Array.from(document.body.classList).find(function(cl){return cl.endsWith("-view")});if(viewClassName){document.body.classList.remove(viewClassName)}document.body.classList.add("".concat(route.name,"-view"));document.body.classList.forEach(function(cls){if(cls.startsWith("location-")){document.body.classList.remove(cls)}});document.body.classList.add("location".concat(location.pathname.replace(/\//g,"-")));if(!route.style)route.style={};route.style["--component-name"]="\"".concat(route.name,"\"");return function(){document.body.classList.remove("".concat(route.name,"-view"));document.body.classList.remove("location".concat(location.pathname.replace(/\//g,"-")))}},[location.pathname]);return/*#__PURE__*/_react["default"].createElement(WrappedComponent,_extends({},props,{location:location,navigate:navigate,match:params,route:route}))}};var _default=exports["default"]=withRouteWrapper;
//# sourceMappingURL=with-route-wrapper.js.map