catreact
Version:
Catavolt Core React Components
238 lines (237 loc) • 13.2 kB
JavaScript
/**
* Created by rburson on 3/21/16.
*/
"use strict";
var React = require('react');
var catreact_1 = require('./../catreact');
var catavolt_sdk_1 = require('catavolt-sdk');
var react_bootstrap_datetimepicker_1 = require('react-bootstrap-datetimepicker');
exports.CvCellValueDefMixin = {
cellValueDef: function (nextProps) {
return (nextProps && nextProps.cellValueDef) || this.props.cellValueDef;
},
detailsCallback: function (nextProps) {
return (nextProps && nextProps.detailsCallback) || this.props.detailsCallback;
},
detailsContext: function (nextProps) {
return (nextProps && nextProps.detailsContext) || this.props.detailsContext || this.firstInScope(catavolt_sdk_1.DetailsContext);
},
getChildContext: function () {
var ctx = this.getDefaultChildContext();
ctx.cvContext.scopeCtx.scopeObj = this.cellValueDef();
return ctx;
}
};
/*
***************************************************
* Render an CellValueDef
***************************************************
*/
exports.CvCellValueDef = React.createClass({
mixins: [catreact_1.CvBaseMixin, exports.CvCellValueDefMixin],
render: function () {
if (this.props.renderer) {
return this.props.renderer(this.getChildContext().cvContext);
}
else {
var detailsContext = this.detailsContext();
var cellValueDef = this.cellValueDef();
var component = null;
if (cellValueDef) {
if (cellValueDef instanceof catavolt_sdk_1.AttributeCellValueDef) {
var prop = detailsContext.entityRec.propAtName(cellValueDef.propertyName);
var styleInfo = catreact_1.CvDataAnno.generateStyleInfo(prop);
component = React.createElement(catreact_1.CvDataAnno, {dataAnnoStyle: styleInfo, paneContext: detailsContext, wrapperElem: this.props.wrapperElem, wrapperElemProps: this.props.wrapperElemProps}, React.createElement(exports.CvAttributeCellValueDef, {detailsContext: detailsContext, detailsCallback: this.detailsCallback(), cellValueDef: this.cellValueDef()}));
return component;
}
else if (cellValueDef instanceof catavolt_sdk_1.LabelCellValueDef) {
component = React.createElement("span", {className: "cv-label-cell-def"}, cellValueDef.value);
}
else if (cellValueDef instanceof catavolt_sdk_1.ForcedLineCellValueDef) {
component = React.createElement("span", {className: "cv-forced-line-cell-def"});
}
else if (cellValueDef instanceof catavolt_sdk_1.TabCellValueDef) {
component = React.createElement("span", {className: "cv-tab-cell-def"}, ' ');
}
else if (cellValueDef instanceof catavolt_sdk_1.SubstitutionCellValueDef) {
component =
React.createElement("span", {className: "cv-sub-cell-def"}, cellValueDef.value);
}
else {
component = React.createElement("span", null);
}
}
var props = catavolt_sdk_1.ObjUtil.addAllProps(this.props.wrapperElemProps, {});
return React.createElement(this.props.wrapperElem, props, component);
}
}
});
var cv_no_selection_value = 'cv_no_selection_value';
exports.CvAttributeCellValueDef = React.createClass({
mixins: [catreact_1.CvBaseMixin, exports.CvCellValueDefMixin],
componentWillMount: function () {
this.refresh();
},
componentWillReceiveProps: function (nextProps) {
this.refresh(nextProps);
},
getDefaultProps: function () {
return { cellValueDef: null, detailsContext: null, detailsCallback: null, overrideText: null };
},
getInitialState: function () {
return { availableValues: null };
},
render: function () {
var _this = this;
if (this.props.renderer) {
return this.props.renderer(this.getChildContext().cvContext);
}
else {
var detailsContext = this.detailsContext();
var cellValueDef = this.cellValueDef();
var component = null;
if (cellValueDef && cellValueDef.propertyName) {
if (!detailsContext.isReadModeFor(cellValueDef.propertyName) && !this.props.overrideText) {
var prop = detailsContext.buffer.propAtName(cellValueDef.propertyName);
var propDef_1 = detailsContext.entityRecDef.propDefAtName(cellValueDef.propertyName);
if (prop) {
/*** Combobox ***/
if (cellValueDef.isComboBoxEntryMethod) {
if (this.state.availableValues && this.state.availableValues.length > 0) {
component =
(React.createElement("select", {className: "form-control cv-cell-def-select-box", id: cellValueDef.propertyName, onChange: this._propChange.bind(this, prop.name), defaultValue: catavolt_sdk_1.PropFormatter.toString(prop.value, propDef_1)}, React.createElement("option", {value: cv_no_selection_value}, "No Selection"), this.state.availableValues.map(function (value) {
return React.createElement("option", {value: catavolt_sdk_1.PropFormatter.toString(value, propDef_1)}, _this._displayAsOption(value, propDef_1));
})));
}
}
else if (cellValueDef.isDropDownEntryMethod) {
if (this.state.availableValues && this.state.availableValues.length > 0) {
component =
(React.createElement("select", {className: "form-control cv-cell-def-select-box", id: cellValueDef.propertyName, onChange: this._propChange.bind(this, prop.name), defaultValue: catavolt_sdk_1.PropFormatter.toString(prop.value, propDef_1)}, React.createElement("option", {value: cv_no_selection_value}, "No Selection"), this.state.availableValues.map(function (value) {
return React.createElement("option", {value: catavolt_sdk_1.PropFormatter.toString(value, propDef_1)}, _this._displayAsOption(value, propDef_1));
})));
}
}
else {
/*** Binary ***/
if (detailsContext.isBinary(cellValueDef)) {
component =
React.createElement(catreact_1.CvProp, {propName: cellValueDef.propertyName, entityRec: detailsContext.entityRec});
}
else {
if (prop) {
/*** Boolean ***/
if (propDef_1.isBooleanType) {
component = React.createElement("input", {type: "checkbox", defaultChecked: prop.value, onChange: this._checkboxChange.bind(this, prop.name)});
}
else if (propDef_1.isDateTimeType) {
component = React.createElement(react_bootstrap_datetimepicker_1.default, {dateTime: prop.value ? prop.value.getTime() : (new Date()).getTime(), onChange: this._dateChange.bind(this, prop.name, propDef_1), inputFormat: "MM/DD/YYYY h:mm A"});
}
else if (propDef_1.isDateType) {
component = React.createElement(react_bootstrap_datetimepicker_1.default, {dateTime: prop.value ? prop.value.getTime() : (new Date().getTime()), onChange: this._dateChange.bind(this, prop.name, propDef_1), inputFormat: "MM/DD/YYYY", mode: "date"});
}
else if (propDef_1.isTimeType) {
if (prop.value) {
component = React.createElement(react_bootstrap_datetimepicker_1.default, {dateTime: prop.value ? prop.value.toDateValue().getTime() : (new Date().getTime()), onChange: this._dateChange.bind(this, prop.name, propDef_1), inputFormat: "h:mm A", mode: "time"});
}
else {
component =
React.createElement(react_bootstrap_datetimepicker_1.default, {onChange: this._dateChange.bind(this, prop.name, propDef_1), inputFormat: "h:mm A", mode: "time", defaultText: "Choose a time value..."});
}
}
else {
component = React.createElement("input", {type: "text", className: "form-control", onBlur: this._propChange.bind(this, prop.name), id: cellValueDef.propertyName, defaultValue: this._displayForEdit(prop, propDef_1)});
}
}
}
}
}
}
else {
component = React.createElement(catreact_1.CvProp, {propName: cellValueDef.propertyName, entityRec: detailsContext.entityRec, overrideText: this.props.overrideText});
}
}
return component;
}
},
_displayForEdit: function (prop, propDef) {
if (propDef.isMoneyType) {
return catavolt_sdk_1.PropFormatter.formatForWrite(prop.value, propDef);
}
else if (propDef.isPercentType) {
return catavolt_sdk_1.PropFormatter.formatForWrite(prop.value, propDef);
}
else if (propDef.isCodeRefType) {
return prop.value.description;
}
else if (propDef.isObjRefType) {
return prop.value.description;
}
else {
return catavolt_sdk_1.PropFormatter.formatForWrite(prop.value, propDef);
}
},
_displayAsOption: function (optionValue, propDef) {
var stringVal = catavolt_sdk_1.PropFormatter.toString(optionValue, propDef);
if (propDef.isCodeRefType) {
return catavolt_sdk_1.StringUtil.splitSimpleKeyValuePair(stringVal)[1];
}
else if (propDef.isObjRefType) {
return catavolt_sdk_1.StringUtil.splitSimpleKeyValuePair(stringVal)[1];
}
else {
return stringVal;
}
},
refresh: function (nextProps) {
var _this = this;
var cellValueDef = this.cellValueDef(nextProps);
var detailsContext = this.detailsContext(nextProps);
if (!detailsContext.isReadModeFor(cellValueDef.propertyName)) {
if (cellValueDef.propertyName && (cellValueDef.isComboBoxEntryMethod || cellValueDef.isDropDownEntryMethod)) {
return detailsContext.getAvailableValues(cellValueDef.propertyName).onComplete(function (valueTry) {
if (valueTry.isSuccess) {
_this.setState({ availableValues: valueTry.success });
}
else {
var event_1 = {
type: catreact_1.CvEventType.MESSAGE,
eventObj: {
message: 'Could not get available values for property: ' + cellValueDef.propertyName,
messageObj: valueTry.failure,
type: catreact_1.CvMessageType.ERROR
}
};
_this.eventRegistry().publish(event_1, false);
}
});
}
}
},
_propChange: function (propName, e) {
var value = e.currentTarget.value === cv_no_selection_value ? null : e.currentTarget.value;
if (value == '' || value === undefined) {
value = null;
}
this.detailsCallback().setPropValue(propName, value);
},
_dateChange: function (propName, propDef, timeValue) {
if (timeValue) {
var d = new Date(Number(timeValue));
if (propDef.isDateTimeType || propDef.isDateType) {
this.detailsCallback().setPropValue(propName, d);
}
else if (propDef.isTimeType) {
this.detailsCallback().setPropValue(propName, catavolt_sdk_1.TimeValue.fromDateValue(d));
}
}
},
_checkboxChange: function (propName, e) {
if (e.currentTarget.checked) {
this.detailsCallback().setPropValue(propName, true);
}
else {
this.detailsCallback().setPropValue(propName, false);
}
}
});