Merge pull request #438 from appfolio/updateFormChoiceReact16

gt - Update FormChoice to support Bootstrap 4
appfolio · Aug 4, 2018 · 84f6659 · 84f6659
2 parents fee6b65 + ada3357
commit 84f6659
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 47 deletions.
diff --git a/src/components/FormChoice.d.ts b/src/components/FormChoice.d.ts
@@ -3,8 +3,6 @@ import * as React from 'react';
 
 interface FormChoiceProps extends Omit<React.InputHTMLAttributes<HTMLOptionElement>, 'disabled'> {
   inline?: boolean;
-  color?: string;
-  state?: string;
   disabled?: boolean;
   checked?: boolean;
   type: 'checkbox' | 'radio' | 'select';

diff --git a/src/components/FormChoice.js b/src/components/FormChoice.js
@@ -1,60 +1,81 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import classname from 'classnames';
 import FormGroup from './FormGroup';
 import Input from './Input';
 import Label from './Label';
 
-const FormChoice = props => {
-  const {
-    inline,
-    color,
-    state,
-    disabled,
-    checked,
-    children,
-    type,
-    value,
-    selected,
-    ...attributes
-  } = props;
-
-  if (type === 'select') {
-    return <option {...attributes} value={value} children={children} />;
+class FormChoice extends React.Component {
+  static propTypes = {
+    inline: PropTypes.bool,
+    disabled: PropTypes.bool,
+    checked: PropTypes.bool,
+    children: PropTypes.node,
+    type: PropTypes.oneOf(['checkbox', 'radio', 'select']),
+    value: PropTypes.any,
+    selected: PropTypes.bool
   }
+  render() {
+    const {
+      inline,
+      disabled,
+      checked,
+      children,
+      type,
+      value,
+      selected,
+      ...attributes
+    } = this.props;
 
-  const labelClasses = classname({ 'form-check-inline': inline });
+    if (type === 'select') {
+      return <option {...attributes} value={value}>{children}</option>;
+    }
 
-  const computedValue = value || children;
+    const labelClasses = classname('form-check', { 'form-check-inline': inline });
 
-  let computedChecked;
+    const computedValue = value || children;
 
-  if (type === 'checkbox') {
-    computedChecked = selected && selected.indexOf(computedValue) > -1;
-  } else if (type === 'radio') {
-    computedChecked = selected && selected === computedValue;
-  } else {
-    throw new Error(`Type '${type}' is not supported`);
-  }
+    let computedChecked;
+
+    if (type === 'checkbox') {
+      computedChecked = selected && selected.indexOf(computedValue) > -1;
+    } else if (type === 'radio') {
+      computedChecked = selected && selected === computedValue;
+    } else {
+      throw new Error(`Type '${type}' is not supported`);
+    }
 
-  const item = (
-    <Label className={labelClasses} check={!inline}>
-      <Input type={type} {...attributes} disabled={disabled} value={computedValue} checked={computedChecked} />
-      <span children={children} />
-    </Label>
-  );
+    const item = (
+      <div className={labelClasses} check={!inline}>
+        <Input
+          type={type}
+          {...attributes}
+          disabled={disabled}
+          value={computedValue}
+          checked={computedChecked}
+          style={{ cursor: disabled && 'not-allowed' }}
+        />
+        <Label
+          className="form-check-label"
+          style={{ cursor: disabled && 'not-allowed' }}
+        >
+          {children}
+        </Label>
+      </div>
+    );
 
-  if (inline) {
-    return item;
-  } else {
+    if (inline) {
+      return item;
+    }
     return (
       <FormGroup
         check
-        color={color || state}
         disabled={disabled}
-        children={item}
-      />
+      >
+        {item}
+      </FormGroup>
     );
   }
-};
+}
 
 export default FormChoice;
diff --git a/test/components/FormChoice.spec.js b/test/components/FormChoice.spec.js
@@ -38,7 +38,7 @@ describe('<FormChoice />', () => {
       );
 
       assert.equal(component.find(Input).prop('type'), 'checkbox');
-      assert.equal(component.find('span').text(), 'my type');
+      assert.equal(component.find(Label).props().children, 'my type');
       assert.equal(component.type(), FormGroup);
     });
 
@@ -48,8 +48,7 @@ describe('<FormChoice />', () => {
       );
 
       assert.equal(component.find(Input).prop('type'), 'checkbox');
-      assert.equal(component.find('span').text(), 'my type');
-      assert.equal(component.type(), Label);
+      assert.equal(component.find(Label).props().children, 'my type');
     });
 
     describe('with computed value', () => {
@@ -120,7 +119,7 @@ describe('<FormChoice />', () => {
       );
 
       assert.equal(component.find(Input).prop('type'), 'radio');
-      assert.equal(component.find('span').text(), 'my type');
+      assert.equal(component.find(Label).props().children, 'my type');
       assert.equal(component.type(), FormGroup);
     });
 
@@ -130,8 +129,7 @@ describe('<FormChoice />', () => {
       );
 
       assert.equal(component.find(Input).prop('type'), 'radio');
-      assert.equal(component.find('span').text(), 'my type');
-      assert.equal(component.type(), Label);
+      assert.equal(component.find(Label).props().children, 'my type');
     });
 
     describe('with computed value', () => {