react#TransitionEvent TypeScript Examples

The following examples show how to use react#TransitionEvent. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From documentation with MIT License 4 votes vote down vote up 
DocPageContent = (props: DocPageContentProps) => {
  const { currentDocRoute, versionMetadata, children, sidebarName } = props;
  const { siteConfig } = useDocusaurusContext();
  const { pluginId, version } = versionMetadata;
  const sidebar = useDocsSidebar();

  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
  const [hiddenSidebar, setHiddenSidebar] = useState(false);

  const toggleSidebar = useCallback(() => {
    if (hiddenSidebar) {
      setHiddenSidebar(false);
    }

    setHiddenSidebarContainer(!hiddenSidebarContainer);
  }, [hiddenSidebar]);

  const handleTransitionEnd = useCallback(
    (event: TransitionEvent<HTMLDivElement>) => {
      if (!event.currentTarget.classList.contains(styles.docSidebarContainer)) {
        return;
      }

      if (hiddenSidebarContainer) {
        setHiddenSidebar(true);
      }
    },
    [hiddenSidebarContainer, setHiddenSidebar]
  );

  return (
    <Layout
      wrapperClassName="main-docs-wrapper"
      searchMetadata={{
        version,
        tag: docVersionSearchTag(pluginId, version),
      }}>
      <div className={styles.docPage}>
        <BackToTopButton />

        {/* Sidebar */}
        {sidebar && (
          <aside
            className={clsx(styles.docSidebarContainer, {
              [styles.docSidebarContainerHidden]: hiddenSidebarContainer,
            })}
            onTransitionEnd={handleTransitionEnd}
            role="complementary">
            <DocSidebar
              key={
                // Reset sidebar state on sidebar changes
                // See https://github.com/facebook/docusaurus/issues/3414
                sidebarName
              }
              sidebar={sidebar}
              path={currentDocRoute.path}
              sidebarCollapsible={
                siteConfig.themeConfig?.sidebarCollapsible ?? true
              }
              onCollapse={toggleSidebar}
              isHidden={hiddenSidebar}
            />

            {hiddenSidebar && (
              <div
                className={styles.collapsedDocSidebar}
                title={translate({
                  id: 'theme.docs.sidebar.expandButtonTitle',
                  message: 'Expand sidebar',
                  description:
                    'The ARIA label and title attribute for expand button of doc sidebar',
                })}
                aria-label={translate({
                  id: 'theme.docs.sidebar.expandButtonAriaLabel',
                  message: 'Expand sidebar',
                  description:
                    'The ARIA label and title attribute for expand button of doc sidebar',
                })}
                tabIndex={0}
                role="button"
                onKeyDown={toggleSidebar}
                onClick={toggleSidebar}>
                <IconArrow className={styles.expandSidebarButtonIcon} />
              </div>
            )}
          </aside>
        )}

        {/* Doc Content */}
        <main
          className={clsx(styles.docMainContainer, {
            [styles.docMainContainerEnhanced]: hiddenSidebarContainer,
          })}>
          <div
            className={clsx(
              'padding-vert--lg',
              'container',
              styles.docItemWrapper,
              {
                [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
              }
            )}>
            <MDXProvider components={MDXComponents}>{children}</MDXProvider>
          </div>
        </main>
      </div>
    </Layout>
  );
}
Example #2
Source File: index.tsx    From questdb.io with Apache License 2.0 4 votes vote down vote up 
DocPage = ({
  location,
  route: { routes },
  versionMetadata,
  ...rest
}: Props) => {
  const { siteConfig, isClient } = useDocusaurusContext()
  const { permalinkToSidebar, docsSidebars } = versionMetadata ?? {}
  const docRoutes = (routes as unknown) as Routes[]
  const currentDocRoute = routes.find((docRoute) =>
    matchPath(location.pathname, docRoute),
  )

  const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false)
  const [hiddenSidebar, setHiddenSidebar] = useState(false)
  const toggleSidebar = useCallback(() => {
    if (hiddenSidebar) {
      setHiddenSidebar(false)
    }

    setHiddenSidebarContainer(!hiddenSidebarContainer)

    if (
      !hiddenSidebar &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    ) {
      setHiddenSidebar(true)
    }
  }, [
    hiddenSidebar,
    hiddenSidebarContainer,
    setHiddenSidebar,
    setHiddenSidebarContainer,
  ])

  const handleTransitionEnd = useCallback(
    (event: TransitionEvent<HTMLDivElement>) => {
      if (!event.currentTarget.classList.contains(styles.docSidebarContainer)) {
        return
      }

      if (hiddenSidebarContainer) {
        setHiddenSidebar(true)
      }
    },
    [hiddenSidebarContainer, setHiddenSidebar],
  )

  if (currentDocRoute == null) {
    return <NotFound location={location} {...rest} />
  }

  const sidebarName = permalinkToSidebar[currentDocRoute.path] as
    | string
    | undefined
  const sidebar = sidebarName != null ? docsSidebars[sidebarName] : []

  return (
    <Layout
      description={customFields.description}
      key={isClient.toString()}
      title="Introduction"
    >
      <div className={styles.doc}>
        {sidebarName != null && (
          <div
            className={clsx(styles.doc__sidebar, {
              [styles["doc__sidebar--hidden"]]: hiddenSidebarContainer,
            })}
            onTransitionEnd={handleTransitionEnd}
            role="complementary"
          >
            <DocSidebar
              key={
                // Reset sidebar state on sidebar changes
                // See https://github.com/facebook/docusaurus/issues/3414
                sidebarName
              }
              sidebar={sidebar}
              path={currentDocRoute.path}
              sidebarCollapsible={
                siteConfig.themeConfig?.sidebarCollapsible ?? true
              }
              onCollapse={toggleSidebar}
              isHidden={hiddenSidebar}
            />

            {hiddenSidebar && (
              <div
                className={styles.doc__expand}
                title="Expand sidebar"
                aria-label="Expand sidebar"
                tabIndex={0}
                role="button"
                onKeyDown={toggleSidebar}
                onClick={toggleSidebar}
              />
            )}
          </div>
        )}

        <main className={styles.doc__main}>
          <div
            className={clsx(
              "padding-vert--lg",
              "container",
              styles["doc__item-wrapper"],
              {
                [styles["doc__item-wrapper--enhanced"]]: hiddenSidebarContainer,
              },
            )}
          >
            <MDXProvider components={MDXComponents}>
              {renderRoutes(docRoutes)}
            </MDXProvider>
          </div>
        </main>
      </div>
    </Layout>
  )
}