[Docs] Converted form control component examples to functional compon…

…ent (#3242)

* Update checkbox.js

* Update field_password.js

* Update field_search.js

* Update field_text.js

* Update radio.js

* Update select.js

* Update switch.js

* Update text_area.js

* replace makeId with htmlIdGenerator and add arrow func

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

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>
+ );
+};