api-browser/OpenApi.js

Web components for interacting with GraphQL APIs using GraphiQL, and RESTful APIs supporting the OpenAPI schema, using SwaggerUI

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _taggedTemplateLiteral2 = require('babel-runtime/helpers/taggedTemplateLiteral');

var _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2);

var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n    display: grid;\n    position: relative;\n'], ['\n    display: grid;\n    position: relative;\n']);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _swaggerUi = require('swagger-ui');

var _swaggerUi2 = _interopRequireDefault(_swaggerUi);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

require('swagger-ui/dist/swagger-ui.css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var DOM_ID = 'open-api-swagger-mount';

var SwaggerMount = _styledComponents2.default.section(_templateObject);

var makeSwagger = function makeSwagger(url, token) {
    return (0, _swaggerUi2.default)({
        url: url,
        dom_id: '#' + DOM_ID,
        showMutatedRequest: true,
        requestInterceptor: function requestInterceptor(req) {
            return (0, _extends3.default)({}, req, {
                headers: (0, _extends3.default)({}, req.headers, {
                    Authorization: 'Bearer ' + token
                })
            });
        }
    });
};

var OpenAPI = function (_PureComponent) {
    (0, _inherits3.default)(OpenAPI, _PureComponent);

    function OpenAPI() {
        (0, _classCallCheck3.default)(this, OpenAPI);
        return (0, _possibleConstructorReturn3.default)(this, (OpenAPI.__proto__ || Object.getPrototypeOf(OpenAPI)).apply(this, arguments));
    }

    (0, _createClass3.default)(OpenAPI, [{
        key: 'componentDidMount',
        value: function componentDidMount() {
            if (this.props.token) {
                this.swagger = makeSwagger(this.props.specUrl, this.props.token);
            }
        }
    }, {
        key: 'componentWillUpdate',
        value: function componentWillUpdate(nextProps) {
            if (!this.swagger && nextProps.token) {
                this.swagger = makeSwagger(nextProps.specUrl, nextProps.token);
            }
        }
    }, {
        key: 'render',
        value: function render() {
            return _react2.default.createElement(SwaggerMount, { id: DOM_ID });
        }
    }]);
    return OpenAPI;
}(_react.PureComponent);

OpenAPI.displayName = 'OpenAPI';
exports.default = OpenAPI;