esaron-react-dynamic-data-table/dist/js/react-dynamic-data-table.min.js

Dynamic data table wrapping fixed-data-table.

"use strict";function _objectWithoutProperties(obj,keys){var target={};for(var i in obj)keys.indexOf(i)>=0||Object.prototype.hasOwnProperty.call(obj,i)&&(target[i]=obj[i]);return target}var _extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key])}return target},_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},$=require("jquery"),React=require("react"),PropTypes=React.PropTypes,FDT=require("fixed-data-table"),Table=FDT.Table,Column=FDT.Column,Cell=FDT.Cell,FormControl=require("react-bootstrap/lib/FormControl"),DatePicker=require("react-datepicker"),Link=require("esaron-react-link"),RestCombobox=require("esaron-react-rest-combobox"),PaginationControls=React.createClass({displayName:"PaginationControls",getInitialState:function(){return{pageNumber:this.props.initialPageNumber,rowsPerPage:this.props.initialRowsPerPage,blankDisplay:!1,options:this.getInitialOptions()}},getDefaultProps:function(){return{initialPageNumber:1,initialRowsPerPage:10,rowsPerPageOptions:[10,25,50],onGoFirst:function(){},onGoLast:function(){},onGoNext:function(){},onGoPrevious:function(){},onSubmit:function(pageNumber){},onRowsPerPageChange:function(rowsPerPage){}}},getInitialOptions:function(){var options=[];return this.props.rowsPerPageOptions.forEach(function(rowsPerPage){options.push(React.createElement("option",{key:rowsPerPage,value:rowsPerPage},rowsPerPage))}),options},render:function(){var t=this;return React.createElement("div",null,React.createElement("div",{className:"rowsPerPage"},React.createElement("select",{value:this.state.rowsPerPage,onChange:function(event){var value=Number(event.target.value);t.setState({rowsPerPage:value,pageNumber:1}),t.props.onRowsPerPageChange(value)}},t.state.options)),React.createElement("div",{className:"pageControls"},React.createElement(Link,{id:t.props.id+"-first-page",className:"firstPageIcon",onClick:function(){t.setState({pageNumber:1}),t.props.onGoFirst()}}),React.createElement(Link,{id:t.props.id+"-previous-page",className:"previousPageIcon",onClick:function(){t.state.pageNumber>1&&t.setState({pageNumber:t.state.pageNumber-1}),t.props.onGoPrevious()}}),React.createElement("form",{onSubmit:function(event){t.props.onSubmit(t.state.pageNumber),event.preventDefault()},style:{display:"inline-block",margin:0}},React.createElement("input",{type:"text",value:t.state.blankDisplay?"":t.state.pageNumber,onChange:function(event){var display=event.target.value,value=Number(display);""===display&&t.setState({blankDisplay:!0}),value>0&&value<=t.props.totalPages&&t.setState({pageNumber:value,blankDisplay:!1})},style:{width:"30px",textAlign:"center"}})),React.createElement("span",null," / ",t.props.totalPages?t.props.totalPages:"?"," "),React.createElement(Link,{id:t.props.id+"-next-page",className:"nextPageIcon",onClick:function(){t.state.pageNumber<t.props.totalPages&&t.setState({pageNumber:t.state.pageNumber+1}),t.props.onGoNext()}}),React.createElement(Link,{id:t.props.id+"-last-page",className:"lastPageIcon",onClick:function(){t.props.totalPages&&t.setState({pageNumber:t.props.totalPages}),t.props.onGoLast()}})))}}),DynamicDataTable=React.createClass({displayName:"DynamicDataTable",_state:{},_data:[],_columns:[],_onColumnResizeEndCallback:function(newColumnWidth,columnKey){var targetIdx=-1;$.each(this._state.columnFormats,function(idx,columnFormat){columnFormat.id===columnKey&&(targetIdx=idx)}),this._state.columnFormats[targetIdx].width=newColumnWidth,this.refresh(!0)},_sort:function(){var t=this,sortedData=t._data.slice(),targetIdx=-1;return $.each(this._state.columnFormats,function(idx,columnFormat){(!columnFormat.sortField&&columnFormat.id===t._state.sortField||columnFormat.sortField===t._state.sortField)&&(targetIdx=idx)}),sortedData.sort(function(a,b){var sortFieldA=a[t._state.sortField]||"",sortFieldB=b[t._state.sortField]||"",columnFormat=t._state.columnFormats[targetIdx];return columnFormat.sortFcn?columnFormat.sortFcn(sortFieldA,sortFieldB,t._state.sortDir):t.props.sortFcn(sortFieldA,sortFieldB,t._state.sortDir)}),sortedData},_setFilterValue:function(columnId,filterValue,idx){idx?(Array.isArray(this._state.filters[columnId])||(this._state.filters[columnId]=[]),this._state.filters[columnId][idx]=filterValue):this._state.filters[columnId]=filterValue,this.constructPage()},_cycleSortDir:function(){this._state.sortDir?"asc"===this._state.sortDir?this._state.sortDir="desc":"desc"===this._state.sortDir?this._state.sortDir=void 0:(console.error("Unrecognized sortDir '"+this._state.sortDir+"'. Resetting to unsorted."),this._state.sortDir=void 0):this._state.sortDir="asc"},_onSortClick:function(e,sortField){e.preventDefault(),this._state.sortField!==sortField?(this._state.sortField=sortField,this._state.sortDir="asc"):this._cycleSortDir(),this.refresh(!this._state.serverSideOperations)},propTypes:{errorMsg:PropTypes.string,formatSubmitData:PropTypes.func,initialColumnFormats:PropTypes.arrayOf(PropTypes.object).isRequired,initialData:PropTypes.oneOfType([PropTypes.object,PropTypes.arrayOf(PropTypes.object)]),initialFilterValue:PropTypes.string,initialPage:PropTypes.number,initialRowsPerPage:PropTypes.number,initialSortDir:PropTypes.string,initialSortField:PropTypes.string,restParams:PropTypes.object,restUrl:PropTypes.string,submitUrl:PropTypes.string,useScrolling:PropTypes.bool},getDefaultProps:function(){return{initialData:[],initialPage:1,initialRowsPerPage:10,rowsPerPageOptions:[10,25,50],serverSideOperations:!1,sortFcn:function(a,b,sortDir){var comparison=a.toLowerCase().localeCompare(b.toLowerCase());return 0===comparison&&(comparison=a.localeCompare(b)),"desc"===sortDir&&(comparison=-comparison),comparison},isColumnResizing:!1,sortable:!0}},getInitialState:function(){var t=this,totalRecords=void 0,totalPages=void 0;!t.restUrl&&t.props.initialData.length>0&&(totalRecords=t.props.initialData.length,totalPages=t.calculateTotalPages(totalRecords,t.props.initialRowsPerPage),t._data=t.props.initialData);var filters={};return $.each(t.props.initialColumnFormats,function(idx,columnFormat){filters[columnFormat.id]=columnFormat.initialFilterValue}),this._state={rowsPerPage:t.props.initialRowsPerPage,totalRecords:totalRecords,totalPages:totalPages,pageNumber:t.props.initialPage,sortField:t.props.initialSortField,columnFormats:t.props.initialColumnFormats,sortDir:t.props.initialSortDir,headerHeight:t.props.headerHeight,filters:filters,loading:!1,error:!1,onSubmit:function(){var deferred=$.Deferred(),submitData=t._data;return t.props.formatSubmitData&&(submitData=t.props.formatSubmitData(t._data)),t.currentRequest&&t.currentRequest.abort(),t.currentRequest=$.ajax({url:t.props.submitUrl,type:"PUT",contentType:"application/json",data:JSON.stringify(submitData),success:function(data){console.log("Successfully submitted data to '"+t.props.submitUrl+"'"),deferred.resolve("Success")},error:function(err){console.error("Data submission to '"+t.props.submitUrl+"' failed"),deferred.reject("Error: "+err)},complete:function(){t.currentRequest=null}}),deferred.promise()}},t.props.restUrl&&t.props.initialData.length>0&&(console.error("Both restUrl and initialData have been provided to dynamic-data-table. The value for initialData is being ignored."),t.props.initialData=[]),t._state.data=t.getPageData(t._data),t._state},getInitialDimensions:function(){return{width:this.props.width||0,height:this.props.height||0}},resetDimensions:function(){var dimensions=this.getInitialDimensions();this._state.width=dimensions.width,this._state.height=dimensions.height},loadData:function(){var t=this,deferred=$.Deferred(),params=t.props.restParams;return t.props.serverSideOperations&&!t.props.useScrolling&&(params.pageNumber=t._state.pageNumber,params.rowsPerPage=t._state.rowsPerPage),t.currentRequest&&t.currentRequest.abort(),t.currentRequest=$.get(t.props.restUrl,params),t.currentRequest.done(function(response){var data=void 0;data="object"===("undefined"==typeof response?"undefined":_typeof(response))?response:JSON.parse(response),Array.isArray(data)?t._data=data:(t._data=data.records,t._state.totalRecords=data.totalRecords,t.props.useScrolling||(t._state.totalPages=t.calculateTotalPages())),t._state.totalRecords||t.props.serverSideOperations||(t._state.totalRecords=t._data.length,t._state.totalPages=t.calculateTotalPages()),deferred.resolve(response)}),t.currentRequest.fail(function(err){console.error("Failed to load data from '"+t.props.restUrl),deferred.reject(err)}),t.currentRequest.always(function(){t.currentRequest=null}),deferred.promise()},getPageData:function(){var t=this,data=t._data;if(t._state.sortDir&&t._state.sortField&&(data=t._sort()),$.each(t._state.filters,function(columnId,filterValue){if(filterValue){var filterFcn=void 0;if(Array.isArray(filterValue)){var from=filterValue[0].valueOf(),to=filterValue[1].valueOf();filterFcn=function(row){var rowValue=row[columnId];return rowValue>=from&&to>=rowValue}}else{var filterValueType="undefined"==typeof filterValue?"undefined":_typeof(filterValue);"number"!==filterValueType&&(filterValue=filterValue.valueOf(),filterValueType="undefined"==typeof filterValue?"undefined":_typeof(filterValue)),filterFcn=function(row){var rowValueType=_typeof(row[columnId]);return"string"===rowValueType&&"string"===filterValueType?row[columnId].toLowerCase().includes(filterValue.toLowerCase()):"number"===rowValueType&&"number"===filterValueType?row[columnId]===filterValue:void 0}}data=data.filter(filterFcn)}}),!t.props.serverSideOperations&&!t.props.useScrolling){var startIdx=(t._state.pageNumber-1)*t._state.rowsPerPage,endIdx=startIdx+t._state.rowsPerPage;data=data.slice(startIdx,endIdx)}return data},goFirst:function(){this._state.pageNumber>1&&(this._state.pageNumber=1,this.refresh(!this._state.serverSideOperations))},goLast:function(){this.goToPage(this._state.totalPages)},goNext:function(){this.goToPage(this._state.pageNumber+1)},goPrevious:function(){this._state.pageNumber>1&&(this._state.pageNumber--,this.refresh(!this._state.serverSideOperations))},goToPage:function(pageNumber){var t=this,previousPage=void 0,previousData=void 0;pageNumber>0&&(!t._state.totalPages||pageNumber!==t._state.pageNumber&&pageNumber<=t._state.totalPages)&&(previousPage=t._state.pageNumber,previousData=t._state.data,t._state.pageNumber=pageNumber,$.when(t.refresh(!this._state.serverSideOperations)).then(function(){0===t._state.data.length&&(t._state.pageNumber=previousPage,t._state.data=previousData,t.refresh(!0))}))},updateRowsPerPage:function(rowsPerPage){rowsPerPage!==this._state.rowsPerPage&&rowsPerPage>0&&rowsPerPage<=this.props.rowsPerPageOptions[this.props.rowsPerPageOptions.length-1]&&(this._state.rowsPerPage=rowsPerPage,this._state.pageNumber=1,this._state.totalPages=this.calculateTotalPages(),this.refresh(!this._state.serverSideOperations))},calculateTotalPages:function(totalRecords,rowsPerPage){return totalRecords||(totalRecords=this._state.totalRecords),rowsPerPage||(rowsPerPage=this._state.rowsPerPage),Math.ceil(totalRecords/rowsPerPage)},calculateBodyHeight:function(){return this.props.rowHeight*this.state.rowsPerPage},calculateHeight:function(){var height=this.state.headerHeight+this.calculateBodyHeight()+2;return this.props.footerHeight&&(height+=this.props.footerHeight),height},constructColumns:function(){var t=this;t._columns=[],$.each(t._state.columnFormats,function(columnIndex,columnFormat){columnFormat.origHeader||(columnFormat.origHeader=columnFormat.header);var columnId=columnFormat.id,columnFormatter=columnFormat.formatter,sortIcon="";t.props.width||(t._state.width+=columnFormat.width);var columnSortField=columnFormat.sortField||columnFormat.id,header=columnFormat.origHeader;if(columnFormat.sortable&&(t._state.sortField===columnSortField&&("asc"===t._state.sortDir?sortIcon=" ↓":"desc"===t._state.sortDir&&(sortIcon=" ↑")),header=React.createElement("a",{className:"block link",onClick:function(e){t._onSortClick(e,columnSortField)}},columnFormat.origHeader,sortIcon)),columnFormat.filterType){t._state.headerHeight===t.props.headerHeight&&(t._state.headerHeight=t._state.headerHeight+34);var filter=void 0,handleChange=function(e){t._setFilterValue(columnFormat.id,e.target.value)};"text"===columnFormat.filterType?filter=React.createElement(FormControl,{id:t.props.id+"-"+columnFormat.id+"-text",key:t.props.id+"-"+columnFormat.id+"-text",type:"text",value:t._state.filters[columnFormat.id],placeholder:"Enter Text",onChange:handleChange}):"select"===columnFormat.filterType?filter=React.createElement(FormControl,{id:t.props.id+"-"+columnFormat.id+"-select",key:t.props.id+"-"+columnFormat.id+"-select",componentClass:"select",onChange:handleChange},React.createElement("option",{value:""}),columnFormat.filterOptions.map(function(option){return React.createElement("option",{key:option.value,value:option.value},option.label)})):"combobox"===columnFormat.filterType?filter=React.createElement(RestCombobox,{id:t.props.id+"-"+columnFormat.id+"-combobox",key:t.props.id+"-"+columnFormat.id+"-combobox",className:"form-control",placeholder:"Enter Text",showYearDropdown:!0,onSelect:function(value){t._setFilterValue(columnFormat.id,value)},initialValue:t._state.filters[columnFormat.id],restUrl:columnFormat.filterRestUrl,queryFcn:columnFormat.queryFcn,formatFcn:function(value){var data={};return data[columnFormat.id]=value,columnFormat.formatter(data,t)}}):"date"===columnFormat.filterType?filter=React.createElement(DatePicker,{id:t.props.id+"-"+columnFormat.id+"-date",key:t.props.id+"-"+columnFormat.id+"-date",className:"form-control",placeholderText:"Select Date",showYearDropdown:!0,onChange:function(e){t._setFilterValue(columnFormat.id,e)},selected:t._state.filters[columnFormat.id]}):"daterange"===columnFormat.filterType?filter=React.createElement("div",{className:"daterange-filter"},React.createElement(DatePicker,{id:t.props.id+"-"+columnFormat.id+"-daterange-from",key:t.props.id+"-"+columnFormat.id+"-daterange-from",className:"form-control",placeholderText:"From Date",showYearDropdown:!0,onChange:function(e){t._setFilterValue(columnFormat.id,e,0)},selected:t._state.filters[columnFormat.id][0]}),React.createElement(DatePicker,{id:t.props.id+"-"+columnFormat.id+"-daterange-to",key:t.props.id+"-"+columnFormat.id+"-daterange-to",className:"form-control",placeholderText:"To Date",showYearDropdown:!0,onChange:function(e){t._setFilterValue(columnFormat.id,e,1)},selected:t._state.filters[columnFormat.id][1]})):console.error("Unknown filter type."),header=React.createElement("div",{className:"fullBlock"},header,filter)}columnFormat.header=React.createElement(Cell,null,header);var content=void 0,className=void 0,width=0;t._columns.push(React.createElement(Column,_extends({key:columnId,columnKey:columnId,cell:function(cellData){if(t._state.loading||t._state.error){if(0!==columnIndex)return null;className="preLoadCell",width=t._state.width,content=t._state.error?t.props.errorMsg?t.props.errorMsg:"Unable to load data. If this keeps happening, there may be an issue with the server, and you should contact your support representative.":React.createElement(Link,{id:t.props.id+"-loading-icon",className:"loading"})}else className="dataCell",columnFormat.cellClass&&(className=className+" "+columnFormat.cellClass),content=columnFormatter?columnFormatter(t._state.data[cellData.rowIndex],t):t._state.data[cellData.rowIndex][columnId],columnFormat.editable&&(content=React.createElement("input",{type:"text",id:columnId+cellData.rowIndex,value:content,onChange:function(event){var value=event.target.value;this.setState({value:value}),t._state.data[cellData.rowIndex][columnId]=value}}));return React.createElement(Cell,{key:columnId+cellData.rowIndex,className:className,width:width},content)}},columnFormat)))})},constructPage:function(){this.resetDimensions(),this._state.data=this.getPageData(),this.constructColumns(),this.setState(this._state)},refresh:function(skipReload){var t=this,deferred=$.Deferred();return!skipReload&&t.props.restUrl?(t._state.loading=!0,t._state.error=!1,$.when(t.loadData()).then(function(result){t._state.loading=!1,t.constructPage(),deferred.resolve(result)},function(err){var aborted="abort"===err.statusText;t._state.loading=aborted,t._state.error=!aborted,t.constructPage(),deferred.reject(err)})):deferred.resolve("Using local data."),t.constructPage(),deferred.promise()},componentDidMount:function(){this.refresh()},componentWillUnmount:function(){this.currentRequest&&this.currentRequest.abort()},render:function(){var t=this,refreshButton=void 0,submitButton=void 0,pageNav=void 0,dimensions={};t.props.restUrl&&(refreshButton=React.createElement(Link,{id:t.props.id+"-refresh",className:"reloadIcon",tooltip:"Refresh table",onClick:function(){t.refresh()}})),t.props.submitUrl&&(submitButton=React.createElement(Link,{id:t.props.id+"-submit",showLabel:!0,label:"Submit",onClick:function(event){t.state.onSubmit(event),event.preventDefault()}})),t.props.useScrolling||(pageNav=React.createElement(PaginationControls,{initialPageNumber:t.state.pageNumber,initialRowsPerPage:t.state.rowsPerPage,rowsPerPageOptions:t.props.rowsPerPageOptions,totalPages:t.state.totalPages,onGoFirst:t.goFirst,onGoLast:t.goLast,onGoNext:t.goNext,onGoPrevious:t.goPrevious,onSubmit:t.goToPage,onRowsPerPageChange:t.updateRowsPerPage})),t.props.width||(dimensions.width=t.state.width||0),t.props.height||(dimensions.height=t.calculateHeight()||0);var _t$props=t.props,headerHeight=_t$props.headerHeight,rowHeight=_t$props.rowHeight,childProps=_objectWithoutProperties(_t$props,["headerHeight","rowHeight"]),rowsCount=t.state.data.length,className="dataTable";return t.props.className&&(className+=" "+t.props.className),(t.state.loading||t.state.error)&&(rowHeight=t.calculateBodyHeight(),rowsCount=1,className+=" dataTablePreload"),React.createElement("div",{id:t.props.id,className:className,style:{width:dimensions.width,height:dimensions.height+20}},React.createElement(Table,_extends({rowsCount:rowsCount,onColumnResizeEndCallback:t._onColumnResizeEndCallback,headerHeight:t.state.headerHeight||headerHeight,rowHeight:rowHeight},dimensions,childProps),t._columns),React.createElement("div",{className:"dataTableFooter"},React.createElement("div",{className:"paginationWrapper"},pageNav),React.createElement("div",{className:"operationsWrapper"},submitButton,refreshButton)))}});module.exports=DynamicDataTable;