@patternplate/client/lib/app/components/favicon.js

Universal javascript client application for patternplate

"use strict";

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

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

var _server = require("react-dom/server");

var _reactHelmet = _interopRequireDefault(require("react-helmet"));

var _components = require("@patternplate/components");

var _platform = _interopRequireDefault(require("platform"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return _sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }

const THEMES = _components.themes.getThemes();

const SVG_FAVICON_SUPPORT = ["Firefox"];

class FavIcon extends _react.default.Component {
  constructor(...args) {
    super(...args);
    this.state = {};
  }

  componentDidMount() {
    if (SVG_FAVICON_SUPPORT.indexOf(_platform.default.name) > -1) {
      return;
    }

    _components.svg.png(getSource(this.props)).then(pngHref => this.setState({
      pngHref
    })).catch(err => {
      console.error(err);
      this.setState({
        pngHref: null
      });
    });
  }

  componentWillReceiveProps(next) {
    if (SVG_FAVICON_SUPPORT.indexOf(_platform.default.name) > -1) {
      return;
    }

    _components.svg.png(getSource(next)).then(pngHref => this.setState({
      pngHref
    })).catch(err => {
      console.error(err);
      this.setState({
        pngHref: null
      });
    });
  }

  render() {
    const source = getSource(this.props);

    const svgHref = _components.svg.btoa(source);

    return _react.default.createElement(_reactHelmet.default, {
      link: [...(this.state.pngHref ? [{
        rel: "icon",
        href: this.state.pngHref,
        type: "image/png"
      }] : []), {
        rel: "icon",
        href: svgHref,
        type: "image/svg+xml"
      }]
    });
  }

}

const StyledFavicon = (0, _components.styled)(FavIcon).withConfig({
  displayName: "favicon__StyledFavicon"
})(["width:100%;height:auto;stroke:", ";stroke-width:0;fill:", ";"], props => props.theme.colors.color, props => props.theme.colors.color);

var _default = props => _react.default.createElement(StyledFavicon, props);

exports.default = _default;

function getSource(props) {
  if (!props.source) {
    return (0, _server.renderToStaticMarkup)(_react.default.createElement("svg", {
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 24 24"
    }, _react.default.createElement(_components.Symbol, {
      definition: _components.IconDefinitions.patternplate,
      emit: true,
      style: {
        fill: getFill(props)
      }
    })));
  }

  const _svg$purge = _components.svg.purge([_components.svg.parse(props.source)]),
        _svg$purge2 = _slicedToArray(_svg$purge, 1),
        purged = _svg$purge2[0];

  return _components.svg.stringify(purged);
}

function getFill(props) {
  if (props.error) {
    return THEMES.dark.error;
  }

  return THEMES.dark.active;
}
//# sourceMappingURL=favicon.js.map