Change all components to pass down unknow props to children (dfee#16)

zookatron · Dec 20, 2017 · 7fd24fe · 7fd24fe
1 parent 57d09db
commit 7fd24fe
Show file tree

Hide file tree

Showing 84 changed files with 238 additions and 358 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -16,7 +16,7 @@
   "rules": {
     "semi": ["error", "always"],
     "quotes": ["error", "single"],
-    "no-console": 0,
+    "no-console": 2,
     "no-param-reassign": 0,
     "react/jsx-filename-extension": 0,
     "import/no-extraneous-dependencies": 0,

diff --git a/src/components/box/box.js b/src/components/box/box.js
@@ -23,13 +23,13 @@ export default class Box extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('box', className)}
       >
         {children}

diff --git a/src/components/breadcrumb/__test__/breadcrumb.test.js b/src/components/breadcrumb/__test__/breadcrumb.test.js
@@ -11,9 +11,11 @@ const Anchor = ({
 
 describe('Breadcrumb component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Should be a Breadcrumb', () => {

diff --git a/src/components/breadcrumb/breadcrumb.js b/src/components/breadcrumb/breadcrumb.js
@@ -35,21 +35,22 @@ export default class Breadcrumb extends PureComponent {
   render() {
     const {
       className,
-      style,
       items,
       renderAs,
       hrefAttr,
       separator,
       size,
       align,
+      ...props
     } = this.props;
     if (renderAs !== 'a' && !hrefAttr) {
+      // eslint-disable-next-line no-console
       console.warn('if renderAs is different the anchor (a), hrefAttr is required. Check Breadcrumb props');
     }
     const Element = renderAs;
     return (
       <nav
-        style={style}
+        {...props}
         className={classnames('breadcrumb', className, {
           [`has-${separator}-separator`]: separator,
           [`is-${size}`]: size,
@@ -59,7 +60,7 @@ export default class Breadcrumb extends PureComponent {
         <ul>
           {
             items.map((item) => {
-              const props = {
+              const p = {
                 [renderAs === 'a' ? 'href' : hrefAttr]: item.url,
               };
               return (
@@ -69,7 +70,7 @@ export default class Breadcrumb extends PureComponent {
                     'is-active': item.active,
                   })}
                 >
-                  <Element {...props}>
+                  <Element {...p}>
                     {item.name}
                   </Element>
                 </li>

diff --git a/src/components/button/__test__/button.test.js b/src/components/button/__test__/button.test.js
@@ -45,12 +45,15 @@ describe('Button component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should throw a console.error if no hrefAttr is defined when renderAs different as A and href attr is defined', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     renderer.create(
       <Button renderAs={Link} href="http://google.com" color="danger" >
         TEST
       </Button>);
+    // eslint-disable-next-line no-console
     expect(console.error).toHaveBeenCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should render be disabled', () => {

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -59,9 +59,7 @@ export default class Button extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
-      onClick,
       color,
       size,
       outlined,
@@ -84,6 +82,7 @@ export default class Button extends PureComponent {
     if (href) {
       otherProps[renderAs === 'a' ? 'href' : hrefAttr] = href;
       if (renderAs !== 'a' && !hrefAttr) {
+        // eslint-disable-next-line no-console
         console.error('warning: if renderAs is different the anchor (a), hrefAttr is required. Check Button props');
       }
     }
@@ -100,9 +99,7 @@ export default class Button extends PureComponent {
       <Element
         {...props}
         {...otherProps}
-        style={style}
         disabled={disabled}
-        onClick={onClick}
         className={classnames(className, {
           'is-link': link,
           [`is-${color}`]: color,

diff --git a/src/components/card/card.js b/src/components/card/card.js
@@ -25,18 +25,16 @@ export default class Card extends PureComponent {
     const {
       className,
       children,
-      style,
       type,
       renderAs,
       ...props
     } = this.props;
     if (type === 'image') {
-      return <CardImage {...props} style={style} className={className} />;
+      return <CardImage {...props} className={className} />;
     }
     const Element = renderAs;
     return (
       <Element
-        style={style}
         className={classnames(className, {
           [`card-${type}`]: type,
           card: !type,

diff --git a/src/components/columns/__test__/columns.test.js b/src/components/columns/__test__/columns.test.js
@@ -4,9 +4,11 @@ import Columns from '..';
 
 describe('Columns component', () => {
   beforeEach(() => {
+    // eslint-disable-next-line no-console
     console.warn = jest.genMockFn();
   });
   afterAll(() => {
+    // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
   it('Should have columns classname', () => {

diff --git a/src/components/columns/columns.js b/src/components/columns/columns.js
@@ -47,21 +47,21 @@ export default class Columns extends PureComponent {
     const {
       children,
       className,
-      style,
       breakpoint,
       gapless,
       multiline,
       centered,
+      ...props
     } = this.props;
     return (
       <div
+        {...props}
         className={classNames(className, 'columns', {
         [`is-${breakpoint}`]: breakpoint,
         'is-gapless': gapless,
         'is-multiline': multiline,
         'is-centered': centered,
       })}
-        style={style}
       >
         {children}
       </div>

diff --git a/src/components/columns/components/column.js b/src/components/columns/components/column.js
@@ -154,7 +154,6 @@ export default class Column extends PureComponent {
     const {
       children,
       className,
-      style,
       size,
       offset,
       narrow,
@@ -163,7 +162,6 @@ export default class Column extends PureComponent {
       desktop,
       widescreen,
       fullhd,
-
       mobileSize,
       tabletSize,
       desktopSize,
@@ -174,14 +172,17 @@ export default class Column extends PureComponent {
       desktopOffset,
       widescreenOffset,
       fullhdOffset,
+      ...props
     } = this.props;
 
     if (mobileSize || tabletSize || desktopSize || widescreenSize || fullhdSize || mobileOffset || tabletOffset || desktopOffset || widescreenOffset || fullhdOffset) {
+      // eslint-disable-next-line no-console
       console.warn('DEPRECATION Warning: The props: mobileSize tabletSize desktopSize widescreenSize fullhdSize mobileOffset tabletOffset desktopOffset widescreenOffset fullhdOffset are deprecated, please use the mobile.size... alternatives');
     }
 
     return (
       <div
+        {...props}
         className={classNames(className, 'column', {
         [`is-${size}`]: size,
         [`is-${mobile.size || mobileSize}-mobile`]: mobile.size || mobileSize,
@@ -202,7 +203,6 @@ export default class Column extends PureComponent {
         'is-narrow-widescreen': widescreen.narrow,
         'is-narrow-fullhd': fullhd.narrow,
       })}
-        style={style}
       >
         {children}
       </div>

diff --git a/src/components/container/container.js b/src/components/container/container.js
@@ -30,13 +30,13 @@ export default class Container extends PureComponent {
       fluid,
       breakpoint,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('container', className, {
           'is-fluid': fluid,
           [`is-${breakpoint}`]: breakpoint,

diff --git a/src/components/content/content.js b/src/components/content/content.js
@@ -23,14 +23,14 @@ export default class Content extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
       size,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('content', className, {
           [`is-${size}`]: size,
         })}

diff --git a/src/components/dropdown/__test__/dropdown.test.js b/src/components/dropdown/__test__/dropdown.test.js
@@ -62,6 +62,7 @@ describe('Dropdown component', () => {
     expect(component.toJSON()).toMatchSnapshot();
   });
   it('Should print error if value is passed but no onChange Handler', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     renderer.create(
       <Dropdown value="value" style={{ width: 400 }}>
@@ -70,6 +71,7 @@ describe('Dropdown component', () => {
         </Dropdown.Item>
       </Dropdown>);
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
   it('Should have divider', () => {
@@ -154,6 +156,7 @@ describe('Dropdown component', () => {
     expect(component.state('open')).toBe(false);
   });
   it('Should change display error message if props change has value but no onChange Handler', () => {
+    // eslint-disable-next-line no-console
     console.error = jest.genMockFn();
     const component = shallow(
       <Dropdown value="value" style={{ width: 400 }} onChange={() => {}}>
@@ -166,6 +169,7 @@ describe('Dropdown component', () => {
     expect(global.console.error).not.toBeCalled();
     component.setProps({ value: 'other', onChange: null });
     expect(global.console.error).toBeCalled();
+    // eslint-disable-next-line no-console
     console.error.mockRestore();
   });
 });
diff --git a/src/components/dropdown/components/divider.js b/src/components/dropdown/components/divider.js
@@ -14,10 +14,10 @@ export default class DropdownDivider extends PureComponent {
   }
 
   render() {
-    const { style, className } = this.props;
+    const { className, ...props } = this.props;
     return (
       <hr
-        style={style}
+        {...props}
         className={classnames('dropdown-divider', className)}
       />
     );

diff --git a/src/components/dropdown/components/item.js b/src/components/dropdown/components/item.js
@@ -12,16 +12,16 @@ export default class DropdownItem extends PureComponent {
 
   static defaultProps = {
     active: false,
-    onClick: null,
+    onClick: undefined,
     children: null,
   }
 
   render() {
-    const { active, children, value, onClick } = this.props;
+    const { active, children, value, ...props } = this.props;
     return (
       <div
         title={value}
-        onClick={onClick}
+        {...props}
         role="presentation"
         className={classnames('dropdown-item', {
           'is-active': active,

diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -59,13 +59,13 @@ export default class Dropdown extends PureComponent {
 
   checkProps = (props) => {
     if (props.value && !props.onChange) {
+      // eslint-disable-next-line no-console
       console.error('Warning: This is a controlled component without onChange listener, please check the props of the Dropdown component');
     }
   }
 
   close = (evt) => {
     // IDK yet how to test using the ref in enzime
-    /* istanbul ignore next */
     if (this.props.hoverable || (evt && evt.path.find(node => node === this.htmlElement))) {
       return;
     }
@@ -91,13 +91,14 @@ export default class Dropdown extends PureComponent {
 
   render() {
     const {
-      style,
       className,
       children,
       value,
       color,
       align,
       hoverable,
+      onChange,
+      ...props
     } = this.props;
     let current = null;
 
@@ -113,8 +114,8 @@ export default class Dropdown extends PureComponent {
 
     return (
       <div
+        {...props}
         ref={(node) => { this.htmlElement = node; }}
-        style={style}
         className={classnames('dropdown', className, {
           'is-active': this.state.open,
           [`is-${align}`]: align,

diff --git a/src/components/footer/footer.js b/src/components/footer/footer.js
@@ -21,13 +21,13 @@ export default class Footer extends PureComponent {
     const {
       children,
       className,
-      style,
       renderAs,
+      ...props
     } = this.props;
     const Element = renderAs;
     return (
       <Element
-        style={style}
+        {...props}
         className={classnames('footer', className)}
       >
         {children}

diff --git a/src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap b/src/components/form/components/__test__/__snapshots__/checkbox.test.js.snap
@@ -11,10 +11,6 @@ exports[`Checkbox component Should have checkbox classname 1`] = `
   <input
     disabled={false}
     name={null}
-    onBlur={[Function]}
-    onChange={[Function]}
-    onClick={[Function]}
-    onFocus={[Function]}
     type="checkbox"
     value=""
   />