@furystack/shades-common-components 3.0.4 → 3.1.0

package/dist/services/collection-service.js.map

@@ -1 +1 @@
-{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":";;;;AACA,0FAA6C;AAC7C,4CAAwE;AAWxE,MAAa,iBAAiB;IAwB5B,YAAY,KAAqB,EAAE,eAA+C;QAhBjE,aAAQ,GAAG,IAAI,+BAAS,CAAC,CAAC,CAAC,CAAA;QAIrC,SAAI,GAAG,IAAI,uBAAe,CAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QAExE,UAAK,GAAG,IAAI,uBAAe,CAAsB,SAAS,CAAC,CAAA;QAE3D,cAAS,GAAG,IAAI,uBAAe,CAAU,KAAK,CAAC,CAAA;QAI/C,UAAK,GAAG,IAAI,uBAAe,EAAiB,CAAA;QAE5C,cAAS,GAAG,IAAI,uBAAe,CAAM,EAAE,CAAC,CAAA;QAG7C,IAAI,CAAC,aAAa,GAAG,IAAI,uBAAe,CAAiC,eAAe,CAAC,CAAA;QACzF,IAAI,CAAC,UAAU,GAAG,IAAA,gBAAQ,EAAC,KAAK,EAAE,OAAO,EAAE,EAAE;YAC3C,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;YAC7B,IAAI;gBACF,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;gBAC7B,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,CAAA;gBACnC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;gBAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBAC9B,OAAO,MAAM,CAAA;aACd;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAC1B,MAAM,KAAK,CAAA;aACZ;oBAAS;gBACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;gBACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAC/B;QACH,CAAC,EAAE,GAAG,CAAC,CAAA;QACP,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;IA1CM,OAAO;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;IAC1B,CAAC;CAsCF;AA5CD,8CA4CC"}
+{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "",
   "keywords": [
     "FuryStack",
@@ -17,13 +17,14 @@
   "author": "gallay.lajos@gmail.com",
   "license": "GPL-2.0",
   "devDependencies": {
-    "typescript": "^4.6.4"
+    "typescript": "4.7.4"
   },
   "dependencies": {
-    "@furystack/core": "^11.0.3",
-    "@furystack/inject": "^6.0.3",
-    "@furystack/shades": "^5.0.4",
-    "@furystack/utils": "^3.0.3",
+    "@furystack/core": "^11.0.4",
+    "@furystack/inject": "^7.0.0",
+    "@furystack/shades": "^6.0.0",
+    "@furystack/utils": "^3.0.4",
+    "path-to-regexp": "^6.2.1",
     "semaphore-async-await": "^1.5.1",
     "tslib": "^2.4.0"
   },

package/src/components/app-bar-link.tsx

@@ -0,0 +1,44 @@
+import { createComponent, LocationService, RouteLink, RouteLinkProps, Shade } from '@furystack/shades'
+import { match } from 'path-to-regexp'
+import { ThemeProviderService } from '../services'
+
+export const AppBarLink = Shade<RouteLinkProps, { isActive: boolean }>({
+  getInitialState: () => ({ isActive: false }),
+  resources: ({ injector, props, updateState, element, getState }) => {
+    const updateColor = () => {
+      const { isActive } = getState()
+      const themeProviderService = injector.getInstance(ThemeProviderService)
+      const theme = themeProviderService.theme.getValue()
+      const el = element.querySelector('a') as HTMLElement
+      const backgroundColor = isActive ? theme.button.active : 'rgba(128, 128, 128, 0.05)'
+
+      el.style.backgroundColor = backgroundColor
+      el.style.color = themeProviderService.getTextColor(backgroundColor)
+    }
+    return [
+      injector.getInstance(LocationService).onLocationChanged.subscribe(async (currentUrl) => {
+        const isActive = !!match(props.href as string)(currentUrl)
+        updateState({ isActive }, false)
+        updateColor()
+      }, true),
+    ]
+  },
+  shadowDomName: 'shade-app-bar-link',
+  render: ({ children, props }) => {
+    return (
+      <RouteLink
+        style={{
+          display: 'flex',
+          height: '100%',
+          textDecoration: 'none',
+          alignItems: 'center',
+          padding: '0 8px',
+          ...props.style,
+        }}
+        {...props}
+      >
+        {children}
+      </RouteLink>
+    )
+  },
+})

package/src/components/app-bar.tsx

@@ -11,7 +11,7 @@ export const AppBar = Shade({
   constructed: ({ element }) => {
     const container = element.children[0] as HTMLElement
     requestAnimationFrame(() => {
-      container.style.padding = '8px 8px'
+      // container.style.padding = '8px 8px'
       container.style.opacity = '1'
     })
   },
@@ -28,7 +28,6 @@ export const AppBar = Shade({
           boxShadow: '0 0 12px rgba(0,0,0,0.6)',
           transition:
             'opacity .35s cubic-bezier(0.550, 0.085, 0.680, 0.530), padding .2s cubic-bezier(0.550, 0.085, 0.680, 0.530)',
-          padding: '6px 16px',
           opacity: '0',
           position: 'fixed',
           zIndex: '1',

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

@@ -1,7 +1,8 @@
 import { CollectionService } from '../../services/collection-service'
-import { ChildrenList, Shade, createComponent } from '@furystack/shades'
+import { ChildrenList, Shade, createComponent, createFragment } from '@furystack/shades'
 import { DataRowCells } from './data-grid'
 import { Loader } from '../loader'
+import { DataGridRow } from './data-grid-row'
 
 export interface DataGridBodyProps<T> {
   service: CollectionService<T>
@@ -13,8 +14,6 @@ export interface DataGridBodyProps<T> {
 
 export interface DataGridBodyState<T> {
   data: T[]
-  selection: T[]
-  focus: T | undefined
   isLoading: boolean
 }
 
@@ -24,19 +23,12 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
 >({
   getInitialState: ({ props }) => ({
     data: props.service.data.getValue().entries,
-    selection: props.service.selection.getValue(),
-    focus: props.service.focus.getValue(),
     isLoading: props.service.isLoading.getValue(),
   }),
-  constructed: ({ props, updateState }) => {
-    const disposables = [
-      props.service.data.subscribe((data) => updateState({ data: data.entries })),
-      props.service.focus.subscribe((focus) => updateState({ focus })),
-      props.service.selection.subscribe((selection) => updateState({ selection })),
-      props.service.isLoading.subscribe((isLoading) => updateState({ isLoading })),
-    ]
-    return () => disposables.map((d) => d.dispose())
-  },
+  resources: ({ props, updateState }) => [
+    props.service.data.subscribe((data) => updateState({ data: data.entries })),
+    props.service.isLoading.subscribe((isLoading) => updateState({ isLoading })),
+  ],
   shadowDomName: 'shade-data-grid-body',
   render: ({ getState, props, element }) => {
     element.style.display = 'table-row-group'
@@ -45,6 +37,7 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
     if (state.isLoading) {
       return (
         <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+          {/* TODO: Skeleton */}
           <Loader style={{ height: '128px', width: '128px' }} />
         </div>
       )
@@ -55,34 +48,16 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
     }
 
     return (
-      <div style={{ display: 'contents' }}>
+      <>
         {state.data.map((entry) => (
-          <tr
-            style={{
-              background: state.selection.includes(entry) ? 'rgba(128,128,128,0.3)' : 'transparent',
-              filter: state.focus === entry ? 'brightness(1.5)' : 'brightness(1)',
-              cursor: 'default',
-              boxShadow: '2px 1px 0px rgba(255,255,255,0.07)',
-              fontSize: '0.8em',
-            }}
-            onclick={() => {
-              if (getState().focus !== entry) {
-                props.service.focus.setValue(entry)
-                props.service.selection.setValue([entry])
-              }
-            }}
-            ondblclick={() => props.onDoubleClick?.(entry)}
-          >
-            {props.columns.map((column: any) => (
-              <td style={{ padding: '0.5em', ...props.style }}>
-                {props.rowComponents?.[column]?.(entry, state) || props.rowComponents?.default?.(entry, state) || (
-                  <span>{entry[column]}</span>
-                )}
-              </td>
-            ))}
-          </tr>
+          <DataGridRow<any>
+            columns={props.columns}
+            entry={entry}
+            service={props.service}
+            rowComponents={props.rowComponents}
+          ></DataGridRow>
         ))}
-      </div>
+      </>
     )
   },
 })

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

@@ -0,0 +1,88 @@
+import { ChildrenList, createComponent, createFragment, Shade } from '@furystack/shades'
+import { CollectionService } from '../../services/collection-service'
+import { DataRowCells } from './data-grid'
+
+export interface DataGridRowProps<T> {
+  entry: T
+  columns: Array<keyof T>
+  service: CollectionService<T>
+  rowComponents?: DataRowCells<T>
+}
+
+export interface DataGridRowState<T> {
+  selection?: T[]
+  focus?: T
+}
+
+export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
+  DataGridRowProps<any>,
+  DataGridRowState<any>
+>({
+  getInitialState: ({ props }) => ({
+    focus: props.service.focusedEntry.getValue(),
+    selection: props.service.selection.getValue(),
+  }),
+  shadowDomName: 'shades-data-grid-row',
+  resources: ({ props, element }) => [
+    props.service.focusedEntry.subscribe((newEntry) => {
+      if (newEntry === props.entry) {
+        element.style.filter = 'brightness(1.5)'
+        element.style.fontWeight = 'bolder'
+
+        const headerHeight = element.closest('table')?.querySelector('th')?.getBoundingClientRect().height || 42
+
+        const parent = element.closest('.shade-grid-wrapper') as HTMLElement
+        const maxTop = element.offsetTop - headerHeight
+        const currentTop = parent.scrollTop
+        if (maxTop < currentTop) {
+          parent.scrollTo({ top: maxTop, behavior: 'smooth' })
+        }
+
+        const footerHeight =
+          element.closest('shade-data-grid')?.querySelector('shade-data-grid-footer')?.getBoundingClientRect().height ||
+          42
+        const visibleMaxTop = parent.clientHeight - footerHeight // parent.getBoundingClientRect().height - footerHeight - headerHeight
+        const desiredMaxTop = element.offsetTop + element.clientHeight
+        if (desiredMaxTop > visibleMaxTop) {
+          parent.scrollTo({ top: desiredMaxTop - visibleMaxTop, behavior: 'smooth' })
+        }
+
+        // ;(element as any).scrollIntoView({ inline: 'nearest', block: 'nearest', behavior: 'smooth' })
+      } else {
+        element.style.filter = 'brightness(1)'
+        element.style.fontWeight = 'inherit'
+      }
+    }),
+    props.service.selection.subscribe((selection) => {
+      if (selection.includes(props.entry)) {
+        element.style.background = 'rgba(128,128,128,0.1)'
+      } else {
+        element.style.background = 'none'
+      }
+    }),
+  ],
+
+  render: ({ getState, props, element }) => {
+    const state = getState()
+    const { entry, rowComponents, columns } = props
+
+    element.style.display = 'table-row'
+    element.style.cursor = 'default'
+    element.style.userSelect = 'none'
+
+    element.onclick = () => {
+      props.service.focusedEntry.setValue(props.entry)
+    }
+    return (
+      <>
+        {columns.map((column) => (
+          <td style={{ padding: '0.5em' }}>
+            {rowComponents?.[column]?.(entry, state) || rowComponents?.default?.(entry, state) || (
+              <span>{entry[column]}</span>
+            )}
+          </td>
+        ))}
+      </>
+    )
+  },
+})

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

@@ -1,17 +1,17 @@
 import { ChildrenList, createComponent, Shade } from '@furystack/shades'
 import { CollectionService } from '../../services/collection-service'
 import { GridProps } from '../grid'
-import { colors } from '../styles'
 import { DataGridHeader } from './header'
-import { DataGridBody, DataGridBodyState } from './body'
+import { DataGridBody } from './body'
 import { DataGridFooter } from './footer'
-import { ThemeProviderService } from '../../services'
+import { ClickAwayService, ThemeProviderService } from '../../services'
+import { DataGridRowState } from './data-grid-row'
 
 export type DataHeaderCells<T> = {
-  [TKey in keyof T | 'default']?: (name: keyof T, state: DataGridState) => JSX.Element
+  [TKey in keyof T | 'default']?: (name: keyof T) => JSX.Element
 }
 export type DataRowCells<T> = {
-  [TKey in keyof T | 'default']?: (element: T, state: DataGridBodyState<T>) => JSX.Element
+  [TKey in keyof T | 'default']?: (element: T, state: DataGridRowState<T>) => JSX.Element
 }
 
 export interface DataGridProps<T> {
@@ -20,25 +20,16 @@ export interface DataGridProps<T> {
   service: CollectionService<T>
   headerComponents: DataHeaderCells<T>
   rowComponents: DataRowCells<T>
-  onFocusChange?: (entry?: T) => void
-  onSelectionChange?: (selection: T[]) => void
-  onDoubleClick?: (entry: T) => void
-}
-
-export interface DataGridState {
-  error?: unknown
+  autofocus?: boolean
 }
 
 export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
-  DataGridProps<any>,
-  DataGridState
+  DataGridProps<any>
 >({
   shadowDomName: 'shade-data-grid',
-  getInitialState: () => ({}),
-  constructed: ({ props, updateState, injector, element }) => {
+  resources: ({ injector, element, props }) => {
     const tp = injector.getInstance(ThemeProviderService)
-    const subscriptions = [
-      props.service.error.subscribe((error) => updateState({ error })),
+    return [
       tp.theme.subscribe((t) => {
         const headers = element.querySelectorAll('th')
         const { r, g, b } = tp.getRgbFromColorString(t.background.paper)
@@ -47,18 +38,19 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           header.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.3)`
         })
       }),
-      props.service.focus.subscribe((f) => props.onFocusChange?.(f)),
-      props.service.selection.subscribe((f) => props.onSelectionChange?.(f)),
+      new ClickAwayService(element, () => {
+        props.service.hasFocus.setValue(false)
+      }),
     ]
-    return () => Promise.all(subscriptions.map((s) => s.dispose()))
   },
-  render: ({ props, getState, injector }) => {
+  constructed: ({ props }) => {
+    window.addEventListener('keydown', (ev) => {
+      props.service.handleKeyDown(ev)
+    })
+  },
+  render: ({ props, injector }) => {
     const tp = injector.getInstance(ThemeProviderService)
     const theme = tp.theme.getValue()
-    const state = getState()
-    if (state.error) {
-      return <div style={{ color: colors.error.main }}>{JSON.stringify(state.error)}</div>
-    }
 
     const { r, g, b } = tp.getRgbFromColorString(theme.background.paper)
     const headerStyle: Partial<CSSStyleDeclaration> = {
@@ -86,17 +78,19 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
           overflow: 'auto',
           zIndex: '1',
         }}
+        onclick={() => {
+          props.service.hasFocus.setValue(true)
+        }}
       >
-        <table style={{ width: '100%', height: 'calc(100% - 4em)', position: 'relative' }}>
+        <table style={{ width: '100%', maxHeight: 'calc(100% - 4em)', position: 'relative' }}>
           <thead>
             <tr>
               {props.columns.map((column: any) => {
                 return (
                   <th style={headerStyle}>
-                    {props.headerComponents?.[column]?.(column, state) ||
-                      props.headerComponents?.default?.(column, state) || (
-                        <DataGridHeader<any, typeof column> field={column} collectionService={props.service} />
-                      )}
+                    {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
+                      <DataGridHeader<any, typeof column> field={column} collectionService={props.service} />
+                    )}
                   </th>
                 )
               })}
@@ -107,7 +101,6 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
             service={props.service}
             rowComponents={props.rowComponents}
             style={props.styles?.cell}
-            onDoubleClick={props.onDoubleClick}
           />
         </table>
         <DataGridFooter service={props.service} />

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

@@ -2,7 +2,7 @@ import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../../services'
 import { CollectionService, CollectionData } from '../../services/collection-service'
 
-export const dataGridItemsPerPage = [10, 20, 25, 50, 100]
+export const dataGridItemsPerPage = [10, 20, 25, 50, 100, Infinity]
 
 export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data: CollectionData<any> }>({
   shadowDomName: 'shade-data-grid-footer',
@@ -26,13 +26,14 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
     const state = getState()
     const currentQuerySettings = props.service.querySettings.getValue()
     const currentPage = Math.ceil(currentQuerySettings.skip || 0) / (currentQuerySettings.top || 1)
+    const currentEntriesPerPage = currentQuerySettings.top || Infinity
     const theme = injector.getInstance(ThemeProviderService).theme.getValue()
 
     return (
       <div
         className="pager"
         style={{
-          background: theme.background.paper,
+          backdropFilter: 'blur(10px)',
           color: theme.text.secondary,
           position: 'sticky',
           bottom: '0',
@@ -42,27 +43,28 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
           alignItems: 'center',
         }}
       >
-        <div>
-          Goto page
-          <select
-            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 })
-            }}
-          >
-            {[...new Array(Math.ceil(state.data.count / (props.service.querySettings.getValue().top || Infinity)))].map(
-              (_val, index) => (
+        {currentEntriesPerPage !== Infinity && (
+          <div>
+            Goto page
+            <select
+              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 })
+              }}
+            >
+              {[
+                ...new Array(Math.ceil(state.data.count / (props.service.querySettings.getValue().top || Infinity))),
+              ].map((_val, index) => (
                 <option value={index.toString()} selected={currentPage === index}>
                   {(index + 1).toString()}
                 </option>
-              ),
-            )}
-          </select>
-        </div>
+              ))}
+            </select>
+          </div>
+        )}
         <div>
-          {' '}
           Show
           <select
             style={{ margin: '0 1em' }}
@@ -76,7 +78,7 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
             }}
           >
             {dataGridItemsPerPage.map((no) => (
-              <option value={no.toString()} selected={no === currentQuerySettings.top}>
+              <option value={no.toString()} selected={no === currentEntriesPerPage}>
                 {no.toString()}
               </option>
             ))}

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

@@ -29,7 +29,7 @@ export const DataGridHeader: <T, K extends keyof T>(
         ...currentSettings,
         filter: {
           ...currentSettings.filter,
-          [props.field]: value ? { $regex: value } : undefined,
+          [props.field]: { $regex: value },
         },
       }
       props.collectionService.querySettings.setValue(newSettings)

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

@@ -1 +1,2 @@
 export * from './data-grid'
+export * from './selection-cell'

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

@@ -0,0 +1,32 @@
+import { createComponent, Shade } from '@furystack/shades'
+import { CollectionService } from '../../services'
+
+export const SelectionCell = Shade<{ entry: any; service: CollectionService<any> }>({
+  shadowDomName: 'shades-data-grid-selection-cell',
+  resources: ({ props, element }) => [
+    props.service.selection.subscribe((selection) => {
+      if (selection.includes(props.entry)) {
+        ;(element.firstChild as HTMLInputElement).checked = true
+      } else {
+        ;(element.firstChild as HTMLInputElement).checked = false
+      }
+    }),
+  ],
+  render: ({ props }) => {
+    return (
+      <input
+        onchange={(ev) => {
+          if ((ev.target as HTMLInputElement).checked) {
+            props.service.selection.setValue([...props.service.selection.getValue(), props.entry])
+          } else {
+            props.service.selection.setValue([
+              ...props.service.selection.getValue().filter((entry) => entry !== props.entry),
+            ])
+          }
+        }}
+        type="checkbox"
+        checked={props.service.selection.getValue().includes(props.entry) ? true : false}
+      />
+    )
+  },
+})

package/src/components/grid.tsx

@@ -64,7 +64,7 @@ export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Eleme
                   <th style={headerStyle}>
                     {props.headerComponents?.[column]?.(column) || props.headerComponents?.default?.(column) || (
                       <span>{column}</span>
-                    )}{' '}
+                    )}
                   </th>
                 )
               })}

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './animations'
 export * from './app-bar'
+export * from './app-bar-link'
 export * from './autocomplete'
 export * from './avatar'
 export * from './button'

package/src/components/paper.tsx

@@ -24,7 +24,7 @@ export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2
           color: themeProvider.theme.getValue().text.secondary,
           margin: '8px',
           padding: '6px 16px',
-          ...(props ? props.style : {}),
+          ...props?.style,
         }}
       >
         {children}

package/src/services/collection-service.ts

@@ -31,19 +31,105 @@ export class CollectionService<T> implements Disposable {
 
   public querySettings: ObservableValue<FindOptions<T, Array<keyof T>>>
 
-  public focus = new ObservableValue<T | undefined>()
+  public focusedEntry = new ObservableValue<T | undefined>()
 
   public selection = new ObservableValue<T[]>([])
 
+  public searchTerm = new ObservableValue('')
+
+  public hasFocus = new ObservableValue(false)
+
+  public handleKeyDown(ev: KeyboardEvent) {
+    const { entries } = this.data.getValue()
+    const hasFocus = this.hasFocus.getValue()
+    const selectedEntries = this.selection.getValue()
+    const focusedEntry = this.focusedEntry.getValue()
+    const searchTerm = this.searchTerm.getValue()
+
+    switch (ev.key) {
+      case ' ':
+        ev.preventDefault()
+        focusedEntry &&
+          this.selection.setValue(
+            selectedEntries.includes(focusedEntry)
+              ? selectedEntries.filter((e) => e !== focusedEntry)
+              : [...selectedEntries, focusedEntry],
+          )
+        break
+      case '*':
+        this.selection.setValue(entries.filter((e) => !selectedEntries.includes(e)))
+        break
+      case '+':
+        this.selection.setValue(entries)
+        break
+      case '-':
+        this.selection.setValue([])
+        break
+      case 'Insert':
+        focusedEntry &&
+          (this.selection.getValue().includes(focusedEntry)
+            ? this.selection.setValue([...this.selection.getValue().filter((e) => e !== focusedEntry)])
+            : this.selection.setValue([...this.selection.getValue(), focusedEntry]))
+        this.focusedEntry.setValue(entries[entries.findIndex((e) => e === this.focusedEntry.getValue()) + 1])
+
+        break
+      case 'ArrowUp':
+        ev.preventDefault()
+        this.focusedEntry.setValue(entries[Math.max(0, entries.findIndex((e) => e === focusedEntry) - 1)])
+        break
+      case 'ArrowDown':
+        ev.preventDefault()
+        this.focusedEntry.setValue(
+          entries[Math.min(entries.length - 1, entries.findIndex((e) => e === focusedEntry) + 1)],
+        )
+        break
+      case 'Home': {
+        this.focusedEntry.setValue(entries[0])
+        break
+      }
+      case 'End': {
+        this.focusedEntry.setValue(entries[entries.length - 1])
+        break
+      }
+      case 'Enter': {
+        // this.activate(focusedEntry)
+        break
+      }
+      case 'Backspace': {
+        // this.currentWorkDir.goUp()
+        break
+      }
+      case 'Tab': {
+        this.hasFocus.setValue(!hasFocus)
+        break
+      }
+      case 'Escape': {
+        this.searchTerm.setValue('')
+        this.selection.setValue([])
+        break
+      }
+      default:
+        if (ev.key.length === 1 && new RegExp(/[a-zA-z0-9]/).test(ev.key)) {
+          const newSearchExpression = searchTerm + ev.key
+          // TODO: implement search
+          // const newFocusedEntry = entries.find((e) => e.name.startsWith(newSearchExpression))
+          // this.focus.setValue(newFocusedEntry)
+          this.searchTerm.setValue(newSearchExpression)
+        } else {
+          console.log(`Handler for '${ev.key}' not registered`)
+        }
+    }
+  }
+
   constructor(fetch: EntryLoader<T>, defaultSettings: FindOptions<T, Array<keyof T>>) {
     this.querySettings = new ObservableValue<FindOptions<T, Array<keyof T>>>(defaultSettings)
     this.getEntries = debounce(async (options) => {
       await this.loadLock.acquire()
       try {
+        this.error.setValue(undefined)
         this.isLoading.setValue(true)
         const result = await fetch(options)
         this.data.setValue(result)
-        this.error.setValue(undefined)
         return result
       } catch (error) {
         this.error.setValue(error)