mirror of
https://github.com/usebruno/bruno.git
synced 2024-12-23 07:09:01 +01:00
chore(#197): ran prettier on packages/bruno-graphql-docs
This commit is contained in:
parent
67fe264494
commit
a53dd76854
@ -24,7 +24,7 @@ type NavStackItem = {
|
||||
|
||||
const initialNav: NavStackItem = {
|
||||
name: 'Schema',
|
||||
title: 'Documentation Explorer',
|
||||
title: 'Documentation Explorer'
|
||||
};
|
||||
|
||||
type DocExplorerProps = {
|
||||
@ -53,10 +53,7 @@ type DocExplorerState = {
|
||||
* top bar. Typically this will be a "close" button for temporary explorer.
|
||||
*
|
||||
*/
|
||||
export class DocExplorer extends React.Component<
|
||||
DocExplorerProps,
|
||||
DocExplorerState
|
||||
> {
|
||||
export class DocExplorer extends React.Component<DocExplorerProps, DocExplorerState> {
|
||||
// handleClickTypeOrField: OnClickTypeFunction | OnClickFieldFunction
|
||||
constructor(props: DocExplorerProps) {
|
||||
super(props);
|
||||
@ -64,10 +61,7 @@ export class DocExplorer extends React.Component<
|
||||
this.state = { navStack: [initialNav] };
|
||||
}
|
||||
|
||||
shouldComponentUpdate(
|
||||
nextProps: DocExplorerProps,
|
||||
nextState: DocExplorerState,
|
||||
) {
|
||||
shouldComponentUpdate(nextProps: DocExplorerProps, nextState: DocExplorerState) {
|
||||
return (
|
||||
this.props.schema !== nextProps.schema ||
|
||||
this.state.navStack !== nextState.navStack ||
|
||||
@ -82,9 +76,7 @@ export class DocExplorer extends React.Component<
|
||||
|
||||
let content;
|
||||
if (schemaErrors) {
|
||||
content = (
|
||||
<div className="error-container">{'Error fetching schema'}</div>
|
||||
);
|
||||
content = <div className="error-container">{'Error fetching schema'}</div>;
|
||||
} else if (schema === undefined) {
|
||||
// Schema is undefined when it is being loaded via introspection.
|
||||
content = (
|
||||
@ -107,9 +99,7 @@ export class DocExplorer extends React.Component<
|
||||
/>
|
||||
);
|
||||
} else if (navStack.length === 1) {
|
||||
content = (
|
||||
<SchemaDoc schema={schema} onClickType={this.handleClickType} />
|
||||
);
|
||||
content = <SchemaDoc schema={schema} onClickType={this.handleClickType} />;
|
||||
} else if (isType(navItem.def)) {
|
||||
content = (
|
||||
<TypeDoc
|
||||
@ -120,17 +110,10 @@ export class DocExplorer extends React.Component<
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
content = (
|
||||
<FieldDoc
|
||||
field={navItem.def as FieldType}
|
||||
onClickType={this.handleClickType}
|
||||
/>
|
||||
);
|
||||
content = <FieldDoc field={navItem.def as FieldType} onClickType={this.handleClickType} />;
|
||||
}
|
||||
|
||||
const shouldSearchBoxAppear =
|
||||
navStack.length === 1 ||
|
||||
(isType(navItem.def) && 'getFields' in navItem.def);
|
||||
const shouldSearchBoxAppear = navStack.length === 1 || (isType(navItem.def) && 'getFields' in navItem.def);
|
||||
|
||||
let prevName;
|
||||
if (navStack.length > 1) {
|
||||
@ -139,22 +122,18 @@ export class DocExplorer extends React.Component<
|
||||
|
||||
return (
|
||||
<div className="graphql-docs-container">
|
||||
<section
|
||||
className="doc-explorer"
|
||||
key={navItem.name}
|
||||
aria-label="Documentation Explorer">
|
||||
<section className="doc-explorer" key={navItem.name} aria-label="Documentation Explorer">
|
||||
<div className="doc-explorer-title-bar">
|
||||
{prevName && (
|
||||
<button
|
||||
className="doc-explorer-back"
|
||||
onClick={this.handleNavBackClick}
|
||||
aria-label={`Go back to ${prevName}`}>
|
||||
aria-label={`Go back to ${prevName}`}
|
||||
>
|
||||
{prevName}
|
||||
</button>
|
||||
)}
|
||||
<div className="doc-explorer-title">
|
||||
{navItem.title || navItem.name}
|
||||
</div>
|
||||
<div className="doc-explorer-title">{navItem.title || navItem.name}</div>
|
||||
<div className="doc-explorer-rhs">{this.props.children}</div>
|
||||
</div>
|
||||
<div className="doc-explorer-contents">
|
||||
@ -181,9 +160,9 @@ export class DocExplorer extends React.Component<
|
||||
navStack: navStack.concat([
|
||||
{
|
||||
name: typeOrField.name,
|
||||
def: typeOrField,
|
||||
},
|
||||
]),
|
||||
def: typeOrField
|
||||
}
|
||||
])
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -17,11 +17,7 @@ type ArgumentProps = {
|
||||
showDefaultValue?: boolean;
|
||||
};
|
||||
|
||||
export default function Argument({
|
||||
arg,
|
||||
onClickType,
|
||||
showDefaultValue,
|
||||
}: ArgumentProps) {
|
||||
export default function Argument({ arg, onClickType, showDefaultValue }: ArgumentProps) {
|
||||
return (
|
||||
<span className="arg">
|
||||
<span className="arg-name">{arg.name}</span>
|
||||
|
@ -26,9 +26,7 @@ export default function DefaultValue({ field }: DefaultValueProps) {
|
||||
return (
|
||||
<span>
|
||||
{' = '}
|
||||
<span className="arg-default-value">
|
||||
{printDefault(astFromValue(field.defaultValue, field.type))}
|
||||
</span>
|
||||
<span className="arg-default-value">{printDefault(astFromValue(field.defaultValue, field.type))}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
@ -27,37 +27,27 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
|
||||
<div id="doc-args" className="doc-category">
|
||||
<div className="doc-category-title">{'arguments'}</div>
|
||||
{field.args
|
||||
.filter(arg => !arg.deprecationReason)
|
||||
.filter((arg) => !arg.deprecationReason)
|
||||
.map((arg: GraphQLArgument) => (
|
||||
<div key={arg.name} className="doc-category-item">
|
||||
<div>
|
||||
<Argument arg={arg} onClickType={onClickType} />
|
||||
</div>
|
||||
<MarkdownContent
|
||||
className="doc-value-description"
|
||||
markdown={arg.description}
|
||||
/>
|
||||
<MarkdownContent className="doc-value-description" markdown={arg.description} />
|
||||
{arg && 'deprecationReason' in arg && (
|
||||
<MarkdownContent
|
||||
className="doc-deprecation"
|
||||
markdown={arg?.deprecationReason}
|
||||
/>
|
||||
<MarkdownContent className="doc-deprecation" markdown={arg?.deprecationReason} />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
const deprecatedArgs = field.args.filter(arg =>
|
||||
Boolean(arg.deprecationReason),
|
||||
);
|
||||
const deprecatedArgs = field.args.filter((arg) => Boolean(arg.deprecationReason));
|
||||
if (deprecatedArgs.length > 0) {
|
||||
deprecatedArgsDef = (
|
||||
<div id="doc-deprecated-args" className="doc-category">
|
||||
<div className="doc-category-title">{'deprecated arguments'}</div>
|
||||
{!showDeprecated ? (
|
||||
<button
|
||||
className="show-btn"
|
||||
onClick={() => handleShowDeprecated(!showDeprecated)}>
|
||||
<button className="show-btn" onClick={() => handleShowDeprecated(!showDeprecated)}>
|
||||
{'Show deprecated arguments...'}
|
||||
</button>
|
||||
) : (
|
||||
@ -66,15 +56,9 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
|
||||
<div>
|
||||
<Argument arg={arg} onClickType={onClickType} />
|
||||
</div>
|
||||
<MarkdownContent
|
||||
className="doc-value-description"
|
||||
markdown={arg.description}
|
||||
/>
|
||||
<MarkdownContent className="doc-value-description" markdown={arg.description} />
|
||||
{arg && 'deprecationReason' in arg && (
|
||||
<MarkdownContent
|
||||
className="doc-deprecation"
|
||||
markdown={arg?.deprecationReason}
|
||||
/>
|
||||
<MarkdownContent className="doc-deprecation" markdown={arg?.deprecationReason} />
|
||||
)}
|
||||
</div>
|
||||
))
|
||||
@ -85,12 +69,7 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
|
||||
}
|
||||
|
||||
let directivesDef;
|
||||
if (
|
||||
field &&
|
||||
field.astNode &&
|
||||
field.astNode.directives &&
|
||||
field.astNode.directives.length > 0
|
||||
) {
|
||||
if (field && field.astNode && field.astNode.directives && field.astNode.directives.length > 0) {
|
||||
directivesDef = (
|
||||
<div id="doc-directives" className="doc-category">
|
||||
<div className="doc-category-title">{'directives'}</div>
|
||||
@ -107,15 +86,9 @@ export default function FieldDoc({ field, onClickType }: FieldDocProps) {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MarkdownContent
|
||||
className="doc-type-description"
|
||||
markdown={field?.description || 'No Description'}
|
||||
/>
|
||||
<MarkdownContent className="doc-type-description" markdown={field?.description || 'No Description'} />
|
||||
{field && 'deprecationReason' in field && (
|
||||
<MarkdownContent
|
||||
className="doc-deprecation"
|
||||
markdown={field?.deprecationReason}
|
||||
/>
|
||||
<MarkdownContent className="doc-deprecation" markdown={field?.deprecationReason} />
|
||||
)}
|
||||
<div className="doc-category">
|
||||
<div className="doc-category-title">{'type'}</div>
|
||||
|
@ -12,7 +12,7 @@ type Maybe<T> = T | null | undefined;
|
||||
|
||||
const md = new MD({
|
||||
// render urls as links, à la github-flavored markdown
|
||||
linkify: true,
|
||||
linkify: true
|
||||
});
|
||||
|
||||
type MarkdownContentProps = {
|
||||
@ -20,18 +20,10 @@ type MarkdownContentProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function MarkdownContent({
|
||||
markdown,
|
||||
className,
|
||||
}: MarkdownContentProps) {
|
||||
export default function MarkdownContent({ markdown, className }: MarkdownContentProps) {
|
||||
if (!markdown) {
|
||||
return <div />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
dangerouslySetInnerHTML={{ __html: md.render(markdown) }}
|
||||
/>
|
||||
);
|
||||
return <div className={className} dangerouslySetInnerHTML={{ __html: md.render(markdown) }} />;
|
||||
}
|
||||
|
@ -20,17 +20,13 @@ type SchemaDocProps = {
|
||||
export default function SchemaDoc({ schema, onClickType }: SchemaDocProps) {
|
||||
const queryType = schema.getQueryType();
|
||||
const mutationType = schema.getMutationType && schema.getMutationType();
|
||||
const subscriptionType =
|
||||
schema.getSubscriptionType && schema.getSubscriptionType();
|
||||
const subscriptionType = schema.getSubscriptionType && schema.getSubscriptionType();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<MarkdownContent
|
||||
className="doc-type-description"
|
||||
markdown={
|
||||
schema.description ||
|
||||
'A GraphQL schema provides a root type for each kind of operation.'
|
||||
}
|
||||
markdown={schema.description || 'A GraphQL schema provides a root type for each kind of operation.'}
|
||||
/>
|
||||
<div className="doc-category">
|
||||
<div className="doc-category-title">{'root types'}</div>
|
||||
|
@ -21,10 +21,7 @@ type SearchBoxState = {
|
||||
value: string;
|
||||
};
|
||||
|
||||
export default class SearchBox extends React.Component<
|
||||
SearchBoxProps,
|
||||
SearchBoxState
|
||||
> {
|
||||
export default class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {
|
||||
debouncedOnSearch: OnSearchFn;
|
||||
|
||||
constructor(props: SearchBoxProps) {
|
||||
@ -47,10 +44,7 @@ export default class SearchBox extends React.Component<
|
||||
aria-label={this.props.placeholder}
|
||||
/>
|
||||
{this.state.value && (
|
||||
<button
|
||||
className="search-box-clear"
|
||||
onClick={this.handleClear}
|
||||
aria-label="Clear search input">
|
||||
<button className="search-box-clear" onClick={this.handleClear} aria-label="Clear search input">
|
||||
{'\u2715'}
|
||||
</button>
|
||||
)}
|
||||
@ -58,7 +52,7 @@ export default class SearchBox extends React.Component<
|
||||
);
|
||||
}
|
||||
|
||||
handleChange: ChangeEventHandler<HTMLInputElement> = event => {
|
||||
handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
|
||||
const value = event.currentTarget.value;
|
||||
this.setState({ value });
|
||||
this.debouncedOnSearch(value);
|
||||
|
@ -20,15 +20,9 @@ type SearchResultsProps = {
|
||||
onClickField: OnClickFieldFunction;
|
||||
};
|
||||
|
||||
export default class SearchResults extends React.Component<
|
||||
SearchResultsProps,
|
||||
{}
|
||||
> {
|
||||
export default class SearchResults extends React.Component<SearchResultsProps, {}> {
|
||||
shouldComponentUpdate(nextProps: SearchResultsProps) {
|
||||
return (
|
||||
this.props.schema !== nextProps.schema ||
|
||||
this.props.searchValue !== nextProps.searchValue
|
||||
);
|
||||
return this.props.schema !== nextProps.schema || this.props.searchValue !== nextProps.searchValue;
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -47,15 +41,12 @@ export default class SearchResults extends React.Component<
|
||||
|
||||
// Move the within type name to be the first searched.
|
||||
if (withinType) {
|
||||
typeNames = typeNames.filter(n => n !== withinType.name);
|
||||
typeNames = typeNames.filter((n) => n !== withinType.name);
|
||||
typeNames.unshift(withinType.name);
|
||||
}
|
||||
|
||||
for (const typeName of typeNames) {
|
||||
if (
|
||||
matchedWithin.length + matchedTypes.length + matchedFields.length >=
|
||||
100
|
||||
) {
|
||||
if (matchedWithin.length + matchedTypes.length + matchedFields.length >= 100) {
|
||||
break;
|
||||
}
|
||||
|
||||
@ -64,21 +55,19 @@ export default class SearchResults extends React.Component<
|
||||
matchedTypes.push(
|
||||
<div className="doc-category-item" key={typeName}>
|
||||
<TypeLink type={type} onClick={onClickType} />
|
||||
</div>,
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (type && 'getFields' in type) {
|
||||
const fields = type.getFields();
|
||||
Object.keys(fields).forEach(fieldName => {
|
||||
Object.keys(fields).forEach((fieldName) => {
|
||||
const field = fields[fieldName];
|
||||
let matchingArgs;
|
||||
|
||||
if (!isMatch(fieldName, searchValue)) {
|
||||
if ('args' in field && field.args.length) {
|
||||
matchingArgs = field.args.filter(arg =>
|
||||
isMatch(arg.name, searchValue),
|
||||
);
|
||||
matchingArgs = field.args.filter((arg) => isMatch(arg.name, searchValue));
|
||||
if (matchingArgs.length === 0) {
|
||||
return;
|
||||
}
|
||||
@ -89,28 +78,18 @@ export default class SearchResults extends React.Component<
|
||||
|
||||
const match = (
|
||||
<div className="doc-category-item" key={typeName + '.' + fieldName}>
|
||||
{withinType !== type && [
|
||||
<TypeLink key="type" type={type} onClick={onClickType} />,
|
||||
'.',
|
||||
]}
|
||||
<a
|
||||
className="field-name"
|
||||
onClick={event => onClickField(field, type, event)}>
|
||||
{withinType !== type && [<TypeLink key="type" type={type} onClick={onClickType} />, '.']}
|
||||
<a className="field-name" onClick={(event) => onClickField(field, type, event)}>
|
||||
{field.name}
|
||||
</a>
|
||||
{matchingArgs && [
|
||||
'(',
|
||||
<span key="args">
|
||||
{matchingArgs.map(arg => (
|
||||
<Argument
|
||||
key={arg.name}
|
||||
arg={arg}
|
||||
onClickType={onClickType}
|
||||
showDefaultValue={false}
|
||||
/>
|
||||
{matchingArgs.map((arg) => (
|
||||
<Argument key={arg.name} arg={arg} onClickType={onClickType} showDefaultValue={false} />
|
||||
))}
|
||||
</span>,
|
||||
')',
|
||||
')'
|
||||
]}
|
||||
</div>
|
||||
);
|
||||
@ -124,10 +103,7 @@ export default class SearchResults extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
matchedWithin.length + matchedTypes.length + matchedFields.length ===
|
||||
0
|
||||
) {
|
||||
if (matchedWithin.length + matchedTypes.length + matchedFields.length === 0) {
|
||||
return <span className="doc-alert-text">{'No results found.'}</span>;
|
||||
}
|
||||
|
||||
@ -156,7 +132,7 @@ export default class SearchResults extends React.Component<
|
||||
|
||||
function isMatch(sourceText: string, searchValue: string) {
|
||||
try {
|
||||
const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, ch => '\\' + ch);
|
||||
const escaped = searchValue.replace(/[^_0-9A-Za-z]/g, (ch) => '\\' + ch);
|
||||
return sourceText.search(new RegExp(escaped, 'i')) !== -1;
|
||||
} catch (e) {
|
||||
return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
|
||||
|
@ -13,7 +13,7 @@ import {
|
||||
GraphQLUnionType,
|
||||
GraphQLEnumType,
|
||||
GraphQLType,
|
||||
GraphQLEnumValue,
|
||||
GraphQLEnumValue
|
||||
} from 'graphql';
|
||||
|
||||
import Argument from './Argument';
|
||||
@ -33,10 +33,7 @@ type TypeDocState = {
|
||||
showDeprecated: boolean;
|
||||
};
|
||||
|
||||
export default class TypeDoc extends React.Component<
|
||||
TypeDocProps,
|
||||
TypeDocState
|
||||
> {
|
||||
export default class TypeDoc extends React.Component<TypeDocProps, TypeDocState> {
|
||||
constructor(props: TypeDocProps) {
|
||||
super(props);
|
||||
this.state = { showDeprecated: false };
|
||||
@ -74,7 +71,7 @@ export default class TypeDoc extends React.Component<
|
||||
typesDef = (
|
||||
<div id="doc-types" className="doc-category">
|
||||
<div className="doc-category-title">{typesTitle}</div>
|
||||
{types.map(subtype => (
|
||||
{types.map((subtype) => (
|
||||
<div key={subtype.name} className="doc-category-item">
|
||||
<TypeLink type={subtype} onClick={onClickType} />
|
||||
</div>
|
||||
@ -88,27 +85,19 @@ export default class TypeDoc extends React.Component<
|
||||
let deprecatedFieldsDef;
|
||||
if (type && 'getFields' in type) {
|
||||
const fieldMap = type.getFields();
|
||||
const fields = Object.keys(fieldMap).map(name => fieldMap[name]);
|
||||
const fields = Object.keys(fieldMap).map((name) => fieldMap[name]);
|
||||
fieldsDef = (
|
||||
<div id="doc-fields" className="doc-category">
|
||||
<div className="doc-category-title">{'fields'}</div>
|
||||
{fields
|
||||
.filter(field => !field.deprecationReason)
|
||||
.map(field => (
|
||||
<Field
|
||||
key={field.name}
|
||||
type={type}
|
||||
field={field}
|
||||
onClickType={onClickType}
|
||||
onClickField={onClickField}
|
||||
/>
|
||||
.filter((field) => !field.deprecationReason)
|
||||
.map((field) => (
|
||||
<Field key={field.name} type={type} field={field} onClickType={onClickType} onClickField={onClickField} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const deprecatedFields = fields.filter(field =>
|
||||
Boolean(field.deprecationReason),
|
||||
);
|
||||
const deprecatedFields = fields.filter((field) => Boolean(field.deprecationReason));
|
||||
if (deprecatedFields.length > 0) {
|
||||
deprecatedFieldsDef = (
|
||||
<div id="doc-deprecated-fields" className="doc-category">
|
||||
@ -118,7 +107,7 @@ export default class TypeDoc extends React.Component<
|
||||
{'Show deprecated fields...'}
|
||||
</button>
|
||||
) : (
|
||||
deprecatedFields.map(field => (
|
||||
deprecatedFields.map((field) => (
|
||||
<Field
|
||||
key={field.name}
|
||||
type={type}
|
||||
@ -141,16 +130,14 @@ export default class TypeDoc extends React.Component<
|
||||
<div className="doc-category">
|
||||
<div className="doc-category-title">{'values'}</div>
|
||||
{values
|
||||
.filter(value => Boolean(!value.deprecationReason))
|
||||
.map(value => (
|
||||
.filter((value) => Boolean(!value.deprecationReason))
|
||||
.map((value) => (
|
||||
<EnumValue key={value.name} value={value} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
const deprecatedValues = values.filter(value =>
|
||||
Boolean(value.deprecationReason),
|
||||
);
|
||||
const deprecatedValues = values.filter((value) => Boolean(value.deprecationReason));
|
||||
if (deprecatedValues.length > 0) {
|
||||
deprecatedValuesDef = (
|
||||
<div className="doc-category">
|
||||
@ -160,9 +147,7 @@ export default class TypeDoc extends React.Component<
|
||||
{'Show deprecated values...'}
|
||||
</button>
|
||||
) : (
|
||||
deprecatedValues.map(value => (
|
||||
<EnumValue key={value.name} value={value} />
|
||||
))
|
||||
deprecatedValues.map((value) => <EnumValue key={value.name} value={value} />)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@ -173,9 +158,7 @@ export default class TypeDoc extends React.Component<
|
||||
<div>
|
||||
<MarkdownContent
|
||||
className="doc-type-description"
|
||||
markdown={
|
||||
('description' in type && type.description) || 'No Description'
|
||||
}
|
||||
markdown={('description' in type && type.description) || 'No Description'}
|
||||
/>
|
||||
{type instanceof GraphQLObjectType && typesDef}
|
||||
{fieldsDef}
|
||||
@ -200,9 +183,7 @@ type FieldProps = {
|
||||
function Field({ type, field, onClickType, onClickField }: FieldProps) {
|
||||
return (
|
||||
<div className="doc-category-item">
|
||||
<a
|
||||
className="field-name"
|
||||
onClick={event => onClickField(field, type, event)}>
|
||||
<a className="field-name" onClick={(event) => onClickField(field, type, event)}>
|
||||
{field.name}
|
||||
</a>
|
||||
{'args' in field &&
|
||||
@ -211,27 +192,19 @@ function Field({ type, field, onClickType, onClickField }: FieldProps) {
|
||||
'(',
|
||||
<span key="args">
|
||||
{field.args
|
||||
.filter(arg => !arg.deprecationReason)
|
||||
.map(arg => (
|
||||
.filter((arg) => !arg.deprecationReason)
|
||||
.map((arg) => (
|
||||
<Argument key={arg.name} arg={arg} onClickType={onClickType} />
|
||||
))}
|
||||
</span>,
|
||||
')',
|
||||
')'
|
||||
]}
|
||||
{': '}
|
||||
<TypeLink type={field.type} onClick={onClickType} />
|
||||
<DefaultValue field={field} />
|
||||
{field.description && (
|
||||
<MarkdownContent
|
||||
className="field-short-description"
|
||||
markdown={field.description}
|
||||
/>
|
||||
)}
|
||||
{field.description && <MarkdownContent className="field-short-description" markdown={field.description} />}
|
||||
{'deprecationReason' in field && field.deprecationReason && (
|
||||
<MarkdownContent
|
||||
className="doc-deprecation"
|
||||
markdown={field.deprecationReason}
|
||||
/>
|
||||
<MarkdownContent className="doc-deprecation" markdown={field.deprecationReason} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@ -245,16 +218,8 @@ function EnumValue({ value }: EnumValue) {
|
||||
return (
|
||||
<div className="doc-category-item">
|
||||
<div className="enum-value">{value.name}</div>
|
||||
<MarkdownContent
|
||||
className="doc-value-description"
|
||||
markdown={value.description}
|
||||
/>
|
||||
{value.deprecationReason && (
|
||||
<MarkdownContent
|
||||
className="doc-deprecation"
|
||||
markdown={value.deprecationReason}
|
||||
/>
|
||||
)}
|
||||
<MarkdownContent className="doc-value-description" markdown={value.description} />
|
||||
{value.deprecationReason && <MarkdownContent className="doc-deprecation" markdown={value.deprecationReason} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -6,12 +6,7 @@
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
GraphQLList,
|
||||
GraphQLNonNull,
|
||||
GraphQLType,
|
||||
GraphQLNamedType,
|
||||
} from 'graphql';
|
||||
import { GraphQLList, GraphQLNonNull, GraphQLType, GraphQLNamedType } from 'graphql';
|
||||
import { OnClickTypeFunction } from './types';
|
||||
|
||||
type Maybe<T> = T | null | undefined;
|
||||
@ -47,11 +42,12 @@ function renderType(type: Maybe<GraphQLType>, onClick: OnClickTypeFunction) {
|
||||
return (
|
||||
<a
|
||||
className="type-name"
|
||||
onClick={event => {
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
onClick(type as GraphQLNamedType, event);
|
||||
}}
|
||||
href="#">
|
||||
href="#"
|
||||
>
|
||||
{type?.name}
|
||||
</a>
|
||||
);
|
||||
|
@ -7,29 +7,17 @@ import {
|
||||
GraphQLInterfaceType,
|
||||
GraphQLInputObjectType,
|
||||
GraphQLType,
|
||||
GraphQLNamedType,
|
||||
GraphQLNamedType
|
||||
} from 'graphql';
|
||||
|
||||
export type FieldType =
|
||||
| GraphQLField<{}, {}, {}>
|
||||
| GraphQLInputField
|
||||
| GraphQLArgument;
|
||||
export type FieldType = GraphQLField<{}, {}, {}> | GraphQLInputField | GraphQLArgument;
|
||||
|
||||
export type OnClickFieldFunction = (
|
||||
field: FieldType,
|
||||
type?:
|
||||
| GraphQLObjectType
|
||||
| GraphQLInterfaceType
|
||||
| GraphQLInputObjectType
|
||||
| GraphQLType,
|
||||
event?: MouseEvent,
|
||||
type?: GraphQLObjectType | GraphQLInterfaceType | GraphQLInputObjectType | GraphQLType,
|
||||
event?: MouseEvent
|
||||
) => void;
|
||||
|
||||
export type OnClickTypeFunction = (
|
||||
type: GraphQLNamedType,
|
||||
event?: MouseEvent<HTMLAnchorElement>,
|
||||
) => void;
|
||||
export type OnClickTypeFunction = (type: GraphQLNamedType, event?: MouseEvent<HTMLAnchorElement>) => void;
|
||||
|
||||
export type OnClickFieldOrTypeFunction =
|
||||
| OnClickFieldFunction
|
||||
| OnClickTypeFunction;
|
||||
export type OnClickFieldOrTypeFunction = OnClickFieldFunction | OnClickTypeFunction;
|
||||
|
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
.graphql-docs-container .doc-explorer-back {
|
||||
color: #3B5998;
|
||||
color: #3b5998;
|
||||
cursor: pointer;
|
||||
margin: -7px 0 -6px -8px;
|
||||
overflow-x: hidden;
|
||||
@ -42,8 +42,8 @@
|
||||
}
|
||||
|
||||
.graphql-docs-container .doc-explorer-back:before {
|
||||
border-left: 2px solid #3B5998;
|
||||
border-top: 2px solid #3B5998;
|
||||
border-left: 2px solid #3b5998;
|
||||
border-top: 2px solid #3b5998;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 9px;
|
||||
@ -74,7 +74,7 @@
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.graphql-docs-container .doc-type-description p:first-child ,
|
||||
.graphql-docs-container .doc-type-description p:first-child,
|
||||
.graphql-docs-container .doc-type-description blockquote:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -100,7 +100,7 @@
|
||||
.graphql-docs-container .doc-type-description pre,
|
||||
.graphql-docs-container .doc-category code,
|
||||
.graphql-docs-container .doc-category pre {
|
||||
--saf-0: rgba(var(--sk_foreground_low,29,28,29),0.13);
|
||||
--saf-0: rgba(var(--sk_foreground_low, 29, 28, 29), 0.13);
|
||||
font-size: 12px;
|
||||
line-height: 1.50001;
|
||||
font-variant-ligatures: none;
|
||||
@ -118,7 +118,7 @@
|
||||
padding: 2px 3px 1px;
|
||||
border: 1px solid var(--saf-0);
|
||||
border-radius: 3px;
|
||||
background-color: rgba(var(--sk_foreground_min,29,28,29),.04);
|
||||
background-color: rgba(var(--sk_foreground_min, 29, 28, 29), 0.04);
|
||||
color: #e01e5a;
|
||||
background-color: white;
|
||||
}
|
||||
@ -146,15 +146,15 @@
|
||||
}
|
||||
|
||||
.graphql-docs-container .keyword {
|
||||
color: #B11A04;
|
||||
color: #b11a04;
|
||||
}
|
||||
|
||||
.graphql-docs-container .type-name {
|
||||
color: #CA9800;
|
||||
color: #ca9800;
|
||||
}
|
||||
|
||||
.graphql-docs-container .field-name {
|
||||
color: #1F61A0;
|
||||
color: #1f61a0;
|
||||
}
|
||||
|
||||
.graphql-docs-container .field-short-description {
|
||||
@ -165,11 +165,11 @@
|
||||
}
|
||||
|
||||
.graphql-docs-container .enum-value {
|
||||
color: #0B7FC7;
|
||||
color: #0b7fc7;
|
||||
}
|
||||
|
||||
.graphql-docs-container .arg-name {
|
||||
color: #8B2BB9;
|
||||
color: #8b2bb9;
|
||||
}
|
||||
|
||||
.graphql-docs-container .arg {
|
||||
@ -189,13 +189,13 @@
|
||||
}
|
||||
|
||||
.graphql-docs-container .arg-default-value {
|
||||
color: #43A047;
|
||||
color: #43a047;
|
||||
}
|
||||
|
||||
.graphql-docs-container .doc-deprecation {
|
||||
background: #fffae8;
|
||||
box-shadow: inset 0 0 1px #bfb063;
|
||||
color: #867F70;
|
||||
color: #867f70;
|
||||
line-height: 16px;
|
||||
margin: 8px -8px;
|
||||
max-height: 80px;
|
||||
|
@ -1,8 +1,6 @@
|
||||
import { DocExplorer } from "./components/DocExplorer";
|
||||
import { DocExplorer } from './components/DocExplorer';
|
||||
|
||||
// Todo: Rollup throws error
|
||||
import './index.css';
|
||||
|
||||
export {
|
||||
DocExplorer
|
||||
}
|
||||
export { DocExplorer };
|
||||
|
@ -9,10 +9,7 @@
|
||||
* Provided a duration and a function, returns a new function which is called
|
||||
* `duration` milliseconds after the last call.
|
||||
*/
|
||||
export default function debounce<F extends (...args: any[]) => any>(
|
||||
duration: number,
|
||||
fn: F,
|
||||
) {
|
||||
export default function debounce<F extends (...args: any[]) => any>(duration: number, fn: F) {
|
||||
let timeout: number | null;
|
||||
return function (this: any, ...args: Parameters<F>) {
|
||||
if (timeout) {
|
||||
|
Loading…
Reference in New Issue
Block a user