From 927c80abce6d5e5672c4c4739eb8658f97e253fc Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Fri, 29 Jul 2016 20:14:52 +0300
Subject: [PATCH] Fix React some warnings about unknown props

---
 src/components/MeasureHeight.jsx    |  6 +++++-
 src/components/ui/form/Button.jsx   | 13 +++++++------
 src/components/ui/form/Checkbox.jsx |  5 ++++-
 src/components/ui/form/Input.jsx    |  6 +++---
 src/components/ui/form/TextArea.jsx |  6 +++---
 src/functions.js                    | 16 ++++++++++++++++
 6 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/components/MeasureHeight.jsx b/src/components/MeasureHeight.jsx
index ba041c5..5887b2b 100644
--- a/src/components/MeasureHeight.jsx
+++ b/src/components/MeasureHeight.jsx
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 
+import { omit } from 'functions';
+
 /**
  * MeasureHeight is a component that allows you to measure the height of elements wrapped.
  *
@@ -47,7 +49,9 @@ export default class MeasureHeight extends Component {
     }
 
     render() {
-        return <div {...this.props} />;
+        const props = omit(this.props, Object.keys(MeasureHeight.propTypes));
+
+        return <div {...props} />;
     }
 
     measure() {
diff --git a/src/components/ui/form/Button.jsx b/src/components/ui/form/Button.jsx
index 67e99f2..449d30a 100644
--- a/src/components/ui/form/Button.jsx
+++ b/src/components/ui/form/Button.jsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 
 import buttons from 'components/ui/buttons.scss';
 import { colors, COLOR_GREEN } from 'components/ui';
+import { omit } from 'functions';
 
 import FormComponent from './FormComponent';
 
@@ -28,18 +29,18 @@ export default class Button extends FormComponent {
     render() {
         const { color, block, small } = this.props;
 
-        const props = {
-            ...this.props
-        };
+        const props = omit(this.props, Object.keys(Button.propTypes));
 
-        props.label = this.formatMessage(props.label);
+        const label = this.formatMessage(this.props.label);
 
         return (
             <button className={classNames(buttons[color], {
                 [buttons.block]: block,
                 [buttons.smallButton]: small
-            })} {...props}>
-                {props.label}
+            })}
+                {...props}
+            >
+                {label}
             </button>
         );
     }
diff --git a/src/components/ui/form/Checkbox.jsx b/src/components/ui/form/Checkbox.jsx
index 1d275a5..364046c 100644
--- a/src/components/ui/form/Checkbox.jsx
+++ b/src/components/ui/form/Checkbox.jsx
@@ -3,6 +3,7 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 
 import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
+import { omit } from 'functions';
 
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
@@ -32,10 +33,12 @@ export default class Checkbox extends FormInputComponent {
 
         label = this.formatMessage(label);
 
+        const props = omit(this.props, Object.keys(Checkbox.propTypes));
+
         return (
             <div className={classNames(styles[`${color}CheckboxRow`], styles[`${skin}CheckboxRow`])}>
                 <label className={styles.checkboxContainer}>
-                    <input ref={this.setEl} className={styles.checkboxInput} type="checkbox" {...this.props} />
+                    <input ref={this.setEl} className={styles.checkboxInput} type="checkbox" {...props} />
                     <div className={styles.checkbox} />
                     {label}
                 </label>
diff --git a/src/components/ui/form/Input.jsx b/src/components/ui/form/Input.jsx
index e256ca9..e900853 100644
--- a/src/components/ui/form/Input.jsx
+++ b/src/components/ui/form/Input.jsx
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 
 import classNames from 'classnames';
 
-import { uniqueId } from 'functions';
+import { uniqueId, omit } from 'functions';
 import icons from 'components/ui/icons.scss';
 import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
@@ -41,10 +41,10 @@ export default class Input extends FormInputComponent {
         const { color, skin, center } = this.props;
         let { icon, label } = this.props;
 
-        const props = {
+        const props = omit({
             type: 'text',
             ...this.props
-        };
+        }, Object.keys(Input.propTypes).filter((prop) => prop !== 'placeholder'));
 
         if (label) {
             if (!props.id) {
diff --git a/src/components/ui/form/TextArea.jsx b/src/components/ui/form/TextArea.jsx
index 3b03753..973c72e 100644
--- a/src/components/ui/form/TextArea.jsx
+++ b/src/components/ui/form/TextArea.jsx
@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 
 import classNames from 'classnames';
 
-import { uniqueId } from 'functions';
+import { uniqueId, omit } from 'functions';
 import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
 
 import styles from './form.scss';
@@ -38,10 +38,10 @@ export default class TextArea extends FormInputComponent {
         const { color, skin } = this.props;
         let { label } = this.props;
 
-        const props = {
+        const props = omit({
             type: 'text',
             ...this.props
-        };
+        }, Object.keys(TextArea.propTypes).filter((prop) => prop !== 'placeholder'));
 
         if (label) {
             if (!props.id) {
diff --git a/src/functions.js b/src/functions.js
index 3d79912..a2aa7c7 100644
--- a/src/functions.js
+++ b/src/functions.js
@@ -2,3 +2,19 @@ let lastId = 0;
 export function uniqueId(prefix = 'id') {
     return `${prefix}${++lastId}`;
 }
+
+/**
+ * @param {object} obj
+ * @param {array} keys
+ *
+ * @return {object}
+ */
+export function omit(obj, keys) {
+    const newObj = {...obj};
+
+    keys.forEach((key) => {
+        Reflect.deleteProperty(newObj, key);
+    });
+
+    return newObj;
+}