@telsystems/inputs/_tscache/src/DropDown/BasicDropDown.js

Inputs package

var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import * as React from 'react';
import cn from 'classnames';
import theme from '@telsystems/design/dist/themes/default/Dropdown.scss';
import { SimplePanel } from './SimplePanel';
import { MultiSelectPanel } from './MultiSelectPanel';
var BasicDropDown = (function (_super) {
    __extends(BasicDropDown, _super);
    function BasicDropDown() {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i] = arguments[_i];
        }
        var _this = _super.apply(this, args) || this;
        _this.getRef = function (node) {
            _this.node = node;
        };
        _this.onItemClick = function (item, index) { return function (e) {
            e.preventDefault();
            var _a = _this.props, hideAfterClick = _a.hideAfterClick, onItemClick = _a.onItemClick;
            onItemClick(item.content, index, e);
            if (hideAfterClick) {
                _this.hidePanel();
            }
        }; };
        _this.onTriggerClick = function (e) {
            e.preventDefault();
            if (_this.props.disabled) {
                return false;
            }
            _this.togglePanel();
        };
        _this.onOutsideClick = function (e) {
            if (_this.node && !_this.node.contains(e.target)) {
                _this.hidePanel();
            }
        };
        _this.state = {
            isActive: false
        };
        return _this;
    }
    BasicDropDown.prototype.render = function () {
        var _a = this.props, children = _a.children, items = _a.items, useCheckbox = _a.useCheckbox, clearSelectedButton = _a.clearSelectedButton, onClear = _a.onClear, groupName = _a.groupName, style = _a.style;
        var isActive = this.state.isActive;
        var visibleClass = isActive ? theme['active'] : '';
        return (React.createElement("div", { className: cn(theme['dropdown'], visibleClass), ref: this.getRef, style: style },
            React.createElement("div", { onClick: this.onTriggerClick }, children),
            useCheckbox
                ? React.createElement(MultiSelectPanel, { items: items, onItemClick: this.onItemClick, onClear: onClear, groupName: groupName, useCheckbox: useCheckbox, clearSelectedButton: clearSelectedButton })
                : React.createElement(SimplePanel, { items: items, onItemClick: this.onItemClick })));
    };
    BasicDropDown.prototype.showPanel = function () {
        if (!this.state.isActive) {
            document.addEventListener('click', this.onOutsideClick, true);
            this.setState({ isActive: true });
            var onOpen = this.props.onOpen;
            if (typeof onOpen === 'function') {
                onOpen();
            }
        }
    };
    BasicDropDown.prototype.hidePanel = function () {
        if (this.state.isActive) {
            document.removeEventListener('click', this.onOutsideClick, true);
            this.setState({ isActive: false });
            var onClose = this.props.onClose;
            if (typeof onClose === 'function') {
                onClose();
            }
        }
    };
    BasicDropDown.prototype.togglePanel = function () {
        if (this.state.isActive) {
            this.hidePanel();
        }
        else {
            this.showPanel();
        }
    };
    BasicDropDown.defaultProps = {
        hideAfterClick: true,
        openOnHover: false,
        disabled: false,
        height: 315,
        items: [],
        onItemClick: function () {
        },
        onClear: function () {
        },
        children: function () { return (React.createElement("div", null)); },
    };
    return BasicDropDown;
}(React.PureComponent));
export { BasicDropDown };
//# sourceMappingURL=BasicDropDown.js.map