Removed Context API

* Fixed change check state bug for checkbox menu items * Moved away from ReactContext API, passes theme object via props
Cristian006 · Jan 25, 2019 · fac31f6 · fac31f6
1 parent e20f10f
commit fac31f6
Show file tree

Hide file tree

Showing 11 changed files with 61 additions and 95 deletions.
diff --git a/src/TitleBar/MenuBar/MenuButton/index.js b/src/TitleBar/MenuBar/MenuButton/index.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import css from './styles.css';
-import ThemeContext from '../../Theme';
 
 const styles = {
   Wrapper: {
@@ -48,10 +47,10 @@ export default class MenuButton extends Component {
       open,
       enabled,
       hovering,
-      rectRef
+      rectRef,
+      theme
     } = this.props;
 
-    let theme = this.context;
     let backgroundColor = open ? theme.menuBackgroundColor : ((hovering && enabled) ? theme.menuItemHoverBackground : 'transparent');
     let borderColor = open ? theme.menuBackgroundColor : '';
     let color = open ? theme.menuActiveTextColor : theme.menuItemTextColor;
@@ -119,8 +118,6 @@ MenuButton.propTypes = {
   rectRef: PropTypes.func
 };
 
-MenuButton.contextType = ThemeContext;
-
 MenuButton.defaultProps = {
   open: false,
   closed: false,

diff --git a/src/TitleBar/MenuBar/MenuList/MenuItem/index.js b/src/TitleBar/MenuBar/MenuList/MenuItem/index.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { remote } from 'electron';
 import css from './styles.css';
-import ThemeContext from '../../../Theme';
 
 const checked = <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z" /></svg>;
 const unchecked = <span />;
@@ -94,7 +93,7 @@ class MenuItem extends Component {
       menuItem,
       changeCheckState,
       path,
-      indx
+      indx,
     } = this.props;
 
     if (menuItem.enabled === false) {
@@ -137,15 +136,14 @@ class MenuItem extends Component {
   render() {
     const {
       children,
-      menuItem
+      menuItem,
+      theme
     } = this.props;
 
     const {
       hovering
     } = this.state;
 
-    const theme = this.context;
-
     const isSubMenu = (menuItem.type && menuItem.type.toLowerCase() === 'submenu');
 
     if (menuItem.visible === false) {
@@ -261,6 +259,4 @@ MenuItem.defaultProps = {
   changeCheckState: () => {}
 };
 
-MenuItem.contextType = ThemeContext;
-
 export default MenuItem;
diff --git a/src/TitleBar/MenuBar/MenuList/SubMenu/index.js b/src/TitleBar/MenuBar/MenuList/SubMenu/index.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '../MenuItem';
 import { defaultMenuItem } from '../../../utils';
-import ThemeContext from '../../../Theme';
 
 export const SubMenuLabelStyle = {
   height: '20px',
@@ -32,7 +31,7 @@ class SubMenu extends Component {
   }
 
   _generateMenu(menu = []) {
-    const theme = this.context;
+    const { theme } = this.props;
     return menu.map((menuItem, i) => {
       if (menuItem.submenu) {
         // create submenu item
@@ -60,6 +59,7 @@ class SubMenu extends Component {
             key={`${i}${menuItem.label}`}
             level={this.props.level + 1}
             right={right}
+            theme={theme}
             renderSide={renderSide}
             menuRef={this.props.menuRef}
             changeCheckState={this.props.changeCheckState}
@@ -71,10 +71,11 @@ class SubMenu extends Component {
 
       return (
         <MenuItem
+          indx={i}
           key={`${i}${menuItem.label}`}
+          theme={theme}
           changeCheckState={this.props.changeCheckState}
           menuItem={{ ...defaultMenuItem, ...menuItem }}
-          indx={i}
           menuRef={this.props.menuRef}
           path={[...this.props.path]}
         />
@@ -86,14 +87,14 @@ class SubMenu extends Component {
     const {
       menuItem,
       level,
-      renderSide
+      renderSide,
+      theme
     } = this.props;
 
-    const theme = this.context;
-
     return (
       <MenuItem
         menu={this.props.menu}
+        theme={theme}
         menuItem={{ ...defaultMenuItem, ...menuItem }}
       >
         <div
@@ -142,6 +143,4 @@ SubMenu.defaultProps = {
   changeCheckState: () => {}
 };
 
-SubMenu.contextType = ThemeContext;
-
 export default SubMenu;
diff --git a/src/TitleBar/MenuBar/MenuList/index.js b/src/TitleBar/MenuBar/MenuList/index.js
@@ -4,7 +4,6 @@ import MenuItem from './MenuItem';
 import SubMenu, { SubMenuLabelStyle } from './SubMenu';
 import { defaultMenuItem } from '../../utils';
 import css from './styles.css';
-import ThemeContext from '../../Theme';
 
 const styles = {
   Wrapper: {
@@ -36,7 +35,7 @@ class MenuList extends Component {
   }
 
   _generateMenu(menu = []) {
-    const theme = this.context;
+    const { theme } = this.props;
     return menu.map((menuItem, i) => {
       if (menuItem.submenu || (menuItem.type && menuItem.type.toLowerCase() === 'submenu')) {
         const menuWidth = this.props.rect.left + theme.menuWidth;
@@ -57,6 +56,7 @@ class MenuList extends Component {
             level={1}
             right={right}
             renderSide={renderSide}
+            theme={theme}
             menuRef={this.props.menuRef}
             changeCheckState={this.props.changeCheckState}
             menuItem={{ ...defaultMenuItem, ...menuItem, type: 'submenu' }}
@@ -70,6 +70,7 @@ class MenuList extends Component {
           menuItem={{ ...defaultMenuItem, ...menuItem }}
           changeCheckState={this.props.changeCheckState}
           menuRef={this.props.menuRef}
+          theme={theme}
           indx={i}
           path={this.props.vertical ? [...this.props.path] : [...this.props.path, 'submenu']}
         />
@@ -80,11 +81,10 @@ class MenuList extends Component {
   render() {
     const {
       submenu,
-      rect
+      rect,
+      theme
     } = this.props;
 
-    const theme = this.context;
-
     return (
       <div
         style={{
@@ -161,6 +161,4 @@ MenuList.defaultProps = {
   changeCheckState: () => {}
 };
 
-MenuList.contextType = ThemeContext;
-
 export default MenuList;
diff --git a/src/TitleBar/MenuBar/index.js b/src/TitleBar/MenuBar/index.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import MenuButton from './MenuButton';
 import MenuList from './MenuList';
 import { reduxSet, getProperty } from '../utils';
-import ThemeContext from '../Theme';
 import { buildMenu, getMenuItemPathById } from './utils';
 
 const menuIcon = (
@@ -116,7 +115,7 @@ class MenuBar extends Component {
   // checked: new state
   _changeCheckState(path, itemIndx, checked, isRadio = false) {
     if (!isRadio) {
-      this.changeKeyByPath([...path, itemIndx], 'checked', checked);
+      this._setKeyByPath([...path, itemIndx], 'checked', checked);
     } else {
       let newState = { ...this.state };
       getProperty(path, this.state).forEach((menuItem, indx) => {
@@ -179,12 +178,14 @@ class MenuBar extends Component {
           closed={!this.state.clicked || i !== this.state.focusing}
           enabled={menuItem.enabled}
           label={menuItem.label}
+          theme={this.props.theme}
         >
           {
             (this.state.clicked && i === this.state.focusing) &&
               <MenuList
-                changeCheckState={this._changeCheckState}
                 menuRef={this}
+                changeCheckState={this._changeCheckState}
+                theme={this.props.theme}
                 rect={this.menuItems[i].getBoundingClientRect()}
                 submenu={menuItem.submenu}
                 mainIndex={i}
@@ -224,6 +225,7 @@ class MenuBar extends Component {
         onFocus={() => {
           // idk - linting says it needs it? it has no purpose for me
         }}
+        theme={this.props.theme}
         rectRef={(ref) => this._setMenuRef(ref, 0)}
         hovering={this.state.hovering === 0}
         open={this.state.clicked && this.state.focusing === 0}
@@ -234,9 +236,10 @@ class MenuBar extends Component {
         {
           (this.state.clicked && this.state.focusing === 0) &&
             <MenuList
-              changeCheckState={this._changeCheckState}
               menuRef={this}
+              changeCheckState={this._changeCheckState}
               rect={this.menuItems[0].getBoundingClientRect()}
+              theme={this.props.theme}
               submenu={menuList}
               path={['menu']}
               vertical
@@ -247,7 +250,7 @@ class MenuBar extends Component {
   }
 
   render() {
-    let theme = this.context;
+    let { theme } = this.props;
     let color = theme.menuItemTextColor || theme.barColor;
     return (
       <div style={{ ...styles.Wrapper, color }}>
@@ -265,6 +268,4 @@ MenuBar.defaultProps = {
   menu: []
 };
 
-MenuBar.contextType = ThemeContext;
-
 export default MenuBar;
diff --git a/src/TitleBar/Theme/index.js b/src/TitleBar/Theme/index.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 export const darkTheme = {
   /* Title */
   barTheme: 'dark', // light, dark
@@ -64,22 +62,3 @@ export const lightTheme = {
   windowDefaultBackground: 'rgba(0, 0, 0, 0.1)',
   windowDefaultActive: 'rgba(0, 0, 0, 0.2)'
 };
-
-const ThemeContext = React.createContext(darkTheme);
-
-const ThemeConsumer = ThemeContext.Consumer;
-
-export const ThemeProvider = ThemeContext.Provider;
-
-export const withTheme = (Component) => {
-  const WithTheme = React.forwardRef((props, ref) => (
-    <ThemeConsumer>
-      {(theme) => {
-        return <Component {...props} theme={theme} ref={ref} />;
-      }}
-    </ThemeConsumer>
-  ));
-  return WithTheme;
-};
-
-export default ThemeContext;
diff --git a/src/TitleBar/WindowControls/index.js b/src/TitleBar/WindowControls/index.js
@@ -53,7 +53,8 @@ export default class WindowControls extends Component {
   render() {
     const {
       disableMaximize,
-      disableMinimize
+      disableMinimize,
+      theme
     } = this.props;
 
     const {
@@ -63,6 +64,7 @@ export default class WindowControls extends Component {
     return (
       <div style={styles.Controls}>
         <Button
+          theme={theme}
           key="min-button"
           ariaLabel="minimize"
           tabIndex="-1"
@@ -81,6 +83,7 @@ export default class WindowControls extends Component {
           </svg>
         </Button>
         <Button
+          theme={theme}
           key="max-button"
           ariaLabel="maximize"
           tabIndex="-1"
@@ -112,6 +115,7 @@ export default class WindowControls extends Component {
           }
         </Button>
         <Button
+          theme={theme}
           key="close-button"
           aria-label="close"
           tabIndex="-1"

diff --git a/src/TitleBar/components/Bar.js b/src/TitleBar/components/Bar.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import electron from 'electron';
-import ThemeContext from '../Theme';
 
 const styles = {
   Bar: {
@@ -32,9 +31,8 @@ class Bar extends React.Component {
   }
 
   render() {
-    let props = this.props;
-    let theme = this.context;
-    let height = props.isWin ? theme.winBarHeight : theme.barHeight;
+    const { theme, children, isWin } = this.props;
+    let height = isWin ? theme.winBarHeight : theme.barHeight;
     let backgroundColor = theme.barBackgroundColor;
     let color = theme.barColor;
     let borderBottom = theme.barShowBorder ? theme.barBorderBottom : '';
@@ -44,14 +42,12 @@ class Bar extends React.Component {
         style={{ ...styles.Bar, height, backgroundColor, color, borderBottom }}
         onDoubleClick={this.handleDoubleClick}
       >
-        {props.children}
+        {children}
       </div>
     );
   }
 }
 
-Bar.contextType = ThemeContext;
-
 Bar.defaultProps = {
   isWin: false
 }

diff --git a/src/TitleBar/components/Button/index.js b/src/TitleBar/components/Button/index.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import ThemeContext from '../../Theme';
 import styles from './styles.css';
 
 class Button extends Component {
@@ -29,7 +28,8 @@ class Button extends Component {
       tabIndex,
       disabled,
       close,
-      onClick
+      onClick,
+      theme
     } = this.props;
 
     const {
@@ -40,15 +40,15 @@ class Button extends Component {
     let backgroundColor = 'transparent';
     let opacity = 0.5;
     let transition = 'background-color 0.25s ease';
-    let color = this.context.windowControlsColor;
+    let color = theme.windowControlsColor;
     if (hovering) {
       opacity = 1;
-      color = close ? this.context.windowCloseHover : color;
-      backgroundColor = close ? this.context.windowCloseBackground : this.context.windowDefaultBackground;
+      color = close ? theme.windowCloseHover : color;
+      backgroundColor = close ? theme.windowCloseBackground : theme.windowDefaultBackground;
     } else if (focused) {
       opacity = 1;
-      color = close ? this.context.windowCloseHover : color;
-      backgroundColor = close ? this.context.windowCloseActive : this.context.windowDefaultActive;
+      color = close ? theme.windowCloseHover : color;
+      backgroundColor = close ? theme.windowCloseActive : theme.windowDefaultActive;
       transition = 'none';
     }
 
@@ -71,6 +71,4 @@ class Button extends Component {
   }
 }
 
-Button.contextType = ThemeContext;
-
 export default Button;