Merge pull request #487 from appfolio/dreamFixAnnoyances

Squelch console warnings and add an `onToggle` for `Alert`
appfolio · Oct 26, 2018 · 188066c · 188066c
2 parents 455f92a + 9bb8ff2
commit 188066c
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 50 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "singleQuote": true
+}
+
diff --git a/src/components/Alert.d.ts b/src/components/Alert.d.ts
@@ -5,6 +5,7 @@ interface AlertProps {
   dismissible?: boolean;
   icon?: boolean;
   className?: string;
+  onToggle?: (boolean) => any
 }
 
 declare class Alert extends React.Component<AlertProps, {}> { }

diff --git a/src/components/Alert.js b/src/components/Alert.js
@@ -16,15 +16,17 @@ export default class Alert extends React.Component {
     color: PropTypes.string,
     dismissible: PropTypes.bool,
     icon: PropTypes.bool,
-    className: PropTypes.string
-  }
+    className: PropTypes.string,
+    onToggle: PropTypes.func
+  };
 
   static defaultProps = {
     className: '',
     color: 'warning',
     dismissible: false,
-    icon: false
-  }
+    icon: false,
+    onToggle: () => {}
+  };
 
   static displayName = 'Alert';
 
@@ -37,15 +39,24 @@ export default class Alert extends React.Component {
   }
 
   toggle = () => {
-    this.setState({ visible: !this.state.visible });
-  }
+    const visible = !this.state.visible;
+    this.setState({ visible });
+    this.props.onToggle(visible);
+  };
 
   componentWillReceiveProps() {
     this.setState({ visible: true });
   }
 
   render() {
-    const { color, children, className, dismissible, icon, ...props } = this.props;
+    const {
+      color,
+      children,
+      className,
+      dismissible,
+      icon,
+      ...props
+    } = this.props;
 
     return (
       <AlertComponent
@@ -56,8 +67,14 @@ export default class Alert extends React.Component {
         {...props}
       >
         <div className="d-flex align-items-start">
-          {icon ? <Icon name={ICON_MAP[color]} size="lg" className="mr-3 mt-1" /> : null}
-          {icon ? <div style={{ overflow: 'hidden' }}>{children}</div> : <div>{children}</div>}
+          {icon ? (
+            <Icon name={ICON_MAP[color]} size="lg" className="mr-3 mt-1" />
+          ) : null}
+          {icon ? (
+            <div style={{ overflow: 'hidden' }}>{children}</div>
+          ) : (
+            <div>{children}</div>
+          )}
         </div>
       </AlertComponent>
     );

diff --git a/src/components/FormRow.js b/src/components/FormRow.js
@@ -15,15 +15,22 @@ const typeTranslations = {
 };
 
 function determineElement(type) {
-  return (typeof type === 'string') ?
-    typeTranslations[type] || Input :
-    type;
+  return typeof type === 'string' ? typeTranslations[type] || Input : type;
 }
 
 function parseFeedback(feedback) {
-  return typeof feedback === 'object' ?
-    [null, { error: feedback }] :
-    [feedback, {}];
+  return typeof feedback === 'object'
+    ? [null, { error: feedback }]
+    : [feedback, {}];
+}
+
+function sanitizeProps(component, props) {
+  if (!component.props) return props;
+  const saneProps = {};
+  Object.entries(props).forEach(([k, v]) => {
+    if (component.props[k]) saneProps[k] = v;
+  });
+  return saneProps;
 }
 
 const FormRow = (props) => {
@@ -49,6 +56,11 @@ const FormRow = (props) => {
 
   const [baseFeedback, childFeedback] = parseFeedback(feedback);
 
+  const validityThings = sanitizeProps(InputElement, {
+    valid: !!validFeedback,
+    invalid: !!feedback
+  });
+
   return (
     <FormLabelGroup
       feedback={baseFeedback}
@@ -68,23 +80,21 @@ const FormRow = (props) => {
         id={id}
         size={size}
         type={typeof type === 'string' ? type : null}
-        valid={!!validFeedback}
-        invalid={!!feedback}
+        {...validityThings}
         {...attributes}
         {...childFeedback}
       >
-        {React.Children.map(children, child => React.cloneElement(child, { type }))}
+        {React.Children.map(children, child =>
+          React.cloneElement(child, { type })
+        )}
       </InputElement>
     </FormLabelGroup>
   );
 };
 
 FormRow.propTypes = {
   children: PropTypes.node,
-  feedback: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.object
-  ]),
+  feedback: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
   hint: PropTypes.string,
   id: PropTypes.string,
   inline: PropTypes.bool,

diff --git a/src/components/LabelBadge.d.ts b/src/components/LabelBadge.d.ts
@@ -6,8 +6,7 @@ interface LabelBadgeProps {
   maxWidth?: number;
   onRemove?: React.MouseEventHandler<any>;
   removable?: boolean;
-  value: string;
+  value: (JSX.Element | string) | (JSX.Element | string)[];
 }
 declare class LabelBadge extends React.Component<LabelBadgeProps, {}> { }
 export default LabelBadge;
-
diff --git a/src/components/LabelBadge.js b/src/components/LabelBadge.js
@@ -9,7 +9,7 @@ export default class LabelBadge extends React.Component {
     maxWidth: PropTypes.number,
     onRemove: PropTypes.func,
     removable: PropTypes.bool,
-    value: PropTypes.string.isRequired
+    value: PropTypes.node.isRequired
   }
 
   static defaultProps = {

diff --git a/test/components/Alert.spec.js b/test/components/Alert.spec.js
@@ -53,7 +53,10 @@ describe('<Alert />', () => {
 
       assert.equal(component.find(Inner).prop('isOpen'), true);
 
-      component.find(Inner).find('button').simulate('click');
+      component
+        .find(Inner)
+        .find('button')
+        .simulate('click');
       assert.equal(component.state('visible'), false);
       assert.equal(component.find(Inner).prop('isOpen'), false);
     });
@@ -67,5 +70,25 @@ describe('<Alert />', () => {
       component.setProps({ color: 'danger' });
       assert.equal(component.state('visible'), true);
     });
+
+    it('should call onToggle if provided', () => {
+      let called = false;
+      let calledWith;
+
+      const component = mount(
+        <Alert
+          dismissible
+          onToggle={(value) => {
+            called = true;
+            calledWith = value;
+          }}
+        />
+      );
+      const inner = component.find(Inner);
+      inner.find('button').simulate('click');
+
+      assert.equal(called, true);
+      assert.equal(calledWith, false);
+    });
   });
 });
diff --git a/test/components/FormRow.spec.js b/test/components/FormRow.spec.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import assert from 'assert';
-import { shallow } from 'enzyme';
+import { render, shallow } from 'enzyme';
 
 import {
   CheckboxInput,
@@ -36,9 +36,7 @@ describe('<FormRow />', () => {
   });
 
   describe('with static type', () => {
-    const component = shallow(
-      <FormRow label="First Name" type="static" />
-    );
+    const component = shallow(<FormRow label="First Name" type="static" />);
 
     it('should render a StaticInput', () => {
       const input = component.find(StaticInput);
@@ -47,52 +45,51 @@ describe('<FormRow />', () => {
   });
 
   describe('with checkbox type', () => {
-    const component = shallow(
-      <FormRow label="First Name" type="checkbox" />
-    );
+    const component = shallow(<FormRow label="First Name" type="checkbox" />);
 
     it('should render a CheckboxInput', () => {
       assert.equal(component.find(CheckboxInput).length, 1);
     });
   });
 
   describe('with radio type', () => {
-    const component = shallow(
-      <FormRow label="First Name" type="radio" />
-    );
+    const component = shallow(<FormRow label="First Name" type="radio" />);
 
     it('should render a RadioInput', () => {
       assert.equal(component.find(RadioInput).length, 1);
     });
   });
 
   describe('with file type', () => {
-    const wrapper = shallow(
-      <FormRow type="file" />
-    );
+    const wrapper = shallow(<FormRow type="file" />);
 
     it('should render a FileInput', () => {
       assert.equal(wrapper.find(FileInput).length, 1);
     });
   });
 
   describe('with custom type', () => {
-    const Custom = () => (<div>Hi</div>);
-    const component = shallow(
-      <FormRow label="First Name" type={Custom} />
-    );
+    const Custom = () => <div>Hi</div>;
+    const component = shallow(<FormRow label="First Name" type={Custom} />);
 
     it('should render custom input', () => {
       const custom = component.find(Custom);
       assert.equal(custom.length, 1);
       assert.equal(custom.first().prop('type'), null);
     });
+
+    describe('that does not grok validity', () => {
+      const Custom2 = ({ props }) => <div {...props}>Hi</div>;
+      Custom2.propTypes = {};
+      const component2 = render(
+        <FormRow label="First Name" type={Custom2} feedback="Na brah" />
+      );
+      assert.notEqual(component2.toString().indexOf('<div>Hi</div>'), -1);
+    });
   });
 
   describe('stacked', () => {
-    const component = shallow(
-      <FormRow label="First Name" stacked />
-    );
+    const component = shallow(<FormRow label="First Name" stacked />);
 
     it('should have a stacked property', () => {
       const formLabelGroup = component.find(FormLabelGroup);
@@ -112,14 +109,11 @@ describe('<FormRow />', () => {
   });
 
   describe('with custom labelSize', () => {
-    const component = shallow(
-      <FormRow label="First Name" labelSize='sm' />
-    );
+    const component = shallow(<FormRow label="First Name" labelSize="sm" />);
 
     it('should set the FormLabelGroup labelSize', () => {
       const formLabelGroup = component.find(FormLabelGroup);
       assert.equal(formLabelGroup.prop('labelSize'), 'sm');
     });
   });
 });
-