@centreon/react-components/lib/InputField/InputFieldMultiSelect/index.js

react components used by centreon web frontend

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _inputMultiSelect = _interopRequireDefault(require("./input-multi-select.scss"));

var _Checkbox = _interopRequireDefault(require("../../Checkbox"));

var _IconToggleSubmenu = _interopRequireDefault(require("../../Icon/IconToggleSubmenu"));

/* eslint-disable react/no-array-index-key */

/* eslint-disable prettier/prettier */

/* eslint-disable react/jsx-no-bind */

/* eslint-disable no-return-assign */

/* eslint-disable react/jsx-filename-extension */

/* eslint-disable camelcase */

/* eslint-disable react/sort-comp */

/* eslint-disable react/prop-types */

/* eslint-disable no-restricted-syntax */

/* eslint-disable import/no-named-as-default */
var InputFieldMultiSelect =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(InputFieldMultiSelect, _Component);

  function InputFieldMultiSelect() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2["default"])(this, InputFieldMultiSelect);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(InputFieldMultiSelect)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
      active: false,
      allOptions: [],
      options: [],
      activeOptions: {}
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillReceiveProps", function (nextProps) {
      var options = nextProps.options,
          value = nextProps.value;
      var activeOptions = {};

      if (value) {
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = value[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var val = _step.value;
            activeOptions[val] = true;
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator["return"] != null) {
              _iterator["return"]();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }
      }

      if (options) {
        _this.setState({
          options: options,
          allOptions: options,
          activeOptions: activeOptions
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillMount", function () {
      var _this$props = _this.props,
          options = _this$props.options,
          value = _this$props.value;
      var activeOptions = {};

      if (value) {
        var _iteratorNormalCompletion2 = true;
        var _didIteratorError2 = false;
        var _iteratorError2 = undefined;

        try {
          for (var _iterator2 = value[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
            var val = _step2.value;
            activeOptions[val] = true;
          }
        } catch (err) {
          _didIteratorError2 = true;
          _iteratorError2 = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion2 && _iterator2["return"] != null) {
              _iterator2["return"]();
            }
          } finally {
            if (_didIteratorError2) {
              throw _iteratorError2;
            }
          }
        }
      }

      if (options) {
        _this.setState({
          options: options,
          allOptions: options,
          activeOptions: activeOptions
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "searchTextChanged", function (e) {
      var searchString = e.target.value;
      var allOptions = _this.state.allOptions;

      _this.setState({
        options: allOptions.filter(function (option) {
          return String(option.name).toLowerCase().indexOf(String(searchString).toLowerCase()) > -1;
        })
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleSelect", function () {
      var active = _this.state.active;

      _this.setState({
        active: !active
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "optionChecked", function (option) {
      var activeOptions = _this.state.activeOptions;
      var onChange = _this.props.onChange;
      activeOptions[option.id] = !activeOptions[option.id];

      _this.setState({
        activeOptions: activeOptions
      }, function () {
        if (onChange) {
          var activeIds = [];

          for (var key in activeOptions) {
            if (activeOptions[key]) {
              activeIds.push(key);
            }
          }

          onChange(activeIds);
        }
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickOutside", function (e) {
      if (!_this.multiselect || _this.multiselect.contains(e.target)) {
        return;
      }

      _this.setState({
        active: false
      });
    });
    return _this;
  }

  (0, _createClass2["default"])(InputFieldMultiSelect, [{
    key: "UNSAFE_componentWillMount",
    value: function UNSAFE_componentWillMount() {
      window.addEventListener('mousedown', this.handleClickOutside, false);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      window.removeEventListener('mousedown', this.handleClickOutside, false);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$state = this.state,
          active = _this$state.active,
          options = _this$state.options,
          activeOptions = _this$state.activeOptions;
      var _this$props2 = this.props,
          size = _this$props2.size,
          error = _this$props2.error;
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputMultiSelect["default"]['multi-select'], _inputMultiSelect["default"][size || ''], _inputMultiSelect["default"][active ? 'active' : ''], error ? _inputMultiSelect["default"]['has-danger'] : ''),
        ref: function ref(multiselect) {
          return _this2.multiselect = multiselect;
        }
      }, _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputMultiSelect["default"]['multi-select-wrap'])
      }, _react["default"].createElement("input", {
        onChange: this.searchTextChanged,
        className: (0, _classnames["default"])(_inputMultiSelect["default"]['multi-select-input']),
        type: "text",
        placeholder: "Search",
        onFocus: function onFocus() {
          _this2.setState({
            active: true
          });
        }
      }), _react["default"].createElement(_IconToggleSubmenu["default"], {
        iconPosition: "icons-toggle-position-multiselect",
        iconType: "arrow",
        onClick: this.toggleSelect.bind(this)
      })), active ? _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputMultiSelect["default"]['multi-select-dropdown'])
      }, options ? options.map(function (option, index) {
        return _react["default"].createElement(_Checkbox["default"], {
          key: "multiselect-checkbox-".concat(index),
          label: option.name,
          onClick: _this2.optionChecked.bind(_this2, option),
          iconColor: "green",
          onChange: function onChange() {},
          checked: activeOptions[option.id] || false
        });
      }) : null) : null, error ? _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputMultiSelect["default"]['form-error'])
      }, error) : null);
    }
  }]);
  return InputFieldMultiSelect;
}(_react.Component);

var _default = InputFieldMultiSelect;
exports["default"] = _default;