Pass all props to result html (#20)

* Pass all props to result html

* Fixes

Author: makarenya

package-lock.json

@@ -32,11 +32,11 @@
   "homepage": "https://github.com/gakimball/react-inky#readme",
   "dependencies": {
     "classnames": "^2.2.6",
-    "prop-types": "^15.6.2",
-    "react-attrs-filter": "^0.1.2"
+    "prop-types": "^15.6.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.11.1",
     "babel-register": "^6.26.0",

package.json

@@ -6,7 +6,7 @@ export default function Button(props) {
   const expanded = props.className.match('expand') !== null;
 
   return (
-    <table {...getAttrs(props, 'table', 'button')}>
+    <table {...getAttrs(props, ['href', 'target', 'children'], 'button')}>
       <tr>
         <td>
           <table>

src/components/Button.js

@@ -4,7 +4,7 @@ import getAttrs from '../util/getAttrs';
 
 export default function Callout(props) {
   return (
-    <table {...getAttrs(props, 'table', 'callout')}>
+    <table {...getAttrs(props, ['children'], 'callout')}>
       <tr>
         <th className="callout-inner">{props.children}</th>
         <th className="expander"/>

src/components/Callout.js

@@ -28,7 +28,7 @@ export default function Column(props) {
   return (
     <ContainerContext.Consumer>
       {({columnCount}) => (
-        <th {...getAttrs(props, 'th', getColumnClasses(props, columnCount))}>
+        <th {...getAttrs(props, ['children', 'expander', 'first', 'last'], getColumnClasses(props, columnCount))}>
           <table>
             <tr>
               <th>{props.children}</th>

src/components/Column.js

@@ -21,15 +21,14 @@ const Container = props => (
       strictMode: props.strictMode
     }}
   >
-    <table align="center" {...getAttrs(props, 'table', 'container')}>
+    <table align="center" {...getAttrs(props, ['columnCount', 'strictMode', 'children'], 'container')}>
       <tbody>
         <tr>
           <td>{props.children}</td>
         </tr>
       </tbody>
     </table>
-  </ContainerContext.Provider>
-);
+  </ContainerContext.Provider>);
 
 /**
  * Prop types for `<Container />`.

src/components/Container.js

@@ -4,7 +4,7 @@ import getAttrs from '../util/getAttrs';
 
 export default function Item(props) {
   return (
-    <th {...getAttrs(props, 'th', 'menu-item')}>
+    <th {...getAttrs(props, ['href', 'target', 'children'], 'menu-item')}>
       <a href={props.href} target={props.target}>{props.children}</a>
     </th>
   );

src/components/Item.js

@@ -5,7 +5,7 @@ import getAttrs from '../util/getAttrs';
 
 export default function Menu(props) {
   return (
-    <table {...getAttrs(props, 'table', 'menu')}>
+    <table {...getAttrs(props, ['children'], 'menu')}>
       <tr>
         <td>
           <table>

src/components/Menu.js

@@ -16,7 +16,7 @@ import Column from './Column';
  */
 export default function Row(props) {
   return (
-    <table {...getAttrs(props, 'table', 'row')}>
+    <table {...getAttrs(props, ['children'], 'row')}>
       <tbody>
         {/* `first` and `last` props are added to the first and last child in the row, respectively */}
         <tr>{Children.map(props.children, (child, index) => {

src/components/Row.js

@@ -7,7 +7,9 @@ import ContainerContext from '../util/containerContext';
 const createSpacer = (props, size, state = false) => (
   <ContainerContext.Consumer>
     {({strictMode}) => (
-      <table {...getAttrs(props, 'table', classnames('spacer', state && `${state}-for-large`))}>
+      <table {...getAttrs(props, ['size', 'sizeSm', 'sizeLg', 'children'],
+        classnames('spacer', state && `${state}-for-large`))}
+      >
         <tbody>
           <tr>
             <td

src/components/Spacer.js

@@ -4,7 +4,7 @@ import getAttrs from '../util/getAttrs';
 
 export default function Wrapper(props) {
   return (
-    <table align="center" {...getAttrs(props, 'table', 'wrapper')}>
+    <table align="center" {...getAttrs(props, ['children'], 'wrapper')}>
       <tr>
         <td className="wrapper-inner">{props.children}</td>
       </tr>

src/components/Wrapper.js

@@ -12,7 +12,7 @@ describe('getAttrs()', () => {
       className: 'header',
       align: 'center'
     };
-    output = getAttrs(props, 'table', 'row');
+    output = getAttrs(props, ['large', 'small'], 'row');
   });
 
   it('returns an object', () => {

src/util/__tests__/getAttrs.js

@@ -1,10 +1,9 @@
-import {filterPropsFor} from 'react-attrs-filter';
 import classnames from 'classnames';
 
 /**
  * Compile attributes for a component's root element, based on its tag and default class name.
  * @param {Object} props - Component props.
- * @param {String} tag - Component root element.
+ * @param {Array} excluded - List of excluded attributes.
  * @param {String} className - Component root class name.
  * @returns {Object} Filtered props.
  *
@@ -18,28 +17,20 @@ import classnames from 'classnames';
  *
  * // Only returns "style" and "className", because the other two are custom props
  * // The class "header" is added to the base "row"
- * const attrs = getAttrs(props, 'table', 'row'); // => { style: ..., className: 'row header' }
+ * const attrs = getAttrs(props, ['children'], 'row'); // => { style: ..., className: 'row header' }
  * <table {...attrs}></table>
  */
-export default function getAttrs(props, tag, className = '') {
-  // Filter out non-HTML attributes
-  const output = filterPropsFor(props, tag);
+export default function getAttrs(props, excluded, className = '') {
+  // Filter out attributes
+  const output = {};
+  for (const k in props) {
+    if (excluded.indexOf(k) === -1) {
+      output[k] = props[k];
+    }
+  }
 
   // Append class names in props to base classes
   output.className = classnames(className, props.className);
 
-  // `style` isn't included in `filterPropsFor` and must be copied manually
-  if (props.style) {
-    output.style = props.style;
-  }
-
-  // Same with `align` and `valign`, since they are deprecated attributes
-  if (props.align) {
-    output.align = props.align;
-  }
-  if (props.valign) {
-    output.valign = props.valign;
-  }
-
   return output;
 }