@arcblock/graphql-playground 2.1.57 → 2.1.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +29 -72
- package/package.json +7 -7
- package/src/index.js +16 -94
- package/lib/graphiql.css +0 -1850
- package/src/graphiql.css +0 -1850
package/lib/index.js
CHANGED
|
@@ -25,9 +25,11 @@ var _snippets = _interopRequireDefault(require("graphiql-code-exporter/lib/snipp
|
|
|
25
25
|
|
|
26
26
|
var _graphql = require("graphql");
|
|
27
27
|
|
|
28
|
+
var _react2 = require("@graphiql/react");
|
|
29
|
+
|
|
28
30
|
var _reactRouterDom = require("react-router-dom");
|
|
29
31
|
|
|
30
|
-
require("
|
|
32
|
+
require("graphiql/graphiql.css");
|
|
31
33
|
|
|
32
34
|
require("graphiql-code-exporter/CodeExporter.css");
|
|
33
35
|
|
|
@@ -43,16 +45,36 @@ const _excluded = ["endpoint", "title", "enableCodeExporter", "enableQueryCompos
|
|
|
43
45
|
|
|
44
46
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
45
47
|
|
|
46
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
47
|
-
|
|
48
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
49
|
-
|
|
50
48
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
51
49
|
|
|
52
50
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
53
51
|
|
|
54
52
|
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; }
|
|
55
53
|
|
|
54
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
55
|
+
|
|
56
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
57
|
+
|
|
58
|
+
function HistoryToggleButton() {
|
|
59
|
+
const {
|
|
60
|
+
toggle
|
|
61
|
+
} = (0, _react2.useHistoryContext)();
|
|
62
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
|
|
63
|
+
onClick: toggle,
|
|
64
|
+
label: "History",
|
|
65
|
+
title: "Show History"
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function PrettifyButton() {
|
|
70
|
+
const prettify = (0, _react2.usePrettifyEditors)();
|
|
71
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
|
|
72
|
+
onClick: prettify,
|
|
73
|
+
label: "Prettify",
|
|
74
|
+
title: "Prettify Query (Shift-Ctrl-P)"
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
|
|
56
78
|
function GraphQLPlayground(props) {
|
|
57
79
|
const newProps = (0, _Util.mergeProps)(props, GraphQLPlayground, ['style', 'persistentQuery', 'enableQueryComposer', 'enableCodeExporter', 'enableHistory']);
|
|
58
80
|
const history = (0, _reactRouterDom.useHistory)();
|
|
@@ -87,59 +109,6 @@ function GraphQLPlayground(props) {
|
|
|
87
109
|
|
|
88
110
|
}, []);
|
|
89
111
|
|
|
90
|
-
const onInspect = (cm, mousePos) => {
|
|
91
|
-
const parsedQuery = (0, _graphql.parse)(query || '');
|
|
92
|
-
|
|
93
|
-
if (!parsedQuery) {
|
|
94
|
-
// eslint-disable-next-line quotes
|
|
95
|
-
console.error("Couldn't parse query document");
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
const token = cm.getTokenAt(mousePos);
|
|
100
|
-
const start = {
|
|
101
|
-
line: mousePos.line,
|
|
102
|
-
ch: token.start
|
|
103
|
-
};
|
|
104
|
-
const end = {
|
|
105
|
-
line: mousePos.line,
|
|
106
|
-
ch: token.end
|
|
107
|
-
};
|
|
108
|
-
const relevantMousePos = {
|
|
109
|
-
start: cm.indexFromPos(start),
|
|
110
|
-
end: cm.indexFromPos(end)
|
|
111
|
-
};
|
|
112
|
-
const position = relevantMousePos;
|
|
113
|
-
const def = parsedQuery.definitions.find(definition => {
|
|
114
|
-
if (!definition.loc) {
|
|
115
|
-
// eslint-disable-next-line no-console
|
|
116
|
-
console.log('Missing location information for definition');
|
|
117
|
-
return false;
|
|
118
|
-
} // eslint-disable-next-line no-shadow
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
const {
|
|
122
|
-
start,
|
|
123
|
-
end
|
|
124
|
-
} = definition.loc;
|
|
125
|
-
return start <= position.start && end >= position.end;
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
if (!def) {
|
|
129
|
-
console.error('Unable to find definition corresponding to mouse position');
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
const operationKind = def.kind === 'OperationDefinition' ? def.operation : def.kind === 'FragmentDefinition' ? 'fragment' : 'unknown';
|
|
134
|
-
const operationName = def.kind === 'OperationDefinition' && !!def.name ? def.name.value : def.kind === 'FragmentDefinition' && !!def.name ? def.name.value : 'unknown';
|
|
135
|
-
const selector = ".graphiql-explorer-root #".concat(operationKind, "-").concat(operationName);
|
|
136
|
-
const element = document.querySelector(selector);
|
|
137
|
-
|
|
138
|
-
if (element) {
|
|
139
|
-
element.scrollIntoView();
|
|
140
|
-
}
|
|
141
|
-
};
|
|
142
|
-
|
|
143
112
|
const onEditQuery = newQuery => {
|
|
144
113
|
if (newQuery !== query && newProps.persistentQuery) {
|
|
145
114
|
persistQuery(newQuery);
|
|
@@ -208,10 +177,6 @@ function GraphQLPlayground(props) {
|
|
|
208
177
|
return;
|
|
209
178
|
}
|
|
210
179
|
|
|
211
|
-
const editor = graphiql.current.getQueryEditor();
|
|
212
|
-
editor.setOption('extraKeys', _objectSpread(_objectSpread({}, editor.options.extraKeys || {}), {}, {
|
|
213
|
-
'Shift-Alt-LeftClick': onInspect
|
|
214
|
-
}));
|
|
215
180
|
setSchema((0, _graphql.buildClientSchema)(result.data));
|
|
216
181
|
}); // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
217
182
|
}, [graphiql.current]);
|
|
@@ -247,15 +212,7 @@ function GraphQLPlayground(props) {
|
|
|
247
212
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Logo, {
|
|
248
213
|
children: title
|
|
249
214
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_graphiql.default.Toolbar, {
|
|
250
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
|
|
251
|
-
onClick: () => graphiql.current.handlePrettifyQuery(),
|
|
252
|
-
label: "Prettify",
|
|
253
|
-
title: "Prettify Query (Shift-Ctrl-P)"
|
|
254
|
-
}), enableHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
|
|
255
|
-
onClick: () => graphiql.current.handleToggleHistory(),
|
|
256
|
-
label: "History",
|
|
257
|
-
title: "Show History"
|
|
258
|
-
}), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
|
|
215
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrettifyButton, {}), enableHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryToggleButton, {}), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
|
|
259
216
|
onClick: onToggleExplorer,
|
|
260
217
|
label: "Query Composer",
|
|
261
218
|
title: "Toggle Query Composer"
|
|
@@ -303,4 +260,4 @@ GraphQLPlayground.defaultProps = {
|
|
|
303
260
|
const Container = _styledComponents.default.div.withConfig({
|
|
304
261
|
displayName: "src__Container",
|
|
305
262
|
componentId: "sc-rvsulm-0"
|
|
306
|
-
})(["display:flex;flex-direction:row;flex:1;overflow:hidden;height:100%;position:relative;@media (max-width:", "px){margin-top:30px;}> .historyPaneWrap{z-index:8 !important;width:320px !important;box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");overflow-y:scroll;}.doc-explorer-title-bar,.history-title-bar{height:45px;line-height:45px;padding:0px 8px;display:flex;align-items:center;justify-content:space-between;}.doc-explorer-title-bar{padding:0px 32px;}.doc-explorer-title,.history-title{font-size:14px;font-weight:900;letter-spacing:2px;color:", ";text-transform:uppercase;text-align:left !important;}.doc-explorer-contents,.history-contents{top:45px !important;background-color:", " !important;border-top:1px solid #e3e3e3 !important;}.history-contents{color:", ";p{border-bottom:1px solid #e3e3e3;}}.docExplorerHide{color:", ";padding:0;cursor:pointer;margin:-7px -8px -6px -12px;opacity:0.75;font-size:18px;}.toolbar-button{cursor:pointer;}.graphiql-container{.title{color:", ";}.topBar{background-image:none;height:45px;border-bottom-width:0;}.docExplorerShow{background:", ";border:none;font-size:14px;color:", ";text-transform:uppercase;&::before{border-color:", ";}}.
|
|
263
|
+
})(["display:flex;flex-direction:row;flex:1;overflow:hidden;height:100%;position:relative;@media (max-width:", "px){margin-top:30px;}> .historyPaneWrap{z-index:8 !important;width:320px !important;box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");overflow-y:scroll;}.doc-explorer-title-bar,.history-title-bar{height:45px;line-height:45px;padding:0px 8px;display:flex;align-items:center;justify-content:space-between;}.doc-explorer-title-bar{padding:0px 32px;}.doc-explorer-title,.history-title{font-size:14px;font-weight:900;letter-spacing:2px;color:", ";text-transform:uppercase;text-align:left !important;}.doc-explorer-contents,.history-contents{top:45px !important;background-color:", " !important;border-top:1px solid #e3e3e3 !important;}.history-contents{color:", ";p{border-bottom:1px solid #e3e3e3;}}.docExplorerHide{color:", ";padding:0;cursor:pointer;margin:-7px -8px -6px -12px;opacity:0.75;font-size:18px;}.toolbar-button{cursor:pointer;}.graphiql-container{.title{color:", ";}.topBar{background-image:none;height:45px;border-bottom-width:0;}.docExplorerShow{background:", ";border:none;font-size:14px;color:", ";text-transform:uppercase;&::before{border-color:", ";}}.historyPaneWrap{width:320px !important;background-color:", ";box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");}.search-box{margin-bottom:20px;border-bottom:none;input{height:30px;border-radius:15px;border:solid 1px ", ";padding:6px 24px 8px 30px;}.search-box-clear{right:10px;}&::before{left:10px;}}.variable-editor-title{background:", ";border:none;height:40px;padding-left:20px;&::before{border-left:2px solid ", ";border-top:2px solid ", ";content:'';display:inline-block;height:9px;margin:0 5px 1px 0;position:relative;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);width:9px;}}.resultWrap{border-left:none;.CodeMirror-gutters{opacity:0.5;}.CodeMirror-gutter.CodeMirror-foldgutter{box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");}}.CodeMirror,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-foldgutter{background:", ";}.variable-editor{.CodeMirror{background:white;}}.CodeMirror-gutters{border-right-width:0;}}.graphiql-exporter-container{width:auto;.historyPaneWrap{position:absolute !important;height:100%;top:0;right:0;background-color:", ";box-shadow:-5px 16px 10px 0 rgba(0,0,0,", ");z-index:3;.history-contents{padding-top:12px;.toolbar-button{margin-top:-24px !important;}}}}"], props => props.theme.breakpoints.values.md, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.typography.color.gray, props => props.theme.palette.background.default, props => props.theme.typography.color.main, props => props.theme.typography.color.main, props => props.theme.typography.color.main, props => props.theme.palette.background.default, props => props.theme.typography.color.main, props => props.theme.typography.color.gray, props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.typography.color.main, props => props.theme.palette.background.default, props => props.theme.typography.color.gray, props => props.theme.typography.color.gray, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.palette.background.default, props => props.theme.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/graphql-playground",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.60",
|
|
4
4
|
"description": "A React Component to interact with GraphQL APIs",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
"url": "https://github.com/ArcBlock/ux/issues"
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@arcblock/ux": "^2.1.
|
|
36
|
+
"@arcblock/ux": "^2.1.60",
|
|
37
37
|
"axios": "^0.21.2",
|
|
38
38
|
"core-js": "^3.6.4",
|
|
39
|
-
"graphiql": "^
|
|
40
|
-
"graphiql-code-exporter": "^
|
|
41
|
-
"graphiql-explorer": "^0.
|
|
42
|
-
"graphql": "^
|
|
39
|
+
"graphiql": "^1.9.11",
|
|
40
|
+
"graphiql-code-exporter": "^3.0.3",
|
|
41
|
+
"graphiql-explorer": "^0.9.0",
|
|
42
|
+
"graphql": "^16.5.0",
|
|
43
43
|
"react-load-script": "^0.0.6",
|
|
44
44
|
"react-router-dom": "^5.1.2",
|
|
45
45
|
"styled-components": "^5.0.0"
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"eslint-plugin-react-hooks": "^4.2.0",
|
|
60
60
|
"jest": "^24.1.0"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "cb42621b28415c2129a002a5d2b502ebebde1858"
|
|
63
63
|
}
|
package/src/index.js
CHANGED
|
@@ -10,16 +10,28 @@ import GraphiQL from 'graphiql';
|
|
|
10
10
|
import QueryComposer from 'graphiql-explorer';
|
|
11
11
|
import CodeExporter from 'graphiql-code-exporter';
|
|
12
12
|
import CodeExporterSnippets from 'graphiql-code-exporter/lib/snippets';
|
|
13
|
-
import { buildClientSchema, getIntrospectionQuery
|
|
13
|
+
import { buildClientSchema, getIntrospectionQuery } from 'graphql';
|
|
14
|
+
import { useHistoryContext, usePrettifyEditors } from '@graphiql/react';
|
|
15
|
+
|
|
14
16
|
import { useHistory } from 'react-router-dom';
|
|
17
|
+
import 'graphiql/graphiql.css';
|
|
15
18
|
|
|
16
|
-
import './graphiql.css';
|
|
17
19
|
import 'graphiql-code-exporter/CodeExporter.css';
|
|
18
20
|
import 'codemirror/theme/neo.css';
|
|
19
21
|
|
|
20
22
|
import { mergeProps, parseQuery, stringifyQuery } from '@arcblock/ux/lib/Util';
|
|
21
23
|
import { graphQLFetcher } from './util';
|
|
22
24
|
|
|
25
|
+
function HistoryToggleButton() {
|
|
26
|
+
const { toggle } = useHistoryContext();
|
|
27
|
+
return <GraphiQL.Button onClick={toggle} label="History" title="Show History" />;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
function PrettifyButton() {
|
|
31
|
+
const prettify = usePrettifyEditors();
|
|
32
|
+
return <GraphiQL.Button onClick={prettify} label="Prettify" title="Prettify Query (Shift-Ctrl-P)" />;
|
|
33
|
+
}
|
|
34
|
+
|
|
23
35
|
export default function GraphQLPlayground(props) {
|
|
24
36
|
const newProps = mergeProps(props, GraphQLPlayground, [
|
|
25
37
|
'style',
|
|
@@ -57,60 +69,6 @@ export default function GraphQLPlayground(props) {
|
|
|
57
69
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
58
70
|
}, []);
|
|
59
71
|
|
|
60
|
-
const onInspect = (cm, mousePos) => {
|
|
61
|
-
const parsedQuery = parse(query || '');
|
|
62
|
-
|
|
63
|
-
if (!parsedQuery) {
|
|
64
|
-
// eslint-disable-next-line quotes
|
|
65
|
-
console.error("Couldn't parse query document");
|
|
66
|
-
return;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
const token = cm.getTokenAt(mousePos);
|
|
70
|
-
const start = { line: mousePos.line, ch: token.start };
|
|
71
|
-
const end = { line: mousePos.line, ch: token.end };
|
|
72
|
-
const relevantMousePos = {
|
|
73
|
-
start: cm.indexFromPos(start),
|
|
74
|
-
end: cm.indexFromPos(end),
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
const position = relevantMousePos;
|
|
78
|
-
|
|
79
|
-
const def = parsedQuery.definitions.find((definition) => {
|
|
80
|
-
if (!definition.loc) {
|
|
81
|
-
// eslint-disable-next-line no-console
|
|
82
|
-
console.log('Missing location information for definition');
|
|
83
|
-
return false;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// eslint-disable-next-line no-shadow
|
|
87
|
-
const { start, end } = definition.loc;
|
|
88
|
-
return start <= position.start && end >= position.end;
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
if (!def) {
|
|
92
|
-
console.error('Unable to find definition corresponding to mouse position');
|
|
93
|
-
return;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
const operationKind =
|
|
97
|
-
def.kind === 'OperationDefinition' ? def.operation : def.kind === 'FragmentDefinition' ? 'fragment' : 'unknown';
|
|
98
|
-
|
|
99
|
-
const operationName =
|
|
100
|
-
def.kind === 'OperationDefinition' && !!def.name
|
|
101
|
-
? def.name.value
|
|
102
|
-
: def.kind === 'FragmentDefinition' && !!def.name
|
|
103
|
-
? def.name.value
|
|
104
|
-
: 'unknown';
|
|
105
|
-
|
|
106
|
-
const selector = `.graphiql-explorer-root #${operationKind}-${operationName}`;
|
|
107
|
-
|
|
108
|
-
const element = document.querySelector(selector);
|
|
109
|
-
if (element) {
|
|
110
|
-
element.scrollIntoView();
|
|
111
|
-
}
|
|
112
|
-
};
|
|
113
|
-
|
|
114
72
|
const onEditQuery = (newQuery) => {
|
|
115
73
|
if (newQuery !== query && newProps.persistentQuery) {
|
|
116
74
|
persistQuery(newQuery);
|
|
@@ -181,13 +139,6 @@ export default function GraphQLPlayground(props) {
|
|
|
181
139
|
if (!graphiql.current) {
|
|
182
140
|
return;
|
|
183
141
|
}
|
|
184
|
-
|
|
185
|
-
const editor = graphiql.current.getQueryEditor();
|
|
186
|
-
editor.setOption('extraKeys', {
|
|
187
|
-
...(editor.options.extraKeys || {}),
|
|
188
|
-
'Shift-Alt-LeftClick': onInspect,
|
|
189
|
-
});
|
|
190
|
-
|
|
191
142
|
setSchema(buildClientSchema(result.data));
|
|
192
143
|
});
|
|
193
144
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -214,18 +165,8 @@ export default function GraphQLPlayground(props) {
|
|
|
214
165
|
<GraphiQL ref={graphiql} fetcher={fetcher} schema={schema} query={query} onEditQuery={onEditQuery}>
|
|
215
166
|
<GraphiQL.Logo>{title}</GraphiQL.Logo>
|
|
216
167
|
<GraphiQL.Toolbar>
|
|
217
|
-
<
|
|
218
|
-
|
|
219
|
-
label="Prettify"
|
|
220
|
-
title="Prettify Query (Shift-Ctrl-P)"
|
|
221
|
-
/>
|
|
222
|
-
{enableHistory && (
|
|
223
|
-
<GraphiQL.Button
|
|
224
|
-
onClick={() => graphiql.current.handleToggleHistory()}
|
|
225
|
-
label="History"
|
|
226
|
-
title="Show History"
|
|
227
|
-
/>
|
|
228
|
-
)}
|
|
168
|
+
<PrettifyButton />
|
|
169
|
+
{enableHistory && <HistoryToggleButton />}
|
|
229
170
|
{enableQueryComposer && (
|
|
230
171
|
<GraphiQL.Button onClick={onToggleExplorer} label="Query Composer" title="Toggle Query Composer" />
|
|
231
172
|
)}
|
|
@@ -364,31 +305,12 @@ const Container = styled.div`
|
|
|
364
305
|
}
|
|
365
306
|
}
|
|
366
307
|
|
|
367
|
-
.docExplorerWrap {
|
|
368
|
-
position: absolute !important;
|
|
369
|
-
height: 100%;
|
|
370
|
-
top: 0;
|
|
371
|
-
right: 0;
|
|
372
|
-
background-color: ${(props) => props.theme.palette.background.default};
|
|
373
|
-
box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
|
|
374
|
-
z-index: 3;
|
|
375
|
-
}
|
|
376
|
-
|
|
377
308
|
.historyPaneWrap {
|
|
378
309
|
width: 320px !important;
|
|
379
310
|
background-color: ${(props) => props.theme.palette.background.default};
|
|
380
311
|
box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
|
|
381
312
|
}
|
|
382
313
|
|
|
383
|
-
.docExplorerWrap {
|
|
384
|
-
.doc-explorer {
|
|
385
|
-
background-color: ${(props) => props.theme.palette.background.default};
|
|
386
|
-
}
|
|
387
|
-
.doc-explorer-contents {
|
|
388
|
-
padding: 32px;
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
|
|
392
314
|
.search-box {
|
|
393
315
|
margin-bottom: 20px;
|
|
394
316
|
border-bottom: none;
|