@@ -0,0 +1,43 @@ | |||
import React, { Component, PropTypes } from "react" | |||
const propStyle = { color: "#999", fontStyle: "italic" } | |||
export default class ArrayModel extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
specSelectors: PropTypes.object.isRequired, | |||
name: PropTypes.string, | |||
required: PropTypes.bool, | |||
expandDepth: PropTypes.number, | |||
depth: PropTypes.number | |||
} | |||
render(){ | |||
let { getComponent, required, schema, depth, expandDepth } = this.props | |||
let items = schema.get("items") | |||
let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 ) | |||
const ModelCollapse = getComponent("ModelCollapse") | |||
const Model = getComponent("Model") | |||
return <span className="model"> | |||
<span className="model-title"> | |||
<span className="model-title__text">{ schema.get("title") }</span> | |||
</span> | |||
<ModelCollapse collapsed={ depth > expandDepth } collapsedContent="[...]"> | |||
[ | |||
<span><Model { ...this.props } schema={ items } required={ false }/></span> | |||
] | |||
{ | |||
properties.size ? <span> | |||
{ properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}> | |||
<br />{ `${key}:`}{ String(v) }</span>) | |||
}<br /></span> | |||
: null | |||
} | |||
</ModelCollapse> | |||
{ required && <span style={{ color: "red" }}>*</span>} | |||
</span> | |||
} | |||
} |
@@ -0,0 +1,19 @@ | |||
import React from "react" | |||
import ImPropTypes from "react-immutable-proptypes" | |||
const EnumModel = ({ value, getComponent }) => { | |||
let ModelCollapse = getComponent("ModelCollapse") | |||
let collapsedContent = <span>Array [ { value.count() } ]</span> | |||
return <span className="prop-enum"> | |||
Enum:<br /> | |||
<ModelCollapse collapsedContent={ collapsedContent }> | |||
[ { value.join(", ") } ] | |||
</ModelCollapse> | |||
</span> | |||
} | |||
EnumModel.propTypes = { | |||
value: ImPropTypes.iterable, | |||
getComponent: ImPropTypes.func | |||
} | |||
export default EnumModel |
@@ -25,7 +25,7 @@ export default class BaseLayout extends React.Component { | |||
let Info = getComponent("info") | |||
let Operations = getComponent("operations", true) | |||
let Models = getComponent("models", true) | |||
let Models = getComponent("Models", true) | |||
let AuthorizeBtn = getComponent("authorizeBtn", true) | |||
let Row = getComponent("Row") | |||
let Col = getComponent("Col") | |||
@@ -0,0 +1,40 @@ | |||
import React, { Component, PropTypes } from "react" | |||
export default class ModelCollapse extends Component { | |||
static propTypes = { | |||
collapsedContent: PropTypes.any, | |||
collapsed: PropTypes.bool, | |||
children: PropTypes.any | |||
} | |||
static defaultProps = { | |||
collapsedContent: "{...}", | |||
collapsed: true, | |||
} | |||
constructor(props, context) { | |||
super(props, context) | |||
let { collapsed, collapsedContent } = this.props | |||
this.state = { | |||
collapsed: collapsed !== undefined ? collapsed : ModelCollapse.defaultProps.collapsed, | |||
collapsedContent: collapsedContent || ModelCollapse.defaultProps.collapsedContent | |||
} | |||
} | |||
toggleCollapsed=()=>{ | |||
this.setState({ | |||
collapsed: !this.state.collapsed | |||
}) | |||
} | |||
render () { | |||
return (<span> | |||
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}> | |||
<span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span> | |||
</span> | |||
{ this.state.collapsed ? this.state.collapsedContent : this.props.children } | |||
</span>) | |||
} | |||
} |
@@ -28,7 +28,7 @@ export default class ModelExample extends React.Component { | |||
render() { | |||
let { getComponent, specSelectors, schema, example, isExecute } = this.props | |||
const Model = getComponent("model") | |||
const ModelWrapper = getComponent("ModelWrapper") | |||
return <div> | |||
<ul className="tab"> | |||
@@ -44,7 +44,7 @@ export default class ModelExample extends React.Component { | |||
(isExecute || this.state.activeTab === "example") && example | |||
} | |||
{ | |||
!isExecute && this.state.activeTab === "model" && <Model schema={ schema } | |||
!isExecute && this.state.activeTab === "model" && <ModelWrapper schema={ schema } | |||
getComponent={ getComponent } | |||
specSelectors={ specSelectors } | |||
expandDepth={ 1 } /> | |||
@@ -0,0 +1,22 @@ | |||
import React, { Component, PropTypes } from "react" | |||
export default class ModelComponent extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
name: PropTypes.string, | |||
getComponent: PropTypes.func.isRequired, | |||
specSelectors: PropTypes.object.isRequired, | |||
expandDepth: PropTypes.number | |||
} | |||
render(){ | |||
let { getComponent } = this.props | |||
const Model = getComponent("Model") | |||
return <div className="model-box"> | |||
<Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/> | |||
</div> | |||
} | |||
} | |||
@@ -1,208 +1,6 @@ | |||
import React, { Component, PropTypes } from "react" | |||
import ImPropTypes from "react-immutable-proptypes" | |||
import { List } from "immutable" | |||
const braceOpen = "{" | |||
const braceClose = "}" | |||
const propStyle = { color: "#999", fontStyle: "italic" } | |||
const EnumModel = ({ value }) => { | |||
let collapsedContent = <span>Array [ { value.count() } ]</span> | |||
return <span className="prop-enum"> | |||
Enum:<br /> | |||
<Collapse collapsedContent={ collapsedContent }> | |||
[ { value.join(", ") } ] | |||
</Collapse> | |||
</span> | |||
} | |||
EnumModel.propTypes = { | |||
value: ImPropTypes.iterable | |||
} | |||
class ObjectModel extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
specSelectors: PropTypes.object.isRequired, | |||
name: PropTypes.string, | |||
isRef: PropTypes.bool, | |||
expandDepth: PropTypes.number, | |||
depth: PropTypes.number | |||
} | |||
render(){ | |||
let { schema, name, isRef, getComponent, depth, ...props } = this.props | |||
let { expandDepth } = this.props | |||
const JumpToPath = getComponent("JumpToPath", true) | |||
let description = schema.get("description") | |||
let properties = schema.get("properties") | |||
let additionalProperties = schema.get("additionalProperties") | |||
let title = schema.get("title") || name | |||
let required = schema.get("required") | |||
const Markdown = getComponent("Markdown") | |||
const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span> | |||
let collapsedContent = (<span> | |||
<span>{ braceOpen }</span>...<span>{ braceClose }</span> | |||
{ | |||
isRef ? <JumpToPathSection name={ name }/> : "" | |||
} | |||
</span>) | |||
return <span className="model"> | |||
{ | |||
title && <span className="model-title"> | |||
{ isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> } | |||
<span className="model-title__text">{ title }</span> | |||
</span> | |||
} | |||
<Collapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }> | |||
<span className="brace-open object">{ braceOpen }</span> | |||
{ | |||
!isRef ? null : <JumpToPathSection name={ name }/> | |||
} | |||
<span className="inner-object"> | |||
{ | |||
<table className="model" style={{ marginLeft: "2em" }}><tbody> | |||
{ | |||
!description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}> | |||
<td>description:</td> | |||
<td> | |||
<Markdown source={ description } /> | |||
</td> | |||
</tr> | |||
} | |||
{ | |||
!(properties && properties.size) ? null : properties.entrySeq().map( | |||
([key, value]) => { | |||
let isRequired = List.isList(required) && required.contains(key) | |||
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" } | |||
if ( isRequired ) { | |||
propertyStyle.fontWeight = "bold" | |||
} | |||
return (<tr key={key}> | |||
<td style={ propertyStyle }>{ key }:</td> | |||
<td style={{ verticalAlign: "top" }}> | |||
<Model key={ `object-${name}-${key}_${value}` } { ...props } | |||
required={ isRequired } | |||
getComponent={ getComponent } | |||
schema={ value } | |||
depth={ depth + 1 } /> | |||
</td> | |||
</tr>) | |||
}).toArray() | |||
} | |||
{ | |||
!additionalProperties || !additionalProperties.size ? null | |||
: <tr> | |||
<td>{ "< * >:" }</td> | |||
<td> | |||
<Model { ...props } required={ false } | |||
getComponent={ getComponent } | |||
schema={ additionalProperties } | |||
depth={ depth + 1 } /> | |||
</td> | |||
</tr> | |||
} | |||
</tbody></table> | |||
} | |||
</span> | |||
<span className="brace-close">{ braceClose }</span> | |||
</Collapse> | |||
</span> | |||
} | |||
} | |||
class Primitive extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
required: PropTypes.bool | |||
} | |||
render(){ | |||
let { schema, getComponent, required } = this.props | |||
if(!schema || !schema.get) { | |||
// don't render if schema isn't correctly formed | |||
return <div></div> | |||
} | |||
let type = schema.get("type") | |||
let format = schema.get("format") | |||
let xml = schema.get("xml") | |||
let enumArray = schema.get("enum") | |||
let description = schema.get("description") | |||
let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 ) | |||
let style = required ? { fontWeight: "bold" } : {} | |||
const Markdown = getComponent("Markdown") | |||
return <span className="prop"> | |||
<span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>} | |||
{ format && <span className="prop-format">(${format})</span>} | |||
{ | |||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }> | |||
<br />{ key }: { String(v) }</span>) | |||
: null | |||
} | |||
{ | |||
!description ? null : | |||
<Markdown source={ description } /> | |||
} | |||
{ | |||
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span> | |||
{ | |||
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/> {key}: { String(v) }</span>).toArray() | |||
} | |||
</span>): null | |||
} | |||
{ | |||
enumArray && <EnumModel value={ enumArray } /> | |||
} | |||
</span> | |||
} | |||
} | |||
class ArrayModel extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
specSelectors: PropTypes.object.isRequired, | |||
name: PropTypes.string, | |||
required: PropTypes.bool, | |||
expandDepth: PropTypes.number, | |||
depth: PropTypes.number | |||
} | |||
render(){ | |||
let { required, schema, depth, expandDepth } = this.props | |||
let items = schema.get("items") | |||
let properties = schema.filter( ( v, key) => ["type", "items", "$$ref"].indexOf(key) === -1 ) | |||
return <span className="model"> | |||
<span className="model-title"> | |||
<span className="model-title__text">{ schema.get("title") }</span> | |||
</span> | |||
<Collapse collapsed={ depth > expandDepth } collapsedContent="[...]"> | |||
[ | |||
<span><Model { ...this.props } schema={ items } required={ false }/></span> | |||
] | |||
{ | |||
properties.size ? <span> | |||
{ properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={propStyle}> | |||
<br />{ `${key}:`}{ String(v) }</span>) | |||
}<br /></span> | |||
: null | |||
} | |||
</Collapse> | |||
{ required && <span style={{ color: "red" }}>*</span>} | |||
</span> | |||
} | |||
} | |||
class Model extends Component { | |||
export default class Model extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
@@ -228,6 +26,9 @@ class Model extends Component { | |||
render () { | |||
let { schema, getComponent, required, name, isRef } = this.props | |||
let ObjectModel = getComponent("ObjectModel") | |||
let ArrayModel = getComponent("ArrayModel") | |||
let PrimitiveModel = getComponent("PrimitiveModel") | |||
let $$ref = schema && schema.get("$$ref") | |||
let modelName = $$ref && this.getModelName( $$ref ) | |||
let modelSchema, type | |||
@@ -255,63 +56,7 @@ class Model extends Component { | |||
case "integer": | |||
case "boolean": | |||
default: | |||
return <Primitive getComponent={ getComponent } schema={ modelSchema } required={ required }/> | |||
return <PrimitiveModel getComponent={ getComponent } schema={ modelSchema } required={ required }/> | |||
} | |||
} | |||
} | |||
export default class ModelComponent extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
name: PropTypes.string, | |||
getComponent: PropTypes.func.isRequired, | |||
specSelectors: PropTypes.object.isRequired, | |||
expandDepth: PropTypes.number | |||
} | |||
render(){ | |||
return <div className="model-box"> | |||
<Model { ...this.props } depth={ 1 } expandDepth={ this.props.expandDepth || 0 }/> | |||
</div> | |||
} | |||
} | |||
class Collapse extends Component { | |||
static propTypes = { | |||
collapsedContent: PropTypes.any, | |||
collapsed: PropTypes.bool, | |||
children: PropTypes.any | |||
} | |||
static defaultProps = { | |||
collapsedContent: "{...}", | |||
collapsed: true, | |||
} | |||
constructor(props, context) { | |||
super(props, context) | |||
let { collapsed, collapsedContent } = this.props | |||
this.state = { | |||
collapsed: collapsed !== undefined ? collapsed : Collapse.defaultProps.collapsed, | |||
collapsedContent: collapsedContent || Collapse.defaultProps.collapsedContent | |||
} | |||
} | |||
toggleCollapsed=()=>{ | |||
this.setState({ | |||
collapsed: !this.state.collapsed | |||
}) | |||
} | |||
render () { | |||
return (<span> | |||
<span onClick={ this.toggleCollapsed } style={{ "cursor": "pointer" }}> | |||
<span className={ "model-toggle" + ( this.state.collapsed ? " collapsed" : "" ) }></span> | |||
</span> | |||
{ this.state.collapsed ? this.state.collapsedContent : this.props.children } | |||
</span>) | |||
} | |||
} | |||
} |
@@ -1,6 +1,5 @@ | |||
import React, { Component, PropTypes } from "react" | |||
export default class Models extends Component { | |||
static propTypes = { | |||
getComponent: PropTypes.func, | |||
@@ -16,7 +15,7 @@ export default class Models extends Component { | |||
let { docExpansion } = getConfigs() | |||
let showModels = layoutSelectors.isShown("models", docExpansion === "full" || docExpansion === "list" ) | |||
const Model = getComponent("model") | |||
const ModelWrapper = getComponent("ModelWrapper") | |||
const Collapse = getComponent("Collapse") | |||
if (!definitions.size) return null | |||
@@ -31,8 +30,9 @@ export default class Models extends Component { | |||
<Collapse isOpened={showModels} animated> | |||
{ | |||
definitions.entrySeq().map( ( [ name, model ])=>{ | |||
console.log("model", name, model) | |||
return <div className="model-container" key={ `models-section-${name}` }> | |||
<Model name={ name } | |||
<ModelWrapper name={ name } | |||
schema={ model } | |||
isRef={ true } | |||
getComponent={ getComponent } | |||
@@ -0,0 +1,104 @@ | |||
import React, { Component, PropTypes } from "react" | |||
import { List } from "immutable" | |||
const braceOpen = "{" | |||
const braceClose = "}" | |||
export default class ObjectModel extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
specSelectors: PropTypes.object.isRequired, | |||
name: PropTypes.string, | |||
isRef: PropTypes.bool, | |||
expandDepth: PropTypes.number, | |||
depth: PropTypes.number | |||
} | |||
render(){ | |||
let { schema, name, isRef, getComponent, depth, ...props } = this.props | |||
let { expandDepth } = this.props | |||
let description = schema.get("description") | |||
let properties = schema.get("properties") | |||
let additionalProperties = schema.get("additionalProperties") | |||
let title = schema.get("title") || name | |||
let required = schema.get("required") | |||
const JumpToPath = getComponent("JumpToPath", true) | |||
const Markdown = getComponent("Markdown") | |||
const Model = getComponent("Model") | |||
const ModelCollapse = getComponent("ModelCollapse") | |||
const JumpToPathSection = ({ name }) => <span className="model-jump-to-path"><JumpToPath path={`definitions.${name}`} /></span> | |||
const collapsedContent = (<span> | |||
<span>{ braceOpen }</span>...<span>{ braceClose }</span> | |||
{ | |||
isRef ? <JumpToPathSection name={ name }/> : "" | |||
} | |||
</span>) | |||
return <span className="model"> | |||
{ | |||
title && <span className="model-title"> | |||
{ isRef && schema.get("$$ref") && <span className="model-hint">{ schema.get("$$ref") }</span> } | |||
<span className="model-title__text">{ title }</span> | |||
</span> | |||
} | |||
<ModelCollapse collapsed={ depth > expandDepth } collapsedContent={ collapsedContent }> | |||
<span className="brace-open object">{ braceOpen }</span> | |||
{ | |||
!isRef ? null : <JumpToPathSection name={ name }/> | |||
} | |||
<span className="inner-object"> | |||
{ | |||
<table className="model" style={{ marginLeft: "2em" }}><tbody> | |||
{ | |||
!description ? null : <tr style={{ color: "#999", fontStyle: "italic" }}> | |||
<td>description:</td> | |||
<td> | |||
<Markdown source={ description } /> | |||
</td> | |||
</tr> | |||
} | |||
{ | |||
!(properties && properties.size) ? null : properties.entrySeq().map( | |||
([key, value]) => { | |||
let isRequired = List.isList(required) && required.contains(key) | |||
let propertyStyle = { verticalAlign: "top", paddingRight: "0.2em" } | |||
if ( isRequired ) { | |||
propertyStyle.fontWeight = "bold" | |||
} | |||
return (<tr key={key}> | |||
<td style={ propertyStyle }>{ key }:</td> | |||
<td style={{ verticalAlign: "top" }}> | |||
<Model key={ `object-${name}-${key}_${value}` } { ...props } | |||
required={ isRequired } | |||
getComponent={ getComponent } | |||
schema={ value } | |||
depth={ depth + 1 } /> | |||
</td> | |||
</tr>) | |||
}).toArray() | |||
} | |||
{ | |||
!additionalProperties || !additionalProperties.size ? null | |||
: <tr> | |||
<td>{ "< * >:" }</td> | |||
<td> | |||
<Model { ...props } required={ false } | |||
getComponent={ getComponent } | |||
schema={ additionalProperties } | |||
depth={ depth + 1 } /> | |||
</td> | |||
</tr> | |||
} | |||
</tbody></table> | |||
} | |||
</span> | |||
<span className="brace-close">{ braceClose }</span> | |||
</ModelCollapse> | |||
</span> | |||
} | |||
} |
@@ -0,0 +1,54 @@ | |||
import React, { Component, PropTypes } from "react" | |||
const propStyle = { color: "#999", fontStyle: "italic" } | |||
export default class Primitive extends Component { | |||
static propTypes = { | |||
schema: PropTypes.object.isRequired, | |||
getComponent: PropTypes.func.isRequired, | |||
required: PropTypes.bool | |||
} | |||
render(){ | |||
let { schema, getComponent, required } = this.props | |||
if(!schema || !schema.get) { | |||
// don't render if schema isn't correctly formed | |||
return <div></div> | |||
} | |||
let type = schema.get("type") | |||
let format = schema.get("format") | |||
let xml = schema.get("xml") | |||
let enumArray = schema.get("enum") | |||
let description = schema.get("description") | |||
let properties = schema.filter( ( v, key) => ["enum", "type", "format", "description", "$$ref"].indexOf(key) === -1 ) | |||
let style = required ? { fontWeight: "bold" } : {} | |||
const Markdown = getComponent("Markdown") | |||
const EnumModel = getComponent("EnumModel") | |||
return <span className="prop"> | |||
<span className="prop-type" style={ style }>{ type }</span> { required && <span style={{ color: "red" }}>*</span>} | |||
{ format && <span className="prop-format">(${format})</span>} | |||
{ | |||
properties.size ? properties.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }> | |||
<br />{ key }: { String(v) }</span>) | |||
: null | |||
} | |||
{ | |||
!description ? null : | |||
<Markdown source={ description } /> | |||
} | |||
{ | |||
xml && xml.size ? (<span><br /><span style={ propStyle }>xml:</span> | |||
{ | |||
xml.entrySeq().map( ( [ key, v ] ) => <span key={`${key}-${v}`} style={ propStyle }><br/> {key}: { String(v) }</span>).toArray() | |||
} | |||
</span>): null | |||
} | |||
{ | |||
enumArray && <EnumModel value={ enumArray } getComponent={ getComponent } /> | |||
} | |||
</span> | |||
} | |||
} |
@@ -41,9 +41,15 @@ import Footer from "core/components/footer" | |||
import ParamBody from "core/components/param-body" | |||
import Curl from "core/components/curl" | |||
import Schemes from "core/components/schemes" | |||
import ModelCollapse from "core/components/model-collapse" | |||
import ModelExample from "core/components/model-example" | |||
import ModelWrapper from "core/components/model-wrapper" | |||
import Model from "core/components/model" | |||
import Models from "core/components/models" | |||
import EnumModel from "core/components/enum-model" | |||
import ObjectModel from "core/components/object-model" | |||
import ArrayModel from "core/components/array-model" | |||
import PrimitiveModel from "core/components/primitive-model" | |||
import TryItOutButton from "core/components/try-it-out-button" | |||
import Markdown from "core/components/providers/markdown" | |||
@@ -88,8 +94,14 @@ export default function() { | |||
curl: Curl, | |||
schemes: Schemes, | |||
modelExample: ModelExample, | |||
model: Model, | |||
models: Models, | |||
ModelWrapper, | |||
ModelCollapse, | |||
Model, | |||
Models, | |||
EnumModel, | |||
ObjectModel, | |||
ArrayModel, | |||
PrimitiveModel, | |||
TryItOutButton, | |||
Markdown, | |||
BaseLayout | |||