add option to set custom item icon

necessarylion · Aug 13, 2024 · 7a1f6ea · 7a1f6ea
1 parent b100773
commit 7a1f6ea
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -117,7 +117,10 @@ searchJs.open()
 async function getFromApi(keyword = '') {
   let res = await fetch('https://dummyjson.com/products/search?q=' + keyword)
   let json = await res.json()
-  return json.products
+  return json.products.map((p) => {
+    p.icon = `<img class="product-image" src="${p.thumbnail}" />`
+    return p
+  })
 }
 
 const searchJs = SearchJS({
@@ -145,6 +148,7 @@ const searchJs = SearchJS({
 | `data`               |     YES      | data to search                                                      |
 | `data.title`         |     YES      | data title                                                          |
 | `data.description`   |      NO      | data description                                                    |
+| `data.icon`          |      NO      | data icon (can use html string, svg string etc...)                                                    |
 | `element`            |      NO      | element to append search-js                                         |
 | `theme`              |      NO      | color code or theme name (`#FF2E1F`, `github-light`, `github-dark`) |
 | `darkMode`           |      NO      | default `false`. set `true` for dark mode                           |

diff --git a/index.html b/index.html
@@ -12,6 +12,13 @@
         font-family: 'Source Sans Pro', sans-serif;
         background-color: #424243;
       }
+      .product-image {
+        width: 50px;
+        height: 50px;
+        object-fit: contain;
+        background: #ededed;
+        border-radius: 5px;
+      }
     </style>
   </head>
   <body>
@@ -21,7 +28,10 @@
     async function getFromApi(keyword = '') {
       let res = await fetch('https://dummyjson.com/products/search?q='+keyword)
       let json = await res.json()
-      return json.products
+      return json.products.map((p) => {
+        p.icon = `<img class="product-image" src="${p.thumbnail}" />`
+        return p
+      })
     }
 
     const searchJs = SearchJS({

diff --git a/src/components/Item.ts b/src/components/Item.ts
@@ -55,7 +55,7 @@ export class Item {
   render({ item, icon, hideRemoveButton = false }: ItemComponentPayload): string {
     const dataPayload = Encoder.encode(item)
     return `<div class="item" ${ATTR_DATA_PAYLOAD}='${dataPayload}'>
-<div class="item-icon">${icon}</div>
+<div class="item-icon">${item.icon ?? icon}</div>
 <div style="flex: 1">
 <div class="item-title">${item.title}</div>
 ${item.description ? `<div class="item-description">${item.description}</div>` : ``}

diff --git a/src/index.ts b/src/index.ts
@@ -107,7 +107,10 @@ declare global {
     SearchJS: (config: SearchJSConfig) => SearchJSApp
   }
 }
-window.SearchJS = SearchJS
+
+if (typeof window !== 'undefined') {
+  window.SearchJS = SearchJS
+}
 
 export default SearchJS
 export * from './types'
diff --git a/src/types/index.ts b/src/types/index.ts
@@ -8,22 +8,72 @@ export enum SearchJSTheme {
 export interface SearchJSItem {
   title: string
   description?: string
+  icon?: string
   [propName: string]: any
 }
 
 export interface SearchJSConfig {
+  /**
+   * element to append search-js
+   */
   element?: HTMLElement
+
+  /**
+   * color code or theme name (`#FF2E1F`, `github-light`, `github-dark`)
+   */
   theme?: string
+
+  /**
+   * width of search-js compoment
+   */
   width?: string
+
+  /**
+   * height of search-js compoment
+   */
   height?: string
+
+  /**
+   * enable dark mode
+   */
   darkMode?: boolean
+
+  /**
+   * position from the top
+   * default: 85px
+   */
   positionTop?: string
+
+  /**
+   * data to show on the list
+   */
   data?: Array<SearchJSItem>
+
+  /**
+   * customize search input
+   */
   search?: {
     icon?: string
     placeholder?: string
   }
+
+  /**
+   * search after x delay in ms
+   * default - 500ms
+   */
   onSearchDelay?: number
+
+  /**
+   * handle on search input
+   * @param keyword
+   * @returns Array<SearchJSItem> | Promise<Array<SearchJSItem>>
+   */
   onSearch?: (keyword: string) => Array<SearchJSItem> | Promise<Array<SearchJSItem>>
+
+  /**
+   * handle the action after the item is selected
+   * @param data
+   * @returns void
+   */
   onSelected: (data: SearchJSItem) => void
 }