[DOCS] Changed ranged component docs to functional components (elasti…

…c#3221)
Marvin9 · Apr 2, 2020 · e9a673b · e9a673b
1 parent d48f15d
commit e9a673b
Show file tree

Hide file tree

Showing 10 changed files with 489 additions and 626 deletions.
diff --git a/src-docs/src/views/range/dual_range.js b/src-docs/src/views/range/dual_range.js
@@ -1,36 +1,26 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 
 import { EuiDualRange } 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 [value, setValue] = useState(['', '']);
 
-    this.state = {
-      value: ['', ''],
-    };
-  }
-
-  onChange = value => {
-    this.setState({
-      value,
-    });
+  const onChange = value => {
+    setValue(value);
   };
 
-  render() {
-    return (
-      <EuiDualRange
-        id={makeId()}
-        min={-100}
-        max={200}
-        step={10}
-        value={this.state.value}
-        onChange={this.onChange}
-        showLabels
-        aria-label="An example of EuiDualRange"
-      />
-    );
-  }
-}
+  return (
+    <EuiDualRange
+      id={htmlIdGenerator()()}
+      min={-100}
+      max={200}
+      step={10}
+      value={value}
+      onChange={onChange}
+      showLabels
+      aria-label="An example of EuiDualRange"
+    />
+  );
+};
diff --git a/src-docs/src/views/range/input.js b/src-docs/src/views/range/input.js
@@ -1,54 +1,42 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 import { EuiRange, EuiSpacer, EuiDualRange } 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 [value, setValue] = useState('20');
+  const [dualValue, setDualValue] = useState([20, 100]);
 
-    this.state = {
-      value: '20',
-      dualValue: [20, 100],
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
+  const onChange = e => {
+    setValue(e.target.value);
   };
 
-  onDualChange = value => {
-    this.setState({
-      dualValue: value,
-    });
+  const onDualChange = value => {
+    setDualValue(value);
   };
 
-  render() {
-    return (
-      <Fragment>
-        <EuiRange
-          id={makeId()}
-          value={this.state.value}
-          onChange={this.onChange}
-          showInput
-          aria-label="An example of EuiRange"
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiDualRange
-          id={makeId()}
-          value={this.state.dualValue}
-          onChange={this.onDualChange}
-          showInput
-          minInputProps={{ 'aria-label': 'Min value' }}
-          maxInputProps={{ 'aria-label': 'Max value' }}
-          aria-label="An example of EuiDualRange with inputs"
-        />
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <EuiRange
+        id={htmlIdGenerator()()}
+        value={value}
+        onChange={onChange}
+        showInput
+        aria-label="An example of EuiRange"
+      />
+
+      <EuiSpacer size="xl" />
+
+      <EuiDualRange
+        id={htmlIdGenerator()()}
+        value={dualValue}
+        onChange={onDualChange}
+        showInput
+        minInputProps={{ 'aria-label': 'Min value' }}
+        maxInputProps={{ 'aria-label': 'Max value' }}
+        aria-label="An example of EuiDualRange with inputs"
+      />
+    </Fragment>
+  );
+};
diff --git a/src-docs/src/views/range/input_only.js b/src-docs/src/views/range/input_only.js
@@ -1,74 +1,61 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 import { EuiRange, EuiSpacer, EuiDualRange } from '../../../../src/components';
 
 import { DisplayToggles } from '../form_controls/display_toggles';
+import { htmlIdGenerator } from '../../../../src/services';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
+export default () => {
+  const [value, setValue] = useState('20');
+  const [dualValue, setDualValue] = useState([20, 100]);
 
-export default class extends Component {
-  constructor(props) {
-    super(props);
-
-    this.levels = [
-      {
-        min: 0,
-        max: 20,
-        color: 'danger',
-      },
-      {
-        min: 20,
-        max: 100,
-        color: 'success',
-      },
-    ];
-
-    this.state = {
-      value: '20',
-      dualValue: [20, 100],
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
+  const onChange = e => {
+    setValue(e.target.value);
   };
 
-  onDualChange = value => {
-    this.setState({
-      dualValue: value,
-    });
+  const onDualChange = value => {
+    setDualValue(value);
   };
 
-  render() {
-    return (
-      <Fragment>
-        <DisplayToggles canAppend canPrepend>
-          <EuiRange
-            id={makeId()}
-            value={this.state.value}
-            onChange={this.onChange}
-            showInput="inputWithPopover"
-            showLabels
-            aria-label="An example of EuiRange with showInput prop"
-          />
-        </DisplayToggles>
-
-        <EuiSpacer size="xl" />
-
-        <DisplayToggles canAppend canPrepend canLoading={false}>
-          <EuiDualRange
-            id={makeId()}
-            value={this.state.dualValue}
-            onChange={this.onDualChange}
-            showInput="inputWithPopover"
-            showLabels
-            levels={this.levels}
-            aria-label="An example of EuiDualRange with showInput prop"
-          />
-        </DisplayToggles>
-      </Fragment>
-    );
-  }
-}
+  const levels = [
+    {
+      min: 0,
+      max: 20,
+      color: 'danger',
+    },
+    {
+      min: 20,
+      max: 100,
+      color: 'success',
+    },
+  ];
+
+  return (
+    <Fragment>
+      <DisplayToggles canAppend canPrepend>
+        <EuiRange
+          id={htmlIdGenerator()()}
+          value={value}
+          onChange={onChange}
+          showInput="inputWithPopover"
+          showLabels
+          aria-label="An example of EuiRange with showInput prop"
+        />
+      </DisplayToggles>
+
+      <EuiSpacer size="xl" />
+
+      <DisplayToggles canAppend canPrepend canLoading={false}>
+        <EuiDualRange
+          id={htmlIdGenerator()()}
+          value={dualValue}
+          onChange={onDualChange}
+          showInput="inputWithPopover"
+          showLabels
+          levels={levels}
+          aria-label="An example of EuiDualRange with showInput prop"
+        />
+      </DisplayToggles>
+    </Fragment>
+  );
+};
diff --git a/src-docs/src/views/range/range.js b/src-docs/src/views/range/range.js
@@ -1,66 +1,56 @@
-import React, { Component, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 
 import { EuiRange, 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 [value, setValue] = useState('120');
 
-    this.state = {
-      value: '120',
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.target.value,
-    });
+  const onChange = e => {
+    setValue(e.target.value);
   };
 
-  render() {
-    return (
-      <Fragment>
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          step={0.05}
-          value={this.state.value}
-          onChange={this.onChange}
-          showLabels
-          aria-label="An example of EuiRange with showLabels prop"
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          value={this.state.value}
-          onChange={this.onChange}
-          showLabels
-          showValue
-          aria-label="An example of EuiRange with showValue prop"
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          value={this.state.value}
-          onChange={this.onChange}
-          showLabels
-          showRange
-          showValue
-          valuePrepend="100 - "
-          aria-label="An example of EuiRange with valuePrepend prop"
-        />
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <EuiRange
+        id={htmlIdGenerator()()}
+        min={100}
+        max={200}
+        step={0.05}
+        value={value}
+        onChange={onChange}
+        showLabels
+        aria-label="An example of EuiRange with showLabels prop"
+      />
+
+      <EuiSpacer size="xl" />
+
+      <EuiRange
+        id={htmlIdGenerator()()}
+        min={100}
+        max={200}
+        value={value}
+        onChange={onChange}
+        showLabels
+        showValue
+        aria-label="An example of EuiRange with showValue prop"
+      />
+
+      <EuiSpacer size="xl" />
+
+      <EuiRange
+        id={htmlIdGenerator()()}
+        min={100}
+        max={200}
+        value={value}
+        onChange={onChange}
+        showLabels
+        showRange
+        showValue
+        valuePrepend="100 - "
+        aria-label="An example of EuiRange with valuePrepend prop"
+      />
+    </Fragment>
+  );
+};