crowned Posts - Answer Overflow

crowned

•Created by crowned on 11/3/2023 in #support

I can't seem to get ref bindings correctly

I'm trying to implement spatial-navigation in my app so I want to convert this package from Reactjs to Solidjs: https://github.com/NoriginMedia/Norigin-Spatial-Navigation/ (There are only 6 files to convert and 1/2 of them are vanilla JS code) My current issue is that I can't seem to get the ref bindings correctly. Here is a hook exported from the app:

const { ref, focused } = useFocusable();

<div
    id={props.id}
    class={`media-card focusable ${
    focused ? "border-yellow-300 !duration-300" : ""
    }`}
    ref={ref}
>

const { ref, focused } = useFocusable();

<div
    id={props.id}
    class={`media-card focusable ${
    focused ? "border-yellow-300 !duration-300" : ""
    }`}
    ref={ref}
>

And here is one of my Solidjs ref implementations:

const ref: Ref<any> = (el: any) => {
  const node = el;
  console.log(el);

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
  return el;
};

const ref: Ref<any> = (el: any) => {
  const node = el;
  console.log(el);

  SpatialNavigation.addFocusable({
    focusKey: focusKey(),
    node,
    parentFocusKey,
    preferredChildFocusKey: props.preferredChildFocusKey,
    onEnterPress: onEnterPressHandler,
    onEnterRelease: onEnterReleaseHandler,
    onArrowPress: onArrowPressHandler,
    onFocus: onFocusHandler,
    onBlur: onBlurHandler,
    onUpdateFocus: (isFocused = false) => setFocused(isFocused),
    onUpdateHasFocusedChild: (isFocused = false) =>
      setHasFocusedChild(isFocused),
    saveLastFocusedChild: props.saveLastFocusedChild || true,
    trackChildren: props.trackChildren || false,
    isFocusBoundary: props.isFocusBoundary || false,
    focusBoundaryDirections: props.focusBoundaryDirections,
    autoRestoreFocus: props.autoRestoreFocus || true,
    forceFocus: props.forceFocus || false,
    focusable: props.focusable || true,
  });
  return el;
};

Continuation ⬇️

13 replies

SSolidJS

•Created by crowned on 10/30/2023 in #support

How to allow updating of elements instead of destroying and rendering the elements?

I have an array of 100 objects and an div is rendered for each object. Whenever the array changes, a new set of 100 divs are rendered for the new objects. How do I make it such that there are always 100 divs and whenever the array changes, the contents of these divs are changed instead of the divs being re-rendered (destroyed and created). I'm doing this to improve performance and user experience

61 replies

Gaming

Programming