@arcblock/graphql-playground 2.1.57 → 2.1.58

package/lib/index.js

@@ -25,9 +25,11 @@ var _snippets = _interopRequireDefault(require("graphiql-code-exporter/lib/snipp
 
 var _graphql = require("graphql");
 
+var _react2 = require("@graphiql/react");
+
 var _reactRouterDom = require("react-router-dom");
 
-require("./graphiql.css");
+require("graphiql/graphiql.css");
 
 require("graphiql-code-exporter/CodeExporter.css");
 
@@ -53,6 +55,26 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 HistoryToggleButton() {
+  const {
+    toggle
+  } = (0, _react2.useHistoryContext)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+    onClick: toggle,
+    label: "History",
+    title: "Show History"
+  });
+}
+
+function PrettifyButton() {
+  const prettify = (0, _react2.usePrettifyEditors)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+    onClick: prettify,
+    label: "Prettify",
+    title: "Prettify Query (Shift-Ctrl-P)"
+  });
+}
+
 function GraphQLPlayground(props) {
   const newProps = (0, _Util.mergeProps)(props, GraphQLPlayground, ['style', 'persistentQuery', 'enableQueryComposer', 'enableCodeExporter', 'enableHistory']);
   const history = (0, _reactRouterDom.useHistory)();
@@ -247,15 +269,7 @@ function GraphQLPlayground(props) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Logo, {
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_graphiql.default.Toolbar, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
-          onClick: () => graphiql.current.handlePrettifyQuery(),
-          label: "Prettify",
-          title: "Prettify Query (Shift-Ctrl-P)"
-        }), enableHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
-          onClick: () => graphiql.current.handleToggleHistory(),
-          label: "History",
-          title: "Show History"
-        }), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrettifyButton, {}), enableHistory && /*#__PURE__*/(0, _jsxRuntime.jsx)(HistoryToggleButton, {}), enableQueryComposer && /*#__PURE__*/(0, _jsxRuntime.jsx)(_graphiql.default.Button, {
           onClick: onToggleExplorer,
           label: "Query Composer",
           title: "Toggle Query Composer"
@@ -303,4 +317,4 @@ GraphQLPlayground.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "src__Container",
   componentId: "sc-rvsulm-0"
-})(["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:", ";}}.docExplorerWrap{position:absolute !important;height:100%;top:0;right:0;background-color:", ";box-shadow:-5px 16px 10px 0 rgba(0,0,0,", ");z-index:3;}.historyPaneWrap{width:320px !important;background-color:", ";box-shadow:5px 16px 10px 0 rgba(0,0,0,", ");}.docExplorerWrap{.doc-explorer{background-color:", ";}.doc-explorer-contents{padding:32px;}}.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.palette.background.default, props => props.theme.mode === 'light' ? 0.05 : 0.5, props => props.theme.palette.background.default, 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);
+})(["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

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/graphql-playground",
-  "version": "2.1.57",
+  "version": "2.1.58",
   "description": "A React Component to interact with GraphQL APIs",
   "keywords": [
     "react",
@@ -33,13 +33,13 @@
     "url": "https://github.com/ArcBlock/ux/issues"
   },
   "dependencies": {
-    "@arcblock/ux": "^2.1.57",
+    "@arcblock/ux": "^2.1.58",
     "axios": "^0.21.2",
     "core-js": "^3.6.4",
-    "graphiql": "^0.13.2",
-    "graphiql-code-exporter": "^2.0.5",
-    "graphiql-explorer": "^0.4.3",
-    "graphql": "^14.6.0",
+    "graphiql": "^1.9.11",
+    "graphiql-code-exporter": "^3.0.3",
+    "graphiql-explorer": "^0.9.0",
+    "graphql": "^16.5.0",
     "react-load-script": "^0.0.6",
     "react-router-dom": "^5.1.2",
     "styled-components": "^5.0.0"
@@ -59,5 +59,5 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^24.1.0"
   },
-  "gitHead": "3bf280fd6c092c0cf1649f42f65fc052b7598bbf"
+  "gitHead": "30964d1c8f22b57ed04288d329d488593568ac34"
 }

package/src/index.js

@@ -11,15 +11,27 @@ import QueryComposer from 'graphiql-explorer';
 import CodeExporter from 'graphiql-code-exporter';
 import CodeExporterSnippets from 'graphiql-code-exporter/lib/snippets';
 import { buildClientSchema, getIntrospectionQuery, parse } from 'graphql';
+import { useHistoryContext, usePrettifyEditors } from '@graphiql/react';
+
 import { useHistory } from 'react-router-dom';
+import 'graphiql/graphiql.css';
 
-import './graphiql.css';
 import 'graphiql-code-exporter/CodeExporter.css';
 import 'codemirror/theme/neo.css';
 
 import { mergeProps, parseQuery, stringifyQuery } from '@arcblock/ux/lib/Util';
 import { graphQLFetcher } from './util';
 
+function HistoryToggleButton() {
+  const { toggle } = useHistoryContext();
+  return <GraphiQL.Button onClick={toggle} label="History" title="Show History" />;
+}
+
+function PrettifyButton() {
+  const prettify = usePrettifyEditors();
+  return <GraphiQL.Button onClick={prettify} label="Prettify" title="Prettify Query (Shift-Ctrl-P)" />;
+}
+
 export default function GraphQLPlayground(props) {
   const newProps = mergeProps(props, GraphQLPlayground, [
     'style',
@@ -214,18 +226,8 @@ export default function GraphQLPlayground(props) {
       <GraphiQL ref={graphiql} fetcher={fetcher} schema={schema} query={query} onEditQuery={onEditQuery}>
         <GraphiQL.Logo>{title}</GraphiQL.Logo>
         <GraphiQL.Toolbar>
-          <GraphiQL.Button
-            onClick={() => graphiql.current.handlePrettifyQuery()}
-            label="Prettify"
-            title="Prettify Query (Shift-Ctrl-P)"
-          />
-          {enableHistory && (
-            <GraphiQL.Button
-              onClick={() => graphiql.current.handleToggleHistory()}
-              label="History"
-              title="Show History"
-            />
-          )}
+          <PrettifyButton />
+          {enableHistory && <HistoryToggleButton />}
           {enableQueryComposer && (
             <GraphiQL.Button onClick={onToggleExplorer} label="Query Composer" title="Toggle Query Composer" />
           )}
@@ -364,31 +366,12 @@ const Container = styled.div`
       }
     }
 
-    .docExplorerWrap {
-      position: absolute !important;
-      height: 100%;
-      top: 0;
-      right: 0;
-      background-color: ${(props) => props.theme.palette.background.default};
-      box-shadow: -5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
-      z-index: 3;
-    }
-
     .historyPaneWrap {
       width: 320px !important;
       background-color: ${(props) => props.theme.palette.background.default};
       box-shadow: 5px 16px 10px 0 rgba(0, 0, 0, ${(props) => (props.theme.mode === 'light' ? 0.05 : 0.5)});
     }
 
-    .docExplorerWrap {
-      .doc-explorer {
-        background-color: ${(props) => props.theme.palette.background.default};
-      }
-      .doc-explorer-contents {
-        padding: 32px;
-      }
-    }
-
     .search-box {
       margin-bottom: 20px;
       border-bottom: none;