Feature/plugin custom graphql scalars

README.md

@@ -140,3 +140,8 @@ Example styles map:
   }}
 />
 ```
+
+
+## Handling Custom GraphQL Scalars
+
+Custom GraphQL Scalars can be provided support for using the [GraphQL Scalar Input Plugins](./src/plugins/graphql-scalar-inputs/README.md).

src/Explorer.js

@@ -51,6 +51,8 @@ import type {
   ValueNode,
 } from 'graphql';
 
+import ScalarInputPluginManager from './plugins/graphql-scalar-inputs'
+
 type Field = GraphQLField<any, any>;
 
 type GetDefaultScalarArgValue = (
@@ -635,6 +637,7 @@ class ArgView extends React.PureComponent<ArgViewProps, ArgViewState> {
         makeDefaultArg={this.props.makeDefaultArg}
         onRunOperation={this.props.onRunOperation}
         styleConfig={this.props.styleConfig}
+        scalarInputsPluginManager={this.props.scalarInputsPluginManager}
       />
     );
   }
@@ -723,11 +726,7 @@ class ScalarInput extends React.PureComponent<ScalarInputProps, {}> {
 }
 
 class AbstractArgView extends React.PureComponent<AbstractArgViewProps, {}> {
-  render() {
-    const {argValue, arg, styleConfig} = this.props;
-    /* TODO: handle List types*/
-    const argType = unwrapInputType(arg.type);
-
+  defaultArgViewHandler(arg, argType, argValue, styleConfig) {
     let input = null;
     if (argValue) {
       if (argValue.kind === 'Variable') {
@@ -823,6 +822,18 @@ class AbstractArgView extends React.PureComponent<AbstractArgViewProps, {}> {
         }
       }
     }
+    return input;
+  }
+
+  render() {
+    const {argValue, arg, styleConfig, scalarInputsPluginManager} = this.props;
+    /* TODO: handle List types*/
+    const argType = unwrapInputType(arg.type);
+
+    let input = scalarInputsPluginManager.process(arg, styleConfig, this.props.setArgValue)
+    if (!input) {
+      input = this.defaultArgViewHandler(arg, argType, argValue, styleConfig);
+    }
 
     return (
       <div
@@ -1290,6 +1301,7 @@ class FieldView extends React.PureComponent<FieldViewProps, {}> {
                 makeDefaultArg={this.props.makeDefaultArg}
                 onRunOperation={this.props.onRunOperation}
                 styleConfig={this.props.styleConfig}
+                scalarInputsPluginManager={this.props.scalarInputsPluginManager}
               />
             ))}
           </div>
@@ -1598,6 +1610,7 @@ class RootView extends React.PureComponent<RootViewProps, {}> {
               makeDefaultArg={this.props.makeDefaultArg}
               onRunOperation={this.props.onRunOperation}
               styleConfig={this.props.styleConfig}
+              scalarInputsPluginManager={this.props.scalarInputsPluginManager}
             />
           ))}
       </div>
@@ -1641,11 +1654,17 @@ class Explorer extends React.PureComponent<Props, State> {
     getDefaultScalarArgValue: defaultGetDefaultScalarArgValue,
   };
 
-  state = {
-    newOperationType: 'query',
-    operation: null,
-    operationToScrollTo: null,
-  };
+  constructor(props) {
+    super(props);
+    const { graphqlCustomScalarPlugins, enableBundledPlugins } = this.props;
+    this.scalarInputsPluginManager = new ScalarInputPluginManager(graphqlCustomScalarPlugins, enableBundledPlugins);
+    // should set initial state in object constructor
+    this.state = {
+      newOperationType: 'query',
+      operation: null,
+      operationToScrollTo: null,
+    };
+  }
 
   _ref: ?any;
   _resetScroll = () => {
@@ -2020,6 +2039,7 @@ class Explorer extends React.PureComponent<Props, State> {
                     }
                   }}
                   styleConfig={styleConfig}
+                  scalarInputsPluginManager={this.scalarInputsPluginManager}
                 />
               );
             },
@@ -2066,6 +2086,8 @@ class ExplorerWrapper extends React.PureComponent<Props, {}> {
   static defaultProps = {
     width: 320,
     title: 'Explorer',
+    graphqlCustomScalarPlugins: [],
+    enableBundledPlugins: false,
   };
 
   render() {

src/plugins/graphql-scalar-inputs/README.md

@@ -0,0 +1,79 @@
+
+# GraphQL Scalar Input Plugins
+
+These allow custom handling of custom GraphQL scalars.
+
+# Definition
+
+A GraphQL Scalar Input pluging implements the following function signatures:
+```js
+function canProcess(arg): boolean
+
+function render(arg, styleConfig, onChangeHandler): void
+
+export default {
+  canProcess,
+  render,
+  name: "InputHandlerName"
+}
+```
+
+## Examples
+
+See the bundled `DateInput` plugin.
+
+When instantiating the GraphiQL Explorer, pass the list of desired plugins as the prop `graphqlCustomScalarPlugins`.
+
+# Usage 
+
+## Enabling bundled plugins
+
+By default, these plugins are disabled. To enable the bundled plugins, instantiate the explorer with the prop `enableBundledPlugins` set to `true`.
+
+## Example adding custom plugins
+
+Any number of plugins can be added, and can override existing bundled plugins.
+
+Plugins are checked in the order they are given in the `graphqlCustomScalarPlugins` list. The first plugin with a `canProcess` value that returns `true` will be used. Bundled plugins are always checked last, after all customised plugins.
+
+```js
+// Note this is just an example using a third-party plugin. This is for illustrative purposes only
+const anotherThirdPartyHandler = require('<graphiql-explorer-example-custom-scalar-plugin>')
+
+const customISODateTypeHandler = {
+  render: (arg, styleConfig, onChangeHandler) => (
+    <input
+      type="date"
+      value={arg.defaultValue}
+      onChange={event => {
+        // Set the date placed into the query to be an ISO dateTime string
+        const isoDate = new Date(event.target.value).toISOString();
+        event.target = { value: isoDate };
+        return onChangeHandler(event);
+      }}
+    />
+  ),
+  canProcess: (arg) => arg && arg.type && arg.type.name ===  'Date',
+  name: 'customDate',
+}
+
+const configuredPlugins = [anotherThirdPartyHandler, customISODateTypeHandler]
+```
+Then later, in your render method where you create the explorer...
+```
+<GraphiQLExplorer
+  schema={schema}
+  query={query}
+  onEdit={this._handleEditQuery}
+  onRunOperation={operationName =>
+    this._graphiql.handleRunQuery(operationName)
+  }
+  explorerIsOpen={this.state.explorerIsOpen}
+  onToggleExplorer={this._handleToggleExplorer}
+  getDefaultScalarArgValue={getDefaultScalarArgValue}
+  makeDefaultArg={makeDefaultArg}
+  enableBundledPlugins={true}
+  graphqlCustomScalarPlugins={configuredPlugins}
+/>
+```
+> To see examples of instantiating the explorer, see the [example repo](https://github.com/OneGraph/graphiql-explorer-example).

src/plugins/graphql-scalar-inputs/bundled/DateInput.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+function canProcess(arg) {
+  return arg && arg.type && arg.type.name ===  'Date';
+}
+
+function render(arg, styleConfig, onChangeHandler) {
+  return (
+    <input
+      type="date"
+      value={arg.defaultValue}
+      onChange={onChangeHandler}
+    />
+  );
+}
+
+
+const DatePlugin = {
+  canProcess,
+  render,
+  name: 'DateInput'
+};
+
+export default DatePlugin;

src/plugins/graphql-scalar-inputs/index.js

@@ -0,0 +1,25 @@
+import DatePlugin from './bundled/DateInput'
+
+const bundledPlugins = [DatePlugin];
+
+class ScalarInputPluginManager {
+  constructor(plugins = [], enableBundledPlugins = false) {
+    let enabledPlugins = plugins;
+    if (enableBundledPlugins) {
+      // ensure bundled plugins are the last plugins checked.
+      enabledPlugins.push(...bundledPlugins);
+    }
+    this.plugins = enabledPlugins;
+  }
+
+  process(arg, styleConfig, onChangeHandler) {    
+    // plugins are provided in order, the first matching plugin will be used.
+    const handler = this.plugins.find(plugin => plugin.canProcess(arg));
+    if (handler) {
+      return handler.render(arg, styleConfig, onChangeHandler);
+    }
+    return null;
+  }
+}
+
+export default ScalarInputPluginManager;