From 486086c6780ceff5cac71203751d87ade6776a69 Mon Sep 17 00:00:00 2001
From: Sebastian Malton <smalton@mirantis.com>
Date: Wed, 19 Aug 2020 10:30:04 -0400
Subject: [PATCH] resolve pr comments

Signed-off-by: Sebastian Malton <smalton@mirantis.com>
---
 .../editable-list/editable-list.scss          |  4 +--
 .../editable-list/editable-list.tsx           | 36 ++++++++++++-------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/src/renderer/components/editable-list/editable-list.scss b/src/renderer/components/editable-list/editable-list.scss
index 9adcf489c0..95278a8700 100644
--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/src/renderer/components/editable-list/editable-list.scss
@@ -1,9 +1,9 @@
 .EditableList {
-  .EditableListContents {
+  .el-contents {
     display: grid;
     grid-template-columns: 1fr auto;
 
-    .ValueRemove {
+    .el-value-remove {
       .Icon {
         justify-content: unset;
       }
diff --git a/src/renderer/components/editable-list/editable-list.tsx b/src/renderer/components/editable-list/editable-list.tsx
index de537857e1..e402e82b19 100644
--- a/src/renderer/components/editable-list/editable-list.tsx
+++ b/src/renderer/components/editable-list/editable-list.tsx
@@ -5,6 +5,7 @@ import { Icon } from "../icon";
 import { Input } from "../input";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
+import { autobind } from "../../utils";
 
 export interface Props<T> {
   items: T[],
@@ -14,37 +15,48 @@ export interface Props<T> {
 
   // An optional prop used to convert T to a displayable string
   // defaults to `String`
-  display?: (item: T) => string,
+  renderItem?: (item: T, index: number) => React.ReactNode,
+}
+
+const defaultProps: Partial<Props<any>> = {
+  placeholder: "Add new item...",
+  renderItem: (item: any, index: number) => <React.Fragment key={index}>{item}</React.Fragment>
 }
 
 @observer
 export class EditableList<T> extends React.Component<Props<T>> {
+  static defaultProps = defaultProps as Props<any>;
   @observable currentNewItem = "";
 
+  @autobind()
+  onSubmit(val: string) {
+    const { add } = this.props
+
+    if (val) {
+      add(val)
+      this.currentNewItem = ""
+    }
+  }
+
   render() {
-    const { items, add, remove, display = String, placeholder = "Add new item..." } = this.props;
+    const { items, remove, renderItem, placeholder } = this.props;
 
     return (
       <div className="EditableList">
-        <div className="EditableListHeader">
+        <div className="el-header">
           <Input
             value={this.currentNewItem}
-            onSubmit={val => {
-              if (val) {
-                add(val);
-              }
-              this.currentNewItem = "";
-            }}
+            onSubmit={this.onSubmit}
             placeholder={placeholder}
             onChange={val => this.currentNewItem = val}
           />
         </div>
-        <div className="EditableListContents">
+        <div className="el-contents">
           {
             items
               .map((item, index) => [
-                <span key={`${item}-value`}>{display(item)}</span>,
-                <div key={`${item}-remove`} className="ValueRemove">
+                <span key={`${item}-value`}>{renderItem(item, index)}</span>,
+                <div key={`${item}-remove`} className="el-value-remove">
                   <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
                 </div>
               ])