@centreon/react-components/lib/InputField/InputFieldSelectCustom/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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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 _reactDom = require("react-dom");

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

var _inputField = _interopRequireDefault(require("./input-field.scss"));

var _CustomIconWithText = _interopRequireDefault(require("../../Custom/CustomIconWithText"));

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

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var InputFieldSelectCustom =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2["default"])(InputFieldSelectCustom, _Component);

  function InputFieldSelectCustom() {
    var _getPrototypeOf2;

    var _this;

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

    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"])(InputFieldSelectCustom)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
      active: false,
      allOptions: [],
      options: [],
      selected: {}
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleSelect", function () {
      var disabled = _this.props.disabled;
      if (disabled) return;
      var active = _this.state.active;

      _this.setState({
        active: !active
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillMount", function () {
      var _this$props = _this.props,
          value = _this$props.value,
          options = _this$props.options;
      var found = false;

      if (options) {
        for (var i = 0; i < options.length; i++) {
          if (options[i].id == value) {
            _this.setState({
              selected: options[i]
            });

            found = true;
          }
        }

        _this.setState(_objectSpread({
          options: options,
          allOptions: options
        }, !found && {
          selected: {}
        }));
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillReceiveProps", function (nextProps) {
      var value = nextProps.value,
          options = nextProps.options;
      var found = false;

      if (options) {
        for (var i = 0; i < options.length; i++) {
          if (options[i].id == value) {
            _this.setState({
              selected: options[i]
            });

            found = true;
          }
        }

        _this.setState(_objectSpread({
          options: options,
          allOptions: options
        }, !found && {
          selected: {}
        }));
      }
    });
    (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), "optionChecked", function (option) {
      var onChange = _this.props.onChange;

      _this.setState({
        selected: option,
        active: false
      }, function () {
        if (onChange) {
          onChange(option.id);
        }
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickOutside", function (e) {
      if (!_this.select || _this.select.contains(e.target)) {
        return;
      }

      _this.setState({
        active: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focusInput", function (component) {
      var allOptions = _this.state.allOptions;

      if (component) {
        _this.setState({
          options: allOptions
        });

        (0, _reactDom.findDOMNode)(component).focus();
      }
    });
    return _this;
  }

  (0, _createClass2["default"])(InputFieldSelectCustom, [{
    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,
          selected = _this$state.selected,
          options = _this$state.options;
      var _this$props2 = this.props,
          size = _this$props2.size,
          error = _this$props2.error,
          icons = _this$props2.icons,
          domainPath = _this$props2.domainPath,
          customStyle = _this$props2.customStyle;
      return _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputField["default"]['input-select'], _inputField["default"][size || ''], _inputField["default"][active ? 'active' : ''], error ? _inputField["default"]['has-danger'] : '', customStyle ? _inputField["default"][customStyle] : ''),
        ref: function ref(select) {
          return _this2.select = select;
        }
      }, _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputField["default"]['input-select-wrap'])
      }, active ? _react["default"].createElement("input", {
        ref: this.focusInput,
        onChange: this.searchTextChanged,
        className: (0, _classnames["default"])(_inputField["default"]['input-select-input']),
        type: "text",
        placeholder: "Search"
      }) : _react["default"].createElement("span", {
        className: (0, _classnames["default"])(_inputField["default"]['input-select-field']),
        onClick: this.toggleSelect.bind(this)
      }, selected.name), _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"])(_inputField["default"]['input-select-dropdown'])
      }, options ? options.map(function (option) {
        return _react["default"].createElement(_react["default"].Fragment, null, icons ? _react["default"].createElement(_CustomIconWithText["default"], (0, _extends2["default"])({
          label: option.name,
          onClick: _this2.optionChecked.bind(_this2, option)
        }, option.preview ? {
          image: "".concat(domainPath, "/").concat(option.preview)
        } : {
          iconOff: true
        })) : _react["default"].createElement("span", {
          onClick: _this2.optionChecked.bind(_this2, option),
          className: (0, _classnames["default"])(_inputField["default"]['input-select-label'])
        }, option.name));
      }) : null) : null, error ? _react["default"].createElement("div", {
        className: (0, _classnames["default"])(_inputField["default"]['form-error'])
      }, error) : null);
    }
  }]);
  return InputFieldSelectCustom;
}(_react.Component);

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