catreact
Version:
Catavolt Core React Components
467 lines (466 loc) • 30 kB
JavaScript
/**
* Created by rburson on 3/18/16.
*/
"use strict";
var React = require('react');
var catreact_core_1 = require('./../core/catreact-core');
var catavolt_sdk_1 = require('catavolt-sdk');
var catreact_ext_1 = require('./catreact-ext');
/**
* Renders a FormContext, utilizing a series of composite, component renderers
* These may be overriden via {@link CvFormComponentProvider}
*/
exports.CvFormPanel = React.createClass({
mixins: [catreact_core_1.CvBaseMixin],
componentDidMount: function () {
},
getChildContext: function () {
var ctx = this.getDefaultChildContext();
ctx.cvContext.scopeCtx.scopeObj = this.formContext();
return ctx;
},
getDefaultProps: function () {
return {
formContext: null,
navigationListeners: [],
actionListeners: [],
navTarget: null,
layoutOverrideElem: null,
stateChangeListeners: [],
formComponentProvider: null
};
},
render: function () {
var formContext = this.formContext();
if (formContext) {
if (this.props.renderer) {
return this.props.renderer(this.getChildContext().cvContext);
}
else {
var defaultProvider = this._getDefaultFormComponentProvider();
return React.createElement(catreact_core_1.CvForm, {formContext: this.formContext(), stateChangeListeners: this.props.stateChangeListeners, childFormComponentRenderer: defaultProvider.getChildFormComponentRenderer(), detailsComponentRenderer: defaultProvider.getDetailsComponentRenderer(), listComponentRenderer: defaultProvider.getListComponentRenderer(), mapComponentRenderer: defaultProvider.getMapComponentRenderer(), graphComponentRenderer: defaultProvider.getGraphComponentRenderer(), calendarComponentRenderer: defaultProvider.getCalendarComponentRenderer(), barcodeScanComponentRenderer: defaultProvider.getBarcodeScanComponentRenderer(), imagePickerComponentRenderer: defaultProvider.getImagePickerComponentRenderer(), geoFixComponentRenderer: defaultProvider.getGeoFixComponentRenderer(), geoLocationComponentRenderer: defaultProvider.getGeoLocationComponentRenderer(), formRenderer: defaultProvider.getFormRenderer()});
}
}
else {
return null;
}
},
customFormComponentProvider: function () {
return this.props.formComponentProvider;
},
formContext: function () {
return this.props.formContext || this.firstInScope(catavolt_sdk_1.FormContext);
},
_getDefaultFormComponentProvider: function () {
var _this = this;
//override this provider with a custom provider
var customProvider = this.customFormComponentProvider();
return {
getFormRenderer: function () {
return (customProvider && customProvider.getFormRenderer) ? customProvider.getFormRenderer() :
function (cvContext, childComponents) {
return _this._getFormLayoutComponent(childComponents);
};
},
getChildFormComponentRenderer: function () {
return (customProvider && customProvider.getChildFormComponentRenderer) ? customProvider.getChildFormComponentRenderer() :
(function (formContext, stateChangeListener) {
return React.createElement(exports.CvFormPanel, {formContext: formContext, navigationListeners: _this.props.navigationListeners, stateChangeListeners: [stateChangeListener], actionListeners: _this.props.actionListeners, layoutOverrideElem: _this.props.layoutOverrideElem});
});
},
getDetailsComponentRenderer: function () {
return (customProvider && customProvider.getDetailsComponentRenderer) ? customProvider.getDetailsComponentRenderer() :
(function (detailsContext, stateChangeListener) {
var menuDef = (detailsContext.menuDefs && detailsContext.menuDefs.length > 0) ? detailsContext.menuDefs[0].findContextMenuDef() : null;
var actionHandlerAdapter = new catreact_core_1.CvValueAdapter();
return React.createElement(exports.CvFormItemPanel, {paneContext: detailsContext, displayElement: React.createElement(catreact_ext_1.CvDetailsPanel, {detailsContext: detailsContext, navigationListeners: _this.props.navigationListeners, stateChangeListeners: [stateChangeListener], actionProvider: actionHandlerAdapter}), menuElement: React.createElement(catreact_ext_1.CvDropdownMenu, {paneContext: detailsContext, menuDef: menuDef, openLeft: true, navigationListeners: _this.props.navigationListeners, actionListeners: _this.props.actionListeners, stateChangeListeners: [stateChangeListener], actionHandler: actionHandlerAdapter.createValueListener(), navTarget: _this.props.navTarget})});
});
},
getGraphComponentRenderer: function () {
return (customProvider && customProvider.getGraphComponentRenderer) ? customProvider.getGraphComponentRenderer() :
(function (graphContext, stateChangeListener) {
var menuDef = (graphContext.menuDefs && graphContext.menuDefs.length > 0) ? graphContext.menuDefs[0].findContextMenuDef() : null;
var selectionAdapter = new catreact_core_1.CvValueAdapter();
var actionHandlerAdapter = new catreact_core_1.CvValueAdapter();
var menu = React.createElement(catreact_ext_1.CvDropdownMenu, {paneContext: graphContext, menuDef: menuDef, openLeft: true, navigationListeners: _this.props.navigationListeners, actionListeners: _this.props.actionListeners, stateChangeListeners: [stateChangeListener], navTarget: _this.props.navTarget, actionHandler: actionHandlerAdapter.createValueListener(), selectionProvider: selectionAdapter});
var panel = React.createElement(catreact_ext_1.CvGraphPanel, {graphContext: graphContext, navigationListeners: _this.props.navigationListeners, selectionListener: selectionAdapter.createValueListener(), actionProvider: actionHandlerAdapter, actionListeners: _this.props.actionListeners, stateChangeListeners: [stateChangeListener]});
return React.createElement(exports.CvFormItemPanel, {paneContext: graphContext, displayElement: panel, menuElement: menu});
});
},
getListComponentRenderer: function () {
return (customProvider && customProvider.getListComponentRenderer) ? customProvider.getListComponentRenderer() :
(function (listContext, stateChangeListener) {
var menuDef = (listContext.menuDefs && listContext.menuDefs.length > 0) ? listContext.menuDefs[0].findContextMenuDef() : null;
var selectionAdapter = new catreact_core_1.CvValueAdapter();
var actionHandlerAdapter = new catreact_core_1.CvValueAdapter();
var menu = React.createElement(catreact_ext_1.CvDropdownMenu, {paneContext: listContext, menuDef: menuDef, openLeft: true, navigationListeners: _this.props.navigationListeners, actionListeners: _this.props.actionListeners, stateChangeListeners: [stateChangeListener], navTarget: _this.props.navTarget, actionHandler: actionHandlerAdapter.createValueListener(), selectionProvider: selectionAdapter});
var panel = React.createElement(catreact_ext_1.CvListPanel, {listContext: listContext, navigationListeners: _this.props.navigationListeners, actionListeners: _this.props.actionListeners, selectionListener: selectionAdapter.createValueListener(), actionProvider: actionHandlerAdapter, stateChangeListeners: [stateChangeListener]});
return React.createElement(exports.CvFormItemPanel, {paneContext: listContext, displayElement: panel, menuElement: menu});
});
},
getMapComponentRenderer: function () {
return (customProvider && customProvider.getMapComponentRenderer) ? customProvider.getMapComponentRenderer() :
(function (mapContext, stateChangeListener) {
var menuDef = (mapContext.menuDefs && mapContext.menuDefs.length > 0) ? mapContext.menuDefs[0].findContextMenuDef() : null;
var selectionAdapter = new catreact_core_1.CvValueAdapter();
var actionHandlerAdapter = new catreact_core_1.CvValueAdapter();
var menu = React.createElement(catreact_ext_1.CvDropdownMenu, {paneContext: mapContext, menuDef: menuDef, openLeft: true, navigationListeners: _this.props.navigationListeners, actionListeners: _this.props.actionListeners, stateChangeListeners: [stateChangeListener], navTarget: _this.props.navTarget, actionHandler: actionHandlerAdapter.createValueListener(), selectionProvider: selectionAdapter});
var panel = React.createElement(catreact_ext_1.CvMapPanel, {mapContext: mapContext, navigationListeners: _this.props.navigationListeners, selectionListener: selectionAdapter.createValueListener(), actionProvider: actionHandlerAdapter, actionListeners: _this.props.actionListeners, stateChangeListeners: [stateChangeListener]});
return React.createElement(exports.CvFormItemPanel, {paneContext: mapContext, displayElement: panel, menuElement: menu});
});
},
/**
* Pending implementation
* @private
*/
getCalendarComponentRenderer: function () {
return (customProvider && customProvider.getCalendarComponentRenderer) ? customProvider.getCalendarComponentRenderer() :
(function (calendarContext, stateChangeListener) {
return React.createElement("h2", null, "There is not yet a default Calendar Implementation. You can provide one, if you like.");
});
},
/**
* Pending implementation
* @private
*/
getImagePickerComponentRenderer: function () {
return (customProvider && customProvider.getImagePickerComponentRenderer) ? customProvider.getImagePickerComponentRenderer() :
(function (imagePickerContext, stateChangeListener) {
return React.createElement("h2", null, "There is not yet a default ImagePicker Implementation. You can provide one, if you like.");
});
},
/**
* Pending implementation
* @private
*/
getBarcodeScanComponentRenderer: function () {
return (customProvider && customProvider.getBarcodeScanComponentRenderer) ? customProvider.getBarcodeScanComponentRenderer() :
(function (barcodeScanContext, stateChangeListener) {
return React.createElement("h2", null, "There is not yet a default BarcodeScan Implementation. You can provide one, if you like.");
});
},
/**
* Pending implementation
* @private
*/
getGeoFixComponentRenderer: function () {
return (customProvider && customProvider.getGeoFixComponentRenderer) ? customProvider.getGeoFixComponentRenderer() :
(function (geoFixContext, stateChangeListener) {
return React.createElement("h2", null, "There is not yet a default GeoFix Implementation. You can provide one, if you like.");
});
},
/**
* Pending implementation
* @private
*/
getGeoLocationComponentRenderer: function () {
return (customProvider && customProvider.getGeoLocationComponentRenderer) ? customProvider.getGeoLocationComponentRenderer() :
(function (geoLocationContext, stateChangeListener) {
return React.createElement("h2", null, "There is not yet a default GeoLocation Implementation. You can provide one, if you like.");
});
}
};
},
/**
*
* @param childComponents These are the components which have been rendered by the various child component functions
* @returns {any}
* @private
*/
_getFormLayoutComponent: function (childComponents) {
var formContext = this.formContext();
var formDef = this.formContext().formDef;
if (this.props.layoutOverrideElem) {
var props = {
formContext: formContext,
formComponents: childComponents,
navigationListeners: this.props.navigationListeners,
actionListeners: this.props.actionListeners,
navTarget: this.props.navTarget
};
return React.createElement(this.props.layoutOverrideElem, props);
}
else if (formDef.isTabsLayout) {
return React.createElement(exports.CvTabbedFormPanel, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else if (formDef.isThreeBoxOneLeftLayout) {
return React.createElement(exports.CvFormRightSplitPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else if (formDef.isThreeBoxOneRightLayout) {
return React.createElement(exports.CvFormLeftSplitPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else if (formDef.isThreeBoxOneOverLayout) {
return React.createElement(exports.CvFormBottomSplitPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else if (formDef.isThreeBoxOneUnderLayout) {
return React.createElement(exports.CvFormTopSplitPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else if (formDef.isFourBoxSquareLayout) {
return React.createElement(exports.CvFormFourBoxSplitPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else if (formDef.isOptionsFormLayout) {
return React.createElement(exports.CvFormOptionsLayoutPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
else {
return React.createElement(exports.CvVerticalLayoutFormPane, {formContext: formContext, formComponents: childComponents, navigationListeners: this.props.navigationListeners, actionListeners: this.props.actionListeners, navTarget: this.props.navTarget});
}
}
});
exports.CvFormItemPanel = React.createClass({
mixins: [catreact_core_1.CvBaseMixin],
getDefaultProps: function () {
return { displayElement: null, paneContext: null, menuElement: null };
},
render: function () {
if (this.props.paneContext && this.props.displayElement) {
var paneId = this.props.paneContext.paneDef.paneId;
return (React.createElement("div", {className: "cv-panel panel panel-primary animated fadeIn"}, React.createElement("div", {className: "cv-panel-heading panel-heading"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-3"}, React.createElement("span", {className: "cv-panel-title"}, this.findPaneTitle(this.props.paneContext)), React.createElement("a", {role: "button", className: "cv-panel-toggle", "data-toggle": "collapse", href: '#' + paneId, "aria-expanded": "true", "aria-controls": paneId})), React.createElement("div", {className: "col-sm-3 col-sm-offset-6 text-right"}, this.props.menuElement))), React.createElement("div", {className: "collapse in", id: paneId}, React.createElement("div", {className: "cv-panel-body"}, this.props.displayElement))));
}
else {
return null;
}
},
});
exports.CvFormLayout = {
formComponents: function () {
return this.props.formComponents;
},
formContext: function () {
return this.props.formContext;
}
};
exports.CvTabbedFormMenu = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], tabSelectionListener: null, formContext: null };
},
render: function () {
var _this = this;
if (this.formComponents() && this.formComponents().length > 0) {
return React.createElement("ul", {className: "nav nav-pills"}, this.formContext().childrenContexts.map(function (childContext, i) {
var title = _this.findPaneTitle(childContext);
if (!title || title.length < 1) {
title = 'View ' + (i + 1);
}
return React.createElement("li", {onClick: _this._itemSelected.bind(_this, i), role: "presentation", key: i}, React.createElement("a", {className: "cv-target"}, title));
}));
}
else {
return null;
}
},
_itemSelected: function (item) {
this.props.tabSelectionListener(item);
}
});
/* Tabbed Panel */
exports.CvTabbedFormPanel = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
getInitialState: function () {
return { activeItem: 0 };
},
render: function () {
var _this = this;
if (this.formComponents() && this.formComponents().length > 0) {
if (this.formComponents().length > 1) {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement(exports.CvTabbedFormMenu, {formContext: this.formContext(), formComponents: this.formComponents(), tabSelectionListener: function (selectedItem) {
_this.setState({ activeItem: selectedItem });
}}), this.selectedElement()));
}
else {
return React.createElement("div", {className: "cv-form-container"}, this.formComponents()[0]);
}
}
else {
return null;
}
},
selectedElement: function () {
return this.formComponents()[this.state.activeItem];
},
selectedContext: function () {
return this.formContext().childrenContexts[this.state.activeItem];
}
});
/* Options Form Layout */
exports.CvFormOptionsLayoutPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
var formComponents = this.formComponents();
if (formComponents && formComponents.length > 0) {
if (formComponents.length < 2) {
return (React.createElement("div", {className: "cv-form-container"}, formComponents[0]));
}
else {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-3 cv-split-pane"}, formComponents[0]), React.createElement("div", {className: "col-sm-9"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[1])))), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12"}, (function () {
var elems = [];
for (var i = 2; i < formComponents.length; i++) {
elems.push(React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[i])));
}
return elems;
})()))));
}
}
else {
return null;
}
},
});
/* 3, 1 left Layout */
exports.CvFormRightSplitPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
var formComponents = this.formComponents();
if (formComponents && formComponents.length > 0) {
if (formComponents.length < 2) {
return (React.createElement("div", {className: "cv-form-container"}, formComponents[0]));
}
else {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents[0]), React.createElement("div", {className: "col-sm-6"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[1])), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents.length > 2 ? formComponents[2] : null)))), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12"}, (function () {
var elems = [];
for (var i = 3; i < formComponents.length; i++) {
elems.push(React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[i])));
}
return elems;
})()))));
}
}
else {
return null;
}
},
});
/* 3, 1 right Layout */
exports.CvFormLeftSplitPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
var formComponents = this.formComponents();
if (formComponents && formComponents.length > 0) {
if (formComponents.length < 2) {
return (React.createElement("div", {className: "cv-form-container"}, formComponents[0]));
}
else {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-6"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[0])), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[1]))), React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents.length > 2 ? formComponents[2] : null)), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12"}, (function () {
var elems = [];
for (var i = 3; i < formComponents.length; i++) {
elems.push(React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[i])));
}
return elems;
})()))));
}
}
else {
return null;
}
},
});
/* 3, 1 over Layout */
exports.CvFormBottomSplitPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
var formComponents = this.formComponents();
if (formComponents && formComponents.length > 0) {
if (formComponents.length < 2) {
return (React.createElement("div", {className: "cv-form-container"}, formComponents[0]));
}
else {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[0])), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents[1]), React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents.length > 2 ? formComponents[2] : null)), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12"}, (function () {
var elems = [];
for (var i = 3; i < formComponents.length; i++) {
elems.push(React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[i])));
}
return elems;
})()))));
}
}
else {
return null;
}
},
});
/* 3, 1 under Layout */
exports.CvFormTopSplitPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
var formComponents = this.formComponents();
if (formComponents && formComponents.length > 0) {
if (formComponents.length < 2) {
return (React.createElement("div", {className: "cv-form-container"}, formComponents[0]));
}
else {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents[0]), React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents[1])), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents.length > 2 ? formComponents[2] : null)), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12"}, (function () {
var elems = [];
for (var i = 3; i < formComponents.length; i++) {
elems.push(React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[i])));
}
return elems;
})()))));
}
}
else {
return null;
}
},
});
/* 4 box Layout */
exports.CvFormFourBoxSplitPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
var formComponents = this.formComponents();
if (formComponents && formComponents.length > 0) {
if (formComponents.length < 2) {
return (React.createElement("div", {className: "cv-form-container"}, formComponents[0]));
}
else {
return (React.createElement("div", {className: "cv-form-container"}, React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents[0]), React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents[1])), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents.length > 2 ? formComponents[2] : null), React.createElement("div", {className: "col-sm-6 cv-split-pane"}, formComponents.length > 3 ? formComponents[3] : null)), React.createElement("div", {className: "row"}, React.createElement("div", {className: "col-sm-12"}, (function () {
var elems = [];
for (var i = 4; i < formComponents.length; i++) {
elems.push(React.createElement("div", {className: "row", key: i}, React.createElement("div", {className: "col-sm-12 cv-split-pane"}, formComponents[i])));
}
return elems;
})()))));
}
}
else {
return null;
}
},
});
/* Vertical Layout */
exports.CvVerticalLayoutFormPane = React.createClass({
mixins: [catreact_core_1.CvBaseMixin, exports.CvFormLayout],
getDefaultProps: function () {
return { formComponents: [], formContext: null };
},
render: function () {
if (this.formComponents() && this.formComponents().length > 0) {
return React.createElement("div", {className: "cv-form-container"}, this.formComponents().map(function (formComponent, num) {
return React.cloneElement(formComponent, { key: num });
}));
}
else {
return null;
}
},
});