molstar
Version:
A comprehensive macromolecular library.
255 lines • 15.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlRow = exports.ExpandGroup = exports.ToggleButton = exports.IconButton = exports.Button = exports.SectionHeader = exports.ExpandableControlRow = exports.TextInput = exports.ControlGroup = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
/**
* Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author David Sehnal <david.sehnal@gmail.com>
*/
var React = (0, tslib_1.__importStar)(require("react"));
var color_1 = require("../../mol-util/color");
var icons_1 = require("./icons");
var ControlGroup = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ControlGroup, _super);
function ControlGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { isExpanded: !!_this.props.initialExpanded };
_this.headerClicked = function () {
if (_this.props.onHeaderClick) {
_this.props.onHeaderClick();
}
else {
_this.setState({ isExpanded: !_this.state.isExpanded });
}
};
return _this;
}
ControlGroup.prototype.render = function () {
var groupClassName = this.props.hideOffset ? 'msp-control-group-children' : 'msp-control-group-children msp-control-offset';
if (this.props.childrenClassName)
groupClassName += ' ' + this.props.childrenClassName;
// TODO: customize header style (bg color, togle button etc)
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper', style: { position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 } }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header', style: { marginLeft: this.props.headerLeftMargin }, title: this.props.title }, { children: (0, jsx_runtime_1.jsxs)(Button, (0, tslib_1.__assign)({ onClick: this.headerClicked }, { children: [!this.props.hideExpander && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg }, void 0), this.props.topRightIcon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.props.topRightIcon, style: { position: 'absolute', right: '2px', top: 0 } }, void 0), (0, jsx_runtime_1.jsx)("b", { children: this.props.header }, void 0)] }), void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: groupClassName, style: { display: this.state.isExpanded ? 'block' : 'none', maxHeight: this.props.maxHeight, overflow: 'hidden', overflowY: 'auto' } }, { children: this.props.children }), void 0)] }), void 0);
};
return ControlGroup;
}(React.Component));
exports.ControlGroup = ControlGroup;
function _id(x) { return x; }
var TextInput = /** @class */ (function (_super) {
(0, tslib_1.__extends)(TextInput, _super);
function TextInput() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.input = React.createRef();
_this.delayHandle = void 0;
_this.pendingValue = void 0;
_this.state = { originalValue: '', value: '' };
_this.onBlur = function () {
_this.setState({ value: '' + _this.state.originalValue });
if (_this.props.onBlur)
_this.props.onBlur();
};
_this.raiseOnChange = function () {
if (_this.pendingValue === void 0)
return;
_this.props.onChange(_this.pendingValue);
_this.pendingValue = void 0;
};
_this.onChange = function (e) {
var value = e.target.value;
var isInvalid = (_this.props.isValid && !_this.props.isValid(value)) || (_this.props.numeric && Number.isNaN(+value));
if (isInvalid) {
_this.clearTimeout();
_this.setState({ value: value });
return;
}
if (_this.props.numeric) {
_this.setState({ value: value }, function () { return _this.triggerChanged(value, +value); });
}
else {
var converted_1 = (_this.props.toValue || _id)(value);
var formatted_1 = (_this.props.fromValue || _id)(converted_1);
_this.setState({ value: formatted_1 }, function () { return _this.triggerChanged(formatted_1, converted_1); });
}
};
_this.onKeyUp = function (e) {
if (e.charCode === 27 || e.keyCode === 27 || e.key === 'Escape') {
if (_this.props.blurOnEscape && _this.input.current) {
_this.input.current.blur();
}
}
};
_this.onKeyPress = function (e) {
if (e.keyCode === 13 || e.charCode === 13 || e.key === 'Enter') {
if (_this.isPending) {
_this.clearTimeout();
_this.raiseOnChange();
}
if (_this.props.blurOnEnter && _this.input.current) {
_this.input.current.blur();
}
if (_this.props.onEnter)
_this.props.onEnter();
}
e.stopPropagation();
};
return _this;
}
Object.defineProperty(TextInput.prototype, "isPending", {
get: function () { return typeof this.delayHandle !== 'undefined'; },
enumerable: false,
configurable: true
});
TextInput.prototype.clearTimeout = function () {
if (this.isPending) {
clearTimeout(this.delayHandle);
this.delayHandle = void 0;
}
};
TextInput.prototype.triggerChanged = function (formatted, converted) {
this.clearTimeout();
if (formatted === this.state.originalValue)
return;
if (this.props.delayMs) {
this.pendingValue = converted;
this.delayHandle = setTimeout(this.raiseOnChange, this.props.delayMs);
}
else {
this.props.onChange(converted);
}
};
TextInput.getDerivedStateFromProps = function (props, state) {
var value = props.fromValue ? props.fromValue(props.value) : props.value;
if (value === state.originalValue)
return null;
return { originalValue: value, value: value };
};
TextInput.prototype.render = function () {
return (0, jsx_runtime_1.jsx)("input", { type: 'text', className: this.props.className, style: this.props.style, ref: this.input, onBlur: this.onBlur, value: this.state.value, placeholder: this.props.placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter || this.props.blurOnEnter || this.props.blurOnEscape ? this.onKeyPress : void 0, onKeyDown: this.props.blurOnEscape ? this.onKeyUp : void 0, disabled: !!this.props.isDisabled }, void 0);
};
return TextInput;
}(React.PureComponent));
exports.TextInput = TextInput;
var ExpandableControlRow = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ExpandableControlRow, _super);
function ExpandableControlRow() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { isExpanded: false };
_this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
return _this;
}
ExpandableControlRow.prototype.render = function () {
var _a = this.props, label = _a.label, pivot = _a.pivot, controls = _a.controls;
// TODO: fix the inline CSS
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlRow, (0, tslib_1.__assign)({ label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ className: 'msp-btn-link msp-btn-icon msp-control-group-expander', onClick: this.toggleExpanded, title: (this.state.isExpanded ? 'Less' : 'More') + " options", style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.RemoveSvg : icons_1.AddSvg, style: { display: 'inline-block' } }, void 0) }), void 0)] }, void 0), control: pivot }, { children: this.props.colorStripe && (0, jsx_runtime_1.jsx)("div", { className: 'msp-expandable-group-color-stripe', style: { backgroundColor: color_1.Color.toStyle(this.props.colorStripe) } }, void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: controls }), void 0)] }, void 0);
};
return ExpandableControlRow;
}(React.Component));
exports.ExpandableControlRow = ExpandableControlRow;
function SectionHeader(props) {
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "msp-section-header" + (props.accent ? ' msp-transform-header-brand-' + props.accent : '') }, { children: [props.icon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.icon }, void 0), props.title, " ", (0, jsx_runtime_1.jsx)("small", { children: props.desc }, void 0)] }), void 0);
}
exports.SectionHeader = SectionHeader;
function Button(props) {
var className = 'msp-btn';
if (!props.inline)
className += ' msp-btn-block';
if (props.noOverflow)
className += ' msp-no-overflow';
if (props.flex)
className += ' msp-flex-item';
if (props.commit === 'on' || props.commit)
className += ' msp-btn-commit msp-btn-commit-on';
if (props.commit === 'off')
className += ' msp-btn-commit msp-btn-commit-off';
if (!props.children)
className += ' msp-btn-childless';
if (props.className)
className += ' ' + props.className;
var style = void 0;
if (props.flex) {
if (typeof props.flex === 'number')
style = { flex: "0 0 " + props.flex + "px", padding: 0, maxWidth: props.flex + "px" };
else if (typeof props.flex === 'string')
style = { flex: "0 0 " + props.flex, padding: 0, maxWidth: props.flex };
}
if (props.style) {
if (style)
Object.assign(style, props.style);
else
style = props.style;
}
return (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ onClick: props.onClick, title: props.title, disabled: props.disabled, style: style, className: className, "data-id": props['data-id'], "data-color": props['data-color'], onContextMenu: props.onContextMenu, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, { children: [props.icon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.icon }, void 0), props.children] }), void 0);
}
exports.Button = Button;
function IconButton(props) {
var className = "msp-btn msp-btn-icon" + (props.small ? '-small' : '') + (props.className ? ' ' + props.className : '');
if (typeof props.toggleState !== 'undefined') {
className += " msp-btn-link-toggle-" + (props.toggleState ? 'on' : 'off');
}
if (props.transparent) {
className += ' msp-transparent-bg';
}
var style = void 0;
if (props.flex) {
if (typeof props.flex === 'boolean')
style = { flex: '0 0 32px', padding: 0 };
else if (typeof props.flex === 'number')
style = { flex: "0 0 " + props.flex + "px", padding: 0, maxWidth: props.flex + "px" };
else
style = { flex: "0 0 " + props.flex, padding: 0, maxWidth: props.flex };
}
if (props.style) {
if (style)
Object.assign(style, props.style);
else
style = props.style;
}
return (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: className, onClick: props.onClick, title: props.title, disabled: props.disabled, "data-id": props['data-id'], style: style }, { children: [props.svg && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.svg }, void 0), props.extraContent] }), void 0);
}
exports.IconButton = IconButton;
var ToggleButton = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ToggleButton, _super);
function ToggleButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onClick = function (e) {
e.currentTarget.blur();
_this.props.toggle();
};
return _this;
}
ToggleButton.prototype.render = function () {
var props = this.props;
var label = props.label;
var className = props.isSelected ? (props.className || '') + " msp-control-current" : props.className;
return (0, jsx_runtime_1.jsx)(Button, (0, tslib_1.__assign)({ icon: this.props.icon, onClick: this.onClick, title: this.props.title, inline: this.props.inline, disabled: props.disabled, style: props.style, className: className }, { children: label && this.props.isSelected ? (0, jsx_runtime_1.jsx)("b", { children: label }, void 0) : label }), void 0);
};
return ToggleButton;
}(React.PureComponent));
exports.ToggleButton = ToggleButton;
var ExpandGroup = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ExpandGroup, _super);
function ExpandGroup() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = { isExpanded: !!_this.props.initiallyExpanded };
_this.toggleExpanded = function () { return _this.setState({ isExpanded: !_this.state.isExpanded }); };
return _this;
}
ExpandGroup.prototype.render = function () {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header', style: { marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin } }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded, style: this.props.headerStyle }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), this.props.header] }), void 0) }), void 0), this.state.isExpanded &&
(this.props.noOffset
? this.props.children
: (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: this.props.accent ? 'msp-accent-offset' : 'msp-control-offset' }, { children: this.props.children }), void 0))] }, void 0);
};
return ExpandGroup;
}(React.PureComponent));
exports.ExpandGroup = ExpandGroup;
function ControlRow(props) {
var className = 'msp-control-row';
if (props.className)
className += ' ' + props.className;
return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: className }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'msp-control-row-label', title: props.title }, { children: props.label }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-row-ctrl' }, { children: props.control }), void 0), props.children] }), void 0);
}
exports.ControlRow = ControlRow;
//# sourceMappingURL=common.js.map