diff --git a/src/common-elements/fields-layout.ts b/src/common-elements/fields-layout.ts index baffbeab..a3be7936 100644 --- a/src/common-elements/fields-layout.ts +++ b/src/common-elements/fields-layout.ts @@ -3,13 +3,6 @@ import styled, { extensionsHook, withProps } from '../styled-components'; import { deprecatedCss } from './mixins'; -export const PropertiesTableCaption = styled.caption` - text-align: right; - font-size: 0.9em; - font-weight: normal; - color: ${props => props.theme.colors.text.secondary}; -`; - export const PropertyCell = styled.td` border-left: 1px solid ${props => props.theme.schema.linesColor}; box-sizing: border-box; diff --git a/src/components/Fields/Field.tsx b/src/components/Fields/Field.tsx index dae79e96..308a2569 100644 --- a/src/components/Fields/Field.tsx +++ b/src/components/Fields/Field.tsx @@ -74,7 +74,6 @@ export class Field extends React.Component { schema={field.schema} skipReadOnly={this.props.skipReadOnly} skipWriteOnly={this.props.skipWriteOnly} - showTitle={this.props.showTitle} /> diff --git a/src/components/Schema/ObjectSchema.tsx b/src/components/Schema/ObjectSchema.tsx index f8db1401..95888af0 100644 --- a/src/components/Schema/ObjectSchema.tsx +++ b/src/components/Schema/ObjectSchema.tsx @@ -1,10 +1,15 @@ import { observer } from 'mobx-react'; import * as React from 'react'; +import styled from '../../styled-components'; + import { SchemaModel } from '../../services/models'; -import { PropertiesTable, PropertiesTableCaption } from '../../common-elements/fields-layout'; +import { PropertiesTable } from '../../common-elements/fields-layout'; +import { H3 } from '../../common-elements/headers'; + import { Field } from '../Fields/Field'; +import { Markdown } from '../Markdown/Markdown'; import { DiscriminatorDropdown } from './DiscriminatorDropdown'; import { SchemaProps } from './Schema'; @@ -17,6 +22,18 @@ export interface ObjectSchemaProps extends SchemaProps { }; } +export const ObjectSchemaDetails = styled.div` + margin: 0 0 0.5em 0; +`; + +export const ObjectSchemaTitle = styled(H3)` + margin: 0.5em 0 0 0; +`; + +export const ObjectSchemaDescription = styled.div` + margin: 0.5em 0 0 0; +`; + @observer export class ObjectSchema extends React.Component { get parentSchema() { @@ -26,7 +43,6 @@ export class ObjectSchema extends React.Component { render() { const { schema: { fields = [] }, - showTitle, discriminator, } = this.props; @@ -42,36 +58,44 @@ export class ObjectSchema extends React.Component { : fields; return ( - - {showTitle && {this.props.schema.title}} - - {mapWithLast(filteredFields, (field, isLast) => { - return ( - ( - - ))) || - undefined - } - className={field.expanded ? 'expanded' : undefined} - showExamples={false} - skipReadOnly={this.props.skipReadOnly} - skipWriteOnly={this.props.skipWriteOnly} - showTitle={this.props.showTitle} - /> - ); - })} - - +
+ + {this.props.schema.title} + + + + + + + + + {mapWithLast(filteredFields, (field, isLast) => { + return ( + ( + + ))) || + undefined + } + className={field.expanded ? 'expanded' : undefined} + showExamples={false} + skipReadOnly={this.props.skipReadOnly} + skipWriteOnly={this.props.skipWriteOnly} + /> + ); + })} + + +
); } } diff --git a/src/components/Schema/Schema.tsx b/src/components/Schema/Schema.tsx index d8750710..f71da3cb 100644 --- a/src/components/Schema/Schema.tsx +++ b/src/components/Schema/Schema.tsx @@ -11,7 +11,6 @@ import { ObjectSchema } from './ObjectSchema'; import { OneOfSchema } from './OneOfSchema'; export interface SchemaOptions { - showTitle?: boolean; skipReadOnly?: boolean; skipWriteOnly?: boolean; } diff --git a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap index ab1a367c..94131030 100644 --- a/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap @@ -1,105 +1,118 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Components SchemaView discriminator should correctly render discriminator dropdown 1`] = ` - - - + + + Dog + + + + + + + + >>", - "pattern": undefined, - "pointer": "#/components/schemas/Dog/properties/packSize", - "rawSchema": Object { + "expanded": false, + "in": undefined, + "kind": "field", + "name": "packSize", + "required": false, + "schema": SchemaModel { + "activeOneOf": 0, + "constraints": Array [], "default": undefined, + "deprecated": false, + "description": "", + "displayFormat": undefined, + "displayType": "number", + "enum": Array [], + "example": undefined, + "format": undefined, + "isCircular": undefined, + "isPrimitive": true, + "nullable": false, + "options": "<<>>", + "pattern": undefined, + "pointer": "#/components/schemas/Dog/properties/packSize", + "rawSchema": Object { + "default": undefined, + "type": "number", + }, + "readOnly": false, + "schema": Object { + "default": undefined, + "type": "number", + }, + "title": "", "type": "number", + "typePrefix": "", + "writeOnly": false, }, - "readOnly": false, - "schema": Object { - "default": undefined, - "type": "number", - }, - "title": "", - "type": "number", - "typePrefix": "", - "writeOnly": false, - }, + } } - } - isLast={false} - key="packSize" - showExamples={false} - /> - + >>", - "pattern": undefined, - "pointer": "#/components/schemas/Dog/properties/type", - "rawSchema": Object { + "expanded": false, + "in": undefined, + "kind": "field", + "name": "type", + "required": true, + "schema": SchemaModel { + "activeOneOf": 0, + "constraints": Array [], "default": undefined, + "deprecated": false, + "description": "", + "displayFormat": undefined, + "displayType": "string", + "enum": Array [], + "example": undefined, + "format": undefined, + "isCircular": undefined, + "isPrimitive": true, + "nullable": false, + "options": "<<>>", + "pattern": undefined, + "pointer": "#/components/schemas/Dog/properties/type", + "rawSchema": Object { + "default": undefined, + "type": "string", + }, + "readOnly": false, + "schema": Object { + "default": undefined, + "type": "string", + }, + "title": "", "type": "string", + "typePrefix": "", + "writeOnly": false, }, - "readOnly": false, - "schema": Object { - "default": undefined, - "type": "string", - }, - "title": "", - "type": "string", - "typePrefix": "", - "writeOnly": false, - }, + } } - } - isLast={true} - key="type" - renderDiscriminatorSwitch={[Function]} - showExamples={false} - /> - - + isLast={true} + key="type" + renderDiscriminatorSwitch={[Function]} + showExamples={false} + /> + + + `;