How to use the observable-hooks.useObservableCallback function in observable-hooks

export const SearchBox: FC = props => {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =>
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing
            searchBoxFocusBlur$.pipe(filter(isFocus => !isFocus)),
            suggestFocusBlur$,
            onShowSugget$
          )
        ).pipe(
          map(([[enableSuggest, text], shouldShowSuggest]) =>
            Boolean(enableSuggest && text && shouldShowSuggest)
          ),

export const SearchBox: FC = props => {
  // Textarea also shares the text so only replace here
  const text = props.text.replace(/\s+/g, ' ')

  const [onSearchBoxFocusBlur, searchBoxFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onSuggestFocusBlur, suggestFocusBlur$] = useObservableCallback(
    focusBlur
  )

  const [onShowSugget, onShowSugget$] = useObservableCallback(identity)

  const isShowSuggest = useObservableState(
    useObservable(
      inputs$ =>
        combineLatest(
          inputs$,
          merge(
            // only show suggest when start typing

export const MenuBar: FC = props => {
  const { t } = useTranslate(['content', 'common'])

  const [updateProfileHeight, profileHeight$] = useObservableCallback(
    heightChangeTransform
  )

  const [updateSBHeight, searchBoxHeight$] = useObservableCallback(
    heightChangeTransform
  )

  // update panel min height
  useSubscription(
    useObservable(() =>
      combineLatest(profileHeight$, searchBoxHeight$).pipe(
        // a little delay for organic feeling
        debounceTime(100),
        map(heights => {
          const max = Math.max(...heights)
          return max > 0 ? max + 72 : 0
        })
      )
    ),
    props.onHeightChanged

export const useVerticalScroll = () => {
  const [onWheel, onWHeel$] = useObservableCallback(_useVerticalScrollOnWheel)
  useSubscription(onWHeel$)

  const tabsRef = useRef(null)
  useEffect(() => {
    if (tabsRef.current) {
      // take the node out for cleaning up
      const node = tabsRef.current
      node.addEventListener('wheel', onWheel, { passive: false })
      return () => {
        node.removeEventListener('wheel', onWheel)
      }
    }
  }, [tabsRef.current])

  return tabsRef
}

export const Profiles: FC = props => {
  const [onMouseOverOutDelay, mouseOverOutDelay$] = useObservableCallback<
    boolean,
    React.MouseEvent<element>
  &gt;(hoverWithDelay)

  const [onMouseOverOut, mouseOverOut$] = useObservableCallback&lt;
    boolean,
    React.MouseEvent<element>
  &gt;(hover)

  const [onFocusBlur, focusBlur$] = useObservableCallback(focusBlur)

  const [showHideProfiles, showHideProfiles$] = useObservableCallback(
    identity
  )

  const isShowProfiles = useObservableState(
    useObservable(() =&gt;
      merge(mouseOverOut$, mouseOverOutDelay$, focusBlur$, showHideProfiles$)
    ).pipe(debounceTime(100)),
    false
  )

  const listItem = props.profiles.map(p =&gt; {
    return {
      key: p.id,
      content: (
        </element></element>

export const Profiles: FC = props => {
  const [onMouseOverOutDelay, mouseOverOutDelay$] = useObservableCallback<
    boolean,
    React.MouseEvent<element>
  &gt;(hoverWithDelay)

  const [onMouseOverOut, mouseOverOut$] = useObservableCallback&lt;
    boolean,
    React.MouseEvent<element>
  &gt;(hover)

  const [onFocusBlur, focusBlur$] = useObservableCallback(focusBlur)

  const [showHideProfiles, showHideProfiles$] = useObservableCallback(
    identity
  )

  const isShowProfiles = useObservableState(
    useObservable(() =&gt;
      merge(mouseOverOut$, mouseOverOutDelay$, focusBlur$, showHideProfiles$)
    ).pipe(debounceTime(100)),
    false
  )

  const listItem = props.profiles.map(p =&gt; {
    return {
      key: p.id,
      content: (</element></element>

export const Profiles: FC = props => {
  const [onMouseOverOutDelay, mouseOverOutDelay$] = useObservableCallback<
    boolean,
    React.MouseEvent<element>
  &gt;(hoverWithDelay)

  const [onMouseOverOut, mouseOverOut$] = useObservableCallback&lt;
    boolean,
    React.MouseEvent<element>
  &gt;(hover)

  const [onFocusBlur, focusBlur$] = useObservableCallback(focusBlur)

  const [showHideProfiles, showHideProfiles$] = useObservableCallback(
    identity
  )

  const isShowProfiles = useObservableState(
    useObservable(() =&gt;
      merge(mouseOverOut$, mouseOverOutDelay$, focusBlur$, showHideProfiles$)
    ).pipe(debounceTime(100)),
    false
  )</element></element>

export function useInPanelSelect(
  touchMode: AppConfig['touchMode'],
  language: AppConfig['language'],
  doubleClickDelay: AppConfig['doubleClickDelay'],
  newSelection: (payload: Message<'SELECTION'>['payload']) => void
) {
  const [onMouseUp, mouseUp$] = useObservableCallback(
    event$ => event$.pipe(filter(e => e.button === 0))
  )

  const config$ = useObservable(identity, [touchMode, language] as const)

  const clickPeriodCount$ = useObservable(
    inputs$ =>
      inputs$.pipe(
        switchMap(([doubleClickDelay]) =>
          clickPeriodCountStream(mouseUp$, doubleClickDelay)
        )
      ),
    [doubleClickDelay] as const
  )

  const output$ = useObservable(() =>

export const SaladBowl: FC = props => {
  const [onMouseOverOut, mouseOverOut$] = useObservableCallback<
    boolean,
    React.MouseEvent
  >(hoverWithDelay)

  useSubscription(mouseOverOut$, active => {
    props.onHover(active)
    if (active) {
      props.onActive()
    }
  })

  return (

export const CustomInput: React.FC = props => {
  const [onChange, textChange$] = useObservableCallback<
    string,
    React.FormEvent
  >(pluckCurrentTargetValue)

  useSubscription(textChange$, props.onChange)

  return (
    <input value="{props.text}" placeholder="Text input" type="text">
  )
}