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