added input clear icon (#9)

necessarylion · Mar 29, 2023 · ad1199f · ad1199f
1 parent 6b4ca33
commit ad1199f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 3 deletions.
diff --git a/src/assets/Icon/index.ts b/src/assets/Icon/index.ts
@@ -33,4 +33,10 @@ const loadingIcon = (color = '#969faf') => {
   `
 }
 
-export { hashIcon, searchIcon, historyIcon, closeIcon, loadingIcon }
+const clearIcon = () => {
+  return `<svg class="clear-svg" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z" fill="#969faf"/>
+  </svg>`
+}
+
+export { hashIcon, searchIcon, historyIcon, closeIcon, loadingIcon, clearIcon }
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
@@ -68,6 +68,19 @@
           justify-content: center;
         }
 
+        .clear-icon {
+          width: 60px;
+          height: 40px;
+          background: transparent;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          svg path {
+            fill: var(--search-js-input-placeholder-color);
+          }
+        }
+
         .search-input {
           width: 100%;
           color: var(--search-js-text-color);

diff --git a/src/components/Header.ts b/src/components/Header.ts
@@ -1,5 +1,5 @@
 import { SearchJSConfig } from '../types'
-import { searchIcon } from '../assets/Icon'
+import { clearIcon, searchIcon } from '../assets/Icon'
 
 export class Header {
   render(config: SearchJSConfig) {
@@ -20,6 +20,9 @@ export class Header {
         ${icon}
       </div>
       <input placeholder="${placeholder}" class="search-input" type="text"/>
+      <div class="clear-icon">
+        ${clearIcon()}
+      </div>
     </div>`
   }
 }
diff --git a/src/utils/DomListener.ts b/src/utils/DomListener.ts
@@ -9,11 +9,18 @@ export class DomListener {
   }
 
   public onSearch(callback: Function) {
-    const element = document.querySelector('#search-js .search-input')
+    const element: HTMLInputElement = document.querySelector(
+      '#search-js .search-input',
+    )
     element.addEventListener('keyup', (event: any) => {
       const keyword = event.target.value.toLowerCase()
       callback(keyword)
     })
+
+    document.querySelector('.clear-icon').addEventListener('click', (event) => {
+      element.value = ''
+      callback(null)
+    })
   }
 
   public onItemClick(onSelected: Function, onRemove: Function) {

diff --git a/src/utils/SearchComponent.ts b/src/utils/SearchComponent.ts
@@ -130,6 +130,7 @@ export class SearchComponent {
   }
 
   private showHistories() {
+    this.renderHistories(this.searchHistory.getList())
     document.getElementById('search-js-histories').style.display = 'block'
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -130,6 +130,7 @@ export class SearchComponent { @@
       }
       private showHistories() {
+        this.renderHistories(this.searchHistory.getList())
         document.getElementById('search-js-histories').style.display = 'block'
       }
@@ Expand Down @@