Merge pull request #76 from Cristian006/develop

v2.1.4

Author: Cristian006

README.md

@@ -52,6 +52,30 @@ import TitleBar from 'frameless-titlebar'
 const currentWindow = remote.getCurrentWindow();
 
 const Example = () => {
+  // manage window state, default to currentWindow maximized state
+  const [maximized, setMaximized] = useState(currentWindow.isMaximized());
+  // add window listeners for currentWindow
+  useEffect(() => {
+    const onMaximized = () => setMaximized(true);
+    const onRestore = () => setMaximized(false);
+    currentWindow.on("maximize", onMaximized);
+    currentWindow.on("unmaximize", onRestore);
+    return () => {
+      currentWindow.removeListener("maximize", onMaximized);
+      currentWindow.removeListener("unmaximize", onRestore);
+    }
+  }, []);
+
+  // used by double click on the titlebar
+  // and by the maximize control button
+  const handleMaximize = () => {
+    if (maximized) {
+      currentWindow.restore();
+    } else {
+      currentWindow.maximize();
+    }
+  }
+
   return (
     <div>
       <TitleBar
@@ -66,9 +90,15 @@ const Example = () => {
         title="frameless app"
         onClose={() => currentWindow.close()}
         onMinimize={() => currentWindow.minimize()}
-        onMaximize={() => currentWindow.maximize()}
+        onMaximize={handleMaximize}
         // when the titlebar is double clicked
-        onDoubleClick={() => currentWindow.maximize()}
+        onDoubleClick={handleMaximize}
+        // hide minimize windows control
+        disableMinimize={false}
+        // hide maximize windows control
+        disableMaximize={false}
+        // is the current window maximized?
+        maximized={maximized}
       >
         {/* custom titlebar items */}
       </TitleBar>

example/src/App.js

@@ -67,6 +67,16 @@ const selections = [
     label: 'Show Custom Titlebar Button',
     type: 'toggle'
   },
+  {
+    option: 'disableMinimize',
+    label: 'Disable Minimize Button',
+    type: 'toggle',
+  },
+  {
+    option: 'disableMaximize',
+    label: 'Disable Maximize Button',
+    type: 'toggle',
+  }
 ]
 
 const useStyles = makeStyles((theme) => ({
@@ -87,10 +97,13 @@ const App = ({ theme, setPalette }) => {
     platform: 'win32',
     menuStyle: 'default',
     align: 'center',
+    maximized: false,
     subLabels: true,
     showIcon: true,
     showTitle: true,
-    showCustom: true
+    showCustom: true,
+    disableMinimize: false,
+    disableMaximize: false,
   })
 
   const currentTheme = {
@@ -174,9 +187,12 @@ const App = ({ theme, setPalette }) => {
         )}
         platform={state.platform}
         title={state.showTitle && 'example-app'}
+        disableMaximize={state.disableMaximize}
+        disableMinimize={state.disableMinimize}
+        maximized={state.maximized}
         onClose={() => { enqueueSnackbar('close clicked', { variant: 'error' }) }}
         onMinimize={() => { enqueueSnackbar('minimized clicked', { variant: 'success' }) }}
-        onMaximize={() => { enqueueSnackbar('maximized clicked', { variant: 'success' }) }}
+        onMaximize={() => { enqueueSnackbar(`window ${state.maximized ? 'maximized' : 'restored'}`, { variant: 'success' }); setState({ ...state, maximized: !state.maximized }); }}
         onDoubleClick={() => { enqueueSnackbar('double clicked', { variant: 'success' }) }}
       >
         {state.showCustom && (
@@ -188,7 +204,7 @@ const App = ({ theme, setPalette }) => {
           <Typography variant='h6' className={classes.title}>
             Frameless Titlebar
             <Typography style={{ marginLeft: 12, fontWeight: 'bolder' }} component='span' variant='h6' color='secondary'>
-              v2.1.3 <span role='img'>🥳</span>
+              v2.1.4 <span role='img'>🥳</span>
             </Typography>
           </Typography>
           <Tooltip title='Toggle Dark/Light Mode' >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frameless-titlebar",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Customizable titlebar for frameless Electron desktop applications",
   "author": "Cristian006",
   "license": "MIT",
@@ -51,4 +51,4 @@
     "rollup-plugin-url": "^2.1.0",
     "typescript": "^3.2.4"
   }
-}
+}

src/title-bar/effects/useAccessibility.tsx

@@ -34,7 +34,6 @@ const useAccessibility = (
 
   const callback = useCallback(e => {
     if (e.altKey) {
-      e.preventDefault();
       if (!altKey) {
         dispatch({
           type: 'alt',
@@ -45,6 +44,8 @@ const useAccessibility = (
       if (e.keyCode !== 18) {
         let firstIndex = menu!.findIndex(x => (!x.disabled && altKeyCodeMatch(e, x.label)));
         if (firstIndex >= 0) {
+          // only prevent default when alt key code match is found
+          e.preventDefault();
           const maxIndex = Math.min(firstIndex, overflow && overflow.hide ? menu.length - 1 : menu.length)
           dispatch({
             type: 'button-set',

src/title-bar/index.tsx

@@ -24,6 +24,7 @@ const TitleBar = ({
   icon,
   iconSrc,
   title,
+  maximized,
   currentWindow
 }: TitleBarProps) => {
   const focused = useWindowFocus();
@@ -46,6 +47,7 @@ const TitleBar = ({
               focused={focused}
               disableMaximize={disableMaximize}
               disableMinimize={disableMinimize}
+              maximized={maximized}
               onMinimize={onMinimize}
               onMaximize={onMaximize}
               onClose={onClose}
@@ -77,6 +79,7 @@ const TitleBar = ({
               focused={focused}
               disableMaximize={disableMaximize}
               disableMinimize={disableMinimize}
+              maximized={maximized}
               onMinimize={onMinimize}
               onMaximize={onMaximize}
               onClose={onClose}

src/title-bar/menu-bar/menu-button.tsx

@@ -55,7 +55,7 @@ const MenuButton = ({
     if (!item.disabled) {
       dispatch({ type: 'button-set', depth, selected: idx });
     }
-  }, [idx]);
+  }, [idx, item.disabled]);
 
   const onHover = useCallback((hovering: boolean) => {
     if (currentSelected(selectedPath, depth) >= 0 && hovering) {

src/title-bar/typings/index.ts

@@ -21,6 +21,7 @@ export interface ControlProps {
   onClose?: () => void;
   disableMaximize?: boolean;
   disableMinimize?: boolean;
+  maximized?: boolean;
 }
 
 export interface WindowControlsProps extends ControlProps {

src/title-bar/window-controls/index.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import styles from '../style.css';
-import { MinimizeIcon, MaximizeIcon, CloseIcon } from './icons';
+import { MinimizeIcon, MaximizeIcon, CloseIcon, RestoreIcon } from './icons';
 import { ThemeContext } from '../theme';
 import WindowButton from './button';
 import { WindowControlsProps, ControlsTheme } from '../typings';
 
-const buttons = (isWin: boolean, onMinimize: () => void, onMaximize: () => void, onClose: () => void) => ([
+const buttons = (isWin: boolean, maximized: boolean, onMinimize: () => void, onMaximize: () => void, onClose: () => void) => ([
   {
     type: 'minimize',
     onClick: onMinimize,
@@ -15,19 +15,22 @@ const buttons = (isWin: boolean, onMinimize: () => void, onMaximize: () => void,
   {
     type: 'maximize',
     onClick: onMaximize,
-    icon: <MaximizeIcon isWin={isWin} />
+    icon: maximized ? <RestoreIcon isWin={isWin} /> : <MaximizeIcon isWin={isWin} />
   },
   {
     type: 'close',
     onClick: onClose,
     icon: <CloseIcon isWin={isWin} />
   }
-])
+]);
 
 const WindowControls = ({
   onMinimize,
   onMaximize,
   onClose,
+  maximized,
+  disableMinimize,
+  disableMaximize,
   focused
 }: WindowControlsProps) => {
   const {
@@ -36,7 +39,8 @@ const WindowControls = ({
     controls
   } = useContext(ThemeContext);
   const isWin = platform === 'win32';
-  const width = platform === 'win32' ? '146px' : '120px';
+  const itemWidth = isWin ? 48 : 40;
+  const width = itemWidth * (3 - (disableMaximize ? 1 : 0) - (disableMinimize ? 1 : 0));
   return (
     <div
       className={styles.ControlsWrapper}
@@ -46,19 +50,21 @@ const WindowControls = ({
       }}
     >
       {
-        buttons(isWin, onMinimize!, onMaximize!, onClose!).map((b) => {
-          return (
-            <WindowButton
-              key={b.type}
-              platform={platform}
-              close={b.type === 'close'}
-              onClick={b.onClick}
-              controls={controls as Required<ControlsTheme>}
-            >
-              {b.icon}
-            </WindowButton>
-          )
-        })
+        buttons(isWin, maximized ?? false, onMinimize!, onMaximize!, onClose!)
+          .filter(x => !(disableMaximize && x.type == 'maximize' || disableMinimize && x.type == 'minimize'))
+          .map((b) => {
+            return (
+              <WindowButton
+                key={b.type}
+                platform={platform}
+                close={b.type === 'close'}
+                onClick={b.onClick}
+                controls={controls as Required<ControlsTheme>}
+              >
+                {b.icon}
+              </WindowButton>
+            )
+          })
       }
     </div>
   );