@rcsb/rcsb-saguaro-app/lib/RcsbFvWeb/RcsbFvComponents/SelectButton.js

RCSB 1D Saguaro Web App

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Select, { components } from 'react-select';
import { Assertions } from "../../RcsbUtils/Helpers/Assertions";
var assertDefined = Assertions.assertDefined;
export class SelectButton extends React.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 (_jsx("div", { children: this.selectRender() }));
    }
    selectRender() {
        this.currentOption = this.getSelectOpt();
        return (_jsx("div", { children: _jsx("div", { style: { display: "inline-block" }, children: this.selectButtonRender(this.currentOption.selectOpt, this.currentOption.index) }) }));
    }
    selectButtonRender(defaultValue, index) {
        return (_jsx("div", { id: this.props.elementId + SelectButton.BUTTON_CONTAINER_DIV_SUFFIX, children: this.innerSelectButtonRender(defaultValue, index) }));
    }
    innerSelectButtonRender(defaultValue, index) {
        const SingleValueNode = components.SingleValue;
        const SingleValue = (props) => {
            const label = typeof props.data.shortLabel === "string" ? props.data.shortLabel : props.data.label;
            return (_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" ? _jsx("div", { style: { color: "grey", fontWeight: "bold", fontSize: 12 }, children: this.props.dropdownTitle }) : _jsx(_Fragment, {});
        const OptionNode = components.Option;
        return (_jsxs("div", { style: { display: "inline-block" }, children: [title, _jsx("div", { children: _jsx(Select, { 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: _jsx(OptionNode, Object.assign({}, props, { children: props.children })) }))) !== null && _c !== void 0 ? _c : _jsx(_Fragment, {});
                            } : ((props) => (_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);
    }
}
SelectButton.BUTTON_CONTAINER_DIV_SUFFIX = "_buttonContainerDiv";
//# sourceMappingURL=SelectButton.js.map