[Textarea] Simplification of the code (#12238)

mui · Jul 22, 2018 · c65d419 · c65d419
1 parent eb1ad7c
commit c65d419
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 23 deletions.
diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
@@ -27,7 +27,6 @@ export const styles = {
     background: 'transparent',
   },
   shadow: {
-    resize: 'none',
     // Overflow also needed to here to remove the extra row
     // added to textareas in Firefox.
     overflow: 'hidden',
@@ -43,6 +42,8 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
+  isControlled = this.props.value != null;
+
   shadowRef = null;
 
   singlelineShadowRef = null;
@@ -106,7 +107,7 @@ class Textarea extends React.Component {
   handleChange = event => {
     this.value = event.target.value;
 
-    if (typeof this.props.value === 'undefined' && this.shadowRef) {
+    if (!this.isControlled) {
       // The component is not controlled, we need to update the shallow value.
       this.shadowRef.value = this.value;
       this.syncHeightWithShadow();
@@ -119,12 +120,9 @@ class Textarea extends React.Component {
 
   syncHeightWithShadow() {
     const props = this.props;
-    if (!this.shadowRef || !this.singlelineShadowRef) {
-      return;
-    }
 
-    // The component is controlled, we need to update the shallow value.
-    if (typeof props.value !== 'undefined') {
+    if (this.isControlled) {
+      // The component is controlled, we need to update the shallow value.
       this.shadowRef.value = props.value == null ? '' : String(props.value);
     }
 
@@ -169,22 +167,22 @@ class Textarea extends React.Component {
       <div className={classes.root} style={{ height: this.state.height }}>
         <EventListener target="window" onResize={this.handleResize} />
         <textarea
+          aria-hidden="true"
+          className={classnames(classes.textarea, classes.shadow)}
+          readOnly
           ref={this.handleRefSinglelineShadow}
-          className={classnames(classes.shadow, classes.textarea)}
-          tabIndex={-1}
           rows="1"
-          readOnly
-          aria-hidden="true"
+          tabIndex={-1}
           value=""
         />
         <textarea
-          ref={this.handleRefShadow}
-          className={classnames(classes.shadow, classes.textarea)}
-          tabIndex={-1}
-          rows={rows}
           aria-hidden="true"
-          readOnly
+          className={classnames(classes.textarea, classes.shadow)}
           defaultValue={defaultValue}
+          readOnly
+          ref={this.handleRefShadow}
+          rows={rows}
+          tabIndex={-1}
           value={value}
         />
         <textarea

diff --git a/packages/material-ui/src/Input/Textarea.test.js b/packages/material-ui/src/Input/Textarea.test.js
@@ -21,12 +21,14 @@ function assignRefs(wrapper) {
   };
 }
 
+const TextareaNaked = unwrap(Textarea);
+
 describe('<Textarea />', () => {
   let shallow;
   let mount;
 
   before(() => {
-    shallow = createShallow({ dive: true });
+    shallow = createShallow({ disableLifecycleMethods: true });
     mount = createMount();
   });
 
@@ -35,12 +37,12 @@ describe('<Textarea />', () => {
   });
 
   it('should render 3 textareas', () => {
-    const wrapper = shallow(<Textarea />);
+    const wrapper = shallow(<TextareaNaked classes={{}} />);
     assert.strictEqual(wrapper.find('textarea').length, 3);
   });
 
   it('should change its height when the height of its shadows changes', () => {
-    const wrapper = shallow(<Textarea />);
+    const wrapper = shallow(<TextareaNaked classes={{}} />);
     assert.strictEqual(wrapper.state().height, 19);
 
     const refs = assignRefs(wrapper);
@@ -63,7 +65,6 @@ describe('<Textarea />', () => {
     let wrapper;
 
     beforeEach(() => {
-      const TextareaNaked = unwrap(Textarea);
       wrapper = mount(<TextareaNaked classes={{}} value="f" />);
     });
 
@@ -94,7 +95,7 @@ describe('<Textarea />', () => {
   });
 
   it('should set filled', () => {
-    const wrapper = shallow(<Textarea />);
+    const wrapper = shallow(<TextareaNaked classes={{}} />);
     assert.strictEqual(wrapper.find('textarea').length, 3);
 
     const refs = assignRefs(wrapper);
@@ -117,7 +118,7 @@ describe('<Textarea />', () => {
   describe('prop: onChange', () => {
     it('should be call the callback', () => {
       const handleChange = spy();
-      const wrapper = shallow(<Textarea value="x" onChange={handleChange} />);
+      const wrapper = shallow(<TextareaNaked classes={{}} value="x" onChange={handleChange} />);
       assert.strictEqual(wrapper.find('textarea').length, 3);
 
       const refs = assignRefs(wrapper);
@@ -141,7 +142,7 @@ describe('<Textarea />', () => {
     });
 
     it('should handle the resize event', () => {
-      const wrapper = shallow(<Textarea />);
+      const wrapper = shallow(<TextareaNaked classes={{}} />);
       const refs = assignRefs(wrapper);
       refs.textareaShadowRef.scrollHeight = 43;
       refs.singlelineShadowRef.scrollHeight = 43;