feat: make generated ids only client-side to support ssr

Author: JeremyRH

src/components/Checkbox/CheckboxBooleanInput.tsx

@@ -1,66 +1,44 @@
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import type { InputProps } from 'reactstrap';
+import { useUniqueClientId } from '../../hooks/useUniqueClientId';
 import FormGroup from '../Form/FormGroup';
 import Input from '../Input/Input';
 import Label from '../Label/Label';
 
-interface CheckboxBooleanInputSpecificProps {
+export type CheckboxBooleanInputProps = Omit<InputProps, 'onChange' | 'value'> & {
   checkboxLabel?: React.ReactNode;
   onChange?: (isChecked: boolean) => void;
   value?: boolean;
+};
+
+function CheckboxBooleanInput({
+  checkboxLabel,
+  className,
+  onChange,
+  value,
+  ...inputProps
+}: CheckboxBooleanInputProps) {
+  const id = useUniqueClientId('checkbox-boolean-input-', inputProps.id);
+  const classNames = classnames('pt-2', className);
+  return (
+    <FormGroup check className={classNames}>
+      <Input
+        {...inputProps}
+        id={id}
+        type="checkbox"
+        checked={value}
+        onChange={(e) => onChange && onChange(e.target.checked)}
+      />
+      {checkboxLabel && (
+        <Label check for={id}>
+          {checkboxLabel}
+        </Label>
+      )}
+    </FormGroup>
+  );
 }
-type ExtendsWithTypeOverrides<T, U> = U & Omit<T, keyof U>;
-export type CheckboxBooleanInputProps = ExtendsWithTypeOverrides<
-  InputProps,
-  CheckboxBooleanInputSpecificProps
->;
 
-let count = 0;
-
-function getID() {
-  return `checkbox-boolean-input-${count++}`;
-}
-
-class CheckboxBooleanInput extends React.Component<CheckboxBooleanInputProps> {
-  static propTypes = {
-    id: PropTypes.string,
-    checkboxLabel: PropTypes.node,
-    className: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.bool,
-  };
-
-  id = getID();
-
-  constructor(props: CheckboxBooleanInputProps) {
-    super(props);
-
-    this.id = props.id || this.id;
-  }
-
-  render() {
-    const { checkboxLabel, className, onChange, value, ...inputProps } = this.props;
-    const classNames = classnames('pt-2', className);
-
-    return (
-      <FormGroup check className={classNames}>
-        <Input
-          id={this.id}
-          {...inputProps}
-          type="checkbox"
-          checked={value}
-          onChange={(e) => onChange && onChange(e.target.checked)}
-        />
-        {checkboxLabel && (
-          <Label check for={this.id}>
-            {checkboxLabel}
-          </Label>
-        )}
-      </FormGroup>
-    );
-  }
-}
+CheckboxBooleanInput.displayName = 'CheckboxBooleanInput';
 
 export default CheckboxBooleanInput;

src/components/Form/FormChoice.d.ts

@@ -8,12 +8,6 @@ import FormGroup from './FormGroup';
 
 describe('<FormChoice />', () => {
   describe('unknown type', () => {
-    it('should generate an id when not set', () => {
-      const wrapper = shallow(<FormChoice type="radio">A</FormChoice>);
-      assert(wrapper.find('Input[id^="form-choice-"]').exists());
-      assert(wrapper.find('Label[for^="form-choice-"]').exists());
-    });
-
     it('should use id when set', () => {
       const wrapper = shallow(
         <FormChoice type="radio" id="yowza">

src/components/Form/FormChoice.js

@@ -0,0 +1,75 @@
+import classname from 'classnames';
+import React from 'react';
+import { useUniqueClientId } from '../../hooks/useUniqueClientId';
+import Input from '../Input/Input';
+import Label from '../Label/Label';
+import FormGroup from './FormGroup';
+
+interface FormChoiceProps extends Omit<React.InputHTMLAttributes<HTMLOptionElement>, 'disabled'> {
+  inline?: boolean;
+  disabled?: boolean;
+  checked?: boolean;
+  containerClassName?: string;
+  type?: 'checkbox' | 'radio' | 'select';
+  value: string;
+  selected?: boolean;
+}
+
+function FormChoice({
+  inline,
+  disabled,
+  children,
+  containerClassName,
+  type,
+  value,
+  ...props
+}: FormChoiceProps) {
+  const id = useUniqueClientId('form-choice-', props.id);
+
+  if (type === 'select') {
+    return (
+      <option {...props} disabled={disabled} value={value}>
+        {children}
+      </option>
+    );
+  }
+
+  const containerClasses = classname({ 'form-check-inline': inline }, containerClassName);
+
+  const computedValue = value || children;
+
+  const item = (
+    <div className={containerClasses}>
+      <Input
+        id={id}
+        type={type}
+        {...(props as any)}
+        disabled={disabled}
+        value={computedValue as string}
+        style={{ cursor: disabled ? 'not-allowed' : undefined }}
+      />
+      <Label
+        for={id}
+        className="form-check-label"
+        check={!inline}
+        style={{ cursor: disabled ? 'not-allowed' : undefined }}
+      >
+        {children}
+      </Label>
+    </div>
+  );
+
+  if (inline) {
+    return item;
+  }
+
+  return (
+    <FormGroup check disabled={disabled}>
+      {item}
+    </FormGroup>
+  );
+}
+
+FormChoice.displayName = 'FormChoice';
+
+export default FormChoice;

src/components/Form/FormChoice.spec.js

@@ -70,61 +70,13 @@ describe('<HasManyFieldsRow />', () => {
     });
   });
 
-  it('should have a disabled tooltip when disabled and disabledReason', () => {
-    component = shallow(
-      <HasManyFieldsRow onDelete={onDelete} disabled disabledReason="NONE SHALL PASS">
-        Stuff
-      </HasManyFieldsRow>
-    );
-    const disabledTooltip = component.find(Tooltip);
-    assert.equal(disabledTooltip.length, 1);
-    // TODO assert disabledReason text
-  });
-
   it('should hide the delete button when deletable is false', () => {
     component = shallow(<HasManyFieldsRow deletable={false}>Stuff</HasManyFieldsRow>);
     assert.equal(component.find(ConfirmationButton).length, 0);
     assert.equal(component.find(Button).length, 0);
     assert.equal(component.find('.js-delete-col').length, 0);
   });
 
-  describe('when disabled and disabled reason', () => {
-    let disabledTooltip;
-
-    beforeEach(() => {
-      component = shallow(
-        <HasManyFieldsRow onDelete={onDelete} disabled disabledReason="NONE SHALL PASS">
-          Stuff
-        </HasManyFieldsRow>
-      );
-      disabledTooltip = component.find(Tooltip);
-    });
-
-    it('should have tooltip', () => {
-      assert.equal(disabledTooltip.length, 1);
-      // TODO assert disabledReason text
-    });
-
-    it('defaults disabledReasonPlacement to top', () => {
-      assert.equal(disabledTooltip.prop('placement'), 'top');
-    });
-
-    it('sets tooltip placement based on disabledReasonPlacement', () => {
-      component = shallow(
-        <HasManyFieldsRow
-          onDelete={onDelete}
-          disabled
-          disabledReason="NONE SHALL PASS"
-          disabledReasonPlacement="left"
-        >
-          Stuff
-        </HasManyFieldsRow>
-      );
-      disabledTooltip = component.find(Tooltip);
-      assert.equal(disabledTooltip.prop('placement'), 'left');
-    });
-  });
-
   it('should pass down props to delete button', () => {
     component = shallow(<HasManyFieldsRow deleteProps={{ tabIndex: -1 }}>Stuff</HasManyFieldsRow>);
     assert.strictEqual(component.find(ConfirmationButton).length, 1);