@furystack/shades-common-components 3.6.0 → 4.0.0

package/src/components/noty-list.tsx

@@ -1,4 +1,4 @@
-import { createComponent, Shade } from '@furystack/shades'
+import { attachProps, createComponent, Shade } from '@furystack/shades'
 import type { NotyModel } from '../services/noty-service'
 import { NotyService } from '../services/noty-service'
 import { ThemeProviderService } from '../services/theme-provider-service'
@@ -24,10 +24,9 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
   shadowDomName: 'shade-noty',
   constructed: ({ element }) => {
     setTimeout(() => {
-      const container = element.querySelector('div')
-      const height = container?.scrollHeight || 80
+      const height = element.scrollHeight || 80
       promisifyAnimation(
-        container,
+        element,
         [
           { opacity: '0', height: '0px' },
           { opacity: '1', height: `${height}px` },
@@ -42,16 +41,15 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
   },
   render: ({ props, injector, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const colors = themeProvider.theme.getValue().palette[props.model.type]
+    const colors = themeProvider.theme.palette[props.model.type]
     const headerTextColor = themeProvider.getTextColor(colors.dark)
     const textColor = themeProvider.getTextColor(colors.main)
 
     const removeSelf = async () => {
-      const container = element.querySelector('div')
       await promisifyAnimation(
-        container,
+        element,
         [
-          { opacity: '1', height: `${container?.scrollHeight || 0}px`, margin: '8px 8px' },
+          { opacity: '1', height: `${element?.scrollHeight || 0}px`, margin: '8px 8px' },
           { opacity: '0', height: '0px', margin: '0px 8px' },
         ],
         {
@@ -68,22 +66,24 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
       setTimeout(removeSelf, timeout)
     }
 
+    attachProps(element, {
+      className: `noty ${props.model.type}`,
+      style: {
+        width: '300px',
+        display: 'flex',
+        flexDirection: 'column',
+        height: '0px',
+        backgroundColor: colors.main,
+        color: textColor,
+        margin: '8px',
+        overflow: 'hidden',
+        borderRadius: '6px',
+        boxShadow: '1px 3px 6px rgba(0,0,0,0.3)',
+      },
+    })
+
     return (
-      <div
-        className={`noty ${props.model.type}`}
-        style={{
-          width: '300px',
-          display: 'flex',
-          flexDirection: 'column',
-          height: '0px',
-          backgroundColor: colors.main,
-          color: textColor,
-          margin: '8px',
-          overflow: 'hidden',
-          borderRadius: '6px',
-          boxShadow: '1px 3px 6px rgba(0,0,0,0.3)',
-        }}
-      >
+      <>
         <div
           style={{
             display: 'flex',
@@ -119,45 +119,46 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
           </Button>
         </div>
         <div style={{ padding: '16px 16px' }}>{props.model.body}</div>
-      </div>
+      </>
     )
   },
 })
 
-export const NotyList = Shade<unknown, { currentNotys: NotyModel[] }>({
-  getInitialState: ({ injector }) => ({ currentNotys: injector.getInstance(NotyService).notys.getValue() }),
-  constructed: ({ injector, element }) => {
-    const notyService = injector.getInstance(NotyService)
-    const observables = [
-      notyService.onNotyAdded.subscribe((n) => {
-        element.querySelector('div')?.append(<NotyComponent model={n} onDismiss={() => notyService.removeNoty(n)} />)
-      }),
-      notyService.onNotyRemoved.subscribe((n) => {
-        element.querySelectorAll('shade-noty').forEach((e) => {
-          if ((e as JSX.Element).props.model === n) {
-            e.remove()
-          }
-        })
-      }),
-    ]
-    return () => observables.forEach((o) => o.dispose())
-  },
+export const NotyList = Shade({
   shadowDomName: 'shade-noty-list',
-  render: ({ getState, injector }) => {
+  render: ({ useObservable, injector, element }) => {
+    const notyService = injector.getInstance(NotyService)
+
+    attachProps(element, {
+      style: {
+        position: 'fixed',
+        bottom: '1em',
+        right: '1em',
+        display: 'flex',
+        flexDirection: 'column',
+      },
+    })
+
+    const currentNotys = notyService.notys.getValue()
+
+    useObservable('addNoty', notyService.onNotyAdded, (n) =>
+      element.append(<NotyComponent model={n} onDismiss={() => notyService.removeNoty(n)} />),
+    )
+
+    useObservable('removeNoty', notyService.onNotyRemoved, (n) => {
+      element.querySelectorAll('shade-noty').forEach((e) => {
+        if ((e as JSX.Element).props.model === n) {
+          e.remove()
+        }
+      })
+    })
+
     return (
-      <div
-        style={{
-          position: 'fixed',
-          bottom: '1em',
-          right: '1em',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {getState().currentNotys.map((n) => (
+      <>
+        {currentNotys.map((n) => (
           <NotyComponent model={n} onDismiss={() => injector.getInstance(NotyService).removeNoty(n)} />
         ))}
-      </div>
+      </>
     )
   },
 })

package/src/components/paper.tsx

@@ -1,35 +1,28 @@
 import type { PartialElement } from '@furystack/shades'
+import { attachProps } from '@furystack/shades'
 import { Shade, createComponent } from '@furystack/shades'
 import { ThemeProviderService } from '../services/theme-provider-service'
 
 export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
-  resources: ({ injector, element }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    return [
-      themeProvider.theme.subscribe((newTheme) => {
-        ;(element.firstChild as HTMLDivElement).style.background = newTheme.background.paper
-        ;(element.firstChild as HTMLDivElement).style.color = themeProvider.theme.getValue().text.secondary
-      }),
-    ]
-  },
-  render: ({ injector, props, children }) => {
+
+  render: ({ injector, props, children, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    return (
-      <div
-        {...props}
-        style={{
-          borderRadius: '3px',
-          boxShadow: props.elevation ? `1px ${props.elevation}px ${props.elevation}px rgba(0,0,0,0.3)` : '',
-          backgroundColor: themeProvider.theme.getValue().background.paper,
-          color: themeProvider.theme.getValue().text.secondary,
-          margin: '8px',
-          padding: '6px 16px',
-          ...props?.style,
-        }}
-      >
-        {children}
-      </div>
-    )
+    const { elevation = 1 } = props
+
+    attachProps(element, {
+      ...props,
+      style: {
+        borderRadius: '3px',
+        boxShadow: elevation ? `1px ${elevation}px ${elevation}px rgba(0,0,0,0.3)` : '',
+        backgroundColor: themeProvider.theme.background.paper,
+        color: themeProvider.theme.text.secondary,
+        margin: '8px',
+        padding: '6px 16px',
+        ...props?.style,
+      },
+    })
+
+    return <>{children}</>
   },
 })

package/src/components/suggest/index.tsx

@@ -6,6 +6,7 @@ import { SuggestManager } from './suggest-manager'
 import type { SuggestionResult } from './suggestion-result'
 import { SuggestInput } from './suggest-input'
 import { SuggestionList } from './suggestion-list'
+import { ThemeProviderService } from '../../services'
 
 export * from './suggest-input'
 export * from './suggest-manager'
@@ -20,25 +21,19 @@ export interface SuggestProps<T> {
   style?: Partial<CSSStyleDeclaration>
 }
 
-export interface SuggestState<T> {
-  manager: SuggestManager<T>
-}
-
-export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
-  SuggestProps<any>,
-  SuggestState<any>
+export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX.Element<any> = Shade<
+  SuggestProps<any>
 >({
   shadowDomName: 'shade-suggest',
-  getInitialState: ({ props }) => ({
-    manager: new SuggestManager(props.getEntries, props.getSuggestionEntry),
-  }),
-  constructed: ({ element: el, getState, props }) => {
-    const { manager } = getState()
-    const element = el.querySelector('.input-container') as HTMLDivElement
-    manager.element = el
+  render: ({ props, injector, element, useDisposable, useObservable }) => {
+    element.style.flexGrow = '1'
+    const manager = useDisposable('manager', () => new SuggestManager(props.getEntries, props.getSuggestionEntry))
+    const { theme } = injector.getInstance(ThemeProviderService)
+    const inputContainer = element.querySelector('.input-container') as HTMLDivElement
+    manager.element = element
     manager.isOpened.subscribe((isOpened) => {
-      const suggestions = el.querySelector('.close-suggestions')
-      const postControls = el.querySelector('.post-controls')
+      const suggestions = element.querySelector('.close-suggestions')
+      const postControls = element.querySelector('.post-controls')
       if (isOpened) {
         promisifyAnimation(suggestions, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 500,
@@ -50,7 +45,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           fill: 'forwards',
         })
 
-        promisifyAnimation(element, [{ background: 'transparent' }, { background: 'rgba(128,128,128,0.1)' }], {
+        promisifyAnimation(inputContainer, [{ background: 'transparent' }, { background: theme.background.default }], {
           duration: 500,
           fill: 'forwards',
           easing: 'cubic-bezier(0.050, 0.570, 0.840, 1.005)',
@@ -67,7 +62,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
           delay: 300,
         })
 
-        promisifyAnimation(element, [{ background: 'rgba(128,128,128,0.1)' }, { background: 'transparent' }], {
+        promisifyAnimation(inputContainer, [{ background: theme.background.default }, { background: 'transparent' }], {
           duration: 300,
           fill: 'forwards',
           easing: 'cubic-bezier(0.000, 0.245, 0.190, 0.790)',
@@ -75,7 +70,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
       }
     })
     manager.isLoading.subscribe(async (isLoading) => {
-      const loader = el.querySelector('.loader-container')
+      const loader = element.querySelector('shade-loader')
       if (isLoading) {
         promisifyAnimation(loader, [{ opacity: 0 }, { opacity: 1 }], {
           duration: 100,
@@ -88,12 +83,7 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
         })
       }
     })
-    manager.onSelectSuggestion.subscribe((value) => props.onSelectSuggestion(value))
-    return () => manager.dispose()
-  },
-  render: ({ props, injector, element, getState }) => {
-    element.style.flexGrow = '1'
-    const { manager } = getState()
+    useObservable('onSelectSuggestion', manager.onSelectSuggestion, props.onSelectSuggestion)
     return (
       <div
         style={{ display: 'flex', flexDirection: 'column' }}
@@ -153,12 +143,11 @@ export const Suggest: <T>(props: SuggestProps<T>, children: ChildrenList) => JSX
               overflow: 'hidden',
             }}
           >
-            <div
-              className="loader-container"
+            <Loader
               style={{ width: '20px', height: '20px', opacity: manager.isLoading.getValue() ? '1' : '0' }}
-            >
-              <Loader style={{ width: '100%', height: '100%' }} />
-            </div>
+              delay={0}
+              borderWidth={4}
+            />
             <div
               className="close-suggestions"
               onclick={() => manager.isOpened.setValue(false)}

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

@@ -1,27 +1,34 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ThemeProviderService } from '../../services'
 import type { SuggestManager } from './suggest-manager'
 
-export const SuggestInput = Shade<{ manager: SuggestManager<any> }, { isOpened: boolean }>({
-  getInitialState: ({ props }) => ({ isOpened: props.manager.isOpened.getValue() }),
-  resources: ({ element, props }) => [
-    props.manager.isOpened.subscribe(async (isOpened) => {
-      const input = element.firstChild as HTMLInputElement
-      if (isOpened) {
-        input.focus()
-      } else {
-        input.value = ''
-      }
-    }),
-  ],
+export const SuggestInput = Shade<{ manager: SuggestManager<any> }>({
   shadowDomName: 'shades-suggest-input',
-  render: ({ element }) => {
-    element.style.width = '100%' //manager.isOpened.getValue() ? '100%' : '0%'
+  render: ({ element, props, useObservable, injector }) => {
+    const { theme } = injector.getInstance(ThemeProviderService)
+
+    element.style.width = '100%'
     element.style.overflow = 'hidden'
+
+    useObservable(
+      'isOpened',
+      props.manager.isOpened,
+      (isOpened) => {
+        const input = element.firstChild as HTMLInputElement
+        if (isOpened) {
+          input.focus()
+        } else {
+          input.value = ''
+        }
+      },
+      true,
+    )
+
     return (
       <input
         autofocus
         style={{
-          color: 'white',
+          color: theme.text.primary,
           outline: 'none',
           padding: '1em',
           background: 'transparent',

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>
+      )
+    },
+  })