@rcsb/rcsb-saguaro-app
Version:
RCSB 1D Saguaro Web App
125 lines (124 loc) • 6.32 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectButton = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const react_select_1 = tslib_1.__importStar(require("react-select"));
const Assertions_1 = require("../../RcsbUtils/Helpers/Assertions");
var assertDefined = Assertions_1.Assertions.assertDefined;
class SelectButton extends react_1.default.Component {
constructor(props) {
super(props);
this.state = {
selectedOption: (this.props.options[0].options) == null ? Object.assign(Object.assign({}, (this.props.options[0])), { value: 0 }) : Object.assign(Object.assign({}, (this.props.options[0].options[0])), { value: 0 })
};
this.defaultValue = props.defaultValue;
}
change(option) {
this.setState({ selectedOption: option });
}
componentDidUpdate(prevProps, prevState) {
this.renderTitle();
this.state.selectedOption.onChange();
}
componentDidMount() {
this.renderTitle();
this.defaultValue = null;
}
render() {
return ((0, jsx_runtime_1.jsx)("div", { children: this.selectRender() }));
}
selectRender() {
this.currentOption = this.getSelectOpt();
return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: { display: "inline-block" }, children: this.selectButtonRender(this.currentOption.selectOpt, this.currentOption.index) }) }));
}
selectButtonRender(defaultValue, index) {
return ((0, jsx_runtime_1.jsx)("div", { id: this.props.elementId + SelectButton.BUTTON_CONTAINER_DIV_SUFFIX, children: this.innerSelectButtonRender(defaultValue, index) }));
}
innerSelectButtonRender(defaultValue, index) {
const SingleValueNode = react_select_1.components.SingleValue;
const SingleValue = (props) => {
const label = typeof props.data.shortLabel === "string" ? props.data.shortLabel : props.data.label;
return ((0, jsx_runtime_1.jsx)(SingleValueNode, Object.assign({}, props, { children: label })));
};
let options;
if (this.props.options[0].options == null) {
options = this.props.options.map((opt, index) => {
const props = Object.assign(Object.assign({}, opt), { value: index });
return props;
});
}
else {
let i = 0;
options = this.props.options.map((group, n) => ({
label: group.label,
options: group.options.map(opt => (Object.assign(Object.assign({}, opt), { value: i++ })))
}));
}
const title = typeof this.props.dropdownTitle === "string" ? (0, jsx_runtime_1.jsx)("div", { style: { color: "grey", fontWeight: "bold", fontSize: 12 }, children: this.props.dropdownTitle }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
const OptionNode = react_select_1.components.Option;
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: "inline-block" }, children: [title, (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_select_1.default, { options: options, isSearchable: false, onChange: (option) => { if (option)
this.change(option); }, styles: this.configStyle(), components: { SingleValue, Option: this.props.optionProps ? (props) => {
var _a, _b, _c;
return (_c = (_b = (_a = this.props).optionProps) === null || _b === void 0 ? void 0 : _b.call(_a, Object.assign(Object.assign({}, props), { children: (0, jsx_runtime_1.jsx)(OptionNode, Object.assign({}, props, { children: props.children })) }))) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
} : ((props) => ((0, jsx_runtime_1.jsx)(OptionNode, Object.assign({}, props, { children: props.children })))) }, defaultValue: Object.assign(Object.assign({}, defaultValue), { value: index }) }) })] }));
}
configStyle() {
return {
control: (base) => {
var _a;
return (Object.assign(Object.assign({}, base), { width: (_a = this.props.width) !== null && _a !== void 0 ? _a : 120, border: '1px solid #ddd', boxShadow: 'none', '&:hover': {
border: '1px solid #ddd',
} }));
},
menu: (base) => (Object.assign(Object.assign({}, base), { width: 500 })),
option: (base) => (Object.assign({}, base))
};
}
getSelectOpt() {
let index = 0;
let selectOpt = undefined;
if (this.defaultValue != null) {
if (this.props.options[0].options == null) {
const n = this.props.options.findIndex(a => {
return a.optId === this.defaultValue;
});
if (n >= 0) {
index = n;
selectOpt = this.props.options[n];
}
}
else if (this.props.options[0].options != null) {
let flag = false;
for (const group of this.props.options) {
for (const opt of group.options) {
if (opt.optId === this.defaultValue) {
selectOpt = opt;
flag = true;
break;
}
index++;
}
if (flag) {
break;
}
}
}
}
else {
selectOpt = this.state.selectedOption;
index = this.props.options.findIndex(a => {
return a.optId === this.state.selectedOption.optId;
});
}
assertDefined(selectOpt);
return { selectOpt: selectOpt, index: index };
}
renderTitle() {
if (this.props.addTitle && this.currentOption.selectOpt.name)
this.props.renderTitle(this.currentOption.selectOpt.name);
}
}
exports.SelectButton = SelectButton;
SelectButton.BUTTON_CONTAINER_DIV_SUFFIX = "_buttonContainerDiv";