Fix PropType eslint warnings for form fields

This commit is contained in:
Tautvidas Sipavičius
2018-10-31 22:04:11 +02:00
parent d4fa041ba8
commit 4f97bb45e1
7 changed files with 217 additions and 83 deletions

View File

@@ -1,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
class FormFieldCheckbox extends React.Component {
onValueChange = (e) => {
@@ -41,4 +42,13 @@ class FormFieldCheckbox extends React.Component {
}
}
FormFieldCheckbox.propTypes = {
onValueChange: PropTypes.func.isRequired,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
values: PropTypes.object.isRequired,
}).isRequired,
item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};
export default FormFieldCheckbox;

View File

@@ -36,7 +36,10 @@ FormFieldDateYear.propTypes = {
name: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
onValueChange: PropTypes.func.isRequired,
year: PropTypes.string.isRequired,
year: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
};
function FormFieldDateMonth(props) {
@@ -71,7 +74,10 @@ FormFieldDateMonth.propTypes = {
name: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
onValueChange: PropTypes.func.isRequired,
month: PropTypes.string.isRequired,
month: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
monthNames: PropTypes.arrayOf(PropTypes.string).isRequired,
};
@@ -108,7 +114,10 @@ FormFieldDateDay.propTypes = {
name: PropTypes.string.isRequired,
placeholder: PropTypes.string.isRequired,
onValueChange: PropTypes.func.isRequired,
day: PropTypes.string.isRequired,
day: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]).isRequired,
};
class FormFieldDate extends React.Component {

View File

@@ -7,6 +7,7 @@ import FormFieldCheckbox from 'form/fields/checkbox.jsx';
import FormFieldSelection from 'form/fields/selection.jsx';
import FormFieldDate from 'form/fields/date.jsx';
import jQuery from 'jquery';
import PropTypes from 'prop-types';
class FormField extends React.Component {
renderField = (data, inline = false) => {
@@ -117,4 +118,23 @@ class FormField extends React.Component {
}
}
FormField.propTypes = {
onValueChange: PropTypes.func,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
values: PropTypes.object,
tip: PropTypes.string,
label: PropTypes.string,
fields: PropTypes.array,
description: PropTypes.string,
}).isRequired,
item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};
FormField.defaultProps = {
onValueChange: function onValueChange() {
// no-op
},
};
export default FormField;

View File

@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
class FormFieldRadio extends React.Component {
class FormFieldRadio extends React.Component { // eslint-disable-line react/prefer-stateless-function, max-len
render() {
if (this.props.field.values === undefined) {
return false;
@@ -33,4 +34,20 @@ class FormFieldRadio extends React.Component {
}
}
FormFieldRadio.propTypes = {
onValueChange: PropTypes.func,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
values: PropTypes.object,
}).isRequired,
item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};
FormFieldRadio.defaultProps = {
onValueChange: function onValueChange() {
// no-op
},
};
export default FormFieldRadio;

View File

@@ -1,5 +1,6 @@
import React from 'react';
import _ from 'underscore';
import PropTypes from 'prop-types';
class FormFieldSelect extends React.Component {
render() {
@@ -73,4 +74,26 @@ class FormFieldSelect extends React.Component {
}
}
FormFieldSelect.propTypes = {
onValueChange: PropTypes.func,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
values: PropTypes.object,
placeholder: PropTypes.string,
filter: PropTypes.func,
sortBy: PropTypes.func,
validation: PropTypes.object,
}).isRequired,
item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
automationId: PropTypes.string,
};
FormFieldSelect.defaultProps = {
automationId: '',
onValueChange: function onValueChange() {
// no-op
},
};
module.exports = FormFieldSelect;

View File

@@ -3,20 +3,9 @@ import jQuery from 'jquery';
import _ from 'underscore';
import 'react-dom';
import 'select2';
import PropTypes from 'prop-types';
class Selection extends React.Component {
allowMultipleValues = () => {
return (this.props.field.multiple === true);
};
isSelect2Initialized = () => {
return (jQuery(`#${this.select.id}`).hasClass('select2-hidden-accessible') === true);
};
isSelect2Component = () => {
return this.allowMultipleValues() || this.props.field.forceSelect2;
};
componentDidMount() {
if (this.isSelect2Component()) {
this.setupSelect2();
@@ -51,28 +40,57 @@ class Selection extends React.Component {
return props.field.id || props.field.name;
};
resetSelect2 = () => {
this.destroySelect2();
this.setupSelect2();
};
destroySelect2 = () => {
if (this.isSelect2Initialized()) {
jQuery(`#${this.select.id}`).select2('destroy');
this.cleanupAfterSelect2();
getSelectedValues = () => {
if (this.props.field.selected !== undefined) {
return this.props.field.selected(this.props.item);
} else if (this.props.item !== undefined && this.props.field.name !== undefined) {
if (this.allowMultipleValues()) {
if (_.isArray(this.props.item[this.props.field.name])) {
return this.props.item[this.props.field.name].map(item => item.id);
}
} else {
return this.props.item[this.props.field.name];
}
}
return null;
};
cleanupAfterSelect2 = () => {
// remove DOM elements created by Select2 that are not tracked by React
jQuery(`#${this.select.id}`)
.find('option:not(.default)')
.remove();
getItems = () => {
let items;
if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
items = window[`mailpoet_${this.props.field.endpoint}`];
} else if (this.props.field.values !== undefined) {
items = this.props.field.values;
}
// unbind events (https://select2.org/programmatic-control/methods#event-unbinding)
jQuery(`#${this.select.id}`)
.off('select2:unselecting')
.off('select2:opening');
if (_.isArray(items)) {
if (this.props.field.filter !== undefined) {
items = items.filter(this.props.field.filter);
}
}
return items;
};
getLabel = (item) => {
if (this.props.field.getLabel !== undefined) {
return this.props.field.getLabel(item, this.props.item);
}
return item.name;
};
getSearchLabel = (item) => {
if (this.props.field.getSearchLabel !== undefined) {
return this.props.field.getSearchLabel(item, this.props.item);
}
return null;
};
getValue = (item) => {
if (this.props.field.getValue !== undefined) {
return this.props.field.getValue(item, this.props.item);
}
return item.id;
};
setupSelect2 = () => {
@@ -150,38 +168,36 @@ class Selection extends React.Component {
select2.on('change', this.handleChange);
};
getSelectedValues = () => {
if (this.props.field.selected !== undefined) {
return this.props.field.selected(this.props.item);
} else if (this.props.item !== undefined && this.props.field.name !== undefined) {
if (this.allowMultipleValues()) {
if (_.isArray(this.props.item[this.props.field.name])) {
return this.props.item[this.props.field.name].map(item => item.id);
}
} else {
return this.props.item[this.props.field.name];
}
}
return null;
resetSelect2 = () => {
this.destroySelect2();
this.setupSelect2();
};
getItems = () => {
let items;
if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
items = window[`mailpoet_${this.props.field.endpoint}`];
} else if (this.props.field.values !== undefined) {
items = this.props.field.values;
destroySelect2 = () => {
if (this.isSelect2Initialized()) {
jQuery(`#${this.select.id}`).select2('destroy');
this.cleanupAfterSelect2();
}
if (_.isArray(items)) {
if (this.props.field.filter !== undefined) {
items = items.filter(this.props.field.filter);
}
}
return items;
};
cleanupAfterSelect2 = () => {
// remove DOM elements created by Select2 that are not tracked by React
jQuery(`#${this.select.id}`)
.find('option:not(.default)')
.remove();
// unbind events (https://select2.org/programmatic-control/methods#event-unbinding)
jQuery(`#${this.select.id}`)
.off('select2:unselecting')
.off('select2:opening');
};
allowMultipleValues = () => (this.props.field.multiple === true);
isSelect2Initialized = () => (jQuery(`#${this.select.id}`).hasClass('select2-hidden-accessible') === true);
isSelect2Component = () => this.allowMultipleValues() || this.props.field.forceSelect2;
handleChange = (e) => {
if (this.props.onValueChange === undefined) return;
@@ -200,27 +216,6 @@ class Selection extends React.Component {
});
};
getLabel = (item) => {
if (this.props.field.getLabel !== undefined) {
return this.props.field.getLabel(item, this.props.item);
}
return item.name;
};
getSearchLabel = (item) => {
if (this.props.field.getSearchLabel !== undefined) {
return this.props.field.getSearchLabel(item, this.props.item);
}
return null;
};
getValue = (item) => {
if (this.props.field.getValue !== undefined) {
return this.props.field.getValue(item, this.props.item);
}
return item.id;
};
// When it's impossible to represent the desired value in DOM,
// this function may be used to transform the placeholder value into
// desired value.
@@ -277,4 +272,39 @@ class Selection extends React.Component {
}
}
Selection.propTypes = {
onValueChange: PropTypes.func,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
values: PropTypes.object,
getLabel: PropTypes.func,
resetSelect2OnUpdate: PropTypes.bool,
selected: PropTypes.func,
endpoint: PropTypes.string,
filter: PropTypes.func,
getSearchLabel: PropTypes.func,
getValue: PropTypes.func,
placeholder: PropTypes.string,
remoteQuery: PropTypes.object,
extendSelect2Options: PropTypes.object,
multiple: PropTypes.bool,
forceSelect2: PropTypes.bool,
transformChangedValue: PropTypes.func,
disabled: PropTypes.bool,
validation: PropTypes.object,
}).isRequired,
item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
disabled: PropTypes.bool,
width: PropTypes.string,
};
Selection.defaultProps = {
onValueChange: function onValueChange() {
// no-op
},
disabled: false,
width: '',
};
export default Selection;

View File

@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
class FormFieldText extends React.Component {
class FormFieldText extends React.Component { // eslint-disable-line react/prefer-stateless-function, max-len
render() {
const name = this.props.field.name || null;
const item = this.props.item || {};
@@ -54,4 +55,28 @@ class FormFieldText extends React.Component {
}
}
FormFieldText.propTypes = {
onValueChange: PropTypes.func,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
defaultValue: PropTypes.string,
id: PropTypes.string,
class: PropTypes.string,
size: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
disabled: PropTypes.func,
placeholder: PropTypes.string,
validation: PropTypes.object,
}).isRequired,
item: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};
FormFieldText.defaultProps = {
onValueChange: function onValueChange() {
// no-op
},
};
module.exports = FormFieldText;