@iobroker/adapter-react/Components/Image.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

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

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

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

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

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

var _no_icon = _interopRequireDefault(require("../assets/no_icon.svg"));

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function getElementFromSource(src) {
  var svgContainer = document.createElement('div');
  svgContainer.innerHTML = src;
  var svg = svgContainer.firstElementChild;

  if (svg.remove) {
    svg.remove();
  } else {
    svgContainer.removeChild(svg);
  }

  svgContainer.remove();
  return svg;
}

function serializeAttrs(map) {
  var ret = {};

  for (var prop, i = 0; i < map.length; i++) {
    var key = map[i].name;

    if (key === 'class') {
      prop = 'className';
    } else if (!key.startsWith('data-')) {
      prop = key.replace(/[-|:]([a-z])/g, function (g) {
        return g[1].toUpperCase();
      });
    } else {
      prop = key;
    }

    ret[prop] = map[i].value;
  }

  return ret;
}
/**
 * @typedef {object} ImageProps
 * @property {string} [key] The key to identify this component.
 * @property {string} [color] The color.
 * @property {string} [src] The source of the image.
 * @property {string} [imagePrefix] The image prefix (default: './files/')
 * @property {string} [className] The CSS class name.
 * @property {boolean} [showError] Show image errors (or just show no image)?
 *
 * @extends {React.Component<ImageProps>}
 */


var Image = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2["default"])(Image, _React$Component);

  var _super = _createSuper(Image);

  function Image(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Image);
    _this = _super.call(this, props);
    _this.state = {
      svg: !!(_this.props.src && _this.props.src.startsWith('data:')),
      created: true,
      color: _this.props.color || '',
      src: _this.props.src || '',
      imgError: false,
      showError: _this.props.showError
    };
    _this.svg = _this.state.svg ? _this.getSvgFromData(_this.state.src) : null;
    return _this;
  }

  (0, _createClass2["default"])(Image, [{
    key: "getSvgFromData",
    value: function getSvgFromData(src) {
      var len = 'data:image/svg+xml;base64,';

      if (!src.startsWith(len)) {
        return null;
      }

      src = src.substring(len.length);

      try {
        src = atob(src);
        var svg = getElementFromSource(src);
        var inner = svg.innerHTML;
        var svgProps = serializeAttrs(svg.attributes || []);
        svg.remove();
        return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
          className: this.props.className,
          style: this.state.color ? {
            color: this.state.color
          } : {}
        }, svgProps, {
          dangerouslySetInnerHTML: {
            __html: inner
          }
        }));
      } catch (e) {}

      return null;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      if (this.state.svg) {
        if (!this.state.created) {
          setTimeout(function () {
            _this2.svg = _this2.getSvgFromData(_this2.state.src);

            _this2.setState({
              created: true
            });
          }, 50);
        }

        return this.svg;
      } else if (this.state.src) {
        return /*#__PURE__*/_react["default"].createElement("img", {
          className: this.props.className,
          src: this.state.imgError ? _no_icon["default"] : (this.props.imagePrefix || '') + this.state.src || _no_icon["default"],
          alt: "",
          onError: function onError() {
            return _this2.props.showError ? _this2.setState({
              imgError: true
            }) : _this2.setState({
              src: ''
            });
          }
        });
      } else {
        return null;
      }
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      var newState = {};
      var changed = false;

      if (props && state && props.src !== state.src) {
        newState.src = props.src;
        newState.svg = props.src && props.src.startsWith('data:');
        newState.created = false;
        changed = true;
      }

      if (props && state && props.color !== state.color) {
        newState.color = props.color;
        newState.created = false;
        changed = true;
      }

      if (props && state && props.showError !== state.showError) {
        newState.showError = props.showError;
        changed = true;
      }

      return changed ? newState : null;
    }
  }]);
  return Image;
}(_react["default"].Component);

Image.propTypes = {
  color: _propTypes["default"].string,
  src: _propTypes["default"].string.isRequired,
  className: _propTypes["default"].string,
  imagePrefix: _propTypes["default"].string
};
var _default = Image;
exports["default"] = _default;
//# sourceMappingURL=Image.js.map