From 48391620c11d10ab634ecd97254c847705b2c724 Mon Sep 17 00:00:00 2001
From: Joey Payne <jyapayne@gmail.com>
Date: Tue, 17 May 2016 07:26:37 -0600
Subject: [PATCH] Fix notebook text field not focusing properly

---
 app/components/LibraryNav.jsx |  35 ++-
 app/components/TextField.jsx  | 575 ++++++++++++++++++++++++++++++++++
 app/containers/App.jsx        |   1 +
 app/store/configureStore.jsx  |   9 +-
 package.json                  |   1 +
 5 files changed, 607 insertions(+), 14 deletions(-)
 create mode 100644 app/components/TextField.jsx

diff --git a/app/components/LibraryNav.jsx b/app/components/LibraryNav.jsx
index e45c41e..37d86db 100644
--- a/app/components/LibraryNav.jsx
+++ b/app/components/LibraryNav.jsx
@@ -15,6 +15,7 @@ import Edit from 'material-ui/lib/svg-icons/editor/mode-edit'
 import Delete from 'material-ui/lib/svg-icons/action/delete'
 import Divider from 'material-ui/lib/divider'
 import SelectableList from 'SelectableList'
+import TextField from 'TextField'
 
 import uuid from 'node-uuid'
 import path from 'path-extra'
@@ -34,7 +35,6 @@ const {
     IconButton,
     MenuItem,
     Badge,
-    TextField,
     Styles,
     Paper
 } = mui
@@ -216,25 +216,35 @@ export default class LibraryNav extends React.Component {
 
     };
 
-    menuItemClicked = (i, ev) => {
+    menuItemClicked = (i, ev, callback) => {
         this.refs.notebookList.setIndex(-1)
 
         var item = this.props.navigation.menuItems[i]
         var type = 'leftClick'
         var nativeEvent = ev.nativeEvent
 
-        if(nativeEvent.button == 2){
-            //Right click
-            type = 'rightClick'
+        if(nativeEvent){
+            if(nativeEvent.button == 2){
+                //Right click
+                type = 'rightClick'
+            }
         }
 
         if (item.isNotebook){
             var notebook = utils.loadNotebookByName(item.name)
             notebook = utils.updateObject(item, notebook)
-            this.props.updateSelection(notebook)
+            this.props.updateSelection(notebook, () => {
+                if(utils.isFunction(callback)){
+                    callback(i, item, type, ev)
+                }
+            })
         }
         else if(item.glob){
-            this.props.updateSelection(item)
+            this.props.updateSelection(item, () => {
+                if(utils.isFunction(callback)){
+                    callback(i, item, type, ev)
+                }
+            })
         }
 
         // Process any callbacks attached to the menu
@@ -248,9 +258,7 @@ export default class LibraryNav extends React.Component {
     renameTapped = (i) => {
         var nbs = this.props.navigation.notebooks
         nbs[i].state = 'editing'
-        this.props.updateNotebook(nbs[i], i, () => {
-            this.refs['textField'+i].focus()
-        })
+        this.props.updateNotebook(nbs[i], i)
         this.props.closeContextMenu()
     }
 
@@ -317,7 +325,6 @@ export default class LibraryNav extends React.Component {
             this.props.updateSelection(this.props.navigation.notebooks[i])
         }
         this.refs.mainList.setIndex(-1)
-
     };
 
     preventEventProp = (ev) => {
@@ -329,6 +336,11 @@ export default class LibraryNav extends React.Component {
 
                     {this.props.navigation.notebooks.map((notebook, i) =>{
                         var l = null
+                        var selIndex = this.props.navigation.selectionIndex
+                        var focus = false
+                        if (selIndex == i){
+                            focus = true
+                        }
                         if (notebook.state == 'editing'){
                             l = <ListItem
                                     key={notebook.uuid || i}
@@ -342,6 +354,7 @@ export default class LibraryNav extends React.Component {
                                     
                                     <TextField
                                         ref={"textField"+i}
+                                        focus={focus}
                                         fullWidth={true}
                                         style={{maxWidth: 120}}
                                         hintText={notebook.title.trunc(14) || "Notebook Name"}
diff --git a/app/components/TextField.jsx b/app/components/TextField.jsx
new file mode 100644
index 0000000..189f1fa
--- /dev/null
+++ b/app/components/TextField.jsx
@@ -0,0 +1,575 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ColorManipulator from 'material-ui/lib/utils/color-manipulator';
+import StylePropable from 'material-ui/lib/mixins/style-propable';
+import Transitions from 'material-ui/lib/styles/transitions';
+import UniqueId from 'material-ui/lib/utils/unique-id';
+import EnhancedTextarea from 'material-ui/lib/enhanced-textarea';
+import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
+import ContextPure from 'material-ui/lib/mixins/context-pure';
+import TextFieldHint from 'material-ui/lib/TextField/TextFieldHint';
+import TextFieldLabel from 'material-ui/lib/TextField/TextFieldLabel';
+import TextFieldUnderline from 'material-ui/lib/TextField/TextFieldUnderline';
+import warning from 'warning';
+
+/**
+ * Check if a value is valid to be displayed inside an input.
+ *
+ * @param The value to check.
+ * @returns True if the string provided is valid, false otherwise.
+ */
+function isValid(value) {
+  return Boolean(value || value === 0);
+}
+
+const TextField = React.createClass({
+
+  propTypes: {
+    children: React.PropTypes.node,
+
+    /**
+     * The css class name of the root element.
+     */
+    className: React.PropTypes.string,
+
+    /**
+     * The text string to use for the default value.
+     */
+    defaultValue: React.PropTypes.any,
+
+    /**
+     * Disables the text field if set to true.
+     */
+    disabled: React.PropTypes.bool,
+
+    /**
+     * The style object to use to override error styles.
+     */
+    errorStyle: React.PropTypes.object,
+
+    /**
+     * The error content to display.
+     */
+    errorText: React.PropTypes.node,
+
+    /**
+     * The style object to use to override floating label styles.
+     */
+    floatingLabelStyle: React.PropTypes.object,
+
+    /**
+     * The content to use for the floating label element.
+     */
+    floatingLabelText: React.PropTypes.node,
+
+    /**
+     * If true, the field receives the property width 100%.
+     */
+    fullWidth: React.PropTypes.bool,
+
+    /**
+     * Override the inline-styles of the TextField's hint text element.
+     */
+    hintStyle: React.PropTypes.object,
+
+    /**
+     * The hint content to display.
+     */
+    hintText: React.PropTypes.node,
+
+    /**
+     * The id prop for the text field.
+     */
+    id: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the TextField's input element.
+     */
+    inputStyle: React.PropTypes.object,
+
+    /**
+     * If true, a textarea element will be rendered.
+     * The textarea also grows and shrinks according to the number of lines.
+     */
+    multiLine: React.PropTypes.bool,
+
+    /**
+     * Callback function that is fired when the textfield loses focus.
+     */
+    onBlur: React.PropTypes.func,
+
+    /**
+     * Callback function that is fired when the textfield's value changes.
+     */
+    onChange: React.PropTypes.func,
+
+    /**
+     * The function to call when the user presses the Enter key.
+     */
+    onEnterKeyDown: React.PropTypes.func,
+
+    /**
+     * Whether or not the field is focused when rendering.
+     */
+    focus: React.PropTypes.bool,
+
+    /**
+     * Callback function that is fired when the textfield gains focus.
+     */
+    onFocus: React.PropTypes.func,
+
+    /**
+     * Callback function fired when key is pressed down.
+     */
+    onKeyDown: React.PropTypes.func,
+
+    /**
+     * Number of rows to display when multiLine option is set to true.
+     */
+    rows: React.PropTypes.number,
+
+    /**
+     * Maximum number of rows to display when
+     * multiLine option is set to true.
+     */
+    rowsMax: React.PropTypes.number,
+
+    /**
+     * Override the inline-styles of the root element.
+     */
+    style: React.PropTypes.object,
+
+    /**
+     * Specifies the type of input to display
+     * such as "password" or "text".
+     */
+    type: React.PropTypes.string,
+
+    /**
+     * Override the inline-styles of the
+     * TextField's underline element when disabled.
+     */
+    underlineDisabledStyle: React.PropTypes.object,
+
+    /**
+     * Override the inline-styles of the TextField's
+     * underline element when focussed.
+     */
+    underlineFocusStyle: React.PropTypes.object,
+
+    /**
+     * If true, shows the underline for the text field.
+     */
+    underlineShow: React.PropTypes.bool,
+
+    /**
+     * Override the inline-styles of the TextField's underline element.
+     */
+    underlineStyle: React.PropTypes.object,
+
+    /**
+     * The value of the text field.
+     */
+    value: React.PropTypes.any,
+  },
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  //for passing default theme context to children
+  childContextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  mixins: [
+    ContextPure,
+    StylePropable,
+  ],
+
+  statics: {
+    getRelevantContextKeys(muiTheme) {
+      const textFieldTheme = muiTheme.textField;
+
+      return {
+        floatingLabelColor: textFieldTheme.floatingLabelColor,
+        focusColor: textFieldTheme.focusColor,
+        textColor: textFieldTheme.textColor,
+        disabledTextColor: textFieldTheme.disabledTextColor,
+        backgroundColor: textFieldTheme.backgroundColor,
+        hintColor: textFieldTheme.hintColor,
+        errorColor: textFieldTheme.errorColor,
+      };
+    },
+    getChildrenClasses() {
+      return [
+        EnhancedTextarea,
+      ];
+    },
+  },
+
+  getDefaultProps() {
+    return {
+      disabled: false,
+      multiLine: false,
+      fullWidth: false,
+      type: 'text',
+      focus: false,
+      underlineShow: true,
+      rows: 1,
+    };
+  },
+
+  getInitialState() {
+    let props = (this.props.children) ? this.props.children.props : this.props;
+
+    return {
+      isFocused: this.props.focus,
+      errorText: this.props.errorText,
+      hasValue: isValid(props.value) || isValid(props.defaultValue) ||
+        (props.valueLink && isValid(props.valueLink.value)),
+      muiTheme: this.context.muiTheme || getMuiTheme(),
+    };
+  },
+
+  getChildContext() {
+    return {
+      muiTheme: this.state.muiTheme,
+    };
+  },
+
+  componentDidMount() {
+    this._uniqueId = UniqueId.generate();
+  },
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    let newState = {};
+    newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+
+    if(typeof nextProps.focus != "undefined"){
+        newState.isFocused = nextProps.focus;
+    }
+
+    newState.errorText = nextProps.errorText;
+    if (nextProps.children && nextProps.children.props) {
+      nextProps = nextProps.children.props;
+    }
+
+    let hasValueLinkProp = nextProps.hasOwnProperty('valueLink');
+    let hasValueProp = nextProps.hasOwnProperty('value');
+    let hasNewDefaultValue = nextProps.defaultValue !== this.props.defaultValue;
+
+    if (hasValueLinkProp) {
+      newState.hasValue = isValid(nextProps.valueLink.value);
+    } else if (hasValueProp) {
+      newState.hasValue = isValid(nextProps.value);
+    } else if (hasNewDefaultValue) {
+      newState.hasValue = isValid(nextProps.defaultValue);
+    }
+
+    if (newState) this.setState(newState);
+  },
+
+  getStyles() {
+    const props = this.props;
+    const {
+      floatingLabelColor,
+      focusColor,
+      textColor,
+      disabledTextColor,
+      backgroundColor,
+      hintColor,
+      errorColor,
+    } = this.constructor.getRelevantContextKeys(this.state.muiTheme);
+
+    let styles = {
+      root: {
+        fontSize: 16,
+        lineHeight: '24px',
+        width: props.fullWidth ? '100%' : 256,
+        height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48),
+        display: 'inline-block',
+        position: 'relative',
+        backgroundColor: backgroundColor,
+        fontFamily: this.state.muiTheme.rawTheme.fontFamily,
+        transition: Transitions.easeOut('200ms', 'height'),
+      },
+      error: {
+        position: 'relative',
+        bottom: 2,
+        fontSize: 12,
+        lineHeight: '12px',
+        color: errorColor,
+        transition: Transitions.easeOut(),
+      },
+      floatingLabel: {
+        color: hintColor,
+      },
+      input: {
+        tapHighlightColor: 'rgba(0,0,0,0)',
+        padding: 0,
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        border: 'none',
+        outline: 'none',
+        backgroundColor: 'transparent',
+        color: props.disabled ? disabledTextColor : textColor,
+        font: 'inherit',
+      },
+    };
+
+    styles.error = this.mergeStyles(styles.error, props.errorStyle);
+
+    styles.textarea = this.mergeStyles(styles.input, {
+      marginTop: props.floatingLabelText ? 36 : 12,
+      marginBottom: props.floatingLabelText ? -36 : -12,
+      boxSizing: 'border-box',
+      font: 'inherit',
+    });
+
+    if (this.state.isFocused) {
+      styles.floatingLabel.color = focusColor;
+    }
+
+    if (this.state.hasValue) {
+      styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5);
+    }
+
+    if (props.floatingLabelText) {
+      styles.input.boxSizing = 'border-box';
+
+      if (!props.multiLine) {
+        styles.input.marginTop = 14;
+      }
+
+      if (this.state.errorText) {
+        styles.error.bottom = !props.multiLine ? styles.error.fontSize + 3 : 3;
+      }
+    }
+
+    if (this.state.errorText) {
+      if (this.state.isFocused) {
+        styles.floatingLabel.color = styles.error.color;
+      }
+    }
+
+    return styles;
+  },
+
+  blur() {
+    if (this.isMounted()) this._getInputNode().blur();
+  },
+
+  clearValue() {
+    this.setValue('');
+  },
+
+  focus() {
+    if (this.isMounted()) this._getInputNode().focus();
+  },
+
+  getValue() {
+    return this.isMounted() ? this._getInputNode().value : undefined;
+  },
+
+  setErrorText(newErrorText) {
+    warning(false, 'setErrorText() method is deprecated. Use the errorText property instead.');
+
+    if (this.isMounted()) {
+      this.setState({errorText: newErrorText});
+    }
+  },
+
+  setValue(newValue) {
+    warning(false,
+      `setValue() method is deprecated. Use the defaultValue property instead.
+      Or use the TextField as a controlled component with the value property.`);
+
+    if (this.isMounted()) {
+      if (this.props.multiLine) {
+        this.refs.input.setValue(newValue);
+      } else {
+        this._getInputNode().value = newValue;
+      }
+
+      this.setState({hasValue: isValid(newValue)});
+    }
+  },
+
+  _getInputNode() {
+    return (this.props.children || this.props.multiLine) ?
+      this.refs.input.getInputNode() : ReactDOM.findDOMNode(this.refs.input);
+  },
+
+  _handleInputBlur(e) {
+    this.setState({isFocused: false});
+    if (this.props.onBlur) this.props.onBlur(e);
+  },
+
+  _handleInputChange(e) {
+    this.setState({hasValue: isValid(e.target.value)});
+    if (this.props.onChange) this.props.onChange(e);
+  },
+
+  _handleInputFocus(e) {
+    if (this.props.disabled)
+      return;
+    this.setState({isFocused: true});
+    if (this.props.onFocus) this.props.onFocus(e);
+  },
+
+  _handleInputKeyDown(e) {
+    if (e.keyCode === 13 && this.props.onEnterKeyDown) this.props.onEnterKeyDown(e);
+    if (this.props.onKeyDown) this.props.onKeyDown(e);
+  },
+
+  _handleTextAreaHeightChange(e, height) {
+    let newHeight = height + 24;
+    if (this.props.floatingLabelText) newHeight += 24;
+    ReactDOM.findDOMNode(this).style.height = newHeight + 'px';
+  },
+
+  _isControlled() {
+    return this.props.hasOwnProperty('value') ||
+      this.props.hasOwnProperty('valueLink');
+  },
+
+  render() {
+    let {
+      className,
+      disabled,
+      errorStyle,
+      errorText,
+      floatingLabelText,
+      fullWidth,
+      hintText,
+      hintStyle,
+      id,
+      multiLine,
+      onBlur,
+      onChange,
+      onFocus,
+      focus,
+      style,
+      type,
+      underlineDisabledStyle,
+      underlineFocusStyle,
+      underlineShow,
+      underlineStyle,
+      rows,
+      rowsMax,
+      ...other,
+    } = this.props;
+
+    let styles = this.getStyles();
+
+    let inputId = id || this._uniqueId;
+
+    let errorTextElement = this.state.errorText ? (
+      <div style={this.prepareStyles(styles.error)}>{this.state.errorText}</div>
+    ) : null;
+
+    let floatingLabelTextElement = floatingLabelText ? (
+      <TextFieldLabel
+        muiTheme={this.state.muiTheme}
+        style={this.mergeStyles(styles.floatingLabel, this.props.floatingLabelStyle)}
+        htmlFor={inputId}
+        shrink={this.state.hasValue || this.state.isFocused}
+        disabled={disabled}
+        onTouchTap={this.focus}
+      >
+        {floatingLabelText}
+      </TextFieldLabel>
+    ) : null;
+
+    let inputProps;
+    let inputElement;
+
+    inputProps = {
+      id: inputId,
+      ref: 'input',
+      onBlur: this._handleInputBlur,
+      onFocus: this._handleInputFocus,
+      focus: this.props.focus,
+      disabled: this.props.disabled,
+      onKeyDown: this._handleInputKeyDown,
+    };
+    const inputStyle = this.mergeStyles(styles.input, this.props.inputStyle);
+
+    if (!this.props.hasOwnProperty('valueLink')) {
+      inputProps.onChange = this._handleInputChange;
+    }
+
+    if (this.props.children) {
+      inputElement = React.cloneElement(this.props.children,
+        {
+          ...inputProps,
+          ...this.props.children.props,
+          style: this.mergeStyles(inputStyle, this.props.children.props.style),
+        });
+    } else {
+      inputElement = multiLine ? (
+        <EnhancedTextarea
+          {...other}
+          {...inputProps}
+          style={inputStyle}
+          rows={rows}
+          rowsMax={rowsMax}
+          onHeightChange={this._handleTextAreaHeightChange}
+          textareaStyle={styles.textarea}
+        />
+      ) : (
+        this.state.isFocused ? (
+        <input
+          {...other}
+          {...inputProps}
+          style={this.prepareStyles(inputStyle)}
+          type={type}
+          autofocus
+      />) : (
+                <input
+          {...other}
+          {...inputProps}
+          style={this.prepareStyles(inputStyle)}
+          type={type}
+      />)
+
+      );
+    }
+
+    return (
+      <div className={className} style={this.prepareStyles(styles.root, this.props.style)}>
+        {floatingLabelTextElement}
+        {hintText ?
+          <TextFieldHint
+            muiTheme={this.state.muiTheme}
+            show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused))}
+            style={hintStyle}
+            text={hintText}
+          /> :
+          null
+        }
+        {inputElement}
+        {underlineShow ?
+          <TextFieldUnderline
+            disabled={disabled}
+            disabledStyle={underlineDisabledStyle}
+            error={this.state.errorText ? true : false}
+            errorStyle={errorStyle}
+            focus={this.state.isFocused}
+            focusStyle={underlineFocusStyle}
+            muiTheme={this.state.muiTheme}
+            style={underlineStyle}
+          /> :
+          null
+        }
+        {errorTextElement}
+      </div>
+    );
+  },
+
+});
+
+export default TextField;
+
diff --git a/app/containers/App.jsx b/app/containers/App.jsx
index b7d49d3..11ce0e7 100644
--- a/app/containers/App.jsx
+++ b/app/containers/App.jsx
@@ -86,6 +86,7 @@ class App extends React.Component {
                 />
                 <EntrySelector
                     id="entry-selector"
+                    ref="entrySelector"
                     className="left inline fill-height"
                     navigation={navigation}
                     {...navigationActions}
diff --git a/app/store/configureStore.jsx b/app/store/configureStore.jsx
index f5cc691..770b63d 100644
--- a/app/store/configureStore.jsx
+++ b/app/store/configureStore.jsx
@@ -1,8 +1,11 @@
-import { createStore } from 'redux'
+import { createStore, applyMiddleware } from 'redux'
 import rootReducer from '../reducers'
+import thunkMiddleware from 'redux-thunk'
 
 export default function configureStore(initialState) {
-  const store = createStore(rootReducer, initialState)
-  return store
+    const store = createStore(rootReducer,
+                              applyMiddleware(thunkMiddleware),
+                              initialState)
+    return store
 }
 
diff --git a/package.json b/package.json
index 63d3b8c..7b5d6a8 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "react-redux": "^4.4.0",
     "react-tap-event-plugin": "^0.2.2",
     "redux": "^3.3.1",
+    "redux-thunk": "^2.0.1",
     "rethinkdbdash": "^2.2.17",
     "rimraf": "^2.5.2"
   },