@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
95 lines (94 loc) • 6.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import { RcsbFvDefaultConfigValues } from "../RcsbFvConfig/RcsbFvDefaultConfigValues";
import * as classes from "../../scss/RcsbFvRow.module.scss";
import { RcsbFvRowMark } from "./RcsbFvRowMark";
export class RcsbFvRowTitle extends React.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 = (_jsx(_Fragment, { children: _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: [_jsx(RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), _jsx("div", { style: { display: "inline-block" }, children: _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 = (_jsxs(_Fragment, { children: [_jsx("div", { style: Object.assign(Object.assign({}, style), { float: "right", display: "inline-block" }), children: _jsx("div", { className: classes.rcsbFvRowTitleText, style: { lineHeight: height + "px" }, children: this.setTitle() }) }), _jsx("div", { style: { height: height, float: "right", display: "inline-block" }, children: _jsxs("div", { className: classes.rcsbFvRowTitleText, style: { lineHeight: height + "px", display: "inline-block" }, children: [_jsx(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 = (_jsx(_Fragment, { children: _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: [_jsx(RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), this.configData.rowPrefix + " ", this.setTitle()] }) }));
}
else {
titleElement = (_jsx(_Fragment, { children: _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: [_jsx(RcsbFvRowMark, Object.assign({}, this.props.data.rowMark, { isGlowing: this.props.isGlowing })), this.setTitle()] }) }));
}
return (_jsxs("div", { className: classes.rcsbFvRowTitle, style: this.configStyle(), children: [this.setTitle() != null ? _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 (_jsx("a", { href: this.configData.rowTitle.url, target: target, style: this.configData.rowTitle.style, children: this.configData.rowTitle.visibleTex }));
else
return (_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.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 });
}
}
}