@furystack/shades-common-components 6.0.0 → 8.0.0

package/src/components/data-grid/footer.tsx

@@ -1,20 +1,29 @@
 import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../../services/theme-provider-service.js'
 import type { CollectionService } from '../../services/collection-service.js'
+import type { FindOptions } from '@furystack/core'
+import type { ObservableValue } from '@furystack/utils'
 
 export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
-export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
+export const DataGridFooter = Shade<{
+  service: CollectionService<any>
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'shade-data-grid-footer',
   render: ({ props, injector, useObservable }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
-    const [currentData] = useObservable('dataUpdater', props.service.data)
+    const { service, findOptions } = props
+    const [currentData] = useObservable('dataUpdater', service.data)
+    const [currentOptions, setCurrentOptions] = useObservable('optionsUpdater', findOptions, {
+      filter: (newValue, oldValue) => {
+        return newValue.top !== oldValue.top || newValue.skip !== oldValue.skip
+      },
+    })
 
-    const [currentQuerySettings] = useObservable('querySettings', props.service.querySettings)
-
-    const top = currentQuerySettings.top || Infinity
-    const skip = currentQuerySettings.skip || 0
+    const top = currentOptions.top || Infinity
+    const skip = currentOptions.skip || 0
     const currentPage = Math.ceil(skip) / (top || 1)
     const currentEntriesPerPage = top
 
@@ -39,13 +48,10 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
               style={{ margin: '0 1em' }}
               onchange={(ev) => {
                 const value = parseInt((ev.target as any).value, 10)
-                const currentQuery = props.service.querySettings.getValue()
-                props.service.querySettings.setValue({ ...currentQuery, skip: (currentQuery.top || 0) * value })
+                setCurrentOptions({ ...currentOptions, skip: (currentOptions.top || 0) * value })
               }}
             >
-              {[
-                ...new Array(Math.ceil(currentData.count / (props.service.querySettings.getValue().top || Infinity))),
-              ].map((_val, index) => (
+              {[...new Array(Math.ceil(currentData.count / (currentOptions.top || Infinity)))].map((_val, index) => (
                 <option value={index.toString()} selected={currentPage === index}>
                   {(index + 1).toString()}
                 </option>
@@ -59,8 +65,8 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }>({
             style={{ margin: '0 1em' }}
             onchange={(ev) => {
               const value = parseInt((ev.currentTarget as any).value as string, 10)
-              props.service.querySettings.setValue({
-                ...currentQuerySettings,
+              setCurrentOptions({
+                ...currentOptions,
                 top: value,
                 skip: currentPage * value,
               })

package/src/components/data-grid/header.tsx

@@ -1,33 +1,33 @@
-import type { FindOptions } from '@furystack/core'
+import type { FilterType, FindOptions } from '@furystack/core'
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
-import type { CollectionService } from '../../services/collection-service.js'
 import { Input } from '../inputs/input.js'
 import { Form } from '../form.js'
 import { Button } from '../button.js'
-import { ObservableValue } from '@furystack/utils'
+import { ObservableValue, sleepAsync } from '@furystack/utils'
 import { collapse, expand } from '../animations.js'
 
 export interface DataGridHeaderProps<T, K extends keyof T> {
-  collectionService: CollectionService<T>
   field: K
+  findOptions: ObservableValue<FindOptions<T, K[]>>
 }
 
-export interface DataGridHeaderState<T> {
-  querySettings: FindOptions<T, any>
+export interface DataGridHeaderState<T, K extends keyof T> {
+  findOptions: FindOptions<T, K[]>
   isSearchOpened: boolean
   updateSearchValue: (value: string) => void
 }
 
-export const OrderButton = Shade<{ collectionService: CollectionService<any>; field: string }>({
+export const OrderButton = Shade<{
+  field: string
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'data-grid-order-button',
   render: ({ props, useObservable }) => {
-    const [currentQuerySettings, setQuerySettings] = useObservable(
-      'currentQuerySettings',
-      props.collectionService.querySettings,
-    )
-    const currentOrder = Object.keys(currentQuerySettings.order || {})[0]
-    const currentOrderDirection = Object.values(currentQuerySettings.order || {})[0]
+    const [findOptions, onFindOptionsChange] = useObservable('findOptions', props.findOptions, {})
+
+    const currentOrder = Object.keys(findOptions.order || {})[0]
+    const currentOrderDirection = Object.values(findOptions.order || {})[0]
     return (
       <Button
         title="Change order"
@@ -46,8 +46,8 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
             newDirection = currentOrderDirection === 'ASC' ? 'DESC' : 'ASC'
           }
           newOrder[props.field] = newDirection
-          setQuerySettings({
-            ...currentQuerySettings,
+          onFindOptionsChange({
+            ...findOptions,
             order: newOrder,
           })
         }}
@@ -58,20 +58,21 @@ export const OrderButton = Shade<{ collectionService: CollectionService<any>; fi
   },
 })
 
-const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string; onclick: () => void }>({
+const SearchButton = Shade<{
+  fieldName: string
+  onclick: () => void
+  findOptions: ObservableValue<FindOptions<any, any[]>>
+}>({
   shadowDomName: 'data-grid-search-button',
-  render: ({ props, useObservable, element }) => {
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, (currentQueryState) => {
-      const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-
-      const button = element.querySelector('button') as HTMLInputElement
-      button.innerHTML = currentValue ? '🔍' : '🔎'
-      button.style.textShadow = currentValue
-        ? '1px 1px 20px rgba(235,225,45,0.9), 1px 1px 12px rgba(235,225,45,0.9), 0px 0px 3px  rgba(255,200,145,0.6)'
-        : 'none'
+  render: ({ props, useObservable }) => {
+    const [findOptions] = useObservable('currentValue', props.findOptions, {
+      filter: (newValue) => {
+        return !!newValue.filter?.[props.fieldName]
+      },
     })
 
-    const filterValue = (queryState.filter as any)?.[props.fieldName]?.$regex || ''
+    const filterValue =
+      (findOptions.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>)?.$regex || ''
 
     return (
       <Button
@@ -93,18 +94,23 @@ const SearchButton = Shade<{ service: CollectionService<any>; fieldName: string;
 const SearchForm = Shade<{
   onSubmit: (newValue: string) => void
   onClear: () => void
-  service: CollectionService<any>
   fieldName: string
+  findOptions: ObservableValue<FindOptions<any, any[]>>
 }>({
   shadowDomName: 'data-grid-search-form',
-  render: ({ props, useObservable, element }) => {
+  render: ({ props, useObservable }) => {
     type SearchSubmitType = { searchValue: string }
 
-    const [queryState] = useObservable('currentFilterState', props.service.querySettings, (currentQueryState) => {
-      const currentValue = (currentQueryState.filter?.[props.fieldName] as any)?.$regex || ''
-      ;(element.querySelector('input') as HTMLInputElement).value = currentValue
+    const [findOptions] = useObservable('currentValue', props.findOptions, {
+      filter: (newValue, lastValue) => {
+        const newFilter = newValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
+        const lastFilter = lastValue.filter?.[props.fieldName] as FilterType<{ [K in typeof props.fieldName]: string }>
+        return newFilter?.$regex !== lastFilter?.$regex
+      },
     })
 
+    const currentValue = (findOptions.filter?.[props.fieldName] as any)?.$regex || ''
+
     return (
       <Form<SearchSubmitType>
         className="search-form"
@@ -127,7 +133,7 @@ const SearchForm = Shade<{
           autofocus
           labelTitle={`${props.fieldName}`}
           name="searchValue"
-          value={(queryState.filter?.[props.fieldName] as any)?.$regex || ''}
+          value={currentValue}
           labelProps={{
             style: { padding: '0px 2em' },
           }}
@@ -136,7 +142,9 @@ const SearchForm = Shade<{
           <Button
             type="reset"
             style={{ padding: '4px', margin: '0' }}
-            onclick={() => {
+            onclick={(ev) => {
+              ev.preventDefault()
+              ev.stopPropagation()
               props.onClear()
             }}
           >
@@ -154,35 +162,47 @@ const SearchForm = Shade<{
 export const DataGridHeader: <T, K extends keyof T>(
   props: DataGridHeaderProps<T, K>,
   children: ChildrenList,
+  findOptions: ObservableValue<FindOptions<T, Array<keyof T>>>,
 ) => JSX.Element<any> = Shade<DataGridHeaderProps<any, any>>({
   shadowDomName: 'data-grid-header',
   render: ({ props, element, useObservable }) => {
-    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), (newValue) => {
-      const searchForm = element.querySelector('.search-form') as HTMLElement
-      const headerContent = element.querySelector('.header-content') as HTMLElement
-      if (!newValue) {
-        collapse(searchForm)
-        expand(headerContent)
-      } else {
-        searchForm.style.display = 'flex'
-        expand(searchForm).then(() => searchForm.querySelector('input')?.focus())
-        collapse(headerContent)
-      }
+    const [, setIsSearchOpened] = useObservable('isSearchOpened', new ObservableValue(false), {
+      onChange: (newValue) => {
+        const searchForm = element.querySelector('.search-form') as HTMLElement
+        const headerContent = element.querySelector('.header-content') as HTMLElement
+        if (!newValue) {
+          collapse(searchForm)
+          expand(headerContent)
+        } else {
+          searchForm.style.display = 'flex'
+          expand(searchForm).then(async () => {
+            await sleepAsync(100)
+            searchForm.querySelector('input')?.focus()
+          })
+          collapse(headerContent)
+        }
+      },
     })
+
+    const [findOptions, setFindOptions] = useObservable('findOptions', props.findOptions, {
+      filter: (newValue, oldValue) => {
+        return newValue.filter?.[props.field] !== oldValue.filter?.[props.field]
+      },
+    })
+
     const updateSearchValue = (value?: string) => {
-      const currentSettings = props.collectionService.querySettings.getValue()
       if (value) {
         const newSettings: FindOptions<unknown, any> = {
-          ...currentSettings,
+          ...findOptions,
           filter: {
-            ...currentSettings.filter,
+            ...findOptions.filter,
             [props.field]: { $regex: value },
           },
         }
-        props.collectionService.querySettings.setValue(newSettings)
+        setFindOptions(newSettings)
       } else {
-        const { [props.field]: _, ...newFilter } = currentSettings.filter || {}
-        props.collectionService.querySettings.setValue({ ...currentSettings, filter: newFilter })
+        const { [props.field]: _, ...newFilter } = findOptions.filter || {}
+        setFindOptions({ ...findOptions, filter: newFilter })
       }
 
       setIsSearchOpened(false)
@@ -193,8 +213,8 @@ export const DataGridHeader: <T, K extends keyof T>(
         <SearchForm
           onSubmit={updateSearchValue}
           onClear={updateSearchValue}
-          service={props.collectionService}
           fieldName={props.field}
+          findOptions={props.findOptions}
         />
         <div
           className="header-content"
@@ -217,11 +237,11 @@ export const DataGridHeader: <T, K extends keyof T>(
               onclick={() => {
                 setIsSearchOpened(true)
               }}
-              service={props.collectionService}
+              findOptions={props.findOptions}
               fieldName={props.field}
             />
 
-            <OrderButton collectionService={props.collectionService} field={props.field} />
+            <OrderButton field={props.field} findOptions={props.findOptions} />
           </div>
         </div>
       </>

package/src/components/data-grid/selection-cell.tsx

@@ -4,8 +4,10 @@ import type { CollectionService } from '../../services/collection-service.js'
 export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
   shadowDomName: 'shades-data-grid-selection-cell',
   render: ({ props, useObservable, element }) => {
-    const [selection] = useObservable('selection', props.service.selection, (newSelection) => {
-      ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+    const [selection] = useObservable('selection', props.service.selection, {
+      onChange: (newSelection) => {
+        ;(element.querySelector('input') as HTMLInputElement).checked = newSelection.includes(props.entry)
+      },
     })
     const isSelected = selection.includes(props.entry)
 

package/src/components/inputs/input.tsx

@@ -226,7 +226,7 @@ export const Input = Shade<TextInputProps>({
         validity: element.querySelector('input')?.validity || ({} as ValidityState),
         element,
       }),
-      updateState,
+      { onChange: updateState },
     )
 
     return (

package/src/components/suggest/suggest-input.tsx

@@ -11,10 +11,9 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   render: ({ element, props, useObservable, injector }) => {
     const { theme } = injector.getInstance(ThemeProviderService)
 
-    useObservable(
-      'isOpened',
-      props.manager.isOpened,
-      (isOpened) => {
+    // todo: getLast is eliminated, do we need it?
+    useObservable('isOpened', props.manager.isOpened, {
+      onChange: (isOpened) => {
         const input = element.firstChild as HTMLInputElement
         if (isOpened) {
           input.focus()
@@ -22,8 +21,7 @@ export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
           input.value = ''
         }
       },
-      true,
-    )
+    })
 
     return (
       <input

package/src/components/suggest/suggest-manager.ts

@@ -30,8 +30,8 @@ export class SuggestManager<T> extends EventHub<'onSelectSuggestion', { onSelect
   }).bind(this)
 
   public dispose() {
-    window.removeEventListener('keyup', this.keyPressListener)
-    window.removeEventListener('click', this.clickOutsideListener)
+    window.removeEventListener('keyup', this.keyPressListener, true)
+    window.removeEventListener('click', this.clickOutsideListener, true)
     this.isOpened.dispose()
     this.isLoading.dispose()
     this.term.dispose()

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

@@ -7,31 +7,25 @@ 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)
-          })
+      await usingAsync(new CollectionService({}), async (collectionService) => {
+        collectionService.data.setValue({ count: 3, entries: testEntries })
+        testEntries.forEach((entry) => {
+          expect(collectionService.isSelected(entry)).toBe(false)
+        })
 
-          collectionService.addToSelection(testEntries[0])
+        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)
+        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])
+        collectionService.removeFromSelection(testEntries[0])
 
-          expect(collectionService.isSelected(testEntries[0])).toBe(false)
+        expect(collectionService.isSelected(testEntries[0])).toBe(false)
 
-          collectionService.toggleSelection(testEntries[1])
-          expect(collectionService.isSelected(testEntries[1])).toBe(true)
-        },
-      )
+        collectionService.toggleSelection(testEntries[1])
+        expect(collectionService.isSelected(testEntries[1])).toBe(true)
+      })
     })
   })
 })

package/src/services/collection-service.ts

@@ -1,31 +1,16 @@
-import type { PartialResult, FindOptions } from '@furystack/core'
-import { Lock } from 'semaphore-async-await'
 import type { Disposable } from '@furystack/utils'
-import { debounce, ObservableValue } from '@furystack/utils'
+import { ObservableValue } from '@furystack/utils'
 
 export interface CollectionData<T> {
   entries: T[]
   count: number
 }
 
-export type EntryLoader<T> = <TFields extends Array<keyof T>>(
-  searchOptions: FindOptions<T, TFields>,
-) => Promise<CollectionData<PartialResult<T, TFields>>>
-
 export interface CollectionServiceOptions<T> {
-  /**
-   * A method used to retrieve the entries from the data source
-   */
-  loader: EntryLoader<T>
-  /**
-   * The default filter / top / skip / etc... options
-   */
-  defaultSettings: FindOptions<T, Array<keyof T>>
   /**
    * An optional field that can be used for quick search
    */
   searchField?: keyof T
-
   /**
    * @param entry The clicked entry
    * optional callback for row clicks
@@ -38,19 +23,15 @@ export interface CollectionServiceOptions<T> {
    */
 
   onRowDoubleClick?: (entry: T) => void
-
-  /**
-   * An optional debounce interval in milliseconds
-   */
-  debounceMs?: number
 }
 
 export class CollectionService<T> implements Disposable {
   public dispose() {
-    this.querySettings.dispose()
     this.data.dispose()
-    this.error.dispose()
-    this.isLoading.dispose()
+    this.selection.dispose()
+    this.searchTerm.dispose()
+    this.hasFocus.dispose()
+    this.focusedEntry.dispose()
   }
 
   public isSelected = (entry: T) => this.selection.getValue().includes(entry)
@@ -67,18 +48,8 @@ export class CollectionService<T> implements Disposable {
     this.isSelected(entry) ? this.removeFromSelection(entry) : this.addToSelection(entry)
   }
 
-  private readonly loadLock = new Lock()
-
-  public getEntries: EntryLoader<T>
-
   public data = new ObservableValue<CollectionData<T>>({ count: 0, entries: [] })
 
-  public error = new ObservableValue<unknown | undefined>(undefined)
-
-  public isLoading = new ObservableValue<boolean>(false)
-
-  public querySettings: ObservableValue<FindOptions<T, Array<keyof T>>>
-
   public focusedEntry = new ObservableValue<T | undefined>(undefined)
 
   public selection = new ObservableValue<T[]>([])
@@ -193,34 +164,9 @@ export class CollectionService<T> implements Disposable {
     this.focusedEntry.setValue(entry)
   }
 
-  constructor(private options: CollectionServiceOptions<T>) {
-    this.querySettings = new ObservableValue<FindOptions<T, Array<keyof T>>>(this.options.defaultSettings)
-
-    const loader = this.options.debounceMs
-      ? debounce(this.options.loader, this.options.debounceMs)
-      : this.options.loader
-
-    this.getEntries = async (opt) => {
-      await this.loadLock.acquire()
-      try {
-        this.error.setValue(undefined)
-        this.isLoading.setValue(true)
-        const result = await loader(opt)
-        this.data.setValue(result)
-        return result
-      } catch (error) {
-        this.error.setValue(error)
-        throw error
-      } finally {
-        this.loadLock.release()
-        this.isLoading.setValue(false)
-      }
-    }
-
-    this.querySettings.subscribe((val) => this.getEntries(val), true)
-  }
+  constructor(private options: CollectionServiceOptions<T> = {}) {}
 
-  public async handleRowDoubleClick(entry: T) {
+  public handleRowDoubleClick(entry: T) {
     this.options.onRowDoubleClick?.(entry)
   }
 }