refactor(Radio Button Group): Using generator on unique id module

catho · Apr 5, 2019 · 1b90f8a · 1b90f8a
1 parent c436c42
commit 1b90f8a
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 70 deletions.
diff --git a/components/Input/Input.jsx b/components/Input/Input.jsx
@@ -9,6 +9,8 @@ import Icon from '../Icon';
 import InputTypes from './InputTypes';
 import uniqId from '../shared/uniqId';
 
+const ID_GENERATOR = uniqId('input-');
+
 const {
   default: DEFAULT_INPUT_STYLE,
   LABEL_STYLE,
@@ -118,7 +120,7 @@ class Input extends React.Component {
 
     this.state = { type };
 
-    this._id = id || uniqId('input-');
+    this._id = id || ID_GENERATOR.next().value;
   }
 
   _changeType = type => {

diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx
@@ -6,6 +6,8 @@ import HiddenRadio from '../shared/HiddenRadio';
 import Icon from '../Icon';
 import uniqId from '../shared/uniqId';
 
+const ID_GENERATOR = uniqId('radio-button-');
+
 const LockIcon = styled(Icon).attrs({
   name: 'lock',
 })``;
@@ -33,48 +35,58 @@ const Wrapper = styled.div`
   }
 `;
 
-const Radio = ({
-  children,
-  label,
-  error,
-  disabled,
-  onChange,
-  value,
-  checked,
-  icon,
-  id,
-  inline,
-  ...rest
-}) => {
-  const skin = checked ? 'primary' : 'secondary';
-  const _id = id || uniqId('radio-button-');
+class Radio extends React.Component {
+  constructor(props) {
+    super(props);
 
-  return (
-    <Wrapper inline={inline}>
-      <HiddenRadio
-        checked={checked}
-        disabled={disabled}
-        id={_id}
-        onChange={e => onChange({ value, label }, e)}
-        value={value}
-        skin={skin}
-        error={error}
-        {...rest}
-      />
-      <ButtonGroupLabel
-        checked={checked}
-        disabled={disabled}
-        error={error}
-        htmlFor={_id}
-        skin={skin}
-      >
-        {icon && <ButtonIcon name={icon} />}
-        {children || label}
-        {disabled && <LockIcon />}
-      </ButtonGroupLabel>
-    </Wrapper>
-  );
-};
+    const { id } = props;
+
+    this._id = id || ID_GENERATOR.next().value;
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      error,
+      disabled,
+      onChange,
+      value,
+      checked,
+      icon,
+      id,
+      inline,
+      ...rest
+    } = this.props;
+    const skin = checked ? 'primary' : 'secondary';
+
+    return (
+      <Wrapper inline={inline}>
+        <HiddenRadio
+          checked={checked}
+          disabled={disabled}
+          id={this._id}
+          onChange={e => onChange({ value, label }, e)}
+          value={value}
+          skin={skin}
+          error={error}
+          {...rest}
+        />
+        <ButtonGroupLabel
+          checked={checked}
+          disabled={disabled}
+          error={error}
+          htmlFor={this._id}
+          skin={skin}
+        >
+          {icon && <ButtonIcon name={icon} />}
+          {children || label}
+          {disabled && <LockIcon />}
+        </ButtonGroupLabel>
+      </Wrapper>
+    );
+  }
+}
 
 Radio.displayName = 'RadioGroup.Button';
 

diff --git a/components/TextArea/TextArea.jsx b/components/TextArea/TextArea.jsx
@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import { INPUT_STYLE, Label, FieldGroup, ErrorMessage } from '../shared';
 import uniqId from '../shared/uniqId';
 
+const ID_GENERATOR = uniqId('textarea-');
+
 const {
   default: DEFAULT_INPUT_STYLE,
   LABEL_STYLE,
@@ -43,27 +45,42 @@ const TextAreaErrorMessage = styled(ErrorMessage)`
   `}
 `;
 
-const TextArea = ({ label, required, helperText, error, id, ...rest }) => {
-  const _id = id || uniqId('textarea-');
-
-  return (
-    <FieldGroup>
-      {label && (
-        <TextAreaLabel htmlFor={_id}>
-          {label}
-          {required && <RequiredMark>*</RequiredMark>}
-        </TextAreaLabel>
-      )}
-      <TextAreaTag error={error} id={_id} required={required} {...rest} />
-      {helperText && <HelperText>{helperText}</HelperText>}
-      {error && (
-        <TextAreaErrorMessage helperText={helperText}>
-          {error}
-        </TextAreaErrorMessage>
-      )}
-    </FieldGroup>
-  );
-};
+class TextArea extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { id } = props;
+
+    this._id = id || ID_GENERATOR.next().value;
+  }
+
+  render() {
+    const { label, required, helperText, error, id, ...rest } = this.props;
+
+    return (
+      <FieldGroup>
+        {label && (
+          <TextAreaLabel htmlFor={this._id}>
+            {label}
+            {required && <RequiredMark>*</RequiredMark>}
+          </TextAreaLabel>
+        )}
+        <TextAreaTag
+          error={error}
+          id={this._id}
+          required={required}
+          {...rest}
+        />
+        {helperText && <HelperText>{helperText}</HelperText>}
+        {error && (
+          <TextAreaErrorMessage helperText={helperText}>
+            {error}
+          </TextAreaErrorMessage>
+        )}
+      </FieldGroup>
+    );
+  }
+}
 
 TextArea.defaultProps = {
   disabled: false,

diff --git a/components/shared/uniqId.js b/components/shared/uniqId.js
@@ -1,8 +1,6 @@
-let _counter = 0;
+import 'babel-polyfill';
 
-export default (prefix = '') => {
-  const _id = `${prefix}${_counter}`;
-  _counter += 1;
-
-  return _id;
-};
+export default function*(prefix = '') {
+  let _counter = -1;
+  while (true) yield `${prefix}${(_counter += 1)}`;
+}