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 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() {

View File

@ -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>
);
}

View File

@ -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>

View File

@ -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) {

View File

@ -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) {

View File

@ -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;
}