dbl-components/lib/js/tables/table.js

Framework based on bootstrap 5

var _excluded=["classes"],_excluded2=["mutations"];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 _objectWithoutProperties(e,t){if(null==e)return{};var o,r,i=_objectWithoutPropertiesLoose(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(i[o]=e[o])}return i}function _objectWithoutPropertiesLoose(r,e){if(null==r)return{};var t={};for(var n in r)if({}.hasOwnProperty.call(r,n)){if(-1!==e.indexOf(n))continue;t[n]=r[n]}return t}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 _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 _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 _createForOfIteratorHelper(r,e){var t="undefined"!=typeof Symbol&&r[Symbol.iterator]||r["@@iterator"];if(!t){if(Array.isArray(r)||(t=_unsupportedIterableToArray(r))||e&&r&&"number"==typeof r.length){t&&(r=t);var _n=0,F=function F(){};return{s:F,n:function n(){return _n>=r.length?{done:!0}:{done:!1,value:r[_n++]}},e:function e(r){throw r},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,u=!1;return{s:function s(){t=t.call(r)},n:function n(){var r=t.next();return a=r.done,r},e:function e(r){u=!0,o=r},f:function f(){try{a||null==t["return"]||t["return"]()}finally{if(u)throw o}}}}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 _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 PropTypes from"prop-types";import React,{createRef}from"react";import{eventHandler,deepMerge,t,formatValue,resolveRefs,splitAndFlat}from"dbl-utils";import{ptClasses}from"../prop-types";import fields from"../forms/fields";import Icons from"../media/icons";import Action from"../actions/action";import JsonRender from"../json-render";import Component from"../component";import FloatingContainer from"../containers/floating-container/floating-container";/**
 * @typedef {Object} FormatOptions
 * @property {string} [format] - Formato para fechas y horas.
 * @property {boolean} [locale] - Si se debe considerar la zona horaria local.
 * @property {string} [currency] - Código de moneda para el formato de moneda.
 * @property {string} ['true'] - Representación en cadena de un valor booleano `true`.
 * @property {string} ['false'] - Representación en cadena de un valor booleano `false`.
 *//**
 * Objeto con funciones de formateo para diferentes tipos de datos.
 * 
 * @namespace
 * @property {function(any, Object, Object, Object, string): React.Component} component - Formatea los datos a un componente.
 * @property {function(any, FormatOptions=): string} date - Formatea los datos a una fecha.
 * @property {function(any, FormatOptions=): string} datetime - Formatea los datos a un datetime.
 * @property {function(any, FormatOptions=): string} currency - Formatea los datos a una moneda.
 * @property {function(any, FormatOptions=): string} number - Formatea los datos a un número.
 * @property {function(any, Object): string} boolean - Formatea los datos a un booleano.
 */export var FORMATS={/**
   * Formatea los datos en crudo a un componente.
   *
   * @function
   * @param {any} raw - Los datos en crudo que deben ser formateados.
   * @param {Object} props - Propiedades del componente.
   * @param {Object} data - Datos de la celda.
   * @param {Object} jsonRender - Instancia de JsonRender.
   * @param {String} colName - Nombre de la columna.
   * @returns {React.Component} El componente formateado.
   */component:function component(raw,rawprops,data,jsonRender,colName){var props=resolveRefs(rawprops,{data:data});if(props.type==="boolean"){props.value=!!raw}else{props.value=raw}props.name=[props.name].flat().filter(Boolean).join("-")+".cell";props.id=data.id;props.data=data;props.columnName=colName;return jsonRender.buildContent(props)},/**
   * Formatea los datos en crudo a una fecha.
   *
   * @function
   * @param {any} raw - Los datos en crudo que deben ser formateados.
   * @param {Object} options - Opciones de formato de la fecha.
   * @returns {String} La fecha formateada.
   */date:function date(raw){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return typeof raw!=="string"?params.empty||"":formatValue(raw,Object.assign(params,{format:"date"}))},/**
   * Formatea los datos en crudo a un datetime.
   *
   * @function
   * @param {any} raw - Los datos en crudo que deben ser formateados.
   * @param {Object} options - Opciones de formato del datetime.
   * @returns {String} El datetime formateado.
   */datetime:function datetime(raw){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return typeof raw!=="string"?params.empty||"":formatValue(raw,Object.assign(params,{format:"datetime"}))},time:function time(raw){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return typeof raw!=="string"?params.empty||"":formatValue(raw,Object.assign(params,{format:"time"}))},/**
   * Formatea los datos en crudo a una moneda.
   *
   * @function
   * @param {any} raw - Los datos en crudo que deben ser formateados.
   * @param {Object} options - Opciones de formato de la moneda.
   * @returns {String} La moneda formateada.
   */currency:function currency(raw){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return typeof raw!=="number"?params.empty||"":formatValue(raw,Object.assign(params,{format:"currency"}))},/**
   * Formatea los datos en crudo a un número.
   *
   * @function
   * @param {any} raw - Los datos en crudo que deben ser formateados.
   * @param {Object} options - Opciones de formato del número.
   * @returns {String} El número formateado.
   */number:function number(raw){var params=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};return typeof raw!=="number"?params.empty||"":formatValue(raw,Object.assign(params,{format:"number"}))},/**
   * Formatea los datos en crudo a un booleano.
   *
   * @function
   * @param {any} raw - Los datos en crudo que deben ser formateados.
   * @param {Object} options - Opciones de formato del booleano.
   * @returns {String} El booleano formateado.
   */"boolean":function boolean(raw,_ref){var _ref$true=_ref["true"],True=_ref$true===void 0?"Yes":_ref$true,_ref$false=_ref["false"],False=_ref$false===void 0?"Not":_ref$false;return raw?True:False}};/**
 * Agrega nuevas plantillas de formato al objeto FORMATS.
 *
 * Esta función utiliza `Object.assign` para fusionar las plantillas proporcionadas en el objeto FORMATS existente.
 * Esto significa que si una plantilla con el mismo nombre ya existe en FORMATS, la nueva plantilla la sobrescribirá.
 *
 * @function
 * @param {Object} newTemplates - Un objeto que contiene plantillas de formato a agregar. Las claves son los nombres de las plantillas y los valores son las funciones de formato.
 * @returns {void}
 * @example
 * 
 * addFormatTemplates({
 *   newFormat: (raw, options) => { ... },
 *   anotherFormat: (raw, options) => { ... }
 * });
 */export var addFormatTemplates=function addFormatTemplates(){var newTemplates=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};Object.assign(FORMATS,newTemplates)};/**
 * Componente de celda de encabezado para una tabla.
 *
 * @class HeaderCell
 * @extends {React.Component}
 */export var HeaderCell=/*#__PURE__*/function(_React$Component){function HeaderCell(props){var _this;_classCallCheck(this,HeaderCell);_this=_callSuper(this,HeaderCell,[props]);_defineProperty(_this,"state",{searchActive:false});/**
   * Manejador de eventos para cambios en el filtro.
   * @param {Object} data - Los datos del evento.
   */_defineProperty(_this,"onChangeFilter",function(data){var filter=_this.props.col.filter;var searchActive=!!(Array.isArray(data[filter.name])?data[filter.name].length:data[filter.name]);_this.setState({searchActive:searchActive});eventHandler.dispatch(_this.props.tableName,data)});_this.events=[];_this.ref=/*#__PURE__*/createRef();return _this}/**
   * Método de ciclo de vida de React que se llama cuando el componente se ha montado.
   * Se suscribe a eventos relevantes para este componente.
   */_inherits(HeaderCell,_React$Component);return _createClass(HeaderCell,[{key:"componentDidMount",value:function componentDidMount(){var col=this.props.col;if(col.filter){this.events.push([col.filter.name,this.onChangeFilter]);this.events.push(["update."+col.filter.name,this.onUpdateFilter.bind(this)])}var _iterator=_createForOfIteratorHelper(this.events),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var event=_step.value;eventHandler.subscribe.apply(eventHandler,_toConsumableArray(event))}}catch(err){_iterator.e(err)}finally{_iterator.f()}}/**
   * Método de ciclo de vida de React que se llama cuando el componente se actualiza.
   * Restablece la dirección de la clasificación si la clasificación se ha eliminado.
   * @param {Object} prevProps - Las propiedades anteriores del componente.
   * @param {Object} prevState - El estado anterior del componente.
   */},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!this.props.sort&&this.state.sortDir)this.setState({sortDir:null})}/**
   * Método de ciclo de vida de React que se llama cuando el componente está a punto de desmontarse.
   * Cancela la suscripción a todos los eventos a los que se suscribió en componentDidMount.
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){var _iterator2=_createForOfIteratorHelper(this.events),_step2;try{for(_iterator2.s();!(_step2=_iterator2.n()).done;){var event=_step2.value;eventHandler.unsubscribe(event[0])}}catch(err){_iterator2.e(err)}finally{_iterator2.f()}}},{key:"onUpdateFilter",value:function onUpdateFilter(_ref2){var value=_ref2.value,reset=_ref2.reset;if(value!==undefined){var searchActive=!!(Array.isArray(value)?value.length:value);this.setState({searchActive:searchActive})}if(reset){this.setState({searchActive:false})}}/**
   * Realiza la acción de ordenar las celdas en el encabezado.
   * @param {string} dir - La dirección en la que se va a realizar la ordenación.
   */},{key:"sort",value:function sort(dir){var _this$props=this.props,onSort=_this$props.onSort,col=_this$props.col;var sortDir=this.state.sortDir;var newDir=dir;if(sortDir===newDir)newDir=null;this.setState({sortDir:newDir});var dispatchData=_defineProperty({},col.name,newDir);if(typeof onSort==="function")onSort(newDir?dispatchData:null);eventHandler.dispatch("order."+this.props.tableName,dispatchData)}/**
   * Renderiza el componente.
   * @returns {React.Component} El componente renderizado.
   */},{key:"render",value:function render(){var _col$filter,_this2=this;var _this$props2=this.props,col=_this$props2.col,classes=_this$props2.classes,icons=_this$props2.icons,orderable=_this$props2.orderable,vertical=_this$props2.vertical,headerClasses=_this$props2.headerClasses,orderClasses=_this$props2.orderClasses,orderActiveClasses=_this$props2.orderActiveClasses;var _this$state=this.state,sortDir=_this$state.sortDir,searchActive=_this$state.searchActive;var showOrder=typeof col.orderable!=="undefined"?col.orderable:orderable;var style={minWidth:col.width};var cn=["header position-relative flex-grow-1",col.type,col.name+"-header",col.classes,classes];if(!vertical)cn.push("w-100",col.hClasses,col.hHeadClasses);else cn.push("my-1 pe-2 d-inline-block",col.vClasses,col.vHeadClasses);var cnSearch=["search"];if(!!searchActive)cnSearch.push("active");else cnSearch.push("opacity-75");var oc=["",orderClasses];if(!sortDir)oc.push("opacity-50");var hClasses=["align-middle",col.name];if(headerClasses)hClasses.push(headerClasses);var odescc=["cursor-pointer"];var oascc=["cursor-pointer"];if(sortDir==="ASC"){odescc.push(orderActiveClasses);oascc.push("opacity-50")}if(sortDir==="DESC"){oascc.push(orderActiveClasses);odescc.push("opacity-50")}this.props.headerRefs[col.name]=this.ref;if((_col$filter=col.filter)!==null&&_col$filter!==void 0&&_col$filter.name){this.props.dropFilters[col.name]=/*#__PURE__*/React.createElement(FloatingContainer,{name:"".concat(col.name,"-").concat(this.props.tableName,"-floatingFilter"),floatAround:this.ref,active:false,placement:"bottom-start",allowedPlacements:["bottom-start","top-start","bottom-end","top-end"]},(typeof col.filter.showClear==="boolean"?col.filter.showClear:true)&&searchActive&&/*#__PURE__*/React.createElement(Action,{name:col.name+"Clear",classes:"btn-link btn-sm p-0",style:{top:5,position:"absolute",right:8,zIndex:4}},/*#__PURE__*/React.createElement(Icons,{icon:icons.clear,classes:"text-danger"})),/*#__PURE__*/React.createElement(fields[col.filter.component]||fields[col.filter.type]||fields.Field,col.filter))}var _actions=[col.filter&&/*#__PURE__*/React.createElement(Action,{tag:"div",classButton:false,name:"".concat(col.name,"-").concat(this.props.tableName,"-triggerFilter"),open:"".concat(col.name,"-").concat(this.props.tableName,"-floatingFilter"),classes:cnSearch.flat().filter(Boolean).join(" "),icon:icons.search,style:{minWidth:"1.2rem"}}),showOrder&&/*#__PURE__*/React.createElement("div",{className:oc.flat().filter(Boolean).join(" "),style:{fontSize:10}},/*#__PURE__*/React.createElement("span",{onClick:function onClick(e){return _this2.sort("ASC",e)}},/*#__PURE__*/React.createElement(Icons,{icon:icons.caretUp,className:odescc.flat().filter(Boolean).join(" ")})),/*#__PURE__*/React.createElement("span",{onClick:function onClick(e){return _this2.sort("DESC",e)}},/*#__PURE__*/React.createElement(Icons,{icon:icons.caretDown,className:oascc.flat().filter(Boolean).join(" ")})))];return/*#__PURE__*/React.createElement("th",{className:splitAndFlat(hClasses," ").join(" "),scope:"col",ref:this.ref,colSpan:col.colSpan,rowSpan:col.rowSpan},/*#__PURE__*/React.createElement("div",{className:(vertical?"":"d-flex")+" align-items-center gap-3"},/*#__PURE__*/React.createElement("div",{className:splitAndFlat(cn," ").join(" "),style:style},col.label),(col.filter||showOrder)&&React.createElement.apply(React,["div",{className:"d-flex align-items-center flex-shrink-1 justify-content-end gap-2 filter-order-container"+(vertical?" float-end my-2":"")}].concat(_actions))))}}])}(React.Component);/**
* Clase base para la tabla.
*
* Este componente es responsable de renderizar una tabla a partir de un conjunto de datos proporcionado.
* También proporciona funcionalidad para ordenar, filtrar y manejar eventos.
*
* @class Table
* @extends {Component}
*/_defineProperty(HeaderCell,"propTypes",{col:PropTypes.any,icons:PropTypes.any,orderable:PropTypes.bool,classes:PropTypes.oneOfType([PropTypes.string,PropTypes.object,PropTypes.arrayOf(PropTypes.string)]),headerClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.object,PropTypes.arrayOf(PropTypes.string)]),orderClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.object,PropTypes.arrayOf(PropTypes.string)]),orderActiveClasses:PropTypes.oneOfType([PropTypes.string,PropTypes.object,PropTypes.arrayOf(PropTypes.string)]),dropFilters:PropTypes.object.isRequired,headerRefs:PropTypes.object.isRequired,tableName:PropTypes.string,vertical:PropTypes.bool});_defineProperty(HeaderCell,"jsClass","HeaderColumn");_defineProperty(HeaderCell,"defaultProps",{});var Table=/*#__PURE__*/function(_Component){function Table(_props){var _this3;_classCallCheck(this,Table);_this3=_callSuper(this,Table,[_props]);// Events
/**
   * Handles sorting event.
   *
   * @method onSort
   * @param {Object} orderBy - An object representing the column to be sorted.
   * @memberof Table
   */_defineProperty(_this3,"onSort",function(orderBy){var onChange=_this3.props.onChange;_this3.setState({orderBy:orderBy&&Object.keys(orderBy).pop()});if(typeof onChange==="function")onChange({orderBy:orderBy})});/**
   * Handles cell events.
   *
   * @method onEventCell
   * @param {Object} dataRaw - Raw data of the event.
   * @memberof Table
   */_defineProperty(_this3,"onEventCell",function(dataRaw){var data={};for(var event in dataRaw){data[event.replace(/\.cell$/,"")]=dataRaw[event]}eventHandler.dispatch(_this3.props.name,data)});//------
/**
   * Maps HeaderCell components for each column.
   *
   * @method mapHeaderCell
   * @param {Array} args - The column properties.
   * @param {number} i - The index of the column.
   * @returns {React.Component} - A HeaderCell component.
   * @memberof Table
   */_defineProperty(_this3,"mapHeaderCell",function(_ref3,i){var _ref4=_slicedToArray(_ref3,2),key=_ref4[0],col=_ref4[1];var _this3$props=_this3.props,colClasses=_this3$props.colClasses,headerClasses=_this3$props.headerClasses,icons=_this3$props.icons,orderable=_this3$props.orderable,name=_this3$props.name,vertical=_this3$props.vertical,orderClasses=_this3$props.orderClasses,orderActiveClasses=_this3$props.orderActiveClasses;var orderBy=_this3.state.orderBy;col.name=col.name||key;col.label=_this3.jsonRender.buildContent(col.label);var props={col:col,orderable:orderable,classes:colClasses,headerClasses:headerClasses,icons:icons,onSort:_this3.onSort,sort:orderBy===col.name,tableName:name,orderClasses:orderClasses,orderActiveClasses:orderActiveClasses,dropFilters:_this3.state.dropFilters,headerRefs:_this3.state.headerRefs,vertical:vertical};return/*#__PURE__*/React.createElement(HeaderCell,_objectSpread({key:i+"-"+col.name},props))});/**
   * Provides properties for a row.
   *
   * @method rowProps
   * @param {Object} rowOrColumn - The data of the row or column.
   * @param {number} i - The index of the row or column.
   * @returns {Object} - Properties for the row.
   * @memberof Table
   */_defineProperty(_this3,"rowProps",function(rowOrColumn,i){var _this3$props2=_this3.props,name=_this3$props2.name,mapRowsFunc=_this3$props2.mapRows,vertical=_this3$props2.vertical;var id=vertical?rowOrColumn.name:rowOrColumn.id;var rowKey=!!id||id===0?i+"-"+id:i;var cnRow=["row-"+_this3.props.name,"row-"+(!!id||id===0?id:i)];var _ref5=typeof mapRowsFunc==="function"&&mapRowsFunc(name,rowOrColumn,i)||{},rowClasses=_ref5.classes,rowProps=_objectWithoutProperties(_ref5,_excluded);if(rowClasses)cnRow.push(rowClasses);return _objectSpread(_objectSpread({key:rowKey},rowProps),{},{className:splitAndFlat(cnRow," ").join(" ")})});/**
   * Maps cell components for each cell in a row.
   *
   * @method mapCell
   * @param {Object} rowData - The data of the row.
   * @param {Object} col - The properties of the column.
   * @param {number} i - The index of the cell.
   * @returns {React.Component} - A cell component.
   * @memberof Table
   */_defineProperty(_this3,"mapCell",function(rowData,col,i){var _this3$props3=_this3.props,mapCellsFunc=_this3$props3.mapCells,name=_this3$props3.name,colClasses=_this3$props3.colClasses,vertical=_this3$props3.vertical;var colName=col.name;var className=["cell",col.type,col.name+"-cell",col.classes,colClasses];if(vertical){className.push(col.vClasses,col.vCellClasses)}else{className.push(col.hClasses,col.hCellClasses)}var cellAttrs={className:className,style:vertical?_objectSpread({minWidth:col.width},col.style):_objectSpread({paddingRight:"var(--".concat(colName,"-").concat(name,"-Table)")},col.style),title:rowData[colName]!==undefined?rowData[colName].toString():null};var mutation=typeof mapCellsFunc==="function"&&mapCellsFunc(name,col.name,rowData,{cellAttrs:cellAttrs,fullColumn:col})||{};var formatOptions;if(col.formatOpts){deepMerge.setConfig({fix:function fix(target,source){return/*#__PURE__*/React.isValidElement(source)||/*#__PURE__*/React.isValidElement(target)?source:undefined}});formatOptions=deepMerge(_objectSpread({},col.formatOpts),mutation)}else{if(mutation.classes){var classes=mutation.classes;delete mutation.classes;cellAttrs.className.push(classes)}deepMerge.setConfig({fix:function fix(target,source){return/*#__PURE__*/React.isValidElement(source)||/*#__PURE__*/React.isValidElement(target)?source:undefined}});deepMerge(cellAttrs,mutation)}cellAttrs.className=splitAndFlat(cellAttrs.className," ").join(" ");var formater=FORMATS[col.format]||function(raw,opts){return(raw===""||typeof raw!=="string")&&opts.empty||t(raw,opts.context)};var cellData=typeof rowData[col.name]!=="undefined"?rowData[col.name]:true;var cell=/*#__PURE__*/React.createElement("div",_objectSpread({},cellAttrs),formater(cellData,formatOptions||col,rowData,_this3.jsonRender,colName));return colName==="id"?/*#__PURE__*/React.createElement("th",{key:i+"-"+colName,className:colName,scope:"row"},cell):/*#__PURE__*/React.createElement("td",{key:i+"-"+colName,className:vertical?splitAndFlat([colName,"row-"+(i-1)]," ").join(" "):colName},cell)});var mutations=_props.mutations,propsJ=_objectWithoutProperties(_props,_excluded2);_this3.jsonRender=new JsonRender(propsJ,mutations);_this3.state.dropFilters={};_this3.state.headerRefs={};return _this3}/**
   * Subscribes to the events when the component is mounted.
   *
   * @method componentDidMount
   * @memberof Table
   */_inherits(Table,_Component);return _createClass(Table,[{key:"componentDidMount",value:function componentDidMount(){var _this4=this;this.events=[];Object.entries(this.props.columns).forEach(function(_ref6){var _ref7=_slicedToArray(_ref6,2),key=_ref7[0],col=_ref7[1];// TODO: mejorar esto, filtrar el componente dropdown
// buscar una forma de que solo los componentes field carguen evento
if(col.format==="component"&&col.formatOpts.component!=="DropdownButtonContainer"){var event=[col.formatOpts.name+".cell",_this4.onEventCell];_this4.events.push(event);eventHandler.subscribe.apply(eventHandler,event)}})}/**
   * Unsubscribes from the events when the component is unmounted.
   *
   * @method componentWillUnmount
   * @memberof Table
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){var _iterator3=_createForOfIteratorHelper(this.events),_step3;try{for(_iterator3.s();!(_step3=_iterator3.n()).done;){var _step3$value=_slicedToArray(_step3.value,1),eventName=_step3$value[0];eventHandler.unsubscribe(eventName)}}catch(err){_iterator3.e(err)}finally{_iterator3.f()}}},{key:"content",value:/**
   * Renders the table content.
   *
   * @method content
   * @param {Array} children - Optional children to be rendered in the table.
   * @returns {React.Component} - The rendered table.
   * @memberof Table
   */function content(){var _this5=this;var children=arguments.length>0&&arguments[0]!==undefined?arguments[0]:this.props.children;var _this$props3=this.props,data=_this$props3.data,columns=_this$props3.columns,tableClasses=_this$props3.tableClasses,headerRows=_this$props3.headerRows,hover=_this$props3.hover,striped=_this$props3.striped,vertical=_this$props3.vertical,disabled=_this$props3.disabled,headerCustom=_this$props3.headerCustom,columnsCustom=_this$props3.columnsCustom,footerCustom=_this$props3.footerCustom,thead=_this$props3.thead,tbody=_this$props3.tbody;// Definir encabezado y pie de página si están presentes
var header,footer;if(Array.isArray(children)){var _children=_slicedToArray(children,2);header=_children[0];footer=_children[1]}// Construcción de las clases CSS para la tabla
var cn=["table"];if(striped)cn.push("table-striped");if(hover)cn.push("table-hover");if(tableClasses)cn.push(tableClasses);if(vertical)cn.push("vertical");if(disabled)cn.push("disabled");// Inicialización de los datos de la tabla según la disposición (vertical/horizontal)
var tableData=[];// Procesamiento de los datos para construir la estructura de la tabla
Object.entries(columns).forEach(function(_ref8,j){var _ref9=_slicedToArray(_ref8,2),key=_ref9[0],col=_ref9[1];var column=col.name?col:_objectSpread({name:key},col);if(vertical){if(!tableData[j])tableData[j]={cells:[],data:column};tableData[j].cells[0]=_this5.mapHeaderCell([key,column],0)}data.forEach(function(row,i){var k=vertical?i+1:i;var _ref10=vertical?[k,j]:[j,k],_ref11=_slicedToArray(_ref10,2),x=_ref11[0],y=_ref11[1];if(!tableData[y])tableData[y]={cells:[],data:row};tableData[y].cells[x]=_this5.mapCell(row,column,x)})});var cssHeaderVars=Object.entries(this.state.headerRefs).reduce(function(chv,_ref12){var _hRef$current;var _ref13=_slicedToArray(_ref12,2),colName=_ref13[0],hRef=_ref13[1];var foc=(_hRef$current=hRef.current)===null||_hRef$current===void 0?void 0:_hRef$current.querySelector(".filter-order-container");if(!foc)return chv;var colNameLabel=foc.parentElement.querySelector(".".concat(colName,"-header"));var pTotal=foc.parentElement.clientWidth-colNameLabel.clientWidth;chv["--".concat(colName,"-").concat(_this5.props.name,"-Table")]=pTotal+"px";return chv},{});// Renderización de la tabla con las estructuras de encabezado, cuerpo y pie de página
var finalTable=/*#__PURE__*/React.createElement("table",{className:splitAndFlat(cn," ").join(" "),style:_objectSpread({},cssHeaderVars)},React.createElement.apply(React,["thead",thead,header&&(/*#__PURE__*/React.createElement("tr",{},/*#__PURE__*/React.createElement("td",{colSpan:"1000"},/*#__PURE__*/React.createElement("div",{},header))))].concat(_toConsumableArray([headerCustom].flat().filter(Boolean)),[!vertical&&(!headerRows?/*#__PURE__*/React.createElement("tr",{},Object.entries(columns).map(this.mapHeaderCell)):headerRows.map(function(columnFix){return/*#__PURE__*/React.createElement("tr",{key:"thead"+Object.keys(columnFix).join(".")},Object.entries(columnFix).map(function(_ref14,icol){var _ref15=_slicedToArray(_ref14,2),cName=_ref15[0],fix=_ref15[1];var renderColumn;var colF=Object.values(columns).find(function(c){return c.name===cName});if(typeof fix==="string"||!colF){renderColumn=/*#__PURE__*/React.createElement(React.Fragment,{key:"custom"+icol},_this5.jsonRender.buildContent(fix))}else{renderColumn=fix===true?_this5.mapHeaderCell([cName,colF],icol):_this5.mapHeaderCell([cName,_objectSpread(_objectSpread({},colF),fix)],icol)}return renderColumn}))}))],_toConsumableArray([columnsCustom].flat().filter(Boolean)))),/*#__PURE__*/React.createElement("tbody",tbody,tableData.map(function(_ref16,i){var cells=_ref16.cells,data=_ref16.data;return/*#__PURE__*/React.createElement("tr",_objectSpread({},_this5.rowProps(data,i)),cells)})),(footer||footerCustom)&&React.createElement.apply(React,["tfoot",{}].concat(_toConsumableArray([footerCustom].flat().filter(Boolean)),[footer&&/*#__PURE__*/React.createElement("tr",{},/*#__PURE__*/React.createElement("td",{colSpan:"1000"},/*#__PURE__*/React.createElement("div",{},footer)))])));return Object.keys(this.state.dropFilters).length?React.createElement.apply(React,[React.Fragment,{},finalTable].concat(_toConsumableArray(Object.values(this.state.dropFilters)))):finalTable}}])}(Component);_defineProperty(Table,"jsClass","Table");_defineProperty(Table,"slots",["headerCustom","columnsCustom","footerCustom"]);_defineProperty(Table,"propTypes",_objectSpread(_objectSpread({},Component.propTypes),{},{colClasses:ptClasses,headerClasses:ptClasses,tableClasses:ptClasses,orderClasses:ptClasses,orderActiveClasses:ptClasses,columns:PropTypes.any,data:PropTypes.any,hover:PropTypes.any,icons:PropTypes.any,mapCells:PropTypes.any,mapRows:PropTypes.any,mutations:PropTypes.any,onChange:PropTypes.any,orderable:PropTypes.any,striped:PropTypes.any,vertical:PropTypes.bool,headerCustom:PropTypes.any,columnsCustom:PropTypes.any,footerCustom:PropTypes.any}));_defineProperty(Table,"defaultProps",_objectSpread(_objectSpread({},Component.defaultProps),{},{data:[],striped:true,hover:true,icons:{caretUp:"caret-up",caretDown:"caret-down",search:"search",clear:"x"},vertical:false,orderClasses:"",orderActiveClasses:"",thead:{},tbody:{}}));export{Table as default};
//# sourceMappingURL=table.js.map