Fix React some warnings about unknown props

This commit is contained in:
SleepWalker 2016-07-29 20:14:52 +03:00
parent d9d4f55426
commit 927c80abce
6 changed files with 38 additions and 14 deletions

View File

@ -1,6 +1,8 @@
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { omit } from 'functions';
/** /**
* MeasureHeight is a component that allows you to measure the height of elements wrapped. * 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() { render() {
return <div {...this.props} />; const props = omit(this.props, Object.keys(MeasureHeight.propTypes));
return <div {...props} />;
} }
measure() { measure() {

View File

@ -4,6 +4,7 @@ import classNames from 'classnames';
import buttons from 'components/ui/buttons.scss'; import buttons from 'components/ui/buttons.scss';
import { colors, COLOR_GREEN } from 'components/ui'; import { colors, COLOR_GREEN } from 'components/ui';
import { omit } from 'functions';
import FormComponent from './FormComponent'; import FormComponent from './FormComponent';
@ -28,18 +29,18 @@ export default class Button extends FormComponent {
render() { render() {
const { color, block, small } = this.props; const { color, block, small } = this.props;
const props = { const props = omit(this.props, Object.keys(Button.propTypes));
...this.props
};
props.label = this.formatMessage(props.label); const label = this.formatMessage(this.props.label);
return ( return (
<button className={classNames(buttons[color], { <button className={classNames(buttons[color], {
[buttons.block]: block, [buttons.block]: block,
[buttons.smallButton]: small [buttons.smallButton]: small
})} {...props}> })}
{props.label} {...props}
>
{label}
</button> </button>
); );
} }

View File

@ -3,6 +3,7 @@ import React, { PropTypes } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui'; import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
import { omit } from 'functions';
import styles from './form.scss'; import styles from './form.scss';
import FormInputComponent from './FormInputComponent'; import FormInputComponent from './FormInputComponent';
@ -32,10 +33,12 @@ export default class Checkbox extends FormInputComponent {
label = this.formatMessage(label); label = this.formatMessage(label);
const props = omit(this.props, Object.keys(Checkbox.propTypes));
return ( return (
<div className={classNames(styles[`${color}CheckboxRow`], styles[`${skin}CheckboxRow`])}> <div className={classNames(styles[`${color}CheckboxRow`], styles[`${skin}CheckboxRow`])}>
<label className={styles.checkboxContainer}> <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} /> <div className={styles.checkbox} />
{label} {label}
</label> </label>

View File

@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { uniqueId } from 'functions'; import { uniqueId, omit } from 'functions';
import icons from 'components/ui/icons.scss'; import icons from 'components/ui/icons.scss';
import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui'; 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; const { color, skin, center } = this.props;
let { icon, label } = this.props; let { icon, label } = this.props;
const props = { const props = omit({
type: 'text', type: 'text',
...this.props ...this.props
}; }, Object.keys(Input.propTypes).filter((prop) => prop !== 'placeholder'));
if (label) { if (label) {
if (!props.id) { if (!props.id) {

View File

@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { uniqueId } from 'functions'; import { uniqueId, omit } from 'functions';
import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui'; import { colors, skins, SKIN_DARK, COLOR_GREEN } from 'components/ui';
import styles from './form.scss'; import styles from './form.scss';
@ -38,10 +38,10 @@ export default class TextArea extends FormInputComponent {
const { color, skin } = this.props; const { color, skin } = this.props;
let { label } = this.props; let { label } = this.props;
const props = { const props = omit({
type: 'text', type: 'text',
...this.props ...this.props
}; }, Object.keys(TextArea.propTypes).filter((prop) => prop !== 'placeholder'));
if (label) { if (label) {
if (!props.id) { if (!props.id) {

View File

@ -2,3 +2,19 @@ let lastId = 0;
export function uniqueId(prefix = 'id') { export function uniqueId(prefix = 'id') {
return `${prefix}${++lastId}`; 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;
}