improvement on initial data

Author: necessarylion

src/assets/css/github.scss

@@ -57,7 +57,7 @@
         .item:hover {
           background: #f6f8fa;
 
-          svg path {
+          .item-close svg path {
             stroke: var(--search-js-text-color) !important;
           }
 

src/assets/css/index.scss

@@ -114,6 +114,10 @@
       }
     }
 
+    #search-js-histories {
+      overflow: unset;
+    }
+
     #search-js-result {
       display: none;
     }
@@ -155,6 +159,7 @@
 
         .item {
           display: flex;
+          position: relative;
           cursor: pointer;
           flex-direction: row;
           background: var(--search-js-item-bg);
@@ -165,9 +170,24 @@
           box-shadow: var(--search-js-item-box-shadow);
 
           .item-icon {
+            position: relative;
             margin-right: 8px;
           }
 
+          .floating-history-icon {
+            position: absolute;
+            left: 50%;
+            top: 46%;
+            width: 20px;
+            height: 20px;
+            padding: 0px;
+            border-radius: 250px;
+            transform: translate(-50%, -50%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+
           .item-title {
             color: var(--search-js-text-color);
             font-size: 15px;
@@ -183,7 +203,7 @@
           background: var(--search-js-theme);
           color: white;
 
-          svg path {
+          .item-close svg path {
             stroke: white !important;
           }
 

src/components/Item.ts

@@ -7,6 +7,7 @@ interface ItemComponentPayload {
   item: SearchJSItem
   icon: string
   hideRemoveButton: boolean
+  isHistoryIcon?: boolean
 }
 
 export interface ListRenderPayload {
@@ -15,6 +16,7 @@ export interface ListRenderPayload {
   icon: string
   hideRemoveButton: boolean
   notFoundLabel: string
+  isHistoryIcon?: boolean
 }
 
 export class Item {
@@ -24,7 +26,14 @@ export class Item {
    * @param {Array<SearchJSItem>} items
    * @returns {void}
    */
-  public renderList({ id, items, hideRemoveButton, notFoundLabel, icon }: ListRenderPayload): void {
+  public renderList({
+    id,
+    items,
+    hideRemoveButton,
+    notFoundLabel,
+    icon,
+    isHistoryIcon,
+  }: ListRenderPayload): void {
     const element = document.getElementById(id)
     element.innerHTML = ``
 
@@ -39,6 +48,7 @@ export class Item {
         item,
         icon,
         hideRemoveButton,
+        isHistoryIcon,
       })
     })
 
@@ -52,10 +62,14 @@ export class Item {
    * @param {ItemComponentPayload} props
    * @returns {string}
    */
-  render({ item, icon, hideRemoveButton = false }: ItemComponentPayload): string {
+  render({ item, icon, hideRemoveButton = false, isHistoryIcon }: ItemComponentPayload): string {
     const dataPayload = Encoder.encode(item)
     return `<div class="item" ${ATTR_DATA_PAYLOAD}='${dataPayload}'>
-<div class="item-icon">${item.icon ?? icon}</div>
+<div class="item-icon">
+${item.icon ?? icon}
+${item.icon && isHistoryIcon ? `<div class="floating-history-icon">${icon}</div>` : ``}
+</div>
+
 <div style="flex: 1">
 <div class="item-title">${item.title}</div>
 ${item.description ? `<div class="item-description">${item.description}</div>` : ``}

src/index.ts

@@ -27,7 +27,12 @@ export class SearchJSApp {
    * @param {SearchJSConfig} config
    */
   constructor(public config: SearchJSConfig) {
-    this.component = new SearchComponent(this, new DomListener(), new SearchHistory(), new Theme())
+    this.component = new SearchComponent(
+      this,
+      new DomListener(),
+      new SearchHistory(this.config.maxHistoryLength ?? 4),
+      new Theme(),
+    )
     this.listenKeyboardKeyPress()
   }
 

src/themes/AvailableThemes.ts

@@ -16,6 +16,7 @@ export const CssWidth = '--search-js-width'
 export const CssHeight = '--search-js-height'
 export const CssFontFamily = '--search-js-font-family'
 export const CssPositionTop = '--search-js-top'
+export const CssBorderColor = '--search-js-border-color'
 
 export const AvailableThemes: any = {
   [SearchJSTheme.ThemeDark]: {
@@ -32,6 +33,7 @@ export const AvailableThemes: any = {
     [CssItemBackground]: '#1c1e21',
     [CssItemBoxShadow]: 'none',
     [CssTextColor]: '#b3b3b3',
+    [CssBorderColor]: '#32354778',
   },
   [SearchJSTheme.ThemeLight]: {
     [CssBackdropBackground]: 'rgba(101, 108, 133, 0.8)',
@@ -46,6 +48,7 @@ export const AvailableThemes: any = {
     [CssItemBackground]: 'white',
     [CssItemBoxShadow]: '0 1px 3px 0 #d4d9e1',
     [CssTextColor]: '#969faf',
+    [CssBorderColor]: '#cfcfcf4f',
   },
   [SearchJSTheme.ThemeGithubDark]: {
     [CssBackdropBackground]: 'rgba(1,4,9,0.8)',
@@ -60,6 +63,7 @@ export const AvailableThemes: any = {
     [CssItemBoxShadow]: 'none',
     [CssTextColor]: '#C5CED6',
     [CssTheme]: 'transparent',
+    [CssBorderColor]: '#30363d',
   },
   [SearchJSTheme.ThemeGithubLight]: {
     [CssBackdropBackground]: 'rgba(27,31,36,0.5)',
@@ -74,5 +78,6 @@ export const AvailableThemes: any = {
     [CssItemBoxShadow]: 'none',
     [CssTextColor]: '#1F2329',
     [CssTheme]: 'transparent',
+    [CssBorderColor]: '#d0d7de',
   },
 }

src/types/index.ts

@@ -44,6 +44,12 @@ export interface SearchJSConfig {
    */
   positionTop?: string
 
+  /**
+   * max history length
+   * default: 4
+   */
+  maxHistoryLength?: number
+
   /**
    * data to show on the list
    */

src/utils/SearchComponent.ts

@@ -57,6 +57,9 @@ export class SearchComponent {
     // render initial data list
     this.showHistory(this.searchHistory.getList())
 
+    // show initial data list
+    if (this.app.config.data?.length > 0) this.showSearchResult(this.app.config.data)
+
     this.domListener.onBackDropClick(() => {
       if (!this.app.config.persistent) {
         this.app.close()
@@ -73,15 +76,16 @@ export class SearchComponent {
    */
   private handleOnSearch(): void {
     this.domListener.onSearch(async (keyword: string) => {
+      console.log(keyword)
       if (!keyword) {
         clearTimeout(this.searchTimer)
         this.hideLoading()
         this.showHistory(this.searchHistory.getList())
-        this.hideSearchResult()
+        this.hideSearchResult(keyword)
         return
       }
       this.hideHistories()
-      this.hideSearchResult()
+      this.hideSearchResult(keyword)
       if (this.app.config.onSearch) {
         this.showLoading()
         clearTimeout(this.searchTimer)
@@ -167,8 +171,11 @@ export class SearchComponent {
    *
    * @returns {void}
    */
-  private hideSearchResult(): void {
+  private hideSearchResult(keyword: string): void {
     document.getElementById(ID_RESULTS).style.display = 'none'
+    if (!keyword && this.app.config.data?.length > 0) {
+      this.showSearchResult(this.app.config.data)
+    }
   }
 
   /**
@@ -178,13 +185,17 @@ export class SearchComponent {
    * @returns {void}
    */
   private showHistory(items: Array<SearchJSItem>): void {
+    if (items.length === 0 && this.app.config.data?.length > 0) {
+      return this.hideHistories()
+    }
     const itemInstance = new Item()
     itemInstance.renderList({
       id: ID_HISTORIES,
       items: items,
       hideRemoveButton: false,
       notFoundLabel: 'No recent data',
       icon: historyIcon(),
+      isHistoryIcon: true,
     })
     this.handleItemClickListener()
   }
@@ -211,7 +222,9 @@ export class SearchComponent {
       },
       (data: any) => {
         this.searchHistory.remove(data)
-        this.showHistory(this.searchHistory.getList())
+        setTimeout(() => {
+          this.showHistory(this.searchHistory.getList())
+        }, 100)
       },
     )
   }

src/utils/SearchHistory.ts

@@ -8,21 +8,18 @@ export class SearchHistory {
    */
   private db: Storage
 
-  /**
-   * max items to store in history
-   *
-   * @var {number} maxItems
-   */
-  private maxItems = 4
-
   /**
    * local storage key
    *
    * @var {string} storageKey
    */
   private storageKey = 'search-js-histories'
 
-  constructor() {
+  /**
+   * constructor
+   * @param {number} maxItems - max items to store in history
+   */
+  constructor(private maxItems: number) {
     this.db = window.localStorage
   }
 
@@ -36,7 +33,7 @@ export class SearchHistory {
     if (!data) {
       data = '[]'
     }
-    return JSON.parse(data).reverse()
+    return JSON.parse(data).reverse().slice(0, this.maxItems)
   }
 
   /**
@@ -64,6 +61,8 @@ export class SearchHistory {
       return JSON.stringify(d) == JSON.stringify(item)
     })
 
+    console.log(index)
+
     if (index != -1) {
       arrayItems.splice(index, 1)
     }