Custom argument inputs

[baohouse]

Due to my company's deadline being fairly short, I had to fork graphiql-explorer in order to implement custom argument input and check it into our codebase. I'd prefer to stick with the official plugin instead maintaining it internally.

One of the problem with using GraphQL enums is that you don't necessarily get a human-readable enum. Or we have fields that are String, but we want to have them select from a list. So it would look something like this (assetTypes):

I do this by exposing a getScalarArgInput prop, and pass in a function that feels similar to getDefaultScalarArgValue.

export function getScalarArgInput(parentField, arg, argType, argValue, onChange, styleConfig) {
  const unwrappedType = unwrapOutputType(parentField.type);
  if (
    unwrappedType.name === 'AccountBalance' &&
    arg.name === 'assetTypes' &&
    argType.name === 'String'
  ) {
    return (
      <select
        onChange={onChange}
        style={{ color: styleConfig.colors.builtin }}
        value={argValue ? argValue.value : undefined}
      >
        {_.map(FinancialAssetType, ({ code, description }) => (
          <option key={code} value={code}>
            {description}
          </option>
        ))}
      </select>
    );
  }
  return;
}

Wondering if this would be useful to check in.

[FluorescentHallucinogen]

PTAL at #47. 😉