From 2bcae4ae336be98b676247a67d2db236c85bfeee Mon Sep 17 00:00:00 2001
From: Hendrik Volschenk <righteous.trespasser@gmail.com>
Date: Fri, 16 Mar 2018 22:49:07 +0200
Subject: [PATCH] fix: add uuid for unique id generation

---
 package-lock.json  |  3 +--
 package.json       |  3 ++-
 src/index.jsx      |  5 +++--
 src/index.test.jsx | 10 ++++++++++
 4 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7ae105..8cc904b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10643,8 +10643,7 @@
     "uuid": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
-      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==",
-      "dev": true
+      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
     },
     "v8flags": {
       "version": "2.1.1",
diff --git a/package.json b/package.json
index cfc3927..679e981 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "@materialr/ripple": "^0.1.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0"
+    "react": "^16.2.0",
+    "uuid": "^3.2.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
diff --git a/src/index.jsx b/src/index.jsx
index 5aace80..500194d 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,6 +2,7 @@ import rippleFoundation from '@materialr/ripple';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import uuidv1 from 'uuid/v1';
 
 import '@material/checkbox/mdc-checkbox.scss';
 
@@ -16,7 +17,7 @@ class Checkbox extends React.Component {
     this.elementInput = undefined;
     this.elementRoot = undefined;
     this.rippleFoundation = undefined;
-    this.state = { classNames: [], classNamesRipple: [], cssVariables: {} };
+    this.state = { classNames: [], classNamesRipple: [], cssVariables: {}, id: uuidv1() };
     this.checkboxCreate = this.checkboxCreate.bind(this);
     this.checkboxDestroy = this.checkboxDestroy.bind(this);
     this.getClassNames = this.getClassNames.bind(this);
@@ -126,7 +127,7 @@ class Checkbox extends React.Component {
       rippleActivate,
       rippleDeactivate,
     } = this;
-    const id = new Date().getTime().toString();
+    const { id } = this.state;
     return (
       <Wrapper
         alignEnd={alignEnd}
diff --git a/src/index.test.jsx b/src/index.test.jsx
index 94ceccf..5443275 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -29,6 +29,16 @@ test('Renders extra classNames that are passed in', () => {
   expect(actual).toBe(expected);
 });
 
+test('<Checkbox /> > Generates a unique id for each component', () => {
+  const wrapperFirst = mount(<Checkbox name={NAME} />);
+  const wrapperSecond = mount(<Checkbox name={NAME} />);
+
+  const actualIdFirst = wrapperFirst.find('.mdc-checkbox__native-control').props().id;
+  const actualIdsecond = wrapperSecond.find('.mdc-checkbox__native-control').props().id;
+
+  expect(actualIdFirst).not.toBe(actualIdsecond);
+});
+
 test('Does not add a ripple when it is disabled', () => {
   const wrapper = mount(<Checkbox name={NAME} />, { disableLifecycleMethods: true });
   const expected = undefined;