@furystack/shades-common-components 3.6.1 → 4.0.0

package/src/components/loader.tsx

@@ -1,4 +1,5 @@
 import { Shade, createComponent } from '@furystack/shades'
+import { ThemeProviderService } from '../services'
 import { promisifyAnimation } from '../utils'
 
 interface LoaderProps {
@@ -10,15 +11,29 @@ interface LoaderProps {
    * The time to wait before the loader shows up
    */
   delay?: number
+
+  /**
+   * The color of the loader
+   */
+  borderColor?: string
+
+  /**
+   * The width of the border
+   */
+  borderWidth?: number
 }
 
 export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
-  render: ({ element, props }) => {
+  render: ({ element, props, injector }) => {
+    const { theme } = injector.getInstance(ThemeProviderService)
+
     element.style.display = 'inline-block'
     element.style.transformOrigin = 'center'
     element.style.opacity = '0'
     const { delay = 500 } = props
+    const { borderWidth = 15 } = props
+    const { borderColor = theme.palette.primary.main } = props
 
     setTimeout(() => {
       promisifyAnimation(element, [{ opacity: '0' }, { opacity: '1' }], {
@@ -40,10 +55,10 @@ export const Loader = Shade<LoaderProps>({
       <div
         style={{
           position: 'relative',
-          width: 'calc(100% - 30px)',
-          height: 'calc(100% - 30px)',
-          border: '15px solid rgba(128,128,128,0.1)',
-          borderBottom: '15px solid red',
+          width: `calc(100% - ${borderWidth * 2}px)`,
+          height: `calc(100% - ${borderWidth * 2}px)`,
+          border: `${borderWidth}px solid rgba(128,128,128,0.1)`,
+          borderBottom: `${borderWidth}px solid ${borderColor}`,
           borderRadius: '50%',
         }}
       />

package/src/components/modal.tsx

@@ -9,28 +9,20 @@ export type ModalProps = {
   hideAnimation?: (el: Element | null) => Promise<unknown>
 }
 
-export const Modal = Shade<ModalProps, { isVisible?: boolean }>({
-  getInitialState: ({ props }) => ({ isVisible: props.isVisible.getValue() }),
+export const Modal = Shade<ModalProps>({
   shadowDomName: 'shade-modal',
-  resources: ({ props, element, updateState }) => [
-    props.isVisible.subscribe(async (visible) => {
-      if (visible) {
-        updateState({ isVisible: visible })
-        await props.showAnimation?.(element)
-      } else {
-        props.hideAnimation
-          ? await props.hideAnimation?.(element).finally(() => updateState({ isVisible: visible }))
-          : updateState({ isVisible: visible })
-      }
-    }),
-  ],
+  render: ({ props, children, useObservable, element }) => {
+    const [isVisible] = useObservable('isVisible', props.isVisible)
+
+    if (isVisible) {
+      props.showAnimation?.(element)
+    }
 
-  render: ({ props, getState, children }) => {
-    const { isVisible } = getState()
     return isVisible ? (
       <div
         className="shade-backdrop"
-        onclick={() => {
+        onclick={async () => {
+          await props.hideAnimation?.(element)
           props.onClose?.()
         }}
         style={{

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` },
@@ -47,11 +46,10 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
     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,27 +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',
 
-  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.background.paper,
-          color: themeProvider.theme.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)
     }