Rewrite in Typescript: Textarea

src/scripts/Textarea.tsx

@@ -0,0 +1,73 @@
+import React, { Component, TextareaHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { FormElement, FormElementProps } from './FormElement';
+import { uuid } from './util';
+
+export type TextareaProps = {
+  id?: string;
+  className?: string;
+  label?: string;
+  required?: boolean;
+  error?: FormElementProps['error'];
+  totalCols?: number;
+  cols?: number;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  textareaRef?: (...args: any[]) => any;
+};
+
+type TextareaState = {
+  id: string;
+};
+
+export class Textarea extends Component<
+  TextareaProps & TextareaHTMLAttributes<HTMLTextAreaElement>,
+  TextareaState
+> {
+  static isFormElement = true;
+
+  constructor(
+    props: Readonly<
+      TextareaProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>
+    >
+  ) {
+    super(props);
+    this.state = { id: `form-element-${uuid()}` };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
+    const { value } = e.target;
+    if (this.props.onChange) {
+      this.props.onChange(e, value);
+    }
+  }
+
+  render() {
+    const id = this.props.id || this.state.id;
+    const { label, required, error, totalCols, cols, ...props } = this.props;
+    if (label || required || error || totalCols || cols) {
+      const formElemProps = { id, label, required, error, totalCols, cols };
+      return (
+        <FormElement {...formElemProps}>
+          <Textarea {...{ ...props, id }} />
+        </FormElement>
+      );
+    }
+    const {
+      className,
+      textareaRef,
+      onChange, // eslint-disable-line @typescript-eslint/no-unused-vars
+      ...pprops
+    } = props;
+    const taClassNames = classnames(className, 'slds-input');
+    return (
+      <textarea
+        id={id}
+        ref={textareaRef}
+        className={taClassNames}
+        onChange={this.onChange}
+        {...pprops}
+      />
+    );
+  }
+}

src/scripts/index.js

@@ -14,7 +14,6 @@ import Tabs, { Tab } from './Tabs';
 import SalesPath from './SalesPath';
 import Modal, { ModalHeader, ModalContent, ModalFooter } from './Modal';
 import Input from './Input';
-import Textarea from './Textarea';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './CheckboxGroup';
 import Select, { Option } from './Select';
@@ -68,7 +67,6 @@ export {
   ModalFooter,
   SalesPath,
   Input,
-  Textarea,
   Checkbox,
   CheckboxGroup,
   Select,
@@ -118,4 +116,5 @@ export * from './RadioGroup';
 export * from './Form';
 export * from './FormElement';
 export * from './Text';
+export * from './Textarea';
 export * from './ComponentSettings';

stories/TextareaStories.js → stories/TextareaStories.tsx

@@ -10,12 +10,12 @@ storiesOf('Textarea', module)
     () => (
       <Textarea
         label={text('label', 'Textarea Label')}
-        error={text('error')}
-        required={boolean('required')}
-        value={text('value')}
-        placeholder={text('placeholder')}
-        disabled={boolean('disabled')}
-        readOnly={boolean('readOnly')}
+        error={text('error', '')}
+        required={boolean('required', false)}
+        value={text('value', '')}
+        placeholder={text('placeholder', '')}
+        disabled={boolean('disabled', false)}
+        readOnly={boolean('readOnly', false)}
         onChange={action('change')}
         onBlur={action('blur')}
       />
@@ -65,12 +65,12 @@ storiesOf('Textarea', module)
     'Read only',
     () => <Textarea label='Textarea Label' value='Read Only' readOnly />,
     { info: 'Textarea control with readOnly status' }
-  )
-  .add(
-    'Read only (HTML)',
-    () => <Textarea label='Textarea Label' value='Read Only' htmlReadOnly />,
-    {
-      info:
-        'Textarea control with readOnly status (passsed to HTML <textarea> element)',
-    }
   );
+// .add(
+//   'Read only (HTML)',
+//   () => <Textarea label='Textarea Label' value='Read Only' htmlReadOnly />,
+//   {
+//     info:
+//       'Textarea control with readOnly status (passsed to HTML <textarea> element)',
+//   }
+// );

test/storyshots/__snapshots__/storyshots.test.js.snap

@@ -44934,9 +44934,13 @@ exports[`Storyshots Textarea Controlled with knobs 1`] = `
         >
           <textarea
             className="slds-input"
+            disabled={false}
             id="form-element-$uuid$"
             onBlur={[Function]}
             onChange={[Function]}
+            placeholder=""
+            readOnly={false}
+            value=""
           />
         </div>
       </div>
@@ -45206,78 +45210,6 @@ exports[`Storyshots Textarea Error 1`] = `
 </div>
 `;
 
-exports[`Storyshots Textarea Read only (HTML) 1`] = `
-<div
-  className="content-wrapper"
->
-  <div>
-    <div
-      id="story-root"
-      style={Object {}}
-    >
-      <div
-        className="slds-form-element"
-      >
-        <label
-          className="slds-form-element__label"
-          htmlFor="form-element-$uuid$"
-        >
-          Textarea Label
-        </label>
-        <div
-          className="slds-form-element__control"
-        >
-          <textarea
-            className="slds-input"
-            htmlReadOnly={true}
-            id="form-element-$uuid$"
-            onChange={[Function]}
-            value="Read Only"
-          />
-        </div>
-      </div>
-    </div>
-    <div>
-      <div
-        style={
-          Object {
-            "backgroundColor": "#fff",
-            "border": "1px solid #eee",
-            "borderRadius": "2px",
-            "color": "black",
-            "fontFamily": "Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif",
-            "fontSize": "15px",
-            "fontWeight": 300,
-            "lineHeight": 1.45,
-            "marginBottom": "20px",
-            "marginTop": "20px",
-            "padding": "20px 40px 40px",
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "marginBottom": 0,
-            }
-          }
-        >
-          <div
-            style={
-              Object {
-                "fontSize": "15px",
-              }
-            }
-          >
-            Textarea control with readOnly status (passsed to HTML &lt;textarea&gt; element)
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Storyshots Textarea Read only 1`] = `
 <div
   className="content-wrapper"