refactor: simplify navigation lock

2026-08-08 00:43:54 +00:00 · 2025-02-02 20:55:20 +01:00
parent c3d66f5bd1
commit 3d50b8ce49
7 changed files with 66 additions and 37 deletions
@@ -2,6 +2,7 @@ import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

 import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
+import { cx } from '../../utils/styleUtils';

 import style from './NavigationMenu.module.scss';

@@ -15,7 +16,7 @@ export default function FloatingNavigation(props: FloatingNavigationProps) {
  const isButtonShown = useFadeOutOnInactivity();

  return (
-    <div className={`${style.buttonContainer} ${!isButtonShown ? style.hidden : ''}`}>
+    <div className={cx([style.fadeable, style.buttonContainer, !isButtonShown && style.hidden])}>
      <button
        onClick={toggleMenu}
        aria-label='toggle menu'
@@ -7,24 +7,38 @@ $icon-color: $ui-white;
 $button-bg: $gray-1050;
 $button-size: 3rem;

+.fadeable {
+  opacity: 1;
+
+  transition-property: opacity;
+  transition-duration: 0.3s;
+
+  &.hidden {
+    opacity: 0;
+  }
+}
+
+.lockIcon {
+  font-size: 1.5rem;
+  color: $active-indicator;
+  padding: 0.5em;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 12;
+}
+
 .buttonContainer {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  padding: 0.5em;

-  transition-property: opacity;
-  transition-duration: 0.3s;
-
-  opacity: 1;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 12;
-
-  &.hidden {
-    opacity: 0;
-  }
 }

 .button {
@@ -38,16 +52,6 @@ $button-size: 3rem;
  border-radius: 3px;
 }

-.lockIcon {
-  font-size: 1.5rem;
-  display: grid;
-  place-content: center;
-  border-radius: 3px;
-  background-color: transparent;
-  color: $active-indicator;
-  cursor: default;
-}
-
 .navButton {
  @extend .button;
  z-index: 3;
@@ -1,6 +1,7 @@
 import { IoLockClosedOutline } from '@react-icons/all-files/io5/IoLockClosedOutline';

 import { useFadeOutOnInactivity } from '../../../common/hooks/useFadeOutOnInactivity';
+import { cx } from '../../utils/styleUtils';

 import style from './NavigationMenu.module.scss';

@@ -8,8 +9,8 @@ export default function ViewLockedIcon() {
  const isLockIconShown = useFadeOutOnInactivity();

  return (
-    <div className={`${style.buttonContainer} ${!isLockIconShown ? style.hidden : ''}`}>
-      <IoLockClosedOutline className={style.lockIcon} />
+    <div className={cx([style.fadeable, style.lockIcon, !isLockIconShown && style.hidden])}>
+      <IoLockClosedOutline />
    </div>
  );
 }
@@ -1,23 +1,20 @@
-import { memo, useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { memo } from 'react';
 import { useDisclosure } from '@chakra-ui/react';

-import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
-
 import FloatingNavigation from './FloatingNavigation';
 import NavigationMenu from './NavigationMenu';
+import useViewEditor from './useViewEditor';
 import ViewLockedIcon from './ViewLockedIcon';

-function ViewNavigationMenu() {
-  const [searchParams, setSearchParams] = useSearchParams();
+interface ViewNavigationMenuProps {
+  isLockable?: boolean;
+}
+
+function ViewNavigationMenu(props: ViewNavigationMenuProps) {
+  const { isLockable } = props;
+
  const { isOpen: isMenuOpen, onOpen: onMenuOpen, onClose: onMenuClose } = useDisclosure();
-
-  const isViewLocked = isStringBoolean(searchParams.get('locked'));
-
-  const showEditFormDrawer = useCallback(() => {
-    searchParams.set('edit', 'true');
-    setSearchParams(searchParams);
-  }, [searchParams, setSearchParams]);
+  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable });

  const toggleMenu = () => (isMenuOpen ? onMenuClose() : onMenuOpen());

@@ -0,0 +1,26 @@
+import { useCallback, useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import { isStringBoolean } from '../../../features/viewers/common/viewUtils';
+
+interface EditorVisibilityOptions {
+  isLockable?: boolean;
+}
+
+export default function useViewEditor({ isLockable }: EditorVisibilityOptions) {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const showEditFormDrawer = useCallback(() => {
+    searchParams.set('edit', 'true');
+    setSearchParams(searchParams);
+  }, [searchParams, setSearchParams]);
+
+  const isViewLocked = useMemo(() => {
+    if (!isLockable) {
+      return false;
+    }
+    return isStringBoolean(searchParams.get('locked'));
+  }, [isLockable, searchParams]);
+
+  return { showEditFormDrawer, isViewLocked };
+}
@@ -5,7 +5,7 @@ import { IoApps } from '@react-icons/all-files/io5/IoApps';
 import { IoClose } from '@react-icons/all-files/io5/IoClose';
 import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';

-import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
+import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
 import { useElectronListener } from '../../common/hooks/useElectronEvent';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
 import AppSettings from '../app-settings/AppSettings';
@@ -58,7 +58,7 @@ export default function Editor() {
    <div className={styles.mainContainer} data-testid='event-editor'>
      <WelcomePlacement />
      <Finder isOpen={isFinderOpen} onClose={onFinderClose} />
-      <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
+      <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
      <EditorOverview>
        <IconButton
          aria-label='Toggle navigation'
@@ -87,7 +87,7 @@ const withData = <P extends WithDataProps>(Component: ComponentType<P>) => {

    return (
      <>
-        <ViewNavigationMenu />
+        <ViewNavigationMenu isLockable />
        <Component
          {...props}
          auxTimer={auxtimer1}