Electron Material-ui Linear Progress Bar "mode" prop from redux store

Question

I'm trying to manage the "mode" prop on Material-UI's Linear Progress component through Redux store. The store is getting the updates properly between "determinate" and "indeterminate" thrown manually by button click on another child component.

I have the bar at the highest level of the App, specifically:

// @flow
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { ipcRenderer } from 'electron';
import { ToastContainer } from 'react-toastify';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import LinearProgress from 'material-ui/LinearProgress';
import returnFuncFromString from '../utils/returnToastFnFromStr';
import ModalRootContainer from '../components/ModalRoot';
import { Content, Pane, PaneGroup, Window } from '../vendor/photon';
import Sidebar from '../components/Sidebar';
import Footer from '../components/Footer';
import Header from '../components/Header';


ipcRenderer.on('toast', (event, func) => {
  // We can return a function that will execute
  returnFuncFromString(func);
});

// Theme passing by ThemeProvider http://www.material-ui.com/#/customization/themes

// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

class App extends Component {
  static defaultProps: Object;

  // state: {
  //   mode: string
  // }

  constructor(props) {
    super(props);
  }

  render() {
    console.log('APP: ', this.props.mode.mode);
    return (
      <div>
        <MuiThemeProvider >
          <Window>
            <Header />
            <LinearProgress mode={this.props.mode.mode} />
            <Content >
              <PaneGroup>
                <Sidebar />
                <Pane className="padded-more main-pane" >
                  {this.props.children}
                </Pane>
              </PaneGroup>
            </Content>
            <Footer />
          </Window>
        </MuiThemeProvider>
        <ModalRootContainer />
        <ToastContainer style={{ zIndex: '10000' }} />
      </div>
    );
  }
}

App.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  mode: PropTypes.object.isRequired
};

App.defaultProps = {
  children: null
};

const mapStateToProps = (state) => ({
  mode: state.isBusy
});

export default withRouter(connect(mapStateToProps)(App));

As I toggle the state I can see the store updating correctly and I get the console.log from above so I know another render() is being called and I can see the changes to the <div> between mode="(in)determinate" as shown.

The bar, however, shows no signs of animation on change. If I manually set mode="indeterminate" and remove the connection to the store it animates as expected.

Have I missed something fundamental?

Electron Material-ui Linear Progress Bar "mode" prop from redux store

0 Answers0