From 792ae1697e1a3710a6f12eb70a3c81b0318f9515 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Wed, 3 Apr 2019 23:54:14 -0400
Subject: [PATCH] refactor selectable-list using list component

---
 src/components/list/list.vue                  |  1 -
 .../selectable_list/selectable_list.js        |  2 +
 .../selectable_list/selectable_list.vue       | 37 +++++++------------
 3 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index d8c9f5a3d0..1159898de0 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -29,7 +29,6 @@ export default {
 
 .list {
   &-item {
-    display: flex;
     border-bottom: 1px solid;
     border-bottom-color: $fallback--border;
     border-bottom-color: var(--border, $fallback--border);
diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js
index 7a7241449e..1fdd5a6708 100644
--- a/src/components/selectable_list/selectable_list.js
+++ b/src/components/selectable_list/selectable_list.js
@@ -1,7 +1,9 @@
+import List from '../list/list.vue'
 import Checkbox from '../checkbox/checkbox.js'
 
 const SelectableList = {
   components: {
+    List,
     Checkbox
   },
   props: {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 25b8e56b63..e55a4ad358 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -1,15 +1,14 @@
 <template>
-  <div class="selectable-list">
-    <div v-for="item in items" :key="getKey(item)" class="selectable-list-item" :class="{ 'selectable-list-item-selected': isSelected(item) }">
-      <div class="selectable-list-checkbox-wrapper">
-        <Checkbox :checked="isSelected(item)" @change="checked => toggle(checked, item)" />
+  <List class="selectable-list" :items="items" :getKey="getKey">
+    <template slot="item" scope="p">
+      <div class="selectable-list-item-inner" :class="{ 'selectable-list-item-selected-inner': isSelected(p.item) }">
+        <div class="selectable-list-checkbox-wrapper">
+          <Checkbox :checked="isSelected(p.item)" @change="checked => toggle(checked, p.item)" />
+        </div>
+        <slot name="item" :item="p.item" />
       </div>
-      <slot name="item" :item="item" />
-    </div>
-    <div class="selectable-list-empty-content faint" v-if="items.length === 0">
-      <slot name="empty" />
-    </div>
-  </div>
+    </template>
+  </List>
 </template>
 
 <script src="./selectable_list.js"></script>
@@ -18,26 +17,18 @@
 @import '../../_variables.scss';
 
 .selectable-list {
-  &-item {
+  &-item-inner {
     display: flex;
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+  }
 
-    &-selected {
-      background-color: $fallback--lightBg;
-      background-color: var(--lightBg, $fallback--lightBg);
-    }
+  &-item-selected-inner {
+    background-color: $fallback--lightBg;
+    background-color: var(--lightBg, $fallback--lightBg);
   }
 
   &-checkbox-wrapper {
     padding: 10px;
     flex: none;
   }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
 }
 </style>