Remove style-propable from enhanced-textarea

mui · Feb 9, 2016 · de14cbe · de14cbe
1 parent ea2001c
commit de14cbe
Showing 1 changed file with 38 additions and 35 deletions.
diff --git a/src/enhanced-textarea.jsx b/src/enhanced-textarea.jsx
@@ -1,30 +1,30 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import StylePropable from './mixins/style-propable';
 import getMuiTheme from './styles/getMuiTheme';
 
 const rowsHeight = 24;
 
-const styles = {
-  textarea: {
-    width: '100%',
-    resize: 'none',
-    font: 'inherit',
-    padding: 0,
-  },
-  shadow: {
-    width: '100%',
-    resize: 'none',
-    // Overflow also needed to here to remove the extra row
-    // added to textareas in Firefox.
-    overflow: 'hidden',
-    // Visibility needed to hide the extra text area on ipads
-    visibility: 'hidden',
-    font: 'inherit',
-    padding: 0,
-    position: 'absolute',
-  },
-};
+function getStyles() {
+  return {
+    textarea: {
+      width: '100%',
+      resize: 'none',
+      font: 'inherit',
+      padding: 0,
+    },
+    shadow: {
+      width: '100%',
+      resize: 'none',
+      // Overflow also needed to here to remove the extra row
+      // added to textareas in Firefox.
+      overflow: 'hidden',
+      // Visibility needed to hide the extra text area on ipads
+      visibility: 'hidden',
+      font: 'inherit',
+      padding: 0,
+      position: 'absolute',
+    },
+  };
+}
 
 const EnhancedTextarea = React.createClass({
 
@@ -49,15 +49,10 @@ const EnhancedTextarea = React.createClass({
     muiTheme: React.PropTypes.object,
   },
 
-  //for passing default theme context to children
   childContextTypes: {
     muiTheme: React.PropTypes.object,
   },
 
-  mixins: [
-    StylePropable,
-  ],
-
   getDefaultProps() {
     return {
       rows: 1,
@@ -85,12 +80,14 @@ const EnhancedTextarea = React.createClass({
     if (nextProps.value !== this.props.value) {
       this._syncHeightWithShadow(nextProps.value);
     }
-    let newState = {};
-    newState.muiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
+
+    this.setState({
+      muiTheme: nextContext.muiTheme || this.state.muiTheme,
+    });
   },
 
   getInputNode() {
-    return ReactDOM.findDOMNode(this.refs.input);
+    return this.refs.input;
   },
 
   setValue(value) {
@@ -99,7 +96,7 @@ const EnhancedTextarea = React.createClass({
   },
 
   _syncHeightWithShadow(newValue, e) {
-    let shadow = ReactDOM.findDOMNode(this.refs.shadow);
+    let shadow = this.refs.shadow;
 
     if (newValue !== undefined) {
       shadow.value = newValue;
@@ -147,7 +144,13 @@ const EnhancedTextarea = React.createClass({
       ...other,
     } = this.props;
 
-    const textareaStyles = this.mergeStyles(styles.textarea, textareaStyle, {
+    const {
+      prepareStyles,
+    } = this.state.muiTheme;
+
+    const styles = getStyles(this.props, this.state);
+
+    const textareaStyles = Object.assign(styles.textarea, textareaStyle, {
       height: this.state.height,
     });
 
@@ -162,10 +165,10 @@ const EnhancedTextarea = React.createClass({
     }
 
     return (
-      <div style={this.prepareStyles(this.props.style)}>
+      <div style={prepareStyles(Object.assign({}, this.props.style))}>
         <textarea
           ref="shadow"
-          style={this.prepareStyles(shadowStyles)}
+          style={prepareStyles(shadowStyles)}
           tabIndex="-1"
           rows={this.props.rows}
           defaultValue={this.props.defaultValue}
@@ -177,7 +180,7 @@ const EnhancedTextarea = React.createClass({
           {...other}
           ref="input"
           rows={this.props.rows}
-          style={this.prepareStyles(textareaStyles)}
+          style={prepareStyles(Object.assign({}, textareaStyles))}
           onChange={this._handleChange}
         />
       </div>