- Provide default random ID for each component.

Edward Xiao · Edward Xiao · commit 2608cf277b5a · 2019-07-22T10:03:13.000+08:00
diff --git a/lib/components/Checkbox.js b/lib/components/Checkbox.js
@@ -11,6 +11,8 @@ var _message = _interopRequireDefault(require("./message"));
 
 var _const = require("./const");
 
+var _utils = _interopRequireDefault(require("./utils"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
@@ -116,7 +118,7 @@ var component = function component(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? '' : _ref$id,
+      id = _ref$id === void 0 ? _utils["default"].getRandomId() : _ref$id,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name,
       _ref$value = _ref.value,
diff --git a/lib/components/Radiobox.js b/lib/components/Radiobox.js
@@ -11,6 +11,8 @@ var _message = _interopRequireDefault(require("./message"));
 
 var _const = require("./const");
 
+var _utils = _interopRequireDefault(require("./utils"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
@@ -133,7 +135,7 @@ var component = function component(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? '' : _ref$id,
+      id = _ref$id === void 0 ? _utils["default"].getRandomId() : _ref$id,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name,
       _ref$value = _ref.value,
diff --git a/lib/components/Select.js b/lib/components/Select.js
@@ -11,6 +11,8 @@ var _message = _interopRequireDefault(require("./message"));
 
 var _const = require("./const");
 
+var _utils = _interopRequireDefault(require("./utils"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
@@ -185,7 +187,7 @@ var component = function component(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? '' : _ref$id,
+      id = _ref$id === void 0 ? _utils["default"].getRandomId() : _ref$id,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name,
       _ref$value = _ref.value,
diff --git a/lib/components/Textarea.js b/lib/components/Textarea.js
@@ -153,7 +153,7 @@ var component = function component(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? '' : _ref$id,
+      id = _ref$id === void 0 ? _utils["default"].getRandomId() : _ref$id,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name,
       _ref$value = _ref.value,
diff --git a/lib/components/Textbox.js b/lib/components/Textbox.js
@@ -187,7 +187,7 @@ var component = function component(_ref) {
   var _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? null : _ref$tabIndex,
       _ref$id = _ref.id,
-      id = _ref$id === void 0 ? '' : _ref$id,
+      id = _ref$id === void 0 ? _utils["default"].getRandomId() : _ref$id,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name,
       _ref$type = _ref.type,
diff --git a/lib/components/utils.js b/lib/components/utils.js
@@ -20,9 +20,14 @@ var toCamelCase = function toCamelCase(str) {
   };
 };
 
+var getRandomId = function getRandomId() {
+  return Math.random().toString(36).slice(-8);
+};
+
 var utils = {
   camelize: camelize,
-  toCamelCase: toCamelCase
+  toCamelCase: toCamelCase,
+  getRandomId: getRandomId
 };
 var _default = utils;
 exports["default"] = _default;
diff --git a/lib/react-inputs-validation.js b/lib/react-inputs-validation.js
diff --git a/lib/react-inputs-validation.js.map b/lib/react-inputs-validation.js.map
diff --git a/lib/react-inputs-validation.min.js b/lib/react-inputs-validation.min.js
diff --git a/lib/react-inputs-validation.min.js.map b/lib/react-inputs-validation.min.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "React form input validation components",
   "main": "index.js",
   "repository": {
diff --git a/src/js/Inputs/Checkbox.tsx b/src/js/Inputs/Checkbox.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 const { useState, useEffect, useCallback, useRef, memo } = React;
 import message from './message';
 import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, WRAPPER_CLASS_IDENTITIFIER, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
+import utils from './utils';
 import reactInputsValidationCss from './react-inputs-validation.css';
 const TYPE = 'checkbox';
 interface DefaultValidationOption {
@@ -78,7 +79,7 @@ interface Props {
 }
 const component: React.FC<Props> = ({
   tabIndex = null,
-  id = '',
+  id = utils.getRandomId(),
   name = '',
   value = '',
   checked = false,
diff --git a/src/js/Inputs/Radiobox.tsx b/src/js/Inputs/Radiobox.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 const { useState, useEffect, useCallback, useRef, memo } = React;
 import message from './message';
 import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, WRAPPER_CLASS_IDENTITIFIER, OPTION_LIST_ITEM_IDENTITIFIER, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
+import utils from './utils';
 import reactInputsValidationCss from './react-inputs-validation.css';
 const TYPE = 'radiobox';
 interface DefaultValidationOption {
@@ -93,7 +94,7 @@ interface Props {
 }
 const component: React.FC<Props> = ({
   tabIndex = null,
-  id = '',
+  id = utils.getRandomId(),
   name = '',
   value = '',
   disabled = false,
diff --git a/src/js/Inputs/Select.tsx b/src/js/Inputs/Select.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 const { useState, useEffect, useCallback, useRef, memo } = React;
 import message from './message';
 import { REACT_INPUTS_VALIDATION_CUSTOM_ERROR_MESSAGE_EXAMPLE, DEFAULT_LOCALE, WRAPPER_CLASS_IDENTITIFIER, CONTAINER_CLASS_IDENTITIFIER, MSG_CLASS_IDENTITIFIER, usePrevious } from './const';
+import utils from './utils';
 import reactInputsValidationCss from './react-inputs-validation.css';
 const TYPE = 'select';
 /* istanbul ignore next */
@@ -135,7 +136,7 @@ let globalVariableCurrentFocus: any | null = null;
 let globalVariableTypingTimeout: any | null = null;
 const component: React.FC<Props> = ({
   tabIndex = null,
-  id = '',
+  id = utils.getRandomId(),
   name = '',
   value = '',
   disabled = false,
diff --git a/src/js/Inputs/Textarea.tsx b/src/js/Inputs/Textarea.tsx
@@ -108,7 +108,7 @@ interface Props {
 
 const component: React.FC<Props> = ({
   tabIndex = null,
-  id = '',
+  id = utils.getRandomId(),
   name = '',
   value = '',
   cols = DEFAULT_ROWS,
diff --git a/src/js/Inputs/Textbox.tsx b/src/js/Inputs/Textbox.tsx
@@ -137,7 +137,7 @@ const autoFormatNumber = (v: number | string, numberType: string) => {
 };
 const component: React.FC<Props> = ({
   tabIndex = null,
-  id = '',
+  id = utils.getRandomId(),
   name = '',
   type = 'text',
   value = '',
diff --git a/src/js/Inputs/utils.ts b/src/js/Inputs/utils.ts
@@ -14,8 +14,15 @@ interface Utils {
   [key: string]: Function;
 }
 
+const getRandomId = () => {
+  return Math.random()
+    .toString(36)
+    .slice(-8);
+};
+
 const utils: Utils = {
   camelize,
   toCamelCase,
+  getRandomId,
 };
 export default utils;
