"ext/CvDetailsPanel" | catreact-html

Index

Interfaces

Variables

CvDetailsPanel

CvDetailsPanel: ClassicComponentClass<CvDetailsPanelProps> = React.createClass<CvDetailsPanelProps, CvDetailsPanelState>({mixins: [CvBaseMixin],render: function () {return <CvDetailsPane {...this.props} detailsRenderer={(cvContext:CvContext,record:EntityRec, detailsCallback:CvDetailsPaneCallback)=>{const detailsContext:DetailsContext = cvContext.scopeCtx.scopeObj;return (<CvRecord entityRec={record} renderer={(cvContext:CvContext)=>{return (<div className="cv-detail-container">{(()=>{if(detailsContext.detailsDef.editable) {if(detailsContext.isReadMode) {return <div className="cv-detail-controls"><CvDetailsPanelControls onRefresh={this._refresh.bind(this, detailsCallback)}onEdit={this._openWriteMode.bind(this, detailsCallback)}/></div>} else if (detailsContext.isWriteMode){const cancelButtonText = detailsContext.detailsDef.cancelButtonText;const commitButtonText = detailsContext.detailsDef.commitButtonText;return <div className="cv-detail-controls"><CvDetailsPanelCommitCancelControls cancelButtonText={cancelButtonText}commitButtonText={commitButtonText}onCancel={this._openReadMode.bind(this, detailsCallback)}onCommit={this._save.bind(this, detailsCallback)}/></div>}} else {return null}})()}<div className="cv-detail-content"><table className="table table-striped"><tbody>{this._layoutDetailsPane(detailsContext, record, detailsCallback)}</tbody></table></div>{(()=>{const cancelButtonText = detailsContext.detailsDef.cancelButtonText;const commitButtonText = detailsContext.detailsDef.commitButtonText;return (detailsContext.detailsDef.editable && detailsContext.isWriteMode) ?<div className="cv-detail-controls cv-detail-controls-lower"><CvDetailsPanelCommitCancelControls cancelButtonText={cancelButtonText}commitButtonText={commitButtonText}onCancel={this._openReadMode.bind(this, detailsCallback)}onCommit={this._save.bind(this, detailsCallback)}/></div> : null;})()}</div>);}}/>);}}/>},_isSectionTitleDef: function (row) {return row.every((cellDef:CellDef)=>{ return cellDef.values.every((cellValueDef:CellValueDef)=>{return cellValueDef instanceof LabelCellValueDef;})});},_cellCount(rows:Array<Array<CellDef>>):number{return rows.reduce((prev, cellDefRow:Array<CellDef>)=>{const numCellValueDefs:number = cellDefRow.reduce((prev, cellDef:CellDef)=>{return cellDef.values ? prev + cellDef.values.length : prev;}, 0);return numCellValueDefs > prev ? numCellValueDefs : prev;}, 0);},_layoutDetailsPane: function (detailsContext:DetailsContext, record:EntityRec, detailsCallback:CvDetailsPaneCallback) {const renderedDetailRows = [];if(detailsContext) {const maxCellCount = this._cellCount(detailsContext.detailsDef.rows);detailsContext.detailsDef.rows.forEach((cellDefRow:Array<CellDef>, index)=> {const rowCellCount:number = cellDefRow.reduce((prev, cellDef:CellDef)=>{return cellDef.values ? prev + cellDef.values.length : prev;}, 0);const rowDiff = maxCellCount - rowCellCount;if (this._isSectionTitleDef(cellDefRow)) {renderedDetailRows.push(<CvDataAnno entityRec={record} paneContext={detailsContext} wrapperElem="tr" wrapperElemProps={{className:"cv-cell-def-title-row"}} key={index}>{(()=>{const renderedRow = cellDefRow.map((cellDef:CellDef, i1:number)=>{return cellDef.values.map((cellValueDef:CellValueDef, i2:number)=>{return <CvCellValueDef detailsContext={detailsContext} detailsCallback={detailsCallback} cellValueDef={cellValueDef}wrapperElem="td" wrapperElemProps={{className: 'cv-cell-def-title-col'}} key={i1 + '_' + i2}/>});});for(let i = 0; i < maxCellCount - rowCellCount; i++) { renderedRow.push([<td/>]); }return renderedRow;})()}</CvDataAnno>);} else {renderedDetailRows.push(<CvDataAnno entityRec={record} paneContext={detailsContext} wrapperElem="tr" wrapperElemProps={{className:"cv-cell-def-row"}} key={index}>{(()=>{let i = 0;return cellDefRow.map((cellDef:CellDef)=>{return cellDef.values.map((cellValueDef:CellValueDef)=>{i++;let colspan = 1;if((i == rowCellCount) && rowDiff > 0) {colspan = rowDiff + 1;}return <CvCellValueDef detailsContext={detailsContext} detailsCallback={detailsCallback} cellValueDef={cellValueDef}wrapperElem="td" wrapperElemProps={{className:'cv-cell-def-col', colSpan:colspan}} key={i}imageProducers={this._buildImageProducers(detailsContext, cellValueDef)}/>});});})()}</CvDataAnno>);}});}return renderedDetailRows;},_buildImageProducers(detailsContext:DetailsContext, cellValueDef:CellValueDef) {if (!this._isReadModeFor(detailsContext, cellValueDef)) {var imageProducers = [{// Pick a new file with the file chooser.prodImageCB: (listener: CvValueListener<Object>)=> { listener(new CvImagePackagePick()) },buttonClassName: CvImageDefaultAddButtonClass, includeWhenImageExists: true, includeWhenImageDoesNotExist: true,includeWhenImageIsDeleted: true},{// Delete existing imageprodImageCB: (listener: CvValueListener<Object>)=> { listener(new CvImagePackageDelete()) },buttonClassName: CvImageDefaultRemoveButtonClass, includeWhenImageExists: true, includeWhenImageDoesNotExist: false,includeWhenImageIsDeleted: false},{// Undo previous delete imageprodImageCB: (listener: CvValueListener<Object>)=> { listener(new CvImagePackageUndo()) },buttonClassName: CvImageDefaultUndoButtonClass, includeWhenImageExists: false, includeWhenImageDoesNotExist: false,includeWhenImageIsDeleted: true}];}return imageProducers;},_isReadModeFor(detailsContext:DetailsContext, cellValueDef:CellValueDef) {return cellValueDef instanceof AttributeCellValueDef && detailsContext.isReadModeFor((cellValueDef as AttributeCellValueDef).propertyName);},_openWriteMode: function(detailsCallback:CvDetailsPaneCallback) {detailsCallback.openWriteMode((success, error)=>{});},_openReadMode: function(detailsCallback:CvDetailsPaneCallback) {detailsCallback.openReadMode((success, error)=>{});},_refresh: function(detailsCallback:CvDetailsPaneCallback) {detailsCallback.refresh();},_save: function(detailsCallback:CvDetailsPaneCallback) {detailsCallback.saveChanges((success, error)=>{});}})

Renders a Details Panel, styled by CSS

CvDetailsPanelCommitCancelControls

CvDetailsPanelCommitCancelControls: ClassicComponentClass<object> = React.createClass<{cancelButtonText:string,commitButtonText:string, onCancel:()=>{}, onCommit:()=>{}}, {}>({render: function() {const {cancelButtonText, commitButtonText, onCancel, onCommit} = this.props;return <div className="text-right"><button className="btn btn-default" onClick={onCancel}>{cancelButtonText ? <span style={{marginRight:'10px'}}>{cancelButtonText}</span> : null}<span className="glyphicon glyphicon-remove" aria-hidden="true"/></button><button className="btn btn-default" onClick={onCommit}>{commitButtonText ? <span style={{marginRight:'10px'}}>{commitButtonText}</span> : null}<span className="glyphicon glyphicon-ok" aria-hidden="true"/></button></div>}})

CvDetailsPanelControls

CvDetailsPanelControls: ClassicComponentClass<object> = React.createClass<{onRefresh:()=>{}, onEdit:()=>{}}, {}>({render: function() {return <div className="text-right"><button className="btn btn-default" onClick={this.props.onRefresh}><span className="glyphicon glyphicon-refresh" aria-hidden="true"/></button><button className="btn btn-default" onClick={this.props.onEdit}><span className="glyphicon glyphicon-edit" aria-hidden="true"/></button></div>}})