{"version":3,"file":"CustomSelect.bundle.js","sources":["../../../Static/src/react/components/common/CustomSelect.jsx"],"sourcesContent":["import React, {Component} from 'react';\r\nimport classNames from 'classnames';\r\n\r\nclass CustomSelect extends Component {\r\n    constructor(props) {\r\n        super(props);\r\n        this.state = {\r\n            isOpen: false,\r\n            isFocused: false,\r\n            selectedOption: this.props.selectedOption\r\n        };\r\n\r\n        this.handleKeyboardNavigation = this.handleKeyboardNavigation.bind(this);\r\n        this.handleKeyboardOptionSelection = this.handleKeyboardOptionSelection.bind(this);\r\n        this.handleBtnClick = this.handleBtnClick.bind(this);\r\n        this.handleBtnFocus = this.handleBtnFocus.bind(this);\r\n        this.handleBtnBlur = this.handleBtnBlur.bind(this);\r\n        this.createOptionItem = this.createOptionItem.bind(this);\r\n    }\r\n\r\n    componentDidMount() {\r\n        this.bindEventListeners();\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        this.unbindEventListeners();\r\n    }\r\n\r\n    bindEventListeners() {\r\n        window.addEventListener('keydown', this.handleKeyboardNavigation, false);\r\n    }\r\n\r\n    unbindEventListeners() {\r\n        window.removeEventListener('keydown', this.handleKeyboardNavigation, false);\r\n    }\r\n\r\n    handleKeyboardNavigation(event) {\r\n\r\n        // keyCode 40 - arrow key down\r\n        // keyCode 38 - arrow key up\r\n\r\n        if (this.state.isFocused && (event.keyCode === 40 || event.keyCode === 38)) {\r\n            event.preventDefault();\r\n            if (!this.state.isOpen) {\r\n                this.setState({isOpen: true});\r\n            } else {\r\n                this.setOption(event.keyCode);\r\n            }\r\n        }\r\n    }\r\n\r\n    setOption(keyCode) {\r\n        const\r\n            options = this.props.options,\r\n            optionsLength = options.length,\r\n            activeOptionIndex = options.indexOf(this.state.selectedOption),\r\n            nextOptionIndex = keyCode === 40 ? activeOptionIndex + 1 : activeOptionIndex - 1;\r\n\r\n        if (nextOptionIndex < optionsLength && nextOptionIndex >= 0) {\r\n            this.setState({selectedOption: options[nextOptionIndex]})\r\n        } else if (nextOptionIndex < 0) {\r\n            this.setState({selectedOption: options[0]})\r\n        }\r\n    }\r\n\r\n    handleBtnClick() {\r\n        this.setState(prevState => ({\r\n            isOpen: !prevState.isOpen\r\n        }));\r\n\r\n    }\r\n\r\n    handleBtnFocus() {\r\n        this.setState({\r\n            isFocused: true\r\n        });\r\n    }\r\n\r\n    handleBtnBlur() {\r\n        this.setState({\r\n            isOpen: false,\r\n            isFocused: false\r\n        });\r\n    }\r\n\r\n    handleOptionSelection(option) {\r\n        this.setState(prevState => ({\r\n            isOpen: !prevState.isOpen,\r\n            selectedOption: option\r\n        }));\r\n        this.props.onValueSelection(option);\r\n\r\n    }\r\n\r\n    handleKeyboardOptionSelection(event) {\r\n\r\n        // keyCode 40 - Enter\r\n        if (event.keyCode === 13 && this.state.isOpen) {\r\n            this.setState({\r\n                isOpen: false,\r\n            });\r\n            this.props.onValueSelection(this.state.selectedOption);\r\n        }\r\n    }\r\n\r\n    createOptionItem(option) {\r\n        const optionStyles = classNames(\r\n            'custom-select__item',\r\n            {'custom-select__item--highlighted': option === this.state.selectedOption}\r\n        );\r\n\r\n        return (\r\n            <li className={optionStyles}\r\n                role=\"option\"\r\n                key={option}\r\n                id={`${this.props.optionsListName}-${option}`}\r\n                onMouseDown={() => this.handleOptionSelection(option)}\r\n            >\r\n                {option}\r\n            </li>\r\n        )\r\n    }\r\n\r\n\r\n    render() {\r\n        const\r\n            {optionsListName, options, labelId} = this.props,\r\n            {isOpen, selectedOption} = this.state,\r\n            optionsList = options.map((option) => this.createOptionItem(option)),\r\n            customSelectWidgetStyles = classNames(\r\n                'custom-select__widget',\r\n                {'custom-select__widget--open': isOpen}\r\n            );\r\n\r\n        return (\r\n            <div className=\"custom-select\">\r\n                <div className={customSelectWidgetStyles}>\r\n                    <button\r\n                        role=\"combobox\"\r\n                        aria-owns={optionsListName}\r\n                        aria-expanded={isOpen}\r\n                        aria-labelledby={labelId}\r\n                        aria-activedescendant={`${optionsListName}-${selectedOption}`}\r\n\r\n                        onMouseDown={this.handleBtnClick}\r\n                        onKeyDown={this.handleKeyboardOptionSelection}\r\n                        onBlur={this.handleBtnBlur}\r\n                        onFocus={this.handleBtnFocus}\r\n                        type=\"button\"\r\n                        className=\"custom-select__btn\">\r\n                        <span className=\"custom-select__label\">{selectedOption}</span>\r\n                    </button>\r\n                    <ul\r\n                        id={optionsListName}\r\n                        className=\"custom-select__list\"\r\n                        role=\"listbox\"\r\n                    >\r\n                        {optionsList}\r\n                    </ul>\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}\r\n\r\nexport default CustomSelect;"],"names":["CustomSelect","Component","props","event","keyCode","options","optionsLength","activeOptionIndex","nextOptionIndex","prevState","option","optionStyles","classNames","jsx","optionsListName","labelId","isOpen","selectedOption","optionsList","customSelectWidgetStyles","jsxs","CustomSelect$1"],"mappings":"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"}