@iobroker/adapter-react/Components/TextWithIcon.js

React classes to develop admin interfaces for ioBroker with react.

"use strict";

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

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

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styles = require("@material-ui/core/styles");

var _Icon = _interopRequireDefault(require("./Icon"));

var _Utils = _interopRequireDefault(require("./Utils"));

var styles = function styles(theme) {
  return {
    div: {
      borderRadius: 3,
      padding: '0 3px',
      lineHeight: '20px',
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'center'
    },
    icon: {
      width: 16,
      height: 16,
      marginRight: 8,
      verticalAlign: 'middle'
    },
    text: {
      display: 'inline-block',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  };
};

var TextWithIcon = function TextWithIcon(props) {
  var _item2, _item3, _item4, _item5, _props$moreClasses, _item6, _item7, _props$moreClasses2, _props$moreClasses3, _item8;

  var item = props.value;
  var prefix = props.removePrefix || '';

  if (typeof item === 'string') {
    var list = props.list || props.options;

    if (props.list) {
      if (Array.isArray(list)) {
        var _item = list.find(function (obj) {
          return obj._id === prefix + item;
        });

        if (_item) {
          var _item$common, _item$common2;

          item = {
            name: _Utils["default"].getObjectNameFromObj(_item, props.lang).replace('system.group.', ''),
            value: _item._id,
            icon: (_item$common = _item.common) === null || _item$common === void 0 ? void 0 : _item$common.icon,
            color: (_item$common2 = _item.common) === null || _item$common2 === void 0 ? void 0 : _item$common2.color
          };
        } else {
          item = {
            name: item,
            value: prefix + item
          };
        }
      } else if (list[prefix + item]) {
        var _list$common, _list$common2;

        item = {
          name: _Utils["default"].getObjectNameFromObj(list[prefix + item], props.lang).replace('system.group.', ''),
          value: list[prefix + item]._id,
          icon: (_list$common = list[prefix + item].common) === null || _list$common === void 0 ? void 0 : _list$common.icon,
          color: (_list$common2 = list[prefix + item].common) === null || _list$common2 === void 0 ? void 0 : _list$common2.color
        };
      } else {
        item = {
          name: item,
          value: prefix + item
        };
      }
    } else {
      item = {
        name: item,
        value: prefix + item
      };
    }
  } else if (!item || (0, _typeof2["default"])(item) !== 'object') {
    item = {
      name: '',
      value: ''
    };
  } else {
    var _item$common3, _item$common4;

    item = {
      name: _Utils["default"].getObjectNameFromObj(item, props.lang).replace('system.group.', '').replace('system.user.', '').replace('enum.rooms.', '').replace('enum.functions.', ''),
      value: item._id,
      icon: (_item$common3 = item.common) === null || _item$common3 === void 0 ? void 0 : _item$common3.icon,
      color: (_item$common4 = item.common) === null || _item$common4 === void 0 ? void 0 : _item$common4.color
    };
  }

  var style = (_item2 = item) !== null && _item2 !== void 0 && _item2.color ? {
    border: "1px solid ".concat(_Utils["default"].invertColor((_item3 = item) === null || _item3 === void 0 ? void 0 : _item3.color)),
    color: _Utils["default"].getInvertedColor((_item4 = item) === null || _item4 === void 0 ? void 0 : _item4.color, props.themeType, true) || undefined,
    backgroundColor: (_item5 = item) === null || _item5 === void 0 ? void 0 : _item5.color
  } : {};
  return /*#__PURE__*/_react["default"].createElement("div", {
    style: Object.assign({}, props.style, style),
    className: _Utils["default"].clsx(props.className, props.classes.div, (_props$moreClasses = props.moreClasses) === null || _props$moreClasses === void 0 ? void 0 : _props$moreClasses.root),
    title: props.title || item.value
  }, (_item6 = item) !== null && _item6 !== void 0 && _item6.icon ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
    src: (_item7 = item) === null || _item7 === void 0 ? void 0 : _item7.icon,
    className: _Utils["default"].clsx(props.classes.icon, (_props$moreClasses2 = props.moreClasses) === null || _props$moreClasses2 === void 0 ? void 0 : _props$moreClasses2.icon)
  }) : null, /*#__PURE__*/_react["default"].createElement("div", {
    className: _Utils["default"].clsx(props.classes.text, (_props$moreClasses3 = props.moreClasses) === null || _props$moreClasses3 === void 0 ? void 0 : _props$moreClasses3.text)
  }, (_item8 = item) === null || _item8 === void 0 ? void 0 : _item8.name));
};

TextWithIcon.propTypes = {
  t: _propTypes["default"].func.isRequired,
  lang: _propTypes["default"].string.isRequired,
  themeType: _propTypes["default"].string,
  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]).isRequired,
  list: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
  // one of "list"(Array) or "options"(object) is required
  options: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
  // one of "list"(Array) or "options"(object) is required
  className: _propTypes["default"].string,
  style: _propTypes["default"].object,
  title: _propTypes["default"].string,
  removePrefix: _propTypes["default"].string,
  moreClasses: _propTypes["default"].object
};

var _default = (0, _styles.withStyles)(styles)(TextWithIcon);

exports["default"] = _default;
//# sourceMappingURL=TextWithIcon.js.map