@furystack/shades-common-components 3.6.1 → 4.0.1

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

@@ -1,10 +1,11 @@
 import type { Injector } from '@furystack/inject'
 import { Injectable } from '@furystack/inject'
+import type { Disposable } from '@furystack/utils'
 import { debounce, ObservableValue } from '@furystack/utils'
 import type { SuggestionResult } from './suggestion-result'
 
 @Injectable({ lifetime: 'singleton' })
-export class SuggestManager<T> {
+export class SuggestManager<T> implements Disposable {
   public isOpened = new ObservableValue(false)
   public isLoading = new ObservableValue(false)
   public term = new ObservableValue('')
@@ -32,6 +33,12 @@ export class SuggestManager<T> {
   public dispose() {
     window.removeEventListener('keyup', this.keyPressListener)
     window.removeEventListener('click', this.clickOutsideListener)
+    this.isOpened.dispose()
+    this.isLoading.dispose()
+    this.term.dispose()
+    this.selectedIndex.dispose()
+    this.currentSuggestions.dispose()
+    this.onSelectSuggestion.dispose()
   }
 
   public selectSuggestion(index: number = this.selectedIndex.getValue()) {
@@ -46,13 +53,18 @@ export class SuggestManager<T> {
       if (this.lastGetSuggestionOptions?.term === options.term) {
         return
       }
+      const lastSelectedSuggestion = JSON.stringify(this.currentSuggestions.getValue()[this.selectedIndex.getValue()])
       this.isLoading.setValue(true)
       this.lastGetSuggestionOptions = options
-      this.currentSuggestions.setValue([])
-      this.selectedIndex.setValue(0)
       const newEntries = await this.getEntries(options.term)
       this.isOpened.setValue(true)
       this.currentSuggestions.setValue(newEntries.map((e) => ({ entry: e, suggestion: this.getSuggestionEntry(e) })))
+      this.selectedIndex.setValue(
+        Math.max(
+          0,
+          this.currentSuggestions.getValue().findIndex((e) => JSON.stringify(e) === lastSelectedSuggestion),
+        ),
+      )
     } finally {
       this.isLoading.setValue(false)
     }

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

@@ -1,93 +1,98 @@
 import type { ChildrenList } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { promisifyAnimation } from '../../utils/promisify-animation'
-import type { SuggestionResult } from './suggestion-result'
 import type { SuggestManager } from './suggest-manager'
+import { ThemeProviderService } from '../../services'
 
-export const SuggestionList: <T>(
-  props: { manager: SuggestManager<T> },
-  children: ChildrenList,
-) => JSX.Element<any, any> = Shade<{ manager: SuggestManager<any> }, { suggestions: SuggestionResult[] }>({
-  shadowDomName: 'shade-suggest-suggestion-list',
-  getInitialState: ({ props }) => ({
-    suggestions: props.manager.currentSuggestions.getValue().map((v) => v.suggestion),
-  }),
-  resources: ({ updateState, element, props }) => [
-    props.manager.currentSuggestions.subscribe((s) => {
-      updateState({ suggestions: s.map((ss) => ss.suggestion) })
-    }),
-    props.manager.isOpened.subscribe(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'
-      }
-    }, true), // TODO: Check initial state
-    props.manager.selectedIndex.subscribe((idx) => {
-      ;[...element.querySelectorAll('.suggestion-item')].map((s, i) => {
-        if (i === idx) {
-          ;(s as HTMLDivElement).style.background = 'rgba(128,128,128,0.2)'
+export const SuggestionList: <T>(props: { manager: SuggestManager<T> }, children: ChildrenList) => JSX.Element<any> =
+  Shade<{ manager: SuggestManager<any> }>({
+    shadowDomName: 'shade-suggest-suggestion-list',
+    render: ({ element, props, injector, useObservable }) => {
+      const { manager } = props
+      const { theme } = injector.getInstance(ThemeProviderService)
+
+      const [suggestions] = useObservable('suggestions', manager.currentSuggestions)
+
+      const [selectedIndex] = useObservable(
+        'selectedIndex',
+        manager.selectedIndex,
+        (idx) => {
+          ;([...element.querySelectorAll('.suggestion-item')] as HTMLDivElement[]).map((s, i) => {
+            if (i === idx) {
+              s.style.background = theme.background.paper
+              s.style.fontWeight = 'bolder'
+            } else {
+              s.style.background = theme.background.default
+              s.style.fontWeight = 'normal'
+            }
+          })
+        },
+        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 {
-          ;(s as HTMLDivElement).style.background = 'rgba(96,96,96,0.2)'
+          await promisifyAnimation(
+            container,
+            [
+              { opacity: 1, transform: 'translate(0, 0)' },
+              { opacity: 0, transform: 'translate(0, -50px)' },
+            ],
+            { fill: 'forwards', duration: 200 },
+          )
+          container.style.zIndex = '-1'
         }
       })
-    }),
-  ],
-  render: ({ element, getState, props }) => {
-    const { manager } = props
-    return (
-      <div
-        className="suggestion-items-container"
-        style={{
-          borderTop: 'none',
-          position: 'absolute',
-          borderRadius: '0px 0px 5px 5px',
-          marginLeft: '14px',
-          overflow: 'hidden',
-          zIndex: '1',
-          left: 'auto',
-          backgroundColor: 'rgba(8,8,8,0.85)',
-          boxShadow: '3px 3px 5px rgba(0,0,0,0.3)',
-          backdropFilter: 'blur(15px)',
-          width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
-        }}
-      >
-        {getState().suggestions.map((s, i) => (
-          <div
-            className="suggestion-item"
-            onclick={() => {
-              manager.isOpened.getValue() && manager.selectSuggestion(i)
-            }}
-            style={{
-              padding: '1em',
-              cursor: 'default',
-              background: i === manager.selectedIndex.getValue() ? 'rgba(128,128,128,0.2)' : 'rgba(96,96,96,0.2)',
-            }}
-          >
-            {s.element}
-          </div>
-        ))}
-      </div>
-    )
-  },
-})
+
+      return (
+        <div
+          className="suggestion-items-container"
+          style={{
+            borderTop: 'none',
+            position: 'absolute',
+            borderRadius: '0px 0px 5px 5px',
+            marginLeft: '14px',
+            overflow: 'hidden',
+            zIndex: '1',
+            left: 'auto',
+            backgroundColor: theme.background.paper, //'rgba(8,8,8,0.85)',
+            color: theme.text.secondary,
+            boxShadow: '3px 3px 5px rgba(0,0,0,0.3)',
+            backdropFilter: 'blur(15px)',
+            width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
+          }}
+        >
+          {suggestions.map((s, i) => (
+            <div
+              className="suggestion-item"
+              onclick={() => {
+                isListOpened && manager.selectSuggestion(i)
+              }}
+              style={{
+                padding: '1em',
+                cursor: 'default',
+                background: i === selectedIndex ? theme.background.paper : theme.background.default,
+                fontWeight: i === selectedIndex ? 'bolder' : 'normal',
+              }}
+            >
+              {s.suggestion.element}
+            </div>
+          ))}
+        </div>
+      )
+    },
+  })

package/src/components/tabs.tsx

@@ -1,85 +1,73 @@
-import { Shade, createComponent, LocationService } from '@furystack/shades'
+import { Shade, createComponent, LocationService, attachProps } from '@furystack/shades'
 import { ThemeProviderService } from '../services'
-import { promisifyAnimation } from '../utils/promisify-animation'
 
 export interface Tab {
   header: JSX.Element
   component: JSX.Element
+  hash: string
 }
 
-export const Tabs = Shade<
-  {
-    tabs: Tab[]
-    containerStyle?: Partial<CSSStyleDeclaration>
-    style?: Partial<CSSStyleDeclaration>
-    activeTab?: number
-    onChange?: (page: number) => void
+const TabHeader = Shade<{ isActive?: boolean; onActivate: () => void }>({
+  shadowDomName: 'shade-tab-header',
+  render: ({ children, element, injector, props }) => {
+    const { theme } = injector.getInstance(ThemeProviderService)
+    const { isActive } = props
+
+    attachProps(element, {
+      style: {
+        padding: '1em 2.5em',
+        cursor: 'pointer',
+        transition: 'box-shadow 1s linear',
+        fontWeight: isActive ? 'bolder' : 'inherit',
+        background: isActive ? theme.background.paper : theme.background.default,
+        color: isActive ? theme.text.primary : theme.text.secondary,
+        boxShadow: isActive ? `inset 0 -2px 0 ${theme.palette.primary.main}` : 'none',
+      },
+      onclick: props.onActivate,
+    })
+    return <>{children}</>
   },
-  { activeIndex: number }
->({
+})
+
+export const Tabs = Shade<{
+  tabs: Tab[]
+  containerStyle?: Partial<CSSStyleDeclaration>
+  style?: Partial<CSSStyleDeclaration>
+  onChange?: (page: number) => void
+}>({
   shadowDomName: 'shade-tabs',
-  getInitialState: ({ props }) => ({ activeIndex: props.activeTab || 0 }),
-  constructed: ({ injector, updateState }) => {
-    const subscriptions = [
-      injector.getInstance(LocationService).onLocationChanged.subscribe(() => {
-        const { hash } = location
-        if (hash && hash.startsWith('#tab-')) {
-          const page = parseInt(hash.replace('#tab-', ''), 10)
-          page && updateState({ activeIndex: page })
-        }
-      }, true),
-    ]
-    return () => subscriptions.forEach((s) => s.dispose())
-  },
-  render: ({ props, getState, updateState, injector }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    const { theme } = themeProvider
+  render: ({ props, element, useObservable, injector }) => {
+    attachProps(element, {
+      style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle },
+    })
+
+    const [hash] = useObservable('updateLocation', injector.getInstance(LocationService).onLocationHashChanged)
+
+    const activeTab = props.tabs.find((t) => t.hash === hash.replace('#', ''))
+
     return (
-      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle }}>
+      <>
         <div
           className="shade-tabs-header-container"
           style={{ display: 'inline-flex', borderRadius: '5px 5px 0 0', overflow: 'hidden', flexShrink: '0' }}
         >
-          {props.tabs.map((tab, index) => {
-            const isActive = index === getState().activeIndex
-            const jsxElement = (
-              <div
-                className={`shade-tabs-headers${isActive ? 'active' : ''}`}
-                style={{
-                  padding: '1em 2.5em',
-                  cursor: 'pointer',
-                  transition: 'box-shadow 1s linear',
-                  fontWeight: isActive ? 'bolder' : 'inherit',
-                  background: isActive ? theme.background.paper : theme.background.default,
-                  color: isActive ? theme.text.primary : theme.text.secondary,
-                }}
-                onclick={() => {
-                  props.onChange && props.onChange(index)
-                  window.history.pushState({}, '', `#tab-${index}`)
-                  updateState({ activeIndex: index })
+          {props.tabs.map((tab) => {
+            const isActive = tab === activeTab
+
+            return (
+              <TabHeader
+                isActive={isActive}
+                onActivate={() => {
+                  window.history.pushState({}, '', `#${tab.hash}`)
                 }}
               >
                 {tab.header}
-              </div>
+              </TabHeader>
             )
-
-            if (isActive) {
-              setTimeout(() =>
-                promisifyAnimation(
-                  jsxElement,
-                  [{ boxShadow: 'none' }, { boxShadow: 'inset 0 -2px 0 rgba(128,128,192,0.9)' }],
-                  { duration: 500, fill: 'forwards', easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' },
-                ),
-              )
-            }
-
-            return jsxElement
           })}
         </div>
-        <div className="shade-tabs-header-content" style={props.style}>
-          {props.tabs[getState().activeIndex].component}
-        </div>
-      </div>
+        {activeTab?.component}
+      </>
     )
   },
 })

package/src/components/wizard/index.tsx

@@ -25,24 +25,17 @@ export interface WizardProps {
   /**
    * An array of Shade<WizardStepProps> components
    */
-  steps: Array<(props: WizardStepProps, children: ChildrenList) => JSX.Element<any, any>>
+  steps: Array<(props: WizardStepProps, children: ChildrenList) => JSX.Element<any>>
   /**
    * A callback that will be executed when the wizard is completed
    */
   onFinish?: () => void
 }
 
-interface WizardState {
-  currentPage: number
-}
-
-export const Wizard = Shade<WizardProps, WizardState>({
+export const Wizard = Shade<WizardProps>({
   shadowDomName: 'shades-wizard',
-  getInitialState: () => ({
-    currentPage: 0,
-  }),
-  render: ({ props, getState, updateState }) => {
-    const { currentPage } = getState()
+  render: ({ props, useState }) => {
+    const [currentPage, setCurrentPage] = useState('currentPage', 0)
 
     const CurrentPage = props.steps[currentPage]
 
@@ -62,14 +55,14 @@ export const Wizard = Shade<WizardProps, WizardState>({
             maxPages={props.steps.length}
             onNext={() => {
               if (currentPage < props.steps.length - 1) {
-                updateState({ currentPage: currentPage + 1 })
+                setCurrentPage(currentPage + 1)
               } else {
                 props.onFinish?.()
               }
             }}
             onPrev={() => {
               if (currentPage > 0) {
-                updateState({ currentPage: currentPage - 1 })
+                setCurrentPage(currentPage - 1)
               }
             }}
           />

package/src/services/collection-service.ts

@@ -54,6 +54,20 @@ export class CollectionService<T> implements Disposable {
     this.isLoading.dispose()
   }
 
+  public isSelected = (entry: T) => this.selection.getValue().includes(entry)
+
+  public addToSelection = (entry: T) => {
+    this.selection.setValue([...this.selection.getValue(), entry])
+  }
+
+  public removeFromSelection = (entry: T) => {
+    this.selection.setValue(this.selection.getValue().filter((e) => e !== entry))
+  }
+
+  public toggleSelection = (entry: T) => {
+    this.isSelected(entry) ? this.removeFromSelection(entry) : this.addToSelection(entry)
+  }
+
   private readonly loadLock = new Semaphore(1)
 
   public getEntries: EntryLoader<T>
@@ -81,71 +95,73 @@ export class CollectionService<T> implements Disposable {
     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 'Tab': {
-        this.hasFocus.setValue(!hasFocus)
-        break
-      }
-      case 'Escape': {
-        this.searchTerm.setValue('')
-        this.selection.setValue([])
-        break
-      }
-      default:
-        if (this.options.searchField && ev.key.length === 1) {
-          const newSearchExpression = searchTerm + ev.key
-          const newFocusedEntry = entries.find(
-            (e) =>
-              this.options.searchField &&
-              (e[this.options.searchField] as any)?.toString().startsWith(newSearchExpression),
+    if (hasFocus) {
+      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)],
           )
-          this.focusedEntry.setValue(newFocusedEntry)
-          this.searchTerm.setValue(newSearchExpression)
+          break
+        case 'Home': {
+          this.focusedEntry.setValue(entries[0])
+          break
         }
+        case 'End': {
+          this.focusedEntry.setValue(entries[entries.length - 1])
+          break
+        }
+        case 'Tab': {
+          this.hasFocus.setValue(!hasFocus)
+          break
+        }
+        case 'Escape': {
+          this.searchTerm.setValue('')
+          this.selection.setValue([])
+          break
+        }
+        default:
+          if (this.options.searchField && ev.key.length === 1) {
+            const newSearchExpression = searchTerm + ev.key
+            const newFocusedEntry = entries.find(
+              (e) =>
+                this.options.searchField &&
+                (e[this.options.searchField] as any)?.toString().startsWith(newSearchExpression),
+            )
+            this.focusedEntry.setValue(newFocusedEntry)
+            this.searchTerm.setValue(newSearchExpression)
+          }
+      }
     }
   }
 

package/tsconfig.json

@@ -7,7 +7,7 @@
     "rootDir": "./src",
     "jsx": "react",
     "jsxFactory": "createComponent",
-    "jsxFragmentFactory": "createFragment"
+    "jsxFragmentFactory": "createComponent"
   },
   "include": ["src"],
   "references": [{ "path": "../shades" }]