From 17da7b74db17c2f94ca46d764ba6d547fa879a52 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Thu, 7 Dec 2017 19:12:34 +0200
Subject: [PATCH] fix: improve rendering of types

---
 src/common-elements/fields.ts          | 7 +++++--
 src/components/Fields/FieldDetails.tsx | 6 ++++--
 src/components/Schema/Schema.tsx       | 5 +++--
 src/services/models/Schema.ts          | 2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/common-elements/fields.ts b/src/common-elements/fields.ts
index 1716b379..4b5ed719 100644
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@@ -18,7 +18,10 @@ export const TypePrefix = styled(FieldLabel)`
 `;
 
 export const TypeName = styled(FieldLabel)`
-  color: ${props => transparentizeHex(props.theme.colors.text, 0.4)};
+  color: ${props => transparentizeHex(props.theme.colors.text, 0.8)};
+`;
+export const TypeTitle = styled(FieldLabel)`
+  color: ${props => transparentizeHex(props.theme.colors.text, 0.5)};
 `;
 
 export const TypeFormat = TypeName;
@@ -29,7 +32,7 @@ export const RequiredLabel = styled(FieldLabel)`
   font-weight: bold;
 `;
 
-export const CircularLabel = styled(FieldLabel)`
+export const RecursiveLabel = styled(FieldLabel)`
   color: #dd9900;
   font-size: 13px;
 `;
diff --git a/src/components/Fields/FieldDetails.tsx b/src/components/Fields/FieldDetails.tsx
index 7e4c35f6..135bab8c 100644
--- a/src/components/Fields/FieldDetails.tsx
+++ b/src/components/Fields/FieldDetails.tsx
@@ -6,12 +6,13 @@ import { EnumValues } from './EnumValues';
 import { FieldDetail } from './FieldDetail';
 import { ConstraintsView } from './FieldContstraints';
 import {
-  CircularLabel,
+  RecursiveLabel,
   NullableLabel,
   PatternLabel,
   RequiredLabel,
   TypeFormat,
   TypeName,
+  TypeTitle,
   TypePrefix,
 } from '../../common-elements/fields';
 
@@ -34,11 +35,12 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
               {schema.format}>
             </TypeFormat>
           )}
+          {schema.title && <TypeTitle> ({schema.title}) </TypeTitle>}
           <ConstraintsView constraints={schema.constraints} />
           {schema.nullable && <NullableLabel> Nullable </NullableLabel>}
           {schema.pattern && <PatternLabel>{schema.pattern}</PatternLabel>}
           {required && <RequiredLabel> Required </RequiredLabel>}
-          {schema.isCircular && <CircularLabel> Circular </CircularLabel>}
+          {schema.isCircular && <RecursiveLabel> Recursive </RecursiveLabel>}
         </div>
         {deprecated && (
           <div>
diff --git a/src/components/Schema/Schema.tsx b/src/components/Schema/Schema.tsx
index 09a12655..2b712822 100644
--- a/src/components/Schema/Schema.tsx
+++ b/src/components/Schema/Schema.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 
 import { FieldDetails } from '../Fields/FieldDetails';
-import { TypeName, CircularLabel } from '../../common-elements/fields';
+import { RecursiveLabel, TypeName, TypeTitle } from '../../common-elements/fields';
 
 import { SchemaModel } from '../../services/models';
 
@@ -28,7 +28,8 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
       return (
         <div>
           <TypeName>{schema.displayType}</TypeName>
-          <CircularLabel> Circular </CircularLabel>
+          {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
+          <RecursiveLabel> Recursive </RecursiveLabel>
         </div>
       );
     }
diff --git a/src/services/models/Schema.ts b/src/services/models/Schema.ts
index 2d8f67b9..140979f5 100644
--- a/src/services/models/Schema.ts
+++ b/src/services/models/Schema.ts
@@ -100,7 +100,7 @@ export class SchemaModel {
     this.pattern = schema.pattern;
 
     this.constraints = humanizeConstraints(schema);
-    this.displayType = this.title === '' ? this.type : `${this.title} (${this.type})`;
+    this.displayType = this.type;
     this.isPrimitive = isPrimitiveType(schema);
     this.default = schema.default;
     this.readOnly = !!schema.readOnly;