@arcblock/graphql-playground 2.4.2 → 2.4.5
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 +2 -3
- package/package.json +3 -3
- package/src/index.js +2 -2
package/lib/index.js
CHANGED
|
@@ -9,7 +9,7 @@ var _react = require("react");
|
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _Theme = require("@arcblock/ux/lib/Theme");
|
|
13
13
|
|
|
14
14
|
var _axios = _interopRequireDefault(require("axios"));
|
|
15
15
|
|
|
@@ -261,5 +261,4 @@ GraphQLPlayground.defaultProps = {
|
|
|
261
261
|
extraCodeSnippets: [],
|
|
262
262
|
extraHeaders: {}
|
|
263
263
|
};
|
|
264
|
-
|
|
265
|
-
const Container = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex: 1;\n overflow: hidden;\n height: 100%;\n position: relative;\n\n @media (max-width: ", "px) {\n margin-top: 30px;\n }\n\n > .historyPaneWrap {\n z-index: 8 !important;\n width: 320px !important;\n box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n overflow-y: scroll;\n }\n\n .doc-explorer-title-bar,\n .history-title-bar {\n height: 45px;\n line-height: 45px;\n padding: 0px 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .doc-explorer-title-bar {\n padding: 0px 32px;\n }\n\n .doc-explorer-title,\n .history-title {\n font-size: 14px;\n font-weight: 900;\n letter-spacing: 2px;\n color: ", ";\n text-transform: uppercase;\n text-align: left !important;\n }\n\n .doc-explorer-contents {\n min-height: 0;\n }\n .history-contents {\n top: 45px !important;\n background-color: ", " !important;\n border-top: 1px solid #e3e3e3 !important;\n }\n\n .history-contents {\n color: ", ";\n p {\n border-bottom: 1px solid #e3e3e3;\n }\n }\n\n .docExplorerHide {\n color: ", ";\n padding: 0;\n cursor: pointer;\n margin: -7px -8px -6px -12px;\n opacity: 0.75;\n font-size: 18px;\n }\n\n .toolbar-button {\n cursor: pointer;\n }\n\n .graphiql-container {\n .title {\n color: ", ";\n }\n\n .topBar {\n background-image: none;\n height: 45px;\n border-bottom-width: 0;\n }\n\n .docExplorerShow {\n background: ", ";\n border: none;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n\n &::before {\n border-color: ", ";\n }\n }\n\n .historyPaneWrap {\n width: 320px !important;\n background-color: ", ";\n box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n }\n\n .search-box {\n margin-bottom: 20px;\n border-bottom: none;\n\n input {\n height: 30px;\n border-radius: 15px;\n border: solid 1px ", ";\n padding: 6px 24px 8px 30px;\n }\n\n .search-box-clear {\n right: 10px;\n }\n\n &::before {\n left: 10px;\n }\n }\n\n .variable-editor-title {\n background: ", ";\n border: none;\n height: 40px;\n padding-left: 20px;\n\n &::before {\n border-left: 2px solid ", ";\n border-top: 2px solid ", ";\n content: '';\n display: inline-block;\n height: 9px;\n margin: 0 5px 1px 0;\n position: relative;\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n width: 9px;\n }\n }\n\n .resultWrap {\n border-left: none;\n .CodeMirror-gutters {\n opacity: 0.5;\n }\n .CodeMirror-gutter.CodeMirror-foldgutter {\n box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n }\n }\n\n .CodeMirror,\n .CodeMirror-gutters,\n .CodeMirror-linenumber,\n .CodeMirror-foldgutter {\n background: ", ";\n }\n\n .variable-editor {\n .CodeMirror {\n background: white;\n }\n }\n\n .CodeMirror-gutters {\n border-right-width: 0;\n }\n }\n\n .graphiql-exporter-container {\n width: auto;\n .historyPaneWrap {\n position: absolute !important;\n height: 100%;\n top: 0;\n right: 0;\n background-color: ", ";\n box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ", ");\n z-index: 3;\n\n .history-contents {\n padding-top: 12px;\n .toolbar-button {\n margin-top: -24px !important;\n }\n }\n }\n }\n"])), 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);
|
|
264
|
+
const Container = (0, _Theme.styled)('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n flex: 1;\n overflow: hidden;\n height: 100%;\n position: relative;\n\n @media (max-width: ", "px) {\n margin-top: 30px;\n }\n\n > .historyPaneWrap {\n z-index: 8 !important;\n width: 320px !important;\n box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n overflow-y: scroll;\n }\n\n .doc-explorer-title-bar,\n .history-title-bar {\n height: 45px;\n line-height: 45px;\n padding: 0px 8px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .doc-explorer-title-bar {\n padding: 0px 32px;\n }\n\n .doc-explorer-title,\n .history-title {\n font-size: 14px;\n font-weight: 900;\n letter-spacing: 2px;\n color: ", ";\n text-transform: uppercase;\n text-align: left !important;\n }\n\n .doc-explorer-contents {\n min-height: 0;\n }\n .history-contents {\n top: 45px !important;\n background-color: ", " !important;\n border-top: 1px solid #e3e3e3 !important;\n }\n\n .history-contents {\n color: ", ";\n p {\n border-bottom: 1px solid #e3e3e3;\n }\n }\n\n .docExplorerHide {\n color: ", ";\n padding: 0;\n cursor: pointer;\n margin: -7px -8px -6px -12px;\n opacity: 0.75;\n font-size: 18px;\n }\n\n .toolbar-button {\n cursor: pointer;\n }\n\n .graphiql-container {\n .title {\n color: ", ";\n }\n\n .topBar {\n background-image: none;\n height: 45px;\n border-bottom-width: 0;\n }\n\n .docExplorerShow {\n background: ", ";\n border: none;\n font-size: 14px;\n color: ", ";\n text-transform: uppercase;\n\n &::before {\n border-color: ", ";\n }\n }\n\n .historyPaneWrap {\n width: 320px !important;\n background-color: ", ";\n box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n }\n\n .search-box {\n margin-bottom: 20px;\n border-bottom: none;\n\n input {\n height: 30px;\n border-radius: 15px;\n border: solid 1px ", ";\n padding: 6px 24px 8px 30px;\n }\n\n .search-box-clear {\n right: 10px;\n }\n\n &::before {\n left: 10px;\n }\n }\n\n .variable-editor-title {\n background: ", ";\n border: none;\n height: 40px;\n padding-left: 20px;\n\n &::before {\n border-left: 2px solid ", ";\n border-top: 2px solid ", ";\n content: '';\n display: inline-block;\n height: 9px;\n margin: 0 5px 1px 0;\n position: relative;\n -webkit-transform: rotate(-135deg);\n transform: rotate(-135deg);\n width: 9px;\n }\n }\n\n .resultWrap {\n border-left: none;\n .CodeMirror-gutters {\n opacity: 0.5;\n }\n .CodeMirror-gutter.CodeMirror-foldgutter {\n box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ", ");\n }\n }\n\n .CodeMirror,\n .CodeMirror-gutters,\n .CodeMirror-linenumber,\n .CodeMirror-foldgutter {\n background: ", ";\n }\n\n .variable-editor {\n .CodeMirror {\n background: white;\n }\n }\n\n .CodeMirror-gutters {\n border-right-width: 0;\n }\n }\n\n .graphiql-exporter-container {\n width: auto;\n .historyPaneWrap {\n position: absolute !important;\n height: 100%;\n top: 0;\n right: 0;\n background-color: ", ";\n box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ", ");\n z-index: 3;\n\n .history-contents {\n padding-top: 12px;\n .toolbar-button {\n margin-top: -24px !important;\n }\n }\n }\n }\n"])), 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.4.
|
|
3
|
+
"version": "2.4.5",
|
|
4
4
|
"description": "A React Component to interact with GraphQL APIs",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"url": "https://github.com/ArcBlock/ux/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@arcblock/ux": "^2.4.
|
|
32
|
+
"@arcblock/ux": "^2.4.5",
|
|
33
33
|
"@emotion/react": "^11.10.0",
|
|
34
34
|
"@emotion/styled": "^11.10.0",
|
|
35
35
|
"axios": "^0.21.4",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
56
56
|
"jest": "^24.9.0"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "ba62e426b63dd469d3d139d0de11d4d329d84fef"
|
|
59
59
|
}
|
package/src/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
/* eslint-disable no-undef */
|
|
4
4
|
import { useEffect, useState, useRef } from 'react';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
|
-
import styled from '@
|
|
6
|
+
import { styled } from '@arcblock/ux/lib/Theme';
|
|
7
7
|
import axios from 'axios';
|
|
8
8
|
import Script from 'react-load-script';
|
|
9
9
|
import GraphiQL from 'graphiql';
|
|
@@ -214,7 +214,7 @@ GraphQLPlayground.defaultProps = {
|
|
|
214
214
|
extraHeaders: {},
|
|
215
215
|
};
|
|
216
216
|
|
|
217
|
-
const Container = styled
|
|
217
|
+
const Container = styled('div')`
|
|
218
218
|
display: flex;
|
|
219
219
|
flex-direction: row;
|
|
220
220
|
flex: 1;
|