catreact
Version:
Catavolt Core React Components
152 lines (151 loc) • 6.66 kB
JavaScript
/**
* Created by rburson on 5/10/16.
*/
"use strict";
var React = require('react');
var catreact_1 = require('./../catreact');
var catavolt_sdk_1 = require('catavolt-sdk');
/*
***************************************************
* Render a Property
***************************************************
*/
exports.CvDataAnno = React.createClass({
mixins: [catreact_1.CvBaseMixin],
entityRec: function () {
return this.props.entityRec || this.findEntityRec();
},
entityRecDef: function () {
return this.paneContext().entityRecDef;
},
getChildContext: function () {
var ctx = this.getDefaultChildContext();
ctx.cvContext.scopeCtx.scopeObj = this.props.dataAnnoStyle;
return ctx;
},
getDefaultProps: function () {
return { propName: null, entityRec: null, paneContext: null, dataAnnoStyle: null, wrapperElem: 'span', wrapperElemProps: {} };
},
paneContext: function () {
return this.findPaneContext();
},
prop: function () {
return this.entityRec().propAtName(this.props.propName);
},
render: function () {
if (this.props.renderer) {
return this.props.renderer(this.getChildContext().cvContext);
}
else {
var children = this.props.children;
var dataAnnoStyle = null;
if (this.props.dataAnnoStyle) {
dataAnnoStyle = this.props.dataAnnoStyle;
}
else {
var annotated = null;
if (this.props.propName) {
annotated = this.prop();
}
else {
annotated = this.entityRec();
}
dataAnnoStyle = exports.CvDataAnno.generateStyleInfo(annotated);
}
var newProps = catavolt_sdk_1.ObjUtil.addAllProps(this.props.wrapperElemProps, {});
if (dataAnnoStyle.cssStyle) {
newProps['style'] = dataAnnoStyle.cssStyle;
}
if (dataAnnoStyle.tipText) {
newProps['title'] = dataAnnoStyle.tipText;
}
if (dataAnnoStyle.imageName) {
children = React.createElement(exports.CvDataAnnoImage, {dataAnnoStyle: dataAnnoStyle, contentArray: React.Children.toArray(this.props.children)});
}
if (this.props.wrapperElem) {
return React.createElement(this.props.wrapperElem, newProps, children);
}
else {
return this.props.children;
}
}
},
statics: {
/*
Duck typing either a Prop or an EntityRec here,
as both adhere to the same api regarding DataAnnotations
*/
generateStyleInfo: function (obj) {
if (obj) {
var fgColor = obj.foregroundColor;
var bgColor = obj.backgroundColor;
var isBold = obj.isBoldText;
var isItalic = obj.isItalicText;
var isUnderline = obj.isUnderline;
var overrideText = obj.overrideText;
var tipText = obj.tipText;
var imageName = obj.imageName;
var imagePlacementLeft = obj.isPlacementLeft;
var imagePlacementRight = obj.isPlacementRight;
var imagePlacementCenter = obj.isPlacementCenter;
var imagePlacementUnder = obj.isPlacementUnder;
var imagePlacementStretchUnder = obj.isPlacementStretchUnder;
var style = {};
if (fgColor)
style['color'] = fgColor;
if (bgColor)
style['backgroundColor'] = bgColor;
if (isBold)
style['fontWeight'] = 'bold';
if (isItalic)
style['fontStyle'] = 'italic';
if (isUnderline)
style['textDecoration'] = 'underline';
return {
cssStyle: style,
tipText: tipText,
imageName: imageName,
imagePlacementLeft: imagePlacementLeft,
imagePlacementRight: imagePlacementRight,
imagePlacementCenter: imagePlacementCenter,
imagePlacementUnder: imagePlacementUnder,
imagePlacementStretchUnder: imagePlacementStretchUnder,
overrideText: overrideText
};
}
else {
return {};
}
}
}
});
exports.CvDataAnnoImage = React.createClass({
mixins: [catreact_1.CvBaseMixin],
getDefaultProps: function () {
return { dataAnnoStyle: {}, contentArray: [] };
},
render: function () {
var dataAnnoStyle = this.props.dataAnnoStyle;
if (dataAnnoStyle && dataAnnoStyle.imageName) {
if (dataAnnoStyle.imagePlacementLeft) {
return React.createElement("div", null, [React.createElement(catreact_1.CvResource, {className: "cv-annotation-image", resourceUrl: dataAnnoStyle.imageName})].concat(this.props.contentArray));
}
else if (dataAnnoStyle.imagePlacementRight) {
return React.createElement("div", null, this.props.contentArray.concat([React.createElement(catreact_1.CvResource, {className: "cv-annotation-image", resourceUrl: dataAnnoStyle.imageName})]));
}
else if (dataAnnoStyle.imagePlacementUnder) {
return React.createElement("div", {className: "cv-annotation-bg-image cv-annotation-bg-image-under", style: { backgroundImage: 'url("' + dataAnnoStyle.imageName + '")' }}, this.props.contentArray);
}
else if (dataAnnoStyle.imagePlacementStretchUnder) {
return React.createElement("div", {className: "cv-annotation-bg-image cv-annotation-bg-image-stretch-under", style: { backgroundImage: 'url("' + dataAnnoStyle.imageName + '")' }}, this.props.contentArray);
}
else if (dataAnnoStyle.imagePlacementCenter) {
return React.createElement("div", null, React.createElement(catreact_1.CvResource, {className: "cv-annotation-image", resourceUrl: dataAnnoStyle.imageName}));
}
else {
return React.createElement("div", null, [React.createElement(catreact_1.CvResource, {className: "cv-annotation-image", resourceUrl: dataAnnoStyle.imageName})].concat(this.props.contentArray));
}
}
return React.createElement("div", null, this.props.contentArray);
}
});