pdbe-molstar
Version:
Molstar implementation for PDBe
46 lines (45 loc) • 3.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnnotationRowControls = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("molstar/lib/mol-plugin-ui/controls/common");
const icons_1 = require("molstar/lib/mol-plugin-ui/controls/icons");
const parameters_1 = require("molstar/lib/mol-plugin-ui/controls/parameters");
const react_1 = tslib_1.__importDefault(require("react"));
/** UI controls for a single annotation source (row) in Annotations section */
class AnnotationRowControls extends react_1.default.PureComponent {
constructor() {
super(...arguments);
this.state = { applied: false, optionsExpanded: false };
}
isApplied() {
var _a;
return (_a = this.props.applied) !== null && _a !== void 0 ? _a : this.state.applied;
}
toggleApplied(applied) {
var _a, _b;
const newState = applied !== null && applied !== void 0 ? applied : !this.isApplied();
if (this.props.applied === undefined) {
this.setState({ applied: newState });
}
(_b = (_a = this.props).onChangeApplied) === null || _b === void 0 ? void 0 : _b.call(_a, newState);
}
toggleOptions() {
this.setState(s => ({ optionsExpanded: !s.optionsExpanded }));
}
render() {
var _a;
if (!this.props.params)
return null;
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'msp-flex-row', children: [(0, jsx_runtime_1.jsx)(common_1.Button, { noOverflow: true, className: 'msp-control-button-label', title: this.props.title, style: { textAlign: 'left' }, children: (_a = this.props.shortTitle) !== null && _a !== void 0 ? _a : this.props.title }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleApplied(), toggleState: false, svg: !this.isApplied() ? icons_1.VisibilityOffOutlinedSvg : icons_1.VisibilityOutlinedSvg, title: `Click to ${this.isApplied() ? 'hide' : 'show'} ${this.props.title}`, small: true, className: 'msp-form-control', flex: true }), (0, jsx_runtime_1.jsx)(common_1.IconButton, { onClick: () => this.toggleOptions(), svg: icons_1.MoreHorizSvg, title: 'Options', toggleState: this.state.optionsExpanded, className: 'msp-form-control', flex: true })] }), this.state.optionsExpanded &&
(0, jsx_runtime_1.jsx)("div", { style: { marginBottom: '6px' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-accent-offset', children: (0, jsx_runtime_1.jsx)("div", { className: 'msp-representation-entry', children: this.renderOptions() }) }) })] });
}
renderOptions() {
if (this.props.errorMessage) {
return (0, jsx_runtime_1.jsx)("div", { className: 'msp-row-text', children: (0, jsx_runtime_1.jsx)("div", { children: this.props.errorMessage }) });
}
return (0, jsx_runtime_1.jsx)(parameters_1.ParameterControls, { params: this.props.params, onChange: this.props.onChange, values: this.props.values, onChangeValues: this.props.onChangeValues, onEnter: this.props.onEnter });
}
}
exports.AnnotationRowControls = AnnotationRowControls;