[Docs] Converted EuiSuperSelect examples to functional component (#3241)

* Update super_select.js

* Update super_select_basic.js

* Update super_select_complex.js

* Fixing prettier errors and arrow functions

Co-authored-by: miukimiu <elizabet.oliveira@elastic.co>

src-docs/src/views/super_select/super_select.js

@@ -1,54 +1,43 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiSuperSelect } from '../../../../src/components';
 import { DisplayToggles } from '../form_controls/display_toggles';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default () => {
+  const options = [
+    {
+      value: 'option_one',
+      inputDisplay: 'Option one',
+      disabled: true,
+      'data-test-subj': 'option one',
+    },
+    {
+      value: 'option_two',
+      inputDisplay: 'Option two',
+    },
+    {
+      value: 'option_three',
+      inputDisplay: (
+        <span className="eui-textTruncate eui-displayBlock">
+          Option three has a super long text and added truncation
+        </span>
+      ),
+    },
+  ];
+  const [value, setValue] = useState(options[1].value);
 
-    this.options = [
-      {
-        value: 'option_one',
-        inputDisplay: 'Option one',
-        disabled: true,
-        'data-test-subj': 'option one',
-      },
-      {
-        value: 'option_two',
-        inputDisplay: 'Option two',
-      },
-      {
-        value: 'option_three',
-        inputDisplay: (
-          <span className="eui-textTruncate eui-displayBlock">
-            Option three has a super long text and added truncation
-          </span>
-        ),
-      },
-    ];
-
-    this.state = {
-      value: this.options[1].value,
-    };
-  }
-
-  onChange = value => {
-    this.setState({
-      value: value,
-    });
+  const onChange = value => {
+    setValue(value);
   };
 
-  render() {
-    return (
-      /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles canPrepend={true} canAppend={true}>
-        <EuiSuperSelect
-          options={this.options}
-          valueOfSelected={this.state.value}
-          onChange={this.onChange}
-        />
-      </DisplayToggles>
-    );
-  }
-}
+  return (
+    /* DisplayToggles wrapper for Docs only */
+    <DisplayToggles canPrepend={true} canAppend={true}>
+      <EuiSuperSelect
+        options={options}
+        valueOfSelected={value}
+        onChange={value => onChange(value)}
+      />
+    </DisplayToggles>
+  );
+};

src-docs/src/views/super_select/super_select_basic.js

@@ -1,60 +1,49 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiSuperSelect, EuiHealth } from '../../../../src/components';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default () => {
+  const options = [
+    {
+      value: 'warning',
+      inputDisplay: (
+        <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
+          Warning
+        </EuiHealth>
+      ),
+      'data-test-subj': 'option-warning',
+      disabled: true,
+    },
+    {
+      value: 'minor',
+      inputDisplay: (
+        <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
+          Minor
+        </EuiHealth>
+      ),
+      'data-test-subj': 'option-minor',
+    },
+    {
+      value: 'critical',
+      inputDisplay: (
+        <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
+          Critical
+        </EuiHealth>
+      ),
+      'data-test-subj': 'option-critical',
+    },
+  ];
+  const [value, setValue] = useState(options[1].value);
 
-    this.options = [
-      {
-        value: 'warning',
-        inputDisplay: (
-          <EuiHealth color="subdued" style={{ lineHeight: 'inherit' }}>
-            Warning
-          </EuiHealth>
-        ),
-        'data-test-subj': 'option-warning',
-        disabled: true,
-      },
-      {
-        value: 'minor',
-        inputDisplay: (
-          <EuiHealth color="warning" style={{ lineHeight: 'inherit' }}>
-            Minor
-          </EuiHealth>
-        ),
-        'data-test-subj': 'option-minor',
-      },
-      {
-        value: 'critical',
-        inputDisplay: (
-          <EuiHealth color="danger" style={{ lineHeight: 'inherit' }}>
-            Critical
-          </EuiHealth>
-        ),
-        'data-test-subj': 'option-critical',
-      },
-    ];
-
-    this.state = {
-      value: this.options[1].value,
-    };
-  }
-
-  onChange = value => {
-    this.setState({
-      value: value,
-    });
+  const onChange = value => {
+    setValue(value);
   };
 
-  render() {
-    return (
-      <EuiSuperSelect
-        options={this.options}
-        valueOfSelected={this.state.value}
-        onChange={this.onChange}
-      />
-    );
-  }
-}
+  return (
+    <EuiSuperSelect
+      options={options}
+      valueOfSelected={value}
+      onChange={value => onChange(value)}
+    />
+  );
+};

src-docs/src/views/super_select/super_select_complex.js

@@ -1,74 +1,66 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 
 import { EuiSuperSelect, EuiText } from '../../../../src/components';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
-
-    this.options = [
-      {
-        value: 'option_one',
-        inputDisplay: 'Option one',
-        dropdownDisplay: (
-          <Fragment>
-            <strong>Option one</strong>
-            <EuiText size="s" color="subdued">
-              <p className="euiTextColor--subdued">
-                Has a short description giving more detail to the option.
-              </p>
-            </EuiText>
-          </Fragment>
-        ),
-      },
-      {
-        value: 'option_two',
-        inputDisplay: 'Option two',
-        dropdownDisplay: (
-          <Fragment>
-            <strong>Option two</strong>
-            <EuiText size="s" color="subdued">
-              <p className="euiTextColor--subdued">
-                Has a short description giving more detail to the option.
-              </p>
-            </EuiText>
-          </Fragment>
-        ),
-      },
-      {
-        value: 'option_three',
-        inputDisplay: 'Option three',
-        dropdownDisplay: (
-          <Fragment>
-            <strong>Option three</strong>
-            <EuiText size="s" color="subdued">
-              <p className="euiTextColor--subdued">
-                Has a short description giving more detail to the option.
-              </p>
-            </EuiText>
-          </Fragment>
-        ),
-      },
-    ];
-
-    this.state = {
+export default () => {
+  const options = [
+    {
       value: 'option_one',
-    };
-  }
+      inputDisplay: 'Option one',
+      dropdownDisplay: (
+        <Fragment>
+          <strong>Option one</strong>
+          <EuiText size="s" color="subdued">
+            <p className="euiTextColor--subdued">
+              Has a short description giving more detail to the option.
+            </p>
+          </EuiText>
+        </Fragment>
+      ),
+    },
+    {
+      value: 'option_two',
+      inputDisplay: 'Option two',
+      dropdownDisplay: (
+        <Fragment>
+          <strong>Option two</strong>
+          <EuiText size="s" color="subdued">
+            <p className="euiTextColor--subdued">
+              Has a short description giving more detail to the option.
+            </p>
+          </EuiText>
+        </Fragment>
+      ),
+    },
+    {
+      value: 'option_three',
+      inputDisplay: 'Option three',
+      dropdownDisplay: (
+        <Fragment>
+          <strong>Option three</strong>
+          <EuiText size="s" color="subdued">
+            <p className="euiTextColor--subdued">
+              Has a short description giving more detail to the option.
+            </p>
+          </EuiText>
+        </Fragment>
+      ),
+    },
+  ];
+
+  const [value, setValue] = useState('option_one');
 
-  onChange = value => {
-    this.setState({ value });
+  const onChange = value => {
+    setValue(value);
   };
 
-  render() {
-    return (
-      <EuiSuperSelect
-        options={this.options}
-        valueOfSelected={this.state.value}
-        onChange={this.onChange}
-        itemLayoutAlign="top"
-        hasDividers
-      />
-    );
-  }
-}
+  return (
+    <EuiSuperSelect
+      options={options}
+      valueOfSelected={value}
+      onChange={value => onChange(value)}
+      itemLayoutAlign="top"
+      hasDividers
+    />
+  );
+};