From 96f8cb4f5ec267432971e55968e07a180fe3b97c Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 11:41:53 -0800 Subject: [PATCH 1/7] Extract TypeLink out of DocExplorer --- src/components/DocExplorer.js | 34 +-------------------- src/components/DocExplorer/TypeLink.js | 42 ++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 33 deletions(-) create mode 100644 src/components/DocExplorer/TypeLink.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index e946f3172e0..0d6bccf1ec7 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -15,11 +15,10 @@ import { GraphQLInterfaceType, GraphQLUnionType, GraphQLEnumType, - GraphQLList, - GraphQLNonNull } from 'graphql'; import debounce from '../utility/debounce'; +import TypeLink from './DocExplorer/TypeLink'; /** * DocExplorer @@ -632,37 +631,6 @@ class FieldDoc extends React.Component { } } -// Renders a type link -class TypeLink extends React.Component { - - static propTypes = { - type: PropTypes.object, - onClick: PropTypes.func, - } - - shouldComponentUpdate(nextProps) { - return this.props.type !== nextProps.type; - } - - render() { - return renderType(this.props.type, this.props.onClick); - } -} - -function renderType(type, onClick) { - if (type instanceof GraphQLNonNull) { - return {renderType(type.ofType, onClick)}{'!'}; - } - if (type instanceof GraphQLList) { - return {'['}{renderType(type.ofType, onClick)}{']'}; - } - return ( - onClick(type, event)}> - {type.name} - - ); -} - // Renders arbitrary markdown content class MarkdownContent extends React.Component { diff --git a/src/components/DocExplorer/TypeLink.js b/src/components/DocExplorer/TypeLink.js new file mode 100644 index 00000000000..651dcff6623 --- /dev/null +++ b/src/components/DocExplorer/TypeLink.js @@ -0,0 +1,42 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; +import { + GraphQLList, + GraphQLNonNull +} from 'graphql'; + +export default class TypeLink extends React.Component { + static propTypes = { + type: PropTypes.object, + onClick: PropTypes.func, + } + + shouldComponentUpdate(nextProps) { + return this.props.type !== nextProps.type; + } + + render() { + return renderType(this.props.type, this.props.onClick); + } +} + +function renderType(type, onClick) { + if (type instanceof GraphQLNonNull) { + return {renderType(type.ofType, onClick)}{'!'}; + } + if (type instanceof GraphQLList) { + return {'['}{renderType(type.ofType, onClick)}{']'}; + } + return ( + onClick(type, event)}> + {type.name} + + ); +} From 9f085608555e3a97d152c53d7910d96db4089da1 Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 14:24:05 -0800 Subject: [PATCH 2/7] Extract SearchBox out of DocExplorer --- src/components/DocExplorer.js | 47 +-------------------- src/components/DocExplorer/SearchBox.js | 56 +++++++++++++++++++++++++ 2 files changed, 57 insertions(+), 46 deletions(-) create mode 100644 src/components/DocExplorer/SearchBox.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index 0d6bccf1ec7..36bb2e16c2c 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -17,7 +17,7 @@ import { GraphQLEnumType, } from 'graphql'; -import debounce from '../utility/debounce'; +import SearchBox from './DocExplorer/SearchBox'; import TypeLink from './DocExplorer/TypeLink'; /** @@ -190,51 +190,6 @@ export class DocExplorer extends React.Component { } } -class SearchBox extends React.Component { - static propTypes = { - isShown: PropTypes.bool, - onSearch: PropTypes.func, - } - - constructor(props) { - super(props); - - this.state = { value: '' }; - - this._debouncedOnSearch = debounce(200, () => { - this.props.onSearch(this.state.value); - }); - } - - shouldComponentUpdate(nextProps, nextState) { - return nextProps.isShown !== this.props.isShown || - nextState.value !== this.state.value; - } - - render() { - return ( -
- { - this.props.isShown && - - } -
- ); - } - - handleChange = event => { - this.setState({ value: event.target.value }); - this._debouncedOnSearch(); - } -} - // Render Search Results class SearchDoc extends React.Component { diff --git a/src/components/DocExplorer/SearchBox.js b/src/components/DocExplorer/SearchBox.js new file mode 100644 index 00000000000..53f48dd4d52 --- /dev/null +++ b/src/components/DocExplorer/SearchBox.js @@ -0,0 +1,56 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; + +import debounce from '../../utility/debounce'; + +export default class SearchBox extends React.Component { + static propTypes = { + isShown: PropTypes.bool, + onSearch: PropTypes.func, + } + + constructor(props) { + super(props); + + this.state = { value: '' }; + + this._debouncedOnSearch = debounce(200, () => { + this.props.onSearch(this.state.value); + }); + } + + shouldComponentUpdate(nextProps, nextState) { + return nextProps.isShown !== this.props.isShown || + nextState.value !== this.state.value; + } + + render() { + return ( +
+ { + this.props.isShown && + + } +
+ ); + } + + handleChange = event => { + this.setState({ value: event.target.value }); + this._debouncedOnSearch(); + } +} From 36f928ccddf5a980d0b8f0e9aa33dd95c983c7a8 Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 14:35:53 -0800 Subject: [PATCH 3/7] Extract SearchDoc out of DocExplorer, renaming it to SearchResults Changed the name to obviate the need for the comment describing what th component is for. --- src/components/DocExplorer.js | 131 +------------------ src/components/DocExplorer/SearchResults.js | 135 ++++++++++++++++++++ 2 files changed, 138 insertions(+), 128 deletions(-) create mode 100644 src/components/DocExplorer/SearchResults.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index 36bb2e16c2c..2a33caeaba1 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -18,6 +18,7 @@ import { } from 'graphql'; import SearchBox from './DocExplorer/SearchBox'; +import SearchResults from './DocExplorer/SearchResults'; import TypeLink from './DocExplorer/TypeLink'; /** @@ -71,7 +72,7 @@ export class DocExplorer extends React.Component { if (navItem.name === 'Search Results') { title = navItem.name; content = - = 100) { - break; - } - - const type = typeMap[typeName]; - const matchedOn = []; - if (this._isMatch(typeName, searchValue)) { - matchedOn.push('Type Name'); - } - - if (matchedOn.length) { - matchedTypes.push( -
- -
- ); - } - - if (type.getFields) { - const fields = type.getFields(); - Object.keys(fields).forEach(fieldName => { - const field = fields[fieldName]; - if (this._isMatch(fieldName, searchValue)) { - matchedFields.push( -
- onClickField(field, type, event)}> - {field.name} - - {' on '} - -
- ); - } else if (field.args && field.args.length) { - const matches = - field.args.filter(arg => this._isMatch(arg.name, searchValue)); - if (matches.length > 0) { - matchedFields.push( -
- onClickField(field, type, event)}> - {field.name} - - {'('} - - {matches.map(arg => - - {arg.name} - {': '} - - - )} - - {')'} - {' on '} - -
- ); - } - } - }); - } - } - - if (matchedTypes.length === 0 && matchedFields.length === 0) { - return ( - - {'No results found.'} - - ); - } - - return ( -
-
- { - (matchedTypes.length > 0 || matchedFields.length > 0) && -
- {'search results'} -
- } - {matchedTypes} - {matchedFields} -
-
- ); - } - - _isMatch(sourceText, searchValue) { - try { - 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; - } - } -} - // Render the top level Schema class SchemaDoc extends React.Component { diff --git a/src/components/DocExplorer/SearchResults.js b/src/components/DocExplorer/SearchResults.js new file mode 100644 index 00000000000..a3a664fa517 --- /dev/null +++ b/src/components/DocExplorer/SearchResults.js @@ -0,0 +1,135 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; + +import TypeLink from './TypeLink'; + +export default class SearchResults extends React.Component { + static propTypes = { + schema: PropTypes.object, + searchValue: PropTypes.string, + onClickType: PropTypes.func, + onClickField: PropTypes.func, + } + + shouldComponentUpdate(nextProps) { + return this.props.schema !== nextProps.schema || + this.props.searchValue !== nextProps.searchValue; + } + + render() { + const searchValue = this.props.searchValue; + const schema = this.props.schema; + const onClickType = this.props.onClickType; + const onClickField = this.props.onClickField; + + const typeMap = schema.getTypeMap(); + + const matchedTypes = []; + const matchedFields = []; + + const typeNames = Object.keys(typeMap); + for (const typeName of typeNames) { + if (matchedTypes.length + matchedFields.length >= 100) { + break; + } + + const type = typeMap[typeName]; + const matchedOn = []; + if (this._isMatch(typeName, searchValue)) { + matchedOn.push('Type Name'); + } + + if (matchedOn.length) { + matchedTypes.push( +
+ +
+ ); + } + + if (type.getFields) { + const fields = type.getFields(); + Object.keys(fields).forEach(fieldName => { + const field = fields[fieldName]; + if (this._isMatch(fieldName, searchValue)) { + matchedFields.push( +
+ onClickField(field, type, event)}> + {field.name} + + {' on '} + +
+ ); + } else if (field.args && field.args.length) { + const matches = + field.args.filter(arg => this._isMatch(arg.name, searchValue)); + if (matches.length > 0) { + matchedFields.push( +
+ onClickField(field, type, event)}> + {field.name} + + {'('} + + {matches.map(arg => + + {arg.name} + {': '} + + + )} + + {')'} + {' on '} + +
+ ); + } + } + }); + } + } + + if (matchedTypes.length === 0 && matchedFields.length === 0) { + return ( + + {'No results found.'} + + ); + } + + return ( +
+
+ { + (matchedTypes.length > 0 || matchedFields.length > 0) && +
+ {'search results'} +
+ } + {matchedTypes} + {matchedFields} +
+
+ ); + } + + _isMatch(sourceText, searchValue) { + try { + 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; + } + } +} From 4e7ac85c7b928796479afbf264b752c3dc27571f Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 14:42:45 -0800 Subject: [PATCH 4/7] Extract MarkdownContent from DocExplorer --- src/components/DocExplorer.js | 29 +-------------- src/components/DocExplorer/MarkdownContent.js | 36 +++++++++++++++++++ 2 files changed, 37 insertions(+), 28 deletions(-) create mode 100644 src/components/DocExplorer/MarkdownContent.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index 2a33caeaba1..ddc1990715c 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -17,6 +17,7 @@ import { GraphQLEnumType, } from 'graphql'; +import MarkdownContent from './DocExplorer/MarkdownContent'; import SearchBox from './DocExplorer/SearchBox'; import SearchResults from './DocExplorer/SearchResults'; import TypeLink from './DocExplorer/TypeLink'; @@ -460,31 +461,3 @@ class FieldDoc extends React.Component { ); } } - -// Renders arbitrary markdown content -class MarkdownContent extends React.Component { - - static propTypes = { - markdown: PropTypes.string, - className: PropTypes.string, - } - - shouldComponentUpdate(nextProps) { - return this.props.markdown !== nextProps.markdown; - } - - render() { - const markdown = this.props.markdown; - if (!markdown) { - return
; - } - - const html = Marked(markdown, { sanitize: true }); - return ( -
- ); - } -} diff --git a/src/components/DocExplorer/MarkdownContent.js b/src/components/DocExplorer/MarkdownContent.js new file mode 100644 index 00000000000..2c667a371c5 --- /dev/null +++ b/src/components/DocExplorer/MarkdownContent.js @@ -0,0 +1,36 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; +import Marked from 'marked'; + +export default class MarkdownContent extends React.Component { + static propTypes = { + markdown: PropTypes.string, + className: PropTypes.string, + } + + shouldComponentUpdate(nextProps) { + return this.props.markdown !== nextProps.markdown; + } + + render() { + const markdown = this.props.markdown; + if (!markdown) { + return
; + } + + const html = Marked(markdown, { sanitize: true }); + return ( +
+ ); + } +} From f4b67635cc44135a3f0cc7b534076ddb69799e06 Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 14:39:28 -0800 Subject: [PATCH 5/7] Extract SchemaDoc from DocExplorer --- src/components/DocExplorer.js | 62 +-------------------- src/components/DocExplorer/SchemaDoc.js | 72 +++++++++++++++++++++++++ 2 files changed, 73 insertions(+), 61 deletions(-) create mode 100644 src/components/DocExplorer/SchemaDoc.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index ddc1990715c..e153c91d21c 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -18,6 +18,7 @@ import { } from 'graphql'; import MarkdownContent from './DocExplorer/MarkdownContent'; +import SchemaDoc from './DocExplorer/SchemaDoc'; import SearchBox from './DocExplorer/SearchBox'; import SearchResults from './DocExplorer/SearchResults'; import TypeLink from './DocExplorer/TypeLink'; @@ -192,67 +193,6 @@ export class DocExplorer extends React.Component { } } -// Render the top level Schema -class SchemaDoc extends React.Component { - - static propTypes = { - schema: PropTypes.object, - onClickType: PropTypes.func, - } - - shouldComponentUpdate(nextProps) { - return this.props.schema !== nextProps.schema; - } - - render() { - const schema = this.props.schema; - const queryType = schema.getQueryType(); - const mutationType = schema.getMutationType && schema.getMutationType(); - const subscriptionType = - schema.getSubscriptionType && schema.getSubscriptionType(); - - return ( -
- -
-
- {'root types'} -
-
- {'query'} - {': '} - -
- { - mutationType && -
- {'mutation'} - {': '} - -
- } - { - subscriptionType && -
- {'subscription'} - {': '} - -
- } -
-
- ); - } -} - // Documentation for a Type class TypeDoc extends React.Component { diff --git a/src/components/DocExplorer/SchemaDoc.js b/src/components/DocExplorer/SchemaDoc.js new file mode 100644 index 00000000000..bc6a43c2035 --- /dev/null +++ b/src/components/DocExplorer/SchemaDoc.js @@ -0,0 +1,72 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; + +import TypeLink from './TypeLink'; +import MarkdownContent from './MarkdownContent'; + +// Render the top level Schema +export default class SchemaDoc extends React.Component { + static propTypes = { + schema: PropTypes.object, + onClickType: PropTypes.func, + } + + shouldComponentUpdate(nextProps) { + return this.props.schema !== nextProps.schema; + } + + render() { + const schema = this.props.schema; + const queryType = schema.getQueryType(); + const mutationType = schema.getMutationType && schema.getMutationType(); + const subscriptionType = + schema.getSubscriptionType && schema.getSubscriptionType(); + + return ( +
+ +
+
+ {'root types'} +
+
+ {'query'} + {': '} + +
+ { + mutationType && +
+ {'mutation'} + {': '} + +
+ } + { + subscriptionType && +
+ {'subscription'} + {': '} + +
+ } +
+
+ ); + } +} From 9f1f8852c4defd49b594ae945417115f679a6dc9 Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 14:48:09 -0800 Subject: [PATCH 6/7] Extract TypeDoc from DocExplorer --- src/components/DocExplorer.js | 151 +----------------------- src/components/DocExplorer/TypeDoc.js | 162 ++++++++++++++++++++++++++ 2 files changed, 163 insertions(+), 150 deletions(-) create mode 100644 src/components/DocExplorer/TypeDoc.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index e153c91d21c..0f02544796e 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -7,20 +7,16 @@ */ import React, { PropTypes } from 'react'; -import Marked from 'marked'; import { GraphQLSchema, isType, - GraphQLObjectType, - GraphQLInterfaceType, - GraphQLUnionType, - GraphQLEnumType, } from 'graphql'; import MarkdownContent from './DocExplorer/MarkdownContent'; import SchemaDoc from './DocExplorer/SchemaDoc'; import SearchBox from './DocExplorer/SearchBox'; import SearchResults from './DocExplorer/SearchResults'; +import TypeDoc from './DocExplorer/TypeDoc'; import TypeLink from './DocExplorer/TypeLink'; /** @@ -193,151 +189,6 @@ export class DocExplorer extends React.Component { } } -// Documentation for a Type -class TypeDoc extends React.Component { - - static propTypes = { - schema: PropTypes.instanceOf(GraphQLSchema), - type: PropTypes.object, - onClickType: PropTypes.func, - onClickField: PropTypes.func, - } - - shouldComponentUpdate(nextProps) { - return ( - this.props.type !== nextProps.type || - this.props.schema !== nextProps.schema - ); - } - - render() { - const schema = this.props.schema; - const type = this.props.type; - const onClickType = this.props.onClickType; - const onClickField = this.props.onClickField; - - let typesTitle; - let types; - if (type instanceof GraphQLUnionType) { - typesTitle = 'possible types'; - types = schema.getPossibleTypes(type); - } else if (type instanceof GraphQLInterfaceType) { - typesTitle = 'implementations'; - types = schema.getPossibleTypes(type); - } else if (type instanceof GraphQLObjectType) { - typesTitle = 'implements'; - types = type.getInterfaces(); - } - - let typesDef; - if (types && types.length > 0) { - typesDef = ( -
-
- {typesTitle} -
- {types.map(subtype => -
- -
- )} -
- ); - } - - // InputObject and Object - let fieldsDef; - if (type.getFields) { - const fieldMap = type.getFields(); - const fields = Object.keys(fieldMap).map(name => fieldMap[name]); - fieldsDef = ( -
-
- {'fields'} -
- {fields.map(field => { - - // Field arguments - let argsDef; - if (field.args && field.args.length > 0) { - argsDef = field.args.map(arg => - - {arg.name} - {': '} - - - ); - } - - return ( -
- onClickField(field, type, event)}> - {field.name} - - {argsDef && [ '(', {argsDef}, ')' ]} - {': '} - - { - (field.isDeprecated || field.deprecationReason) && - {' (DEPRECATED)'} - } -
- ); - })} -
- ); - } - - let valuesDef; - if (type instanceof GraphQLEnumType) { - valuesDef = ( -
-
- {'values'} -
- {type.getValues().map(value => -
-
- {value.name} - { - (value.isDeprecated || value.deprecationReason) && - {' (DEPRECATED)'} - } -
- - { - value.deprecationReason && - - } -
- )} -
- ); - } - - return ( -
- - {(type instanceof GraphQLObjectType) && typesDef} - {fieldsDef} - {valuesDef} - {!(type instanceof GraphQLObjectType) && typesDef} -
- ); - } -} - // Documentation for a field class FieldDoc extends React.Component { diff --git a/src/components/DocExplorer/TypeDoc.js b/src/components/DocExplorer/TypeDoc.js new file mode 100644 index 00000000000..8a68991e220 --- /dev/null +++ b/src/components/DocExplorer/TypeDoc.js @@ -0,0 +1,162 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; +import { + GraphQLSchema, + GraphQLObjectType, + GraphQLInterfaceType, + GraphQLUnionType, + GraphQLEnumType, +} from 'graphql'; + +import MarkdownContent from './MarkdownContent'; +import TypeLink from './TypeLink'; + +export default class TypeDoc extends React.Component { + static propTypes = { + schema: PropTypes.instanceOf(GraphQLSchema), + type: PropTypes.object, + onClickType: PropTypes.func, + onClickField: PropTypes.func, + } + + shouldComponentUpdate(nextProps) { + return ( + this.props.type !== nextProps.type || + this.props.schema !== nextProps.schema + ); + } + + render() { + const schema = this.props.schema; + const type = this.props.type; + const onClickType = this.props.onClickType; + const onClickField = this.props.onClickField; + + let typesTitle; + let types; + if (type instanceof GraphQLUnionType) { + typesTitle = 'possible types'; + types = schema.getPossibleTypes(type); + } else if (type instanceof GraphQLInterfaceType) { + typesTitle = 'implementations'; + types = schema.getPossibleTypes(type); + } else if (type instanceof GraphQLObjectType) { + typesTitle = 'implements'; + types = type.getInterfaces(); + } + + let typesDef; + if (types && types.length > 0) { + typesDef = ( +
+
+ {typesTitle} +
+ {types.map(subtype => +
+ +
+ )} +
+ ); + } + + // InputObject and Object + let fieldsDef; + if (type.getFields) { + const fieldMap = type.getFields(); + const fields = Object.keys(fieldMap).map(name => fieldMap[name]); + fieldsDef = ( +
+
+ {'fields'} +
+ {fields.map(field => { + + // Field arguments + let argsDef; + if (field.args && field.args.length > 0) { + argsDef = field.args.map(arg => + + {arg.name} + {': '} + + + ); + } + + return ( +
+ onClickField(field, type, event)}> + {field.name} + + {argsDef && [ '(', {argsDef}, ')' ]} + {': '} + + { + (field.isDeprecated || field.deprecationReason) && + {' (DEPRECATED)'} + } +
+ ); + })} +
+ ); + } + + let valuesDef; + if (type instanceof GraphQLEnumType) { + valuesDef = ( +
+
+ {'values'} +
+ {type.getValues().map(value => +
+
+ {value.name} + { + (value.isDeprecated || value.deprecationReason) && + {' (DEPRECATED)'} + } +
+ + { + value.deprecationReason && + + } +
+ )} +
+ ); + } + + return ( +
+ + {(type instanceof GraphQLObjectType) && typesDef} + {fieldsDef} + {valuesDef} + {!(type instanceof GraphQLObjectType) && typesDef} +
+ ); + } +} From 9de67a6f36285ae6be435e477ae0e07578929907 Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Fri, 9 Dec 2016 14:50:56 -0800 Subject: [PATCH 7/7] Extract FieldDoc from DocExplorer --- src/components/DocExplorer.js | 68 +---------------------- src/components/DocExplorer/FieldDoc.js | 74 ++++++++++++++++++++++++++ 2 files changed, 75 insertions(+), 67 deletions(-) create mode 100644 src/components/DocExplorer/FieldDoc.js diff --git a/src/components/DocExplorer.js b/src/components/DocExplorer.js index 0f02544796e..bf9e2ef7ed9 100644 --- a/src/components/DocExplorer.js +++ b/src/components/DocExplorer.js @@ -12,12 +12,11 @@ import { isType, } from 'graphql'; -import MarkdownContent from './DocExplorer/MarkdownContent'; +import FieldDoc from './DocExplorer/FieldDoc'; import SchemaDoc from './DocExplorer/SchemaDoc'; import SearchBox from './DocExplorer/SearchBox'; import SearchResults from './DocExplorer/SearchResults'; import TypeDoc from './DocExplorer/TypeDoc'; -import TypeLink from './DocExplorer/TypeLink'; /** * DocExplorer @@ -36,7 +35,6 @@ import TypeLink from './DocExplorer/TypeLink'; * */ export class DocExplorer extends React.Component { - static propTypes = { schema: PropTypes.instanceOf(GraphQLSchema), } @@ -188,67 +186,3 @@ export class DocExplorer extends React.Component { }); } } - -// Documentation for a field -class FieldDoc extends React.Component { - - static propTypes = { - field: PropTypes.object, - onClickType: PropTypes.func, - } - - shouldComponentUpdate(nextProps) { - return this.props.field !== nextProps.field; - } - - render() { - const field = this.props.field; - - let argsDef; - if (field.args && field.args.length > 0) { - argsDef = ( -
-
- {'arguments'} -
- {field.args.map(arg => -
-
- {arg.name} - {': '} - -
- -
- )} -
- ); - } - - return ( -
- - { - field.deprecationReason && - - } -
-
- {'type'} -
- -
- {argsDef} -
- ); - } -} diff --git a/src/components/DocExplorer/FieldDoc.js b/src/components/DocExplorer/FieldDoc.js new file mode 100644 index 00000000000..2c0913e1cc9 --- /dev/null +++ b/src/components/DocExplorer/FieldDoc.js @@ -0,0 +1,74 @@ +/** + * Copyright (c) 2015, Facebook, Inc. + * All rights reserved. + * + * This source code is licensed under the license found in the + * LICENSE-examples file in the root directory of this source tree. + */ + +import React, { PropTypes } from 'react'; + +import MarkdownContent from './MarkdownContent'; +import TypeLink from './TypeLink'; + +export default class FieldDoc extends React.Component { + static propTypes = { + field: PropTypes.object, + onClickType: PropTypes.func, + } + + shouldComponentUpdate(nextProps) { + return this.props.field !== nextProps.field; + } + + render() { + const field = this.props.field; + + let argsDef; + if (field.args && field.args.length > 0) { + argsDef = ( +
+
+ {'arguments'} +
+ {field.args.map(arg => +
+
+ {arg.name} + {': '} + +
+ +
+ )} +
+ ); + } + + return ( +
+ + { + field.deprecationReason && + + } +
+
+ {'type'} +
+ +
+ {argsDef} +
+ ); + } +}