@centreon/react-components
Version:
react components used by centreon web frontend
246 lines (201 loc) • 8.88 kB
JavaScript
"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 _reactDom = require("react-dom");
var _classnames = _interopRequireDefault(require("classnames"));
var _inputSelectTableCell = _interopRequireDefault(require("./input-select-table-cell.scss"));
var _CustomIconWithText = _interopRequireDefault(require("../../Custom/CustomIconWithText"));
var _IconToggleSubmenu = _interopRequireDefault(require("../../Icon/IconToggleSubmenu"));
/* eslint-disable react/jsx-indent */
/* eslint-disable react/jsx-no-bind */
/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable no-return-assign */
/* eslint-disable react/jsx-filename-extension */
/* eslint-disable react/no-find-dom-node */
/* eslint-disable camelcase */
/* eslint-disable no-plusplus */
/* eslint-disable react/prop-types */
/* eslint-disable react/sort-comp */
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;
if (options) {
for (var i = 0; i < options.length; i++) {
// eslint-disable-next-line
if (options[i].id == value) {
_this.setState({
selected: options[i]
});
}
}
_this.setState({
options: options,
allOptions: options
});
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "componentWillReceiveProps", function (nextProps) {
var value = nextProps.value,
options = nextProps.options;
if (options) {
for (var i = 0; i < options.length; i++) {
// eslint-disable-next-line
if (options[i].id == value) {
_this.setState({
selected: options[i]
});
}
}
_this.setState({
options: options,
allOptions: options
});
}
});
(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, event) {
var onChange = _this.props.onChange;
_this.setState({
selected: option,
active: false
}, function () {
if (onChange) {
onChange(option.id, event);
}
});
});
(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,
isColored = _this$props2.isColored;
return _react["default"].createElement("div", {
className: (0, _classnames["default"])(_inputSelectTableCell["default"]['input-select'], _inputSelectTableCell["default"][size || ''], _inputSelectTableCell["default"][active ? 'active' : ''], error ? _inputSelectTableCell["default"]['has-danger'] : '', customStyle ? _inputSelectTableCell["default"][customStyle] : ''),
ref: function ref(select) {
return _this2.select = select;
}
}, _react["default"].createElement("div", {
className: (0, _classnames["default"])(_inputSelectTableCell["default"]['input-select-wrap'])
}, _react["default"].createElement("span", {
className: (0, _classnames["default"])(_inputSelectTableCell["default"]['input-select-field']),
onClick: this.toggleSelect.bind(this)
}, selected.name), _react["default"].createElement(_IconToggleSubmenu["default"], {
iconPosition: "icons-toggle-position-multiselect-table",
iconType: "arrow",
onClick: this.toggleSelect.bind(this)
})), active ? _react["default"].createElement("div", {
className: (0, _classnames["default"])(_inputSelectTableCell["default"]['input-select-dropdown'])
}, options ? options.map(function (option) {
return _react["default"].createElement("div", {
style: isColored ? {
backgroundColor: option.color,
margin: '-4px',
lineHeight: '1.43'
} : {
margin: '-4px',
lineHeight: '1.43'
}
}, icons ? _react["default"].createElement(_CustomIconWithText["default"], {
label: option.name,
onClick: _this2.optionChecked.bind(_this2, option),
image: "".concat(domainPath, "/").concat(option.preview)
}) : _react["default"].createElement("span", {
onClick: _this2.optionChecked.bind(_this2, option),
className: (0, _classnames["default"])(_inputSelectTableCell["default"]['input-select-label'])
}, option.name));
}) : null) : null, error ? _react["default"].createElement("div", {
className: (0, _classnames["default"])(_inputSelectTableCell["default"]['form-error'])
}, error) : null);
}
}]);
return InputFieldSelectCustom;
}(_react.Component);
var _default = InputFieldSelectCustom;
exports["default"] = _default;