graphiql-code-exporter
Version:
Export working code snippets from GraphiQL queries
909 lines (805 loc) • 32.8 kB
JavaScript
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var createCodesandbox = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(files) {
var res, json;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json'
},
body: JSON.stringify({ files: files })
});
case 2:
res = _context.sent;
_context.next = 5;
return res.json();
case 5:
json = _context.sent;
if (json.sandbox_id) {
_context.next = 10;
break;
}
throw new Error('Invalid response from Codesandbox API');
case 10:
return _context.abrupt('return', { sandboxId: json.sandbox_id });
case 11:
case 'end':
return _context.stop();
}
}
}, _callee, this);
}));
return function createCodesandbox(_x) {
return _ref.apply(this, arguments);
};
}();
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
import React, { Component } from 'react';
import copy from 'copy-to-clipboard';
import { parse, print } from 'graphql';
// $FlowFixMe: can't find module
import CodeMirror from 'codemirror';
import toposort from './toposort.js';
function formatVariableName(name) {
var uppercasePattern = /[A-Z]/g;
return name.charAt(0).toUpperCase() + name.slice(1).replace(uppercasePattern, '_$&').toUpperCase();
}
var copyIcon = React.createElement(
'svg',
{
xmlns: 'http://www.w3.org/2000/svg',
width: '20',
height: '20',
viewBox: '0 0 24 24' },
React.createElement('path', { fill: 'none', d: 'M0 0h24v24H0V0z' }),
React.createElement('path', { d: 'M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z' })
);
var codesandboxIcon = React.createElement(
'svg',
{
width: '20',
height: '20',
viewBox: '0 0 256 296',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
preserveAspectRatio: 'xMidYMid' },
React.createElement(
'g',
null,
React.createElement('path', {
d: 'M115.497674,261.08837 L115.497674,154.478845 L23.8139535,101.729261 L23.8139535,162.501763 L65.8104558,186.8486 L65.8104558,232.549219 L115.497674,261.08837 Z M139.311628,261.714907 L189.916577,232.563707 L189.916577,185.779949 L232.186047,161.285235 L232.186047,101.27387 L139.311628,154.895035 L139.311628,261.714907 Z M219.971965,80.8276886 L171.155386,52.5391067 L128.292316,77.4106841 L85.1040206,52.5141067 L35.8521355,81.1812296 L127.765737,134.063073 L219.971965,80.8276886 Z M0,222.211907 L0,74.4948807 L127.986799,0 L256,74.1820085 L256,221.978632 L127.983954,295.72283 L0,222.211907 Z',
fill: '#000000'
})
)
);
// TODO: Need clearer separation between option defs and option values
var findFragmentDependencies = function findFragmentDependencies(operationDefinitions, def) {
var fragmentByName = function fragmentByName(name) {
return operationDefinitions.find(function (def) {
return def.name.value === name;
});
};
var findReferencedFragments = function findReferencedFragments(selectionSet) {
var selections = selectionSet.selections;
var namedFragments = selections.map(function (selection) {
if (selection.kind === 'FragmentSpread') {
return fragmentByName(selection.name.value);
} else {
return null;
}
}).filter(Boolean);
var nestedNamedFragments = selections.reduce(function (acc, selection) {
if ((selection.kind === 'Field' || selection.kind === 'SelectionNode' || selection.kind === 'InlineFragment') && selection.selectionSet !== undefined) {
return acc.concat(findReferencedFragments(selection.selectionSet));
} else {
return acc;
}
}, []);
return namedFragments.concat(nestedNamedFragments);
};
var selectionSet = def.selectionSet;
return findReferencedFragments(selectionSet);
};
var operationNodesMemo = [null, null];
function getOperationNodes(query) {
if (operationNodesMemo[0] === query && operationNodesMemo[1]) {
return operationNodesMemo[1];
}
var operationDefinitions = [];
try {
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = parse(query).definitions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var def = _step.value;
if (def.kind === 'FragmentDefinition' || def.kind === 'OperationDefinition') {
operationDefinitions.push(def);
}
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
} catch (e) {}
operationNodesMemo = [query, operationDefinitions];
return operationDefinitions;
}
var getUsedVariables = function getUsedVariables(variables, operationDefinition) {
return (operationDefinition.variableDefinitions || []).reduce(function (usedVariables, variable) {
var variableName = variable.variable.name.value;
if (variables[variableName]) {
usedVariables[variableName] = variables[variableName];
}
return usedVariables;
}, {});
};
var getOperationName = function getOperationName(operationDefinition) {
return operationDefinition.name ? operationDefinition.name.value : operationDefinition.operation;
};
var getOperationDisplayName = function getOperationDisplayName(operationDefinition) {
return operationDefinition.name ? operationDefinition.name.value : '<Unnamed:' + operationDefinition.operation + '>';
};
/**
* ToolbarMenu
*
* A menu style button to use within the Toolbar.
* Copied from GraphiQL: https://github.com/graphql/graphiql/blob/272e2371fc7715217739efd7817ce6343cb4fbec/src/components/ToolbarMenu.js#L16-L80
*/
export var ToolbarMenu = function (_Component) {
_inherits(ToolbarMenu, _Component);
function ToolbarMenu() {
var _ref2;
var _temp, _this, _ret;
_classCallCheck(this, ToolbarMenu);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = ToolbarMenu.__proto__ || Object.getPrototypeOf(ToolbarMenu)).call.apply(_ref2, [this].concat(args))), _this), _this.state = { visible: false }, _this.handleOpen = function (e) {
e.preventDefault();
_this.setState({ visible: true });
_this._subscribe();
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(ToolbarMenu, [{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this._release();
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var visible = this.state.visible;
return (
// eslint-disable-next-line
React.createElement(
'a',
{
className: 'toolbar-menu toolbar-button',
onClick: this.handleOpen,
onMouseDown: function onMouseDown(e) {
return e.preventDefault();
},
ref: function ref(node) {
_this2._node = node;
},
title: this.props.title },
this.props.label,
React.createElement(
'svg',
{ width: '14', height: '8' },
React.createElement('path', { fill: '#666', d: 'M 5 1.5 L 14 1.5 L 9.5 7 z' })
),
React.createElement(
'ul',
{ className: 'toolbar-menu-items' + (visible ? ' open' : '') },
this.props.children
)
)
);
}
}, {
key: '_subscribe',
value: function _subscribe() {
if (!this._listener) {
this._listener = this.handleClick.bind(this);
document.addEventListener('click', this._listener);
}
}
}, {
key: '_release',
value: function _release() {
if (this._listener) {
document.removeEventListener('click', this._listener);
this._listener = null;
}
}
}, {
key: 'handleClick',
value: function handleClick(e) {
if (this._node !== e.target) {
e.preventDefault();
this.setState({ visible: false });
this._release();
}
}
}]);
return ToolbarMenu;
}(Component);
var CodeDisplay = function (_React$PureComponent) {
_inherits(CodeDisplay, _React$PureComponent);
function CodeDisplay() {
_classCallCheck(this, CodeDisplay);
return _possibleConstructorReturn(this, (CodeDisplay.__proto__ || Object.getPrototypeOf(CodeDisplay)).apply(this, arguments));
}
_createClass(CodeDisplay, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.editor = CodeMirror(this._node, {
value: this.props.code.trim(),
lineNumbers: false,
mode: this.props.mode,
readOnly: true,
theme: this.props.theme
});
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps) {
if (this.props.code !== prevProps.code) {
this.editor.setValue(this.props.code);
}
if (this.props.mode !== prevProps.mode) {
this.editor.setOption('mode', this.props.mode);
}
if (this.props.theme !== prevProps.theme) {
this.editor.setOption('theme', this.props.theme);
}
}
}, {
key: 'render',
value: function render() {
var _this4 = this;
return React.createElement('div', { ref: function ref(_ref3) {
return _this4._node = _ref3;
} });
}
}]);
return CodeDisplay;
}(React.PureComponent);
var CodeExporter = function (_Component2) {
_inherits(CodeExporter, _Component2);
function CodeExporter() {
var _ref4,
_this6 = this;
var _temp2, _this5, _ret2;
_classCallCheck(this, CodeExporter);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret2 = (_temp2 = (_this5 = _possibleConstructorReturn(this, (_ref4 = CodeExporter.__proto__ || Object.getPrototypeOf(CodeExporter)).call.apply(_ref4, [this].concat(args))), _this5), _this5.state = {
showCopiedTooltip: false,
optionValuesBySnippet: new Map(),
snippet: null,
codesandboxResult: null
}, _this5._activeSnippet = function () {
return _this5.props.snippet || _this5.state.snippet || _this5.props.snippets[0];
}, _this5.setSnippet = function (snippet) {
_this5.props.onSelectSnippet && _this5.props.onSelectSnippet(snippet);
_this5.setState({ snippet: snippet, codesandboxResult: null });
}, _this5.setLanguage = function (language) {
var snippet = _this5.props.snippets.find(function (snippet) {
return snippet.language === language;
});
if (snippet) {
_this5.setSnippet(snippet);
}
}, _this5.handleSetOptionValue = function (snippet, id, value) {
_this5.props.onSetOptionValue && _this5.props.onSetOptionValue(snippet, id, value);
var optionValuesBySnippet = _this5.state.optionValuesBySnippet;
var snippetOptions = optionValuesBySnippet.get(snippet) || {};
optionValuesBySnippet.set(snippet, _extends({}, snippetOptions, _defineProperty({}, id, value)));
return _this5.setState({ optionValuesBySnippet: optionValuesBySnippet });
}, _this5.getOptionValues = function (snippet) {
var snippetDefaults = snippet.options.reduce(function (acc, option) {
return _extends({}, acc, _defineProperty({}, option.id, option.initial));
}, {});
return _extends({}, snippetDefaults, _this5.state.optionValuesBySnippet.get(snippet) || {}, _this5.props.optionValues);
}, _this5._generateCodesandbox = function () {
var _ref5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(operationDataList) {
var snippet, generateFiles, sandboxResult;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_this5.setState({ codesandboxResult: { type: 'loading' } });
snippet = _this5._activeSnippet();
if (snippet) {
_context2.next = 5;
break;
}
// Shouldn't be able to get in this state, but just in case...
_this5.setState({
codesandboxResult: { type: 'error', error: 'No active snippet' }
});
return _context2.abrupt('return');
case 5:
generateFiles = snippet.generateCodesandboxFiles;
if (generateFiles) {
_context2.next = 9;
break;
}
// Shouldn't be able to get in this state, but just in case...
_this5.setState({
codesandboxResult: {
type: 'error',
error: 'Snippet does not support CodeSandbox'
}
});
return _context2.abrupt('return');
case 9:
_context2.prev = 9;
_context2.next = 12;
return createCodesandbox(generateFiles(_this5._collectOptions(snippet, operationDataList, _this5.props.schema)));
case 12:
sandboxResult = _context2.sent;
_this5.setState({
codesandboxResult: _extends({ type: 'success' }, sandboxResult)
});
_this5.props.onGenerateCodesandbox && _this5.props.onGenerateCodesandbox(sandboxResult);
_context2.next = 21;
break;
case 17:
_context2.prev = 17;
_context2.t0 = _context2['catch'](9);
console.error('Error generating codesandbox', _context2.t0);
_this5.setState({
codesandboxResult: {
type: 'error',
error: 'Failed to generate CodeSandbox'
}
});
case 21:
case 'end':
return _context2.stop();
}
}
}, _callee2, _this6, [[9, 17]]);
}));
return function (_x2) {
return _ref5.apply(this, arguments);
};
}(), _this5._collectOptions = function (snippet, operationDataList, schema) {
var _this5$props = _this5.props,
serverUrl = _this5$props.serverUrl,
_this5$props$context = _this5$props.context,
context = _this5$props$context === undefined ? {} : _this5$props$context,
_this5$props$headers = _this5$props.headers,
headers = _this5$props$headers === undefined ? {} : _this5$props$headers;
var optionValues = _this5.getOptionValues(snippet);
return {
serverUrl: serverUrl,
headers: headers,
context: context,
operationDataList: operationDataList,
options: optionValues,
schema: schema
};
}, _temp2), _possibleConstructorReturn(_this5, _ret2);
}
_createClass(CodeExporter, [{
key: 'render',
value: function render() {
var _this7 = this;
var _props = this.props,
query = _props.query,
snippets = _props.snippets,
_props$variables = _props.variables,
variables = _props$variables === undefined ? {} : _props$variables;
var _state = this.state,
showCopiedTooltip = _state.showCopiedTooltip,
codesandboxResult = _state.codesandboxResult;
var snippet = this._activeSnippet();
var operationDefinitions = getOperationNodes(query);
var name = snippet.name,
language = snippet.language,
generate = snippet.generate;
var fragmentDefinitions = [];
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = operationDefinitions[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _operationDefinition = _step2.value;
if (_operationDefinition.kind === 'FragmentDefinition') {
fragmentDefinitions.push(_operationDefinition);
}
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
var rawOperationDataList = operationDefinitions.map(function (operationDefinition) {
return {
query: print(operationDefinition),
name: getOperationName(operationDefinition),
displayName: getOperationDisplayName(operationDefinition),
// $FlowFixMe: Come back for this
type: operationDefinition.operation || 'fragment',
variableName: formatVariableName(getOperationName(operationDefinition)),
variables: getUsedVariables(variables, operationDefinition),
operationDefinition: operationDefinition,
fragmentDependencies: findFragmentDependencies(fragmentDefinitions, operationDefinition)
};
});
var operationDataList = toposort(rawOperationDataList);
var optionValues = this.getOptionValues(snippet);
var codeSnippet = operationDefinitions.length ? generate(this._collectOptions(snippet, operationDataList, this.props.schema)) : null;
var supportsCodesandbox = snippet.generateCodesandboxFiles;
var languages = [].concat(_toConsumableArray(new Set(snippets.map(function (snippet) {
return snippet.language;
})))).sort(function (a, b) {
return a.localeCompare(b);
});
return React.createElement(
'div',
{ className: 'graphiql-code-exporter', style: { minWidth: 410 } },
React.createElement(
'div',
{
style: {
fontFamily: 'system, -apple-system, San Francisco, Helvetica Neue, arial, sans-serif'
} },
React.createElement(
'div',
{ style: { padding: '12px 7px 8px' } },
React.createElement(
ToolbarMenu,
{ label: language, title: 'Language' },
languages.map(function (lang) {
return React.createElement(
'li',
{ key: lang, onClick: function onClick() {
return _this7.setLanguage(lang);
} },
lang
);
})
),
React.createElement(
ToolbarMenu,
{ label: name, title: 'Mode' },
snippets.filter(function (snippet) {
return snippet.language === language;
}).map(function (snippet) {
return React.createElement(
'li',
{
key: snippet.name,
onClick: function onClick() {
return _this7.setSnippet(snippet);
} },
snippet.name
);
})
)
),
snippet.options.length > 0 ? React.createElement(
'div',
{ style: { padding: '0px 11px 10px' } },
React.createElement(
'div',
{
style: {
fontWeight: 700,
color: 'rgb(177, 26, 4)',
fontVariant: 'small-caps',
textTransform: 'lowercase'
} },
'Options'
),
snippet.options.map(function (option) {
return React.createElement(
'div',
{ key: option.id },
React.createElement('input', {
id: option.id,
type: 'checkbox',
style: { position: 'relative', top: -1 }
// $FlowFixMe: Come back for this
, checked: optionValues[option.id],
onChange: function onChange() {
return _this7.handleSetOptionValue(snippet, option.id,
// $FlowFixMe: Come back for this
!optionValues[option.id]);
}
}),
React.createElement(
'label',
{ htmlFor: option.id, style: { paddingLeft: 5 } },
option.label
)
);
})
) : React.createElement('div', { style: { minHeight: 8 } }),
supportsCodesandbox ? React.createElement(
'div',
{ style: { padding: '0 7px 8px' } },
React.createElement(
'button',
{
className: 'toolbar-button',
style: _extends({
backgroundColor: 'white',
border: 'none',
outline: 'none',
maxWidth: 320,
display: 'flex'
}, codeSnippet ? {} : {
opacity: 0.6,
cursor: 'default',
background: '#ececec'
}),
type: 'button',
disabled: !codeSnippet,
onClick: function onClick() {
return _this7._generateCodesandbox(operationDataList);
} },
codesandboxIcon,
' ',
React.createElement(
'span',
{ style: { paddingLeft: '0.5em' } },
'Create CodeSandbox'
)
),
codesandboxResult ? React.createElement(
'div',
{ style: { paddingLeft: 5, paddingTop: 5 } },
codesandboxResult.type === 'loading' ? 'Loading...' : codesandboxResult.type === 'error' ? 'Error: ' + codesandboxResult.error : React.createElement(
'a',
{
rel: 'noopener noreferrer',
target: '_blank',
href: 'https://codesandbox.io/s/' + codesandboxResult.sandboxId },
'Visit CodeSandbox'
)
) : null
) : null
),
React.createElement(
'button',
{
className: 'toolbar-button',
style: {
fontSize: '1.2em',
padding: 0,
position: 'absolute',
left: 340,
marginTop: -20,
width: 40,
height: 40,
backgroundColor: 'white',
borderRadius: 40,
border: 'none',
outline: 'none'
},
type: 'link',
onClick: function onClick() {
copy(codeSnippet);
_this7.setState({ showCopiedTooltip: true }, function () {
return setTimeout(function () {
return _this7.setState({ showCopiedTooltip: false });
}, 450);
});
} },
React.createElement(
'div',
{
style: {
position: 'absolute',
top: '-30px',
left: '-15px',
fontSize: 'small',
padding: '6px 8px',
color: '#fff',
textAlign: 'left',
textDecoration: 'none',
wordWrap: 'break-word',
backgroundColor: 'rgba(0,0,0,0.75)',
borderRadius: '4px',
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
display: showCopiedTooltip ? 'block' : 'none'
},
pointerEvents: 'none' },
'Copied!'
),
copyIcon
),
React.createElement(
'div',
{
style: {
padding: '15px 12px',
margin: 0,
borderTop: '1px solid rgb(220, 220, 220)',
fontSize: 12
} },
codeSnippet ? React.createElement(CodeDisplay, {
code: codeSnippet,
mode: snippet.codeMirrorMode,
theme: this.props.codeMirrorTheme
}) : React.createElement(
'div',
null,
'The query is invalid.',
React.createElement('br', null),
'The generated code will appear here once the errors in the query editor are resolved.'
)
)
);
}
}]);
return CodeExporter;
}(Component);
var ErrorBoundary = function (_React$Component) {
_inherits(ErrorBoundary, _React$Component);
function ErrorBoundary() {
var _ref6;
var _temp3, _this8, _ret3;
_classCallCheck(this, ErrorBoundary);
for (var _len3 = arguments.length, args = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
return _ret3 = (_temp3 = (_this8 = _possibleConstructorReturn(this, (_ref6 = ErrorBoundary.__proto__ || Object.getPrototypeOf(ErrorBoundary)).call.apply(_ref6, [this].concat(args))), _this8), _this8.state = { hasError: false }, _temp3), _possibleConstructorReturn(_this8, _ret3);
}
_createClass(ErrorBoundary, [{
key: 'componentDidCatch',
value: function componentDidCatch(error, info) {
this.setState({ hasError: true });
console.error('Error in component', error, info);
}
}, {
key: 'render',
value: function render() {
if (this.state.hasError) {
return React.createElement(
'div',
{ style: { fontFamily: 'sans-serif' }, className: 'error-container' },
'Error generating code. Please',
' ',
React.createElement(
'a',
{
href: 'https://spectrum.chat/onegraph',
target: '_blank',
rel: 'noreferrer noopener' },
'report your query on Spectrum'
),
'.'
);
}
return this.props.children;
}
}]);
return ErrorBoundary;
}(React.Component);
// we borrow class names from graphiql's CSS as the visual appearance is the same
// yet we might want to change that at some point in order to have a self-contained standalone
export default function CodeExporterWrapper(_ref7) {
var query = _ref7.query,
serverUrl = _ref7.serverUrl,
variables = _ref7.variables,
_ref7$context = _ref7.context,
context = _ref7$context === undefined ? {} : _ref7$context,
_ref7$headers = _ref7.headers,
headers = _ref7$headers === undefined ? {} : _ref7$headers,
_ref7$hideCodeExporte = _ref7.hideCodeExporter,
hideCodeExporter = _ref7$hideCodeExporte === undefined ? function () {} : _ref7$hideCodeExporte,
snippets = _ref7.snippets,
snippet = _ref7.snippet,
codeMirrorTheme = _ref7.codeMirrorTheme,
onSelectSnippet = _ref7.onSelectSnippet,
onSetOptionValue = _ref7.onSetOptionValue,
optionValues = _ref7.optionValues,
onGenerateCodesandbox = _ref7.onGenerateCodesandbox,
schema = _ref7.schema;
var jsonVariables = {};
try {
var parsedVariables = JSON.parse(variables);
if ((typeof parsedVariables === 'undefined' ? 'undefined' : _typeof(parsedVariables)) === 'object') {
jsonVariables = parsedVariables;
}
} catch (e) {}
return React.createElement(
'div',
{
className: 'docExplorerWrap',
style: {
width: 440,
minWidth: 440,
zIndex: 7
} },
React.createElement(
'div',
{ className: 'doc-explorer-title-bar' },
React.createElement(
'div',
{ className: 'doc-explorer-title' },
'Code Exporter'
),
React.createElement(
'div',
{ className: 'doc-explorer-rhs' },
React.createElement(
'div',
{ className: 'docExplorerHide', onClick: hideCodeExporter },
'\u2715'
)
)
),
React.createElement(
'div',
{
className: 'doc-explorer-contents',
style: { borderTop: '1px solid #d6d6d6', padding: 0 } },
snippets.length ? React.createElement(
ErrorBoundary,
null,
React.createElement(CodeExporter, {
query: query,
serverUrl: serverUrl,
snippets: snippets,
snippet: snippet,
context: context,
headers: headers,
variables: jsonVariables,
codeMirrorTheme: codeMirrorTheme,
onSelectSnippet: onSelectSnippet,
onSetOptionValue: onSetOptionValue,
optionValues: optionValues || {},
onGenerateCodesandbox: onGenerateCodesandbox,
schema: schema
})
) : React.createElement(
'div',
{ style: { fontFamily: 'sans-serif' }, className: 'error-container' },
'Please provide a list of snippets'
)
)
);
}