[DOCS] Converted form control component examples to functional component

src-docs/src/views/form_controls/checkbox.js

@@ -1,70 +1,58 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 import { EuiCheckbox, EuiSpacer } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default () => {
+  const [checked, setChecked] = useState(false);
+  const [indeterminate, setindeterminate] = useState(true);
 
-    this.state = {
-      checked: false,
-      indeterminate: true,
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      checked: e.target.checked,
-    });
+  const onChange = e => {
+    setChecked(e.target.checked);
   };
 
-  onChangeIndeterminate = () => {
-    this.setState({
-      indeterminate: !this.state.indeterminate,
-    });
+  const onChangeIndeterminate = () => {
+    setindeterminate(!indeterminate);
   };
 
-  render() {
-    return (
-      <Fragment>
-        <EuiCheckbox
-          id={makeId()}
-          label="I am a checkbox"
-          checked={this.state.checked}
-          onChange={this.onChange}
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiCheckbox
-          id={makeId()}
-          label="I am an indeterminate checkbox"
-          indeterminate={this.state.indeterminate}
-          onChange={this.onChangeIndeterminate}
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiCheckbox
-          id={makeId()}
-          label="I am a disabled checkbox"
-          checked={this.state.checked}
-          onChange={this.onChange}
-          disabled
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiCheckbox
-          id={makeId()}
-          label="I am a compressed checkbox"
-          checked={this.state.checked}
-          onChange={this.onChange}
-          compressed
-        />
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <EuiCheckbox
+        id={htmlIdGenerator()()}
+        label="I am a checkbox"
+        checked={checked}
+        onChange={e => onChange(e)}
+      />
+
+      <EuiSpacer size="m" />
+
+      <EuiCheckbox
+        id={htmlIdGenerator()()}
+        label="I am an indeterminate checkbox"
+        indeterminate={indeterminate}
+        onChange={() => onChangeIndeterminate()}
+      />
+
+      <EuiSpacer size="m" />
+
+      <EuiCheckbox
+        id={htmlIdGenerator()()}
+        label="I am a disabled checkbox"
+        checked={checked}
+        onChange={e => onChange(e)}
+        disabled
+      />
+
+      <EuiSpacer size="m" />
+
+      <EuiCheckbox
+        id={htmlIdGenerator()()}
+        label="I am a compressed checkbox"
+        checked={checked}
+        onChange={e => onChange(e)}
+        compressed
+      />
+    </Fragment>
+  );
+};

src-docs/src/views/form_controls/field_password.js

@@ -1,34 +1,24 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiFieldPassword } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default function() {
+  const [value, setValue] = useState('');
 
-    this.state = {
-      value: '',
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
+  const onChange = e => {
+    setValue(e.target.value);
   };
 
-  render() {
-    return (
-      /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles canAppend canPrepend>
-        <EuiFieldPassword
-          placeholder="Placeholder text"
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-        />
-      </DisplayToggles>
-    );
-  }
+  return (
+    /* DisplayToggles wrapper for Docs only */
+    <DisplayToggles canAppend canPrepend>
+      <EuiFieldPassword
+        placeholder="Placeholder text"
+        value={value}
+        onChange={e => onChange(e)}
+        aria-label="Use aria labels when no actual label is in use"
+      />
+    </DisplayToggles>
+  );
 }

src-docs/src/views/form_controls/field_search.js

@@ -1,48 +1,38 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiFieldSearch, EuiSwitch } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default () => {
+  const [isClearable, setIsClearable] = useState(true);
+  const [value, setValue] = useState('');
 
-    this.state = {
-      isClearable: true,
-      value: '',
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
+  const onChange = e => {
+    setValue(e.target.value);
   };
 
-  render() {
-    return (
-      /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles
-        canPrepend
-        canAppend
-        extras={[
-          <EuiSwitch
-            compressed
-            label={'clearable'}
-            checked={this.state.isClearable}
-            onChange={e => {
-              this.setState({ isClearable: e.target.checked });
-            }}
-          />,
-        ]}>
-        <EuiFieldSearch
-          placeholder="Search this"
-          value={this.state.value}
-          onChange={this.onChange}
-          isClearable={this.state.isClearable}
-          aria-label="Use aria labels when no actual label is in use"
-        />
-      </DisplayToggles>
-    );
-  }
-}
+  return (
+    /* DisplayToggles wrapper for Docs only */
+    <DisplayToggles
+      canPrepend
+      canAppend
+      extras={[
+        <EuiSwitch
+          compressed
+          label={'clearable'}
+          checked={isClearable}
+          onChange={e => {
+            setIsClearable(e.target.checked);
+          }}
+        />,
+      ]}>
+      <EuiFieldSearch
+        placeholder="Search this"
+        value={value}
+        onChange={e => onChange(e)}
+        isClearable={isClearable}
+        aria-label="Use aria labels when no actual label is in use"
+      />
+    </DisplayToggles>
+  );
+};

src-docs/src/views/form_controls/field_text.js

@@ -1,34 +1,24 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiFieldText } from '../../../../src/components';
 import { DisplayToggles } from './display_toggles';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default function() {
+  const [value, setValue] = useState('');
 
-    this.state = {
-      value: '',
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
+  const onChange = e => {
+    setValue(e.target.value);
   };
 
-  render() {
-    return (
-      /* DisplayToggles wrapper for Docs only */
-      <DisplayToggles canPrepend canAppend>
-        <EuiFieldText
-          placeholder="Placeholder text"
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-        />
-      </DisplayToggles>
-    );
-  }
+  return (
+    /* DisplayToggles wrapper for Docs only */
+    <DisplayToggles canPrepend canAppend>
+      <EuiFieldText
+        placeholder="Placeholder text"
+        value={value}
+        onChange={e => onChange(e)}
+        aria-label="Use aria labels when no actual label is in use"
+      />
+    </DisplayToggles>
+  );
 }

src-docs/src/views/form_controls/radio.js

@@ -1,54 +1,44 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 import { EuiRadio, EuiSpacer } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+import { htmlIdGenerator } from '../../../../src/services';
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
+export default () => {
+  const [checked, setChecked] = useState(false);
 
-    this.state = {
-      checked: false,
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      checked: e.target.checked,
-    });
+  const onChange = e => {
+    setChecked(e.target.checked);
   };
 
-  render() {
-    return (
-      <Fragment>
-        <EuiRadio
-          id={makeId()}
-          label="I am a radio"
-          checked={this.state.checked}
-          onChange={this.onChange}
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiRadio
-          id={makeId()}
-          label="I am a disabled radio"
-          checked={this.state.checked}
-          onChange={this.onChange}
-          disabled
-        />
-
-        <EuiSpacer size="m" />
-
-        <EuiRadio
-          id={makeId()}
-          label="I am a compressed radio"
-          checked={this.state.checked}
-          onChange={this.onChange}
-          compressed
-        />
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <EuiRadio
+        id={htmlIdGenerator()()}
+        label="I am a radio"
+        checked={checked}
+        onChange={e => onChange(e)}
+      />
+
+      <EuiSpacer size="m" />
+
+      <EuiRadio
+        id={htmlIdGenerator()()}
+        label="I am a disabled radio"
+        checked={checked}
+        onChange={e => onChange(e)}
+        disabled
+      />
+
+      <EuiSpacer size="m" />
+
+      <EuiRadio
+        id={htmlIdGenerator()()}
+        label="I am a compressed radio"
+        checked={checked}
+        onChange={e => onChange(e)}
+        compressed
+      />
+    </Fragment>
+  );
+};