make switch use a random id if none is provided

elastic · May 5, 2018 · 3eb1abd · 3eb1abd
1 parent a7c341b
commit 3eb1abd
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 51 deletions.
diff --git a/src-docs/src/views/form_controls/switch.js b/src-docs/src/views/form_controls/switch.js
@@ -8,8 +8,6 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-import makeId from '../../../../src/components/form/form_row/make_id';
-
 export default class extends Component {
   constructor(props) {
     super(props);
@@ -29,7 +27,6 @@ export default class extends Component {
     return (
       <Fragment>
         <EuiSwitch
-          id={makeId()}
           label="I am a switch"
           checked={this.state.checked}
           onChange={this.onChange}
@@ -38,7 +35,6 @@ export default class extends Component {
         <EuiSpacer size="m" />
 
         <EuiSwitch
-          id={makeId()}
           label="I am a disabled switch"
           checked={this.state.checked}
           onChange={this.onChange}

diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
@@ -1,60 +1,77 @@
-import React from 'react';
+import React, {
+  Component,
+} from 'react';
+
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import makeId from '../../form/form_row/make_id';
 import { EuiIcon } from '../../icon';
 
-export const EuiSwitch = ({
-  label,
-  id,
-  name,
-  checked,
-  disabled,
-  onChange,
-  className,
-  ...rest
-}) => {
-  const classes = classNames('euiSwitch', className);
+export class EuiSwitch extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      id: props.id || makeId(),
+    };
+  }
+
+  render() {
+    const {
+      label,
+      name,
+      checked,
+      disabled,
+      onChange,
+      className,
+      ...rest
+    } = this.props;
 
-  return (
-    <div className={classes}>
-      <input
-        className="euiSwitch__input"
-        name={name}
-        id={id}
-        type="checkbox"
-        checked={checked}
-        disabled={disabled}
-        onChange={onChange}
-        {...rest}
-      />
+    const { id } = this.state;
 
-      <span className="euiSwitch__body">
-        <span className="euiSwitch__thumb" />
-        <span className="euiSwitch__track">
-          <EuiIcon
-            type="cross"
-            size="m"
-            className="euiSwitch__icon"
-          />
+    const classes = classNames('euiSwitch', className);
 
-          <EuiIcon
-            type="check"
-            size="m"
-            className="euiSwitch__icon euiSwitch__icon--checked"
-          />
+    return (
+      <div className={classes}>
+        <input
+          className="euiSwitch__input"
+          name={name}
+          id={id}
+          type="checkbox"
+          checked={checked}
+          disabled={disabled}
+          onChange={onChange}
+          {...rest}
+        />
+
+        <span className="euiSwitch__body">
+          <span className="euiSwitch__thumb" />
+          <span className="euiSwitch__track">
+            <EuiIcon
+              type="cross"
+              size="m"
+              className="euiSwitch__icon"
+            />
+
+            <EuiIcon
+              type="check"
+              size="m"
+              className="euiSwitch__icon euiSwitch__icon--checked"
+            />
+          </span>
         </span>
-      </span>
 
-      <label
-        className="euiSwitch__label"
-        htmlFor={id}
-      >
-        {label}
-      </label>
-    </div>
-  );
-};
+        <label
+          className="euiSwitch__label"
+          htmlFor={id}
+        >
+          {label}
+        </label>
+      </div>
+    );
+  }
+}
 
 EuiSwitch.propTypes = {
   name: PropTypes.string,