@furystack/shades-common-components 5.0.20 → 7.0.0

package/src/components/suggest/suggestion-list.tsx

@@ -13,10 +13,9 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
 
       const [suggestions] = useObservable('suggestions', manager.currentSuggestions)
 
-      const [selectedIndex] = useObservable(
-        'selectedIndex',
-        manager.selectedIndex,
-        (idx) => {
+      // todo: GetLast is eliminated, do we need it?
+      const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, {
+        onChange: (idx) => {
           ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
             if (i === idx) {
               s.style.background = theme.background.paper
@@ -27,35 +26,36 @@ export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children
             }
           })
         },
-        true,
-      )
+      })
 
-      const [isListOpened] = useObservable('isOpened', manager.isOpened, async (isOpened) => {
-        const container = element.firstElementChild as HTMLDivElement
-        if (isOpened) {
-          container.style.zIndex = '1'
-          container.style.width = `calc(${Math.round(
-            element.parentElement?.getBoundingClientRect().width || 200,
-          )}px - 3em)`
-          await promisifyAnimation(
-            container,
-            [
-              { opacity: 0, transform: 'translate(0, -50px)' },
-              { opacity: 1, transform: 'translate(0, 0)' },
-            ],
-            { fill: 'forwards', duration: 500 },
-          )
-        } else {
-          await promisifyAnimation(
-            container,
-            [
-              { opacity: 1, transform: 'translate(0, 0)' },
-              { opacity: 0, transform: 'translate(0, -50px)' },
-            ],
-            { fill: 'forwards', duration: 200 },
-          )
-          container.style.zIndex = '-1'
-        }
+      const [isListOpened] = useObservable('isOpened', manager.isOpened, {
+        onChange: async (isOpened) => {
+          const container = element.firstElementChild as HTMLDivElement
+          if (isOpened) {
+            container.style.zIndex = '1'
+            container.style.width = `calc(${Math.round(
+              element.parentElement?.getBoundingClientRect().width || 200,
+            )}px - 3em)`
+            await promisifyAnimation(
+              container,
+              [
+                { opacity: 0, transform: 'translate(0, -50px)' },
+                { opacity: 1, transform: 'translate(0, 0)' },
+              ],
+              { fill: 'forwards', duration: 500 },
+            )
+          } else {
+            await promisifyAnimation(
+              container,
+              [
+                { opacity: 1, transform: 'translate(0, 0)' },
+                { opacity: 0, transform: 'translate(0, -50px)' },
+              ],
+              { fill: 'forwards', duration: 200 },
+            )
+            container.style.zIndex = '-1'
+          }
+        },
       })
 
       return (

package/src/services/collection-service.spec.ts

@@ -0,0 +1,37 @@
+import { usingAsync } from '@furystack/utils'
+import { describe, expect, it } from 'vitest'
+import { CollectionService } from './collection-service.js'
+
+const testEntries = [{ foo: 1 }, { foo: 2 }, { foo: 3 }]
+
+describe('CollectionService', () => {
+  describe('Selection', () => {
+    it('Should add and remove selection', async () => {
+      await usingAsync(
+        new CollectionService({
+          defaultSettings: {},
+          loader: async () => ({ count: 3, entries: testEntries }),
+        }),
+        async (collectionService) => {
+          await collectionService.getEntries({})
+          testEntries.forEach((entry) => {
+            expect(collectionService.isSelected(entry)).toBe(false)
+          })
+
+          collectionService.addToSelection(testEntries[0])
+
+          expect(collectionService.isSelected(testEntries[0])).toBe(true)
+          expect(collectionService.isSelected(testEntries[1])).toBe(false)
+          expect(collectionService.isSelected(testEntries[2])).toBe(false)
+
+          collectionService.removeFromSelection(testEntries[0])
+
+          expect(collectionService.isSelected(testEntries[0])).toBe(false)
+
+          collectionService.toggleSelection(testEntries[1])
+          expect(collectionService.isSelected(testEntries[1])).toBe(true)
+        },
+      )
+    })
+  })
+})

package/src/services/collection-service.ts

@@ -79,7 +79,7 @@ export class CollectionService<T> implements Disposable {
 
   public querySettings: ObservableValue<FindOptions<T, Array<keyof T>>>
 
-  public focusedEntry = new ObservableValue<T | undefined>()
+  public focusedEntry = new ObservableValue<T | undefined>(undefined)
 
   public selection = new ObservableValue<T[]>([])
 
@@ -217,7 +217,8 @@ export class CollectionService<T> implements Disposable {
       }
     }
 
-    this.querySettings.subscribe((val) => this.getEntries(val), true)
+    this.querySettings.subscribe((val) => this.getEntries(val))
+    this.getEntries(this.querySettings.getValue())
   }
 
   public async handleRowDoubleClick(entry: T) {

package/src/services/noty-service.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest'
+import type { NotyModel } from './noty-service.js'
+import { NotyService } from './noty-service.js'
+import { using } from '@furystack/utils'
+
+describe('NotyService', () => {
+  it('Should add and removea noty', () => {
+    using(new NotyService(), (notyService) => {
+      expect(notyService.getNotyList()).toEqual([])
+
+      const exampleNoty: NotyModel = {
+        type: 'info',
+        title: 'Test',
+        body: 'Test',
+      }
+
+      notyService.emit('onNotyAdded', exampleNoty)
+
+      expect(notyService.getNotyList()).toEqual([exampleNoty])
+
+      notyService.emit('onNotyRemoved', exampleNoty)
+
+      expect(notyService.getNotyList()).toEqual([])
+    })
+  })
+})

package/src/services/noty-service.ts

@@ -1,4 +1,4 @@
-import { ObservableValue } from '@furystack/utils'
+import { EventHub } from '@furystack/utils'
 import { Injectable } from '@furystack/inject'
 
 export interface NotyModel {
@@ -9,19 +9,31 @@ export interface NotyModel {
 }
 
 @Injectable({ lifetime: 'singleton' })
-export class NotyService {
-  public onNotyAdded = new ObservableValue<NotyModel>()
-  public onNotyRemoved = new ObservableValue<NotyModel>()
+export class NotyService extends EventHub<
+  'onNotyAdded' | 'onNotyRemoved',
+  { onNotyAdded: NotyModel; onNotyRemoved: NotyModel }
+> {
+  private notyList: NotyModel[] = []
 
-  public notys = new ObservableValue<NotyModel[]>([])
+  public getNotyList = () => [...this.notyList]
 
-  public addNoty = (noty: NotyModel) => {
-    this.onNotyAdded.setValue(noty)
-    this.notys.setValue([...this.notys.getValue(), noty])
+  private onNotyAddListener(newNoty: NotyModel) {
+    this.notyList = [...this.notyList, newNoty]
   }
 
-  public removeNoty = (noty: NotyModel) => {
-    this.onNotyRemoved.setValue(noty)
-    this.notys.setValue(this.notys.getValue().filter((n) => n !== noty))
+  private onNotyRemoveListener(removedNoty: NotyModel) {
+    this.notyList = this.notyList.filter((noty) => noty !== removedNoty)
+  }
+
+  public dispose(): void {
+    this.notyList = []
+    this.removeListener('onNotyAdded', this.onNotyAddListener.bind(this))
+    this.removeListener('onNotyRemoved', this.onNotyRemoveListener.bind(this))
+  }
+
+  constructor() {
+    super()
+    this.addListener('onNotyAdded', this.onNotyAddListener.bind(this))
+    this.addListener('onNotyRemoved', this.onNotyRemoveListener.bind(this))
   }
 }