react-use#useMedia TypeScript Examples

useMediaRange = (main = false, ignoreWidth = defaultIgnoreWidth) => {
  const extraWidth = main ? ignoreWidth : 0;

  const largeThanXs = useMedia(`(min-width: ${ScreenSize.xs + extraWidth}px)`);
  const largeThanSm = useMedia(`(min-width: ${ScreenSize.sm + extraWidth}px)`);
  const largeThanMd = useMedia(`(min-width: ${ScreenSize.md + extraWidth}px)`);
  const largeThanLg = useMedia(`(min-width: ${ScreenSize.lg + extraWidth}px)`);
  const largeThanXl = useMedia(`(min-width: ${ScreenSize.xl + extraWidth}px)`);
  return [largeThanXs, largeThanSm, largeThanMd, largeThanLg, largeThanXl];
}

useMediaSize = () => {
  const largeThan600 = useMedia(`(min-width: ${600 + defaultIgnoreWidth}px)`);
  const largeThan1024 = useMedia(`(min-width: ${1024 + defaultIgnoreWidth}px)`);
  const largeThan1440 = useMedia(`(min-width: ${1440 + defaultIgnoreWidth}px)`);
  return [largeThan600, largeThan1024, largeThan1440];
}

useMediaGt = (num: number, main = false, ignoreWidth = defaultIgnoreWidth) =>
  useMedia(`(min-width: ${num + (main ? ignoreWidth : 0)}px)`)

useMediaLt = (num: number, main = false, ignoreWidth = defaultIgnoreWidth) =>
  useMedia(`(max-width: ${num + (main ? ignoreWidth : 0)}px)`)

FloodApp: FC = observer(() => {
  useEffect(() => {
    UIStore.registerDependency([
      {
        id: 'notifications',
        message: {id: 'dependency.loading.notifications'},
      },
    ]);

    UIStore.registerDependency([
      {
        id: 'torrent-taxonomy',
        message: {id: 'dependency.loading.torrent.taxonomy'},
      },
    ]);

    UIStore.registerDependency([
      {
        id: 'transfer-data',
        message: {id: 'dependency.loading.transfer.rate.details'},
      },
      {
        id: 'transfer-history',
        message: {id: 'dependency.loading.transfer.history'},
      },
    ]);

    UIStore.registerDependency([
      {
        id: 'torrent-list',
        message: {id: 'dependency.loading.torrent.list'},
      },
    ]);
  }, []);

  const isSystemPreferDark = useMedia('(prefers-color-scheme: dark)');
  useEffect(() => {
    ConfigStore.setSystemPreferDark(isSystemPreferDark);
  }, [isSystemPreferDark]);

  // max-width here must sync with CSS
  const isSmallScreen = useMedia('(max-width: 720px)');
  useEffect(() => {
    ConfigStore.setSmallScreen(isSmallScreen);
  }, [isSmallScreen]);

  return (
    <Suspense fallback={<LoadingOverlay />}>
      <AsyncIntlProvider>
        <BrowserRouter basename={stringUtil.withoutTrailingSlash(ConfigStore.baseURI)}>
          <AppWrapper className={ConfigStore.isPreferDark ? 'dark' : undefined}>
            <Routes>
              <Route path="/login" element={<Login />} />
              <Route path="/overview" element={<Overview />} />
              <Route path="/register" element={<Register />} />
            </Routes>
          </AppWrapper>
        </BrowserRouter>
      </AsyncIntlProvider>
    </Suspense>
  );
})

TimePickerContent: React.FC<Props> = props => {
  const theme = useTheme();
  const isFullscreen = useMedia(`(min-width: ${theme.breakpoints.lg})`);

  return <TimePickerContentWithScreenSize {...props} isFullscreen={isFullscreen} />;
}

Navbar: FC<INavbarProps> = ({ onMobileMenuClick, navPrefix, location }) => {
  const {
    base,
    config: { mode, title, logo },
    nav: navItems,
  } = useContext(context);

  const isWide = useMedia('(min-width: 767.99px)', true);

  const [productMenuVisible, setProductMenuVisible] = React.useState(false);
  let productMenuHovering = false;
  const onProductMouseEnter = (e: React.MouseEvent) => {
    productMenuHovering = true;
    e.persist();
    setTimeout(() => {
      // eslint-disable-next-line no-undef
      if (e.target instanceof Element && e.target.matches(':hover')) {
        setProductMenuVisible(true);
      }
    }, 200);
  };
  const onProductMouseLeave = (e: React.MouseEvent) => {
    e.persist();
    productMenuHovering = false;
    setTimeout(() => {
      if (productMenuHovering) {
        return;
      }
      setProductMenuVisible(false);
    }, 200);
  };
  const onToggleProductMenuVisible = () => {
    setProductMenuVisible(!productMenuVisible);
  };

  const productItemProps = isWide
    ? {
        onMouseEnter: onProductMouseEnter,
        onMouseLeave: onProductMouseLeave,
      }
    : {
        onClick: onToggleProductMenuVisible,
      };

  return (
    <div className="__dumi-default-navbar" data-mode={mode}>
      {/* menu toogle button (only for mobile) */}
      <button className="__dumi-default-navbar-toggle" onClick={onMobileMenuClick} />
      {/* logo & title */}
      <Link
        className="__dumi-default-navbar-logo"
        style={{
          background: 'none',
          height: '28px',
          lineHeight: '28px',
          paddingLeft: '0px',
        }}
        to={base}
        data-plaintext={logo === false || undefined}
      >
        <Logo style={{ height: '28px', lineHeight: '28px' }} />
        <span
          style={{
            fontSize: '16px',
            width: '1px',
            height: '24px',
            backgroundColor: '#ccc',
            display: ' inline-block',
            margin: '0 20px',
          }}
        />
        <span style={{ fontSize: '16px', color: '#0d1a26', display: 'inline-block', verticalAlign: 'top' }}>
          {title}
        </span>
      </Link>

      <nav>
        {navPrefix}
        {/* nav */}
        {navItems.map(nav => {
          const child = Boolean(nav.children?.length) && (
            <ul>
              {nav.children.map(item => (
                <li key={item.path}>
                  <NavLink to={item.path}>{item.title}</NavLink>
                </li>
              ))}
            </ul>
          );

          return (
            <span key={nav.title || nav.path}>
              {nav.path ? (
                <NavLink to={nav.path} key={nav.path}>
                  {nav.title}
                </NavLink>
              ) : (
                nav.title
              )}
              {child}
            </span>
          );
        })}
        <span {...productItemProps}>
          所有产品
          <img
            src="https://gw.alipayobjects.com/zos/antfincdn/FLrTNDvlna/antv.png"
            alt="antv logo arrow"
            className={`arrow ${productMenuVisible && 'open'}`}
          />
          <div
            style={{
              position: 'fixed',
              top: ' 0px',
              left: '0px',
              width: ' 100%',
              right: '0px',
            }}
          >
            <Products show={productMenuVisible} rootDomain="ant.vison" language="zh" />
          </div>
        </span>
        <LocaleSelect location={location} />
      </nav>
    </div>
  );
}