catreact
Version:
Catavolt Core React Components
93 lines (92 loc) • 5.1 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
/**
* Created by rburson on 3/18/16.
*/
var React = require('react');
var catreact_1 = require('./../catreact');
/*
***************************************************
* Render a ListContext
***************************************************
*/
exports.CvListPanel = React.createClass({
mixins: [catreact_1.CvBaseMixin],
getDefaultProps: function () {
return {
paneRef: null,
formContext: null,
listContext: null,
navigationListeners: [],
selectionListener: null,
stateChangeListeners: [],
actionProvider: null
};
},
getInitialState: function () {
return { selectedItems: [] };
},
render: function () {
var _this = this;
/* We can't do ES7 style rest destructuring in Typescript yet... */
var listPaneProps = {
paneRef: this.props.paneRef,
formContext: this.props.formContext,
queryContext: this.props.listContext,
stateChangeListeners: this.props.stateChangeListeners,
actionProvider: this.props.actionProvider
};
return (React.createElement(catreact_1.CvListPane, __assign({}, listPaneProps, {recordPageSize: 50, queryRenderer: function (cvContext, callback) {
var listContext = cvContext.scopeCtx.scopeObj;
return (React.createElement("div", {className: "cv-list-container", onScroll: _this._magicScroll.bind(_this, callback)}, React.createElement("table", {className: "table table-striped"}, React.createElement("thead", null, React.createElement("tr", null, React.createElement("th", null), listContext.listDef.activeColumnDefs.map(function (colDef, index) {
return React.createElement("th", {key: index}, colDef.heading);
}))), React.createElement(catreact_1.CvRecordList, {queryContext: listContext, wrapperElemName: 'tbody', rowRenderer: function (cvContext, record) {
return (React.createElement(catreact_1.CvRecord, {entityRec: record, key: record.objectId, renderer: function (cvContext) {
var renderPropNames = listContext.listDef.activeColumnDefs.map(function (colDef) { return colDef.name; });
return (React.createElement(catreact_1.CvDataAnno, {entityRec: record, paneContext: listContext, wrapperElem: "tr"}, React.createElement("td", {className: "cv-list-cell"}, React.createElement("input", {type: "checkbox", onChange: _this._itemClicked.bind(_this, record.objectId)})), renderPropNames.map(function (name) {
//select "this record" so that the action can find the target via the selectionProvider
var selectionAdapter = new catreact_1.CvValueAdapter();
selectionAdapter.createValueListener()([record.objectId]);
var prop = record.propAtName(name);
return (React.createElement(catreact_1.CvAction, {actionId: listContext.listDef.defaultActionId, paneContext: listContext, navigationListeners: _this.props.navigationListeners, actionListeners: _this.props.actionListeners, stateChangeListeners: _this.props.stateChangeListeners, selectionProvider: selectionAdapter, key: prop.name, renderer: function (cvContext, callback) {
var styleInfo = catreact_1.CvDataAnno.generateStyleInfo(prop);
return (React.createElement(catreact_1.CvDataAnno, {dataAnnoStyle: styleInfo, paneContext: listContext, wrapperElem: "td", wrapperElemProps: { className: "cv-list-cell cv-target", onClick: callback.fireAction }}, React.createElement(catreact_1.CvProp, {propName: prop.name, entityRec: record, paneContext: listContext, imageClassName: "cv-image-list-item-max-size", overrideValue: styleInfo.overrideText})));
}}));
})));
}}));
}}))));
}})));
},
_isSelected: function (oid) {
return this.state.selectedItems.indexOf(oid) > -1;
},
_itemClicked: function (oid) {
var selectedItems = this.state.selectedItems;
var index = selectedItems.indexOf(oid);
if (index > -1) {
selectedItems.splice(index, 1);
}
else {
selectedItems.push(oid);
}
this.setState({ selectedItems: selectedItems });
if (this.props.selectionListener)
this.props.selectionListener(selectedItems);
},
_magicScroll: function (callback, e) {
var elem = e.currentTarget;
if (elem.scrollTop / (elem.scrollHeight - elem.clientHeight) > .95) {
if (callback.hasMoreForward()) {
callback.pageForward(function (num) {
});
}
}
}
});