dbl-components/lib/js/containers/offcanvas/offcanvas.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 _offcanvas=_interopRequireDefault(require("bootstrap/js/dist/offcanvas"));var _dblUtils=require("dbl-utils");var _jsonRender=_interopRequireDefault(require("../../json-render"));var _component=_interopRequireDefault(require("../../component"));var _propTypes2=require("../../prop-types");function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":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 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 _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:{headerOffcanvas:{name:["$props/name","headerOffcanvas"],tag:"header",classes:"offcanvas-header",content:{titleOffcanvas:{name:["$props/name","titleOffcanvas"],tag:"$mutations/tagTitleOffcanvas",classes:"offcanvas-title",_props:{id:["$props/name","titleOffcanvas"]}},closeOffcanvas:{name:["$props/name","closeOffcanvas"],component:"Action",classButton:false,classes:"btn-close",_props:{"data-bs-dismiss":"offcanvas","aria-label":"Close"}},contentHO:{name:["$props/name","contentHO"],tag:"div"}}},bodyOffcanvas:{name:["$props/name","bodyOffcanvas"],tag:"div",classes:"flex-grow-1 offcanvas-body"},footerOffcanvas:{name:["$props/name","footerOffcanvas"],tag:"footer",classes:"flex-shrink-1 offcanvas-footer offcanvas-body"},contentOffcanvas:{name:["$props/name","contentOffcanvas"],tag:"div"}},definitions:{}};/**
 * OffcanvasContainer component to manage and display an offcanvas UI element.
 * @extends Component
 */var OffcanvasContainer=exports["default"]=/*#__PURE__*/function(_Component){/**
   * Constructor to initialize the component with given properties.
   * @param {object} props - The properties passed to the component.
   */function OffcanvasContainer(props){var _this;_classCallCheck(this,OffcanvasContainer);_this=_callSuper(this,OffcanvasContainer,[props]);/**
   * HTML tagName, This variable is used by the parent Class.
   * @type {string}
   * @SuppressWarnings unused
   * @override
   */// NOSONAR
_defineProperty(_this,"tag","aside");/**
   * CSS classes for the offcanvas container, used by the parent Class.
   * @type {string}
   * @SuppressWarnings unused
   * @override
   */// NOSONAR
_defineProperty(_this,"classes","offcanvas d-flex flex-column");// Children elements categorized by type
_defineProperty(_this,"children",{header:[],body:[],footer:[],content:[]});/**
   * Event handler for offcanvas events.
   * @param {Event} e - The event object.
   */_defineProperty(_this,"onEvent",function(e){var name=_this.props.name;_dblUtils.eventHandler.dispatch(name,_defineProperty({},name,e.type.split(".")[0]))});/**
   * Event handler for updating the offcanvas visibility.
   * @param {object} param - The update parameters.
   * @param {boolean} param.open - Whether to show or hide the offcanvas.
   */_defineProperty(_this,"onUpdateOffcanvas",function(_ref){var showOffcanvas=_ref.open;if(showOffcanvas!==undefined){var _this$offcanvas;if(showOffcanvas)return _this.setState({showOffcanvas:showOffcanvas});if(!_this.offcanvas){_this.offcanvas=_offcanvas["default"].getInstance(_this.ref.current)}(_this$offcanvas=_this.offcanvas)===null||_this$offcanvas===void 0||_this$offcanvas.hide();setTimeout(function(){return _this.setState({showOffcanvas:showOffcanvas})},350);return}});/**
   * Destroy the offcanvas instance.
   */_defineProperty(_this,"destroy",function(){if(_this.offcanvas){_this.offcanvas.dispose();_this.offcanvas=null}_this.setState({showOffcanvas:false})});/**
   * Callback to initialize the offcanvas reference.
   * @param {HTMLElement} refOriginal - The original reference element.
   */_defineProperty(_this,"onOffcanvasRef",function(refOriginal){if(refOriginal){_this.ref.current=refOriginal;var ref=refOriginal;_this.offcanvas=_offcanvas["default"].getOrCreateInstance(ref,_this.props.offcanvas);_this.bsEvents.forEach(function(event){ref.addEventListener(event+".bs.offcanvas",_this.onEvent,false)});ref.addEventListener("hidden.bs.offcanvas",_this.destroy,false);if(_this.state.showOffcanvas)_this.offcanvas.show()}});_this.onOffcanvasRef=_this.onOffcanvasRef.bind(_this);// Bootstrap events to manage offcanvas lifecycle
_this.bsEvents=["show","shown","hide","hidden","hidePrevented"];// Initial state
Object.assign(_this.state,{showOffcanvas:_this.props.open,localClasses:"offcanvas-"+props.position});// Resolve schema references and initialize JsonRender
_this.schema=(0,_dblUtils.resolveRefs)(schema.view,{definitions:schema.definitions,props:props});_this.jsonRender=new _jsonRender["default"](props,_this.mutations.bind(_this));return _this}/**
   * Override componentProps to include necessary attributes and refs. Used by the parent Class.
   * @override
   * @SuppressWarnings unused
   */_inherits(OffcanvasContainer,_Component);return _createClass(OffcanvasContainer,[{key:"componentProps",get:function get(){var props=this.props._props||{};return _objectSpread({tabIndex:-1,id:this.name,"aria-labelledby":this.props.name+"-titleOffcanvas",ref:this.onOffcanvasRef},props)}// Lifecycle method: componentDidMount
},{key:"componentDidMount",value:function componentDidMount(){var name=this.props.name;_dblUtils.eventHandler.subscribe("update."+name,this.onUpdateOffcanvas,this.name);this.deleteClasses("offcanvas-start offcanvas-end offcanvas-top offcanvas-bottom");this.addClasses("offcanvas-"+this.props.position)}// Lifecycle method: componentWillUnmount
},{key:"componentWillUnmount",value:function componentWillUnmount(){var name=this.props.name;this.destroy();_dblUtils.eventHandler.unsubscribe("update."+name,this.name)}},{key:"headerContent",get:/**
   * Get the header content.
   * @returns {Array} - The header content.
   */function get(){return!!this.children.header.length&&this.children.header}/**
   * Get the body content.
   * @returns {Array} - The body content.
   */},{key:"bodyContent",get:function get(){return!!this.children.body.length&&this.children.body}/**
   * Get the footer content.
   * @returns {Array} - The footer content.
   */},{key:"footerContent",get:function get(){return!!this.children.footer.length&&this.children.footer}/**
   * Get the content for the offcanvas.
   * @returns {Array} - The offcanvas content.
   */},{key:"contentOffcanvas",get:function get(){return!!this.children.content.length&&this.children.content}/**
   * Method to categorize and render children elements. Used by the parent Class
   * @override
   * @param {Array|object} children - The children elements to categorize and render.
   * @SuppressWarnings unused
   * @returns {JSX.Element} - The rendered content.
   */},{key:"content",value:function content(){var children=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props.children;this.children=(Array.isArray(children)?children:[children]).reduce(function(reducer,child){var _child$props;if(!child)return reducer;// Categorize content based on type: header, body, footer, or general content
if(["string","number","boolean"].includes(_typeof(child))){reducer.body.push(child);return reducer}var childCondition=!((_child$props=child.props)!==null&&_child$props!==void 0&&(_child$props=_child$props.style)!==null&&_child$props!==void 0&&_child$props["--component-name"]);var childConf=(childCondition?child:child.props.children).props;var container=childConf&&reducer[childConf.container]||reducer.content;container.push(child);return reducer},{header:[],body:[],footer:[],content:[]});return this.jsonRender.buildContent(this.schema)}/**
   * Render the offcanvas container.
   * @returns {JSX.Element} - The rendered offcanvas container.
   */},{key:"render",value:function render(){return this.state.showOffcanvas?_superPropGet(OffcanvasContainer,"render",this,3)([]):/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment)}/**
   * Function to apply specific mutations based on the name and configuration.
   * @param {string} name - The name to determine which mutation to apply.
   * @param {object} conf - The configuration object for the mutation.
   * @returns {(boolean|object)} - Returns an object with mutation properties or false if no mutation is applied.
   */},{key:"mutations",value:function mutations(name,conf){var rn=name.replace(this.props.name+"-","");switch(rn){case"headerOffcanvas":{return{active:this.props.showClose||!!this.props.label||!!this.headerContent,classes:[conf.classes,this.props.headerClasses]}}case"titleOffcanvas":{return{active:!!this.props.label,tag:this.props.labelTag,classes:[conf.classes,this.props.labelClasses],content:this.props.label}}case"closeOffcanvas":{return{active:this.props.showClose,classes:[conf.classes,this.props.closeClasses]}}case"contentHO":{return{active:!!this.headerContent,tag:_react["default"].Fragment,content:this.headerContent}}case"bodyOffcanvas":{return{active:!!this.bodyContent,classes:[conf.classes,this.props.bodyClasses],content:this.bodyContent}}case"footerOffcanvas":{return{active:!!this.footerContent,classes:[conf.classes,this.props.footerClasses],content:this.footerContent}}case"contentOffcanvas":{return{active:!!this.contentOffcanvas,tag:_react["default"].Fragment,content:this.contentOffcanvas}}default:break}return false}}])}(_component["default"]);// Static property to define the class name
_defineProperty(OffcanvasContainer,"jsClass","OffcanvasContainer");_defineProperty(OffcanvasContainer,"propTypes",_objectSpread(_objectSpread({},_component["default"].propTypes),{},{bodyClasses:_propTypes2.ptClasses,closeClasses:_propTypes2.ptClasses,footerClasses:_propTypes2.ptClasses,headerClasses:_propTypes2.ptClasses,labelClasses:_propTypes2.ptClasses,label:_propTypes["default"].node,labelTag:_propTypes["default"].string,offcanvas:_propTypes["default"].object,position:_propTypes["default"].oneOf(["start","end","top","bottom"]),showClose:_propTypes["default"].bool}));// Default properties for the OffcanvasContainer component
_defineProperty(OffcanvasContainer,"defaultProps",_objectSpread(_objectSpread({},_component["default"].defaultProps),{},{bodyClasses:"",closeClasses:"",footerClasses:"",headerClasses:"",labelClasses:"",labelTag:"h5",offcanvas:{},position:"start",// Possible values: start, end, bottom, top
showClose:true}));
//# sourceMappingURL=offcanvas.js.map