feat: display enums in component if available (#98)

* display enums in component if available

* fix conditional rendering

Author: hesyar

library/src/containers/Schemas/SchemaProperties.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import merge from 'merge';
 
+import { bemClasses } from '../../helpers';
 import { TypeWithKey, Schema } from '../../types';
 import {
   Markdown,
@@ -45,12 +46,32 @@ const schemaPropertiesAccessors: Array<TableAccessor<SchemaElement>> = [
   ),
   el => <span>{el.schema.content.format}</span>,
   el => <span>{el.schema.content.default}</span>,
-  el =>
-    el.schema.content.description && (
-      <Markdown>{el.schema.content.description}</Markdown>
-    ),
+  el => {
+    const enumElements = getEnumHTMLElements(el.schema);
+    return (
+      el.schema.content.description && (
+        <div>
+          <Markdown>{el.schema.content.description}</Markdown>
+          {enumElements.length > 0 && <div>Enum: {enumElements}</div>}
+        </div>
+      )
+    );
+  },
 ];
 
+const getEnumHTMLElements = (schema: SchemaWithKey): HTMLElement[] => {
+  let enumElements: any[] = [];
+  if (schema.content.enum && schema.content.enum.length) {
+    enumElements = schema.content.enum.map((value: any, i: number) => (
+      <span className={bemClasses.element(`enum`)} key={i}>
+        "{value}"
+      </span>
+    ));
+  }
+
+  return enumElements;
+};
+
 const handleNotProperty = (prop: Schema): Schema => {
   if (prop.not) {
     const arrayOfChangedObjects = Object.entries(prop).map(([key, val]) => {

library/src/styles/fiori.css

@@ -1244,3 +1244,14 @@
   font-family: monospace;
   display: block;
 }
+
+.asyncapi__enum {
+  line-height: 2;
+  border-style: solid;
+  border-color: #dae1e7;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  margin-left: 0.25rem;
+  padding: 0 0.5rem;
+  color: #f6993f;
+}