react-use#useHoverDirty TypeScript Examples

export function useAdaptMainUIStyle(show: boolean, tabsWidth?: number | null) {
  const { template } = useRouteState();
  const shouldShow =
    show &&
    (!template ||
      ["/", "/all-journals", "/page/:name", "/file/:path"].includes(template));
  const docRef = React.useRef(document.documentElement);
  const isHovering = useHoverDirty(docRef);
  React.useEffect(() => {
    logseq.provideStyle({
      key: "tabs--top-padding",
      style: `
      #main-content-container {
        padding-top: ${shouldShow ? "64px" : ""};
      }`,
    });

    logseq.showMainUI({ autoFocus: false });
    const headerEl = top!.document.querySelector(
      "#head.cp__header"
    )! as HTMLElement;

    const mainContainer = top!.document.querySelector(
      "#main-content-container"
    )! as HTMLElement;

    const listener = () => {
      const { left: leftOffset, width } = mainContainer.getBoundingClientRect();
      const maxWidth = width - 10;
      logseq.setMainUIInlineStyle({
        zIndex: 9,
        userSelect: "none",
        position: "fixed",
        left: `${leftOffset}px`,
        top: `${headerEl.offsetHeight + 2}px`,
        height: shouldShow ? "28px" : "0px",
        width: isHovering ? "100%" : tabsWidth + "px", // 10 is the width of the scrollbar
        maxWidth: maxWidth + "px",
      });
    };
    listener();
    const ob = new ResizeObserver(listener);
    ob.observe(mainContainer);
    return () => {
      ob.disconnect();
    };
  }, [shouldShow, tabsWidth, isHovering]);
}

LinkRow = (props: LinkRowProps) => {
  const { item, handleEditLink, handleDelete } = props;
  const linkRef = React.useRef(null);
  const isHovering = useHoverDirty(linkRef);

  return (
    <div
      key={item.id}
      ref={linkRef}
      className="h-8 cursor-pointer flex items-center homepage-link pl-2 hover:bg-default-04"
    >
      <ErdaIcon type="lianjie" {...iconStyle} />
      <div className="cursor-pointer ml-2 w-64 px-2 py-1 flex justify-between items-center">
        <div className="truncate">
          <Tooltip title={item.name || item.url} placement="left">
            <a
              className="underline"
              style={{ color: 'rgba(66,76,166,0.90)' }}
              href={item.url.startsWith('http') ? item.url : `https://${item.url}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              {item.url}
            </a>
          </Tooltip>
        </div>
        <div className={`${isHovering ? 'homepage-link-operation' : 'hidden'} flex justify-between items-center`}>
          <Tooltip title={i18n.t('Edit')}>
            <ErdaIcon
              type="correction"
              className={'w-4 mx-2 self-center text-default-4 hover:text-default-8'}
              size={16}
              onClick={() => handleEditLink(item)}
            />
          </Tooltip>

          <Popconfirm
            placement="bottomLeft"
            overlayClassName="homepage-link-delete-confirm"
            title={`${i18n.t('confirm to delete')}?`}
            icon={null}
            onConfirm={() => handleDelete(item.id)}
          >
            <Tooltip title={i18n.t('Delete')}>
              <ErdaIcon type="remove" size={16} className="text-default-4 hover:text-default-8" />
            </Tooltip>
          </Popconfirm>
        </div>
      </div>
    </div>
  );
}

export function Accordion(props) {
  const { question, answer } = props;
  const content = useRef(null);
  const button = useRef(null);

  const [isActive, setActiveState] = useState(false);
  const [height, setHeight] = useState(`${content?.current?.scrollHeight}px`);
  const [loaded, setLoaded] = useState(false);
  const isHovering = useHoverDirty(button);
  const isExcited = isActive || isHovering;

  function toggleAccordion() {
    setActiveState(!isActive);
    setHeight(isActive ? '0px' : `${content.current.scrollHeight}px`);
  }

  useEffect(() => {
    toggleAccordion();
    setLoaded(true);
  }, []);
  useEffect(() => {
    if (loaded) toggleAccordion();
  }, [loaded]);

  return (
    <div className="mb-1 border border-current rounded-sm">
      <button
        ref={button}
        className={classNames(
          'flex text-xl tablet:text-2xl w-full text-left justify-between items-center hover:bg-secondary duration-300 cursor-pointer py-3 px-6',
          isActive ? 'bg-secondary' : '',
        )}
        onClick={toggleAccordion}
      >
        <div style={{ maxWidth: '90%' }}>{question}</div>
        {loaded && (
          <TriangleOutlinedSVG
            className={classNames(
              'h-3 fill-current transform outline-none cursor-pointer duration-300',
              isActive ? 'rotate-90' : '',
              isExcited ? 'text-primary' : 'text-transparent',
            )}
          />
        )}
      </button>
      <div
        ref={content}
        style={{
          height: height,
        }}
        className={classNames('accordion-content overflow-hidden')}
      >
        <div className="w-full px-4 pt-4 text-lg text-left ease-in-out tablet:text-xl">
          <RichBody body={answer} />
        </div>
      </div>
    </div>
  );
}

export function SideMenuRow({ item, isActive }: SideMenuRowProps) {
  const { isMobile, isTablet, isDesktop, isHuge } = useContext(ScreenContext);
  const isCollapsible = isTablet || isMobile;
  const dispatch = useDispatch();

  const handleOnClick = () => {
    dispatch(collapseSideMenu());
  };

  const ref = useRef(null);
  const isHovering = useHoverDirty(ref);
  const isExcited = !isCollapsible && (isActive || isHovering);

  const inner = (
    <div
      ref={ref}
      onClick={handleOnClick}
      style={{
        maxHeight: '5rem',
        padding:
          isMobile || isTablet
            ? `0 ${UI.PAGE_CONTAINED_PADDING_VW}vw`
            : 'unset',
      }}
      className={classNames(
        'flex flex-1 space-x-6 justify-between text-primary items-center cursor-pointer border-b border-black py-4 hover:bg-secondary duration-300 whitespace-nowrap',
        isHuge ? 'text-2xl' : isDesktop ? 'text-xl' : 'text-xl',
        isActive ? 'bg-secondary' : 'bg-transparent',
        item.shouldHide ? 'hidden' : '',
      )}
    >
      <span className="pl-6 whitespace-no-wrap">{item.label}</span>

      {!isMobile && !isTablet && (
        <TriangleOutlinedSVG
          className={classNames(
            'h-4 pr-6 duration-300 fill-current transform',
            isExcited ? 'text-primary scale-y-75' : 'text-transparent',
          )}
        />
      )}
    </div>
  );

  return item.isExternal ? (
    <a href={item.href}>{inner}</a>
  ) : (
    <Link href={item.href}>{inner}</Link>
  );
}