@arcblock/graphql-playground 2.2.4 → 2.4.1

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.
Files changed (3) hide show
  1. package/lib/index.js +10 -8
  2. package/package.json +6 -6
  3. package/src/index.js +6 -5
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 _styledComponents = _interopRequireDefault(require("styled-components"));
12
+ var _styled = _interopRequireDefault(require("@emotion/styled"));
13
13
 
14
14
  var _axios = _interopRequireDefault(require("axios"));
15
15
 
@@ -41,10 +41,14 @@ var _util = require("./util");
41
41
 
42
42
  var _jsxRuntime = require("react/jsx-runtime");
43
43
 
44
+ var _templateObject;
45
+
44
46
  const _excluded = ["endpoint", "title", "enableCodeExporter", "enableQueryComposer", "enableHistory", "extraCodeSnippets"];
45
47
 
46
48
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
47
49
 
50
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
51
+
48
52
  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; }
49
53
 
50
54
  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; }
@@ -77,7 +81,8 @@ function PrettifyButton() {
77
81
 
78
82
  function GraphQLPlayground(props) {
79
83
  const newProps = (0, _Util.mergeProps)(props, GraphQLPlayground, ['style', 'persistentQuery', 'enableQueryComposer', 'enableCodeExporter', 'enableHistory']);
80
- const history = (0, _reactRouterDom.useHistory)();
84
+ const location = (0, _reactRouterDom.useLocation)();
85
+ const navigate = (0, _reactRouterDom.useNavigate)();
81
86
  const graphiql = (0, _react.useRef)(null);
82
87
  const subscriptionClient = (0, _react.useRef)(null);
83
88
  const [schema, setSchema] = (0, _react.useState)(null);
@@ -89,11 +94,11 @@ function GraphQLPlayground(props) {
89
94
  const {
90
95
  pathname,
91
96
  search
92
- } = history.location;
97
+ } = location;
93
98
  const params = (0, _Util.parseQuery)(search);
94
99
  params.query = newQuery;
95
100
  const newUrl = "".concat(pathname, "?").concat((0, _Util.stringifyQuery)(params));
96
- history.replace(newUrl);
101
+ navigate(newUrl);
97
102
  };
98
103
 
99
104
  (0, _react.useEffect)(() => {
@@ -257,7 +262,4 @@ GraphQLPlayground.defaultProps = {
257
262
  extraHeaders: {}
258
263
  };
259
264
 
260
- const Container = _styledComponents.default.div.withConfig({
261
- displayName: "src__Container",
262
- componentId: "sc-rvsulm-0"
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{min-height:0;}.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);
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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcblock/graphql-playground",
3
- "version": "2.2.4",
3
+ "version": "2.4.1",
4
4
  "description": "A React Component to interact with GraphQL APIs",
5
5
  "keywords": [
6
6
  "react",
@@ -29,7 +29,9 @@
29
29
  "url": "https://github.com/ArcBlock/ux/issues"
30
30
  },
31
31
  "dependencies": {
32
- "@arcblock/ux": "^2.2.4",
32
+ "@arcblock/ux": "^2.4.1",
33
+ "@emotion/react": "^11.10.0",
34
+ "@emotion/styled": "^11.10.0",
33
35
  "axios": "^0.21.4",
34
36
  "core-js": "^3.24.1",
35
37
  "graphiql": "^1.11.3",
@@ -37,8 +39,7 @@
37
39
  "graphiql-explorer": "^0.9.0",
38
40
  "graphql": "^16.5.0",
39
41
  "react-load-script": "^0.0.6",
40
- "react-router-dom": "^5.3.3",
41
- "styled-components": "^5.3.5"
42
+ "react-router-dom": "^6.3.0"
42
43
  },
43
44
  "peerDependencies": {
44
45
  "react": ">=18.1.0"
@@ -51,9 +52,8 @@
51
52
  "@babel/core": "^7.18.10",
52
53
  "@babel/preset-env": "^7.18.10",
53
54
  "@babel/preset-react": "^7.18.6",
54
- "babel-plugin-styled-components": "^1.13.3",
55
55
  "eslint-plugin-react-hooks": "^4.6.0",
56
56
  "jest": "^24.9.0"
57
57
  },
58
- "gitHead": "6658d7679f6a8e679e1fddae1af19ae8a2e64963"
58
+ "gitHead": "f9811866bb818ee7eac47a5173346e24931c2b32"
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 'styled-components';
6
+ import styled from '@emotion/styled';
7
7
  import axios from 'axios';
8
8
  import Script from 'react-load-script';
9
9
  import GraphiQL from 'graphiql';
@@ -13,7 +13,7 @@ import CodeExporterSnippets from 'graphiql-code-exporter/lib/snippets';
13
13
  import { buildClientSchema, getIntrospectionQuery } from 'graphql';
14
14
  import { useHistoryContext, usePrettifyEditors } from '@graphiql/react';
15
15
 
16
- import { useHistory } from 'react-router-dom';
16
+ import { useNavigate, useLocation } from 'react-router-dom';
17
17
  import 'graphiql/graphiql.css';
18
18
 
19
19
  import 'graphiql-code-exporter/CodeExporter.css';
@@ -41,7 +41,8 @@ export default function GraphQLPlayground(props) {
41
41
  'enableHistory',
42
42
  ]);
43
43
 
44
- const history = useHistory();
44
+ const location = useLocation();
45
+ const navigate = useNavigate();
45
46
  const graphiql = useRef(null);
46
47
  const subscriptionClient = useRef(null);
47
48
  const [schema, setSchema] = useState(null);
@@ -50,11 +51,11 @@ export default function GraphQLPlayground(props) {
50
51
  const [codeExporterIsOpen, setExporterOpen] = useState(false);
51
52
 
52
53
  const persistQuery = (newQuery) => {
53
- const { pathname, search } = history.location;
54
+ const { pathname, search } = location;
54
55
  const params = parseQuery(search);
55
56
  params.query = newQuery;
56
57
  const newUrl = `${pathname}?${stringifyQuery(params)}`;
57
- history.replace(newUrl);
58
+ navigate(newUrl);
58
59
  };
59
60
 
60
61
  useEffect(() => {