@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
100 lines (99 loc) • 7.25 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.RcsbFvRowTitle = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const RcsbFvDefaultConfigValues_1 = require("../RcsbFvConfig/RcsbFvDefaultConfigValues");
const classes = tslib_1.__importStar(require("../../scss/RcsbFvRow.module.scss"));
const RcsbFvRowMark_1 = require("./RcsbFvRowMark");
class RcsbFvRowTitle extends react_1.default.Component {
constructor(props) {
super(props);
this.state = {
expandTitle: false
};
this.PADDING_RIGHT = 5;
this.configData = this.props.data;
}
render() {
var _a, _b, _c, _d;
const height = this.configStyle().height;
const trackTitle = typeof ((_a = this.configData) === null || _a === void 0 ? void 0 : _a.rowTitle) === "string" ? this.configData.rowTitle : (typeof ((_b = this.configData) === null || _b === void 0 ? void 0 : _b.rowTitle) === "object" ? this.configData.rowTitle.visibleTex : "");
let titleElement;
if ((_c = this.props.data.externalRowTitle) === null || _c === void 0 ? void 0 : _c.rowTitleComponent) {
const rowTitleProps = this.props.data.externalRowTitle.rowTitleAdditionalProps;
const RowTitleComponent = (_d = this.props.data.externalRowTitle) === null || _d === void 0 ? void 0 : _d.rowTitleComponent;
titleElement = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes.rcsbFvRowTitleText + (this.state.expandTitle ? " " + classes.rcsbFvRowTitleTextExpand : ""), style: { lineHeight: height + "px", paddingRight: this.PADDING_RIGHT }, onMouseEnter: (evt) => { this.expandTitle(evt, true); }, onMouseLeave: (evt) => { this.expandTitle(evt, false); }, children: [(0, jsx_runtime_1.jsx)(RcsbFvRowMark_1.RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), (0, jsx_runtime_1.jsx)("div", { style: { display: "inline-block" }, children: (0, jsx_runtime_1.jsx)(RowTitleComponent, Object.assign({}, this.props, rowTitleProps)) })] }) }));
}
else if (typeof this.configData.rowPrefix === "string" && this.configData.rowPrefix.length > 0 && this.configData.fitTitleWidth) {
const prefixLength = Math.max(this.configData.rowPrefix.length, 16);
const prefixWidth = Math.round((prefixLength / (prefixLength + trackTitle.length) * this.configStyle().width));
const titleWidth = this.configStyle().width - prefixWidth;
const style = { width: titleWidth, height: height, paddingRight: this.PADDING_RIGHT };
titleElement = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({}, style), { float: "right", display: "inline-block" }), children: (0, jsx_runtime_1.jsx)("div", { className: classes.rcsbFvRowTitleText, style: { lineHeight: height + "px" }, children: this.setTitle() }) }), (0, jsx_runtime_1.jsx)("div", { style: { height: height, float: "right", display: "inline-block" }, children: (0, jsx_runtime_1.jsxs)("div", { className: classes.rcsbFvRowTitleText, style: { lineHeight: height + "px", display: "inline-block" }, children: [(0, jsx_runtime_1.jsx)(RcsbFvRowMark_1.RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), this.configData.rowPrefix] }) })] }));
}
else if (typeof this.configData.rowPrefix === "string" && this.configData.rowPrefix.length > 0) {
titleElement = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes.rcsbFvRowTitleText + (this.state.expandTitle ? " " + classes.rcsbFvRowTitleTextExpand : ""), style: { lineHeight: height + "px", paddingRight: this.PADDING_RIGHT }, onMouseEnter: (evt) => { this.expandTitle(evt, true); }, onMouseLeave: (evt) => { this.expandTitle(evt, false); }, children: [(0, jsx_runtime_1.jsx)(RcsbFvRowMark_1.RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), this.configData.rowPrefix + " ", this.setTitle()] }) }));
}
else {
titleElement = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: classes.rcsbFvRowTitleText + (this.state.expandTitle ? " " + classes.rcsbFvRowTitleTextExpand : ""), style: { lineHeight: height + "px", paddingRight: this.PADDING_RIGHT }, onMouseEnter: (evt) => { this.expandTitle(evt, true); }, onMouseLeave: (evt) => { this.expandTitle(evt, false); }, children: [(0, jsx_runtime_1.jsx)(RcsbFvRowMark_1.RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), this.setTitle()] }) }));
}
return ((0, jsx_runtime_1.jsxs)("div", { className: classes.rcsbFvRowTitle, style: this.configStyle(), children: [this.setTitle() != null ? (0, jsx_runtime_1.jsx)("div", { style: this.configTitleFlagColorStyle(), className: classes.rcsbFvRowTitleProvenanceFlag }) : null, titleElement] }));
}
/**
* @return Title string defined in the track configuration object
* */
setTitle() {
if (typeof this.configData.rowTitle === "string") {
return this.configData.rowTitle;
}
else if (typeof this.configData.rowTitle === "object") {
const target = this.configData.rowTitle.isThirdParty ? "_blank" : "_self";
if (typeof this.configData.rowTitle.url === "string")
return ((0, jsx_runtime_1.jsx)("a", { href: this.configData.rowTitle.url, target: target, style: this.configData.rowTitle.style, children: this.configData.rowTitle.visibleTex }));
else
return ((0, jsx_runtime_1.jsx)("span", { style: this.configData.rowTitle.style, children: this.configData.rowTitle.visibleTex }));
}
return null;
}
/**
* @return CSS style width and height for the cell
* */
configStyle() {
let width = RcsbFvDefaultConfigValues_1.RcsbFvDefaultConfigValues.rowTitleWidth;
if (typeof this.configData.rowTitleWidth === "number") {
width = this.configData.rowTitleWidth;
}
return {
width: width,
height: this.props.rowTitleHeight
};
}
/**
* @return Title flag color css style properties
* */
configTitleFlagColorStyle() {
let color = "#FFFFFF";
if (typeof this.props.data.titleFlagColor === "string") {
color = this.props.data.titleFlagColor;
}
return {
backgroundColor: color,
height: this.props.rowTitleHeight,
width: this.PADDING_RIGHT,
float: "right"
};
}
expandTitle(evt, flag) {
const div = evt.currentTarget;
if ((0 > div.clientWidth - div.scrollWidth) && flag) {
if (flag)
this.setState({ expandTitle: true });
}
else {
this.setState({ expandTitle: false });
}
}
}
exports.RcsbFvRowTitle = RcsbFvRowTitle;