Remove all required props in settings-manager and change input select design

This commit is contained in:
cyril lopez 2017-09-26 11:47:13 +02:00
parent 381dfb4c3c
commit f406dc8b3f
22 changed files with 137 additions and 106 deletions

View File

@ -114,4 +114,4 @@
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {}
}
}

View File

@ -58,11 +58,11 @@ class EditForm extends React.Component { // eslint-disable-line react/prefer-sta
EditForm.propTypes = {
cancelAction: PropTypes.bool,
formErrors: PropTypes.array,
handleCancel: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired,
sections: PropTypes.array.isRequired,
values: PropTypes.object.isRequired,
handleCancel: PropTypes.func,
handleChange: PropTypes.func,
handleSubmit: PropTypes.func,
sections: PropTypes.array,
values: PropTypes.object,
};
export default EditForm;

View File

@ -56,13 +56,13 @@ class EditFormSection extends React.Component { // eslint-disable-line react/pre
}
EditFormSection.propTypes = {
formErrors: PropTypes.array.isRequired,
handleChange: PropTypes.func.isRequired,
formErrors: PropTypes.array,
handleChange: PropTypes.func,
renderInput: PropTypes.func,
section: PropTypes.object.isRequired,
section: PropTypes.object,
showNestedForm: PropTypes.bool,
styles: PropTypes.object,
values: PropTypes.object.isRequired,
values: PropTypes.object,
};
export default WithFormSection(EditFormSection); // eslint-disable-line new-cap

View File

@ -81,13 +81,13 @@ class EditFormSectionNested extends React.Component { // eslint-disable-line rea
}
EditFormSectionNested.propTypes = {
formErrors: PropTypes.array.isRequired,
handleChange: PropTypes.func.isRequired,
formErrors: PropTypes.array,
handleChange: PropTypes.func,
renderInput: PropTypes.func,
section: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
]).isRequired,
]),
styles: PropTypes.object,
value: PropTypes.object,
values: PropTypes.object,

View File

@ -24,11 +24,11 @@ class EditFormSectionSubNested extends React.Component { // eslint-disable-line
}
EditFormSectionSubNested.propTypes = {
renderInput: PropTypes.func.isRequired,
renderInput: PropTypes.func,
section: PropTypes.oneOfType([
PropTypes.array,
PropTypes.object,
]).isRequired,
]),
styles: PropTypes.object,
};

View File

@ -49,8 +49,8 @@ class HeaderNav extends React.Component { // eslint-disable-line react/prefer-st
}
HeaderNav.propTypes = {
links: PropTypes.array.isRequired,
path: PropTypes.string.isRequired,
renderListComponent: PropTypes.bool.isRequired,
links: PropTypes.array,
path: PropTypes.string,
renderListComponent: PropTypes.bool,
}
export default HeaderNav;

View File

@ -44,12 +44,12 @@ class InputEnum extends React.Component { // eslint-disable-line react/prefer-st
}
InputEnum.propTypes = {
customBootstrapClass: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
selectOptions: PropTypes.array.isRequired,
target: PropTypes.string.isRequired,
value: PropTypes.any.isRequired,
customBootstrapClass: PropTypes.string,
handleChange: PropTypes.func,
name: PropTypes.string,
selectOptions: PropTypes.array,
target: PropTypes.string,
value: PropTypes.any,
}
export default InputEnum;

View File

@ -169,19 +169,19 @@ InputNumber.propTypes = {
PropTypes.array,
]).isRequired,
handleBlur: PropTypes.func,
handleChange: PropTypes.func.isRequired,
handleChange: PropTypes.func,
handleFocus: PropTypes.func,
inputDescription: PropTypes.string,
name: PropTypes.string.isRequired,
name: PropTypes.string,
noErrorsDescription: PropTypes.bool,
placeholder: PropTypes.string,
styles: PropTypes.object,
target: PropTypes.string.isRequired,
validations: PropTypes.object.isRequired,
target: PropTypes.string,
validations: PropTypes.object,
value: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]).isRequired,
]),
}
export default WithInput(InputNumber); // eslint-disable-line new-cap

View File

@ -144,20 +144,20 @@ class InputPassword extends React.Component { // eslint-disable-line react/prefe
}
InputPassword.propTypes = {
customBootstrapClass: PropTypes.string.isRequired,
deactivateErrorHighlight: PropTypes.bool.isRequired,
errors: PropTypes.array.isRequired,
handleBlur: PropTypes.func.isRequired,
handleChange: PropTypes.func.isRequired,
handleFocus: PropTypes.func.isRequired,
inputDescription: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
noErrorsDescription: PropTypes.bool.isRequired,
placeholder: PropTypes.string.isRequired,
styles: PropTypes.object.isRequired,
target: PropTypes.string.isRequired,
validations: PropTypes.object.isRequired,
value: PropTypes.string.isRequired,
customBootstrapClass: PropTypes.string,
deactivateErrorHighlight: PropTypes.bool,
errors: PropTypes.array,
handleBlur: PropTypes.func,
handleChange: PropTypes.func,
handleFocus: PropTypes.func,
inputDescription: PropTypes.string,
name: PropTypes.string,
noErrorsDescription: PropTypes.bool,
placeholder: PropTypes.string,
styles: PropTypes.object,
target: PropTypes.string,
validations: PropTypes.object,
value: PropTypes.string,
};
export default WithInput(InputPassword); // eslint-disable-line new-cap

View File

@ -23,7 +23,7 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
const requiredClass = this.props.validations.required && this.props.addRequiredInputDesign ? styles.requiredClass : '';
return (
<div className={`${styles.inputSelect} ${requiredClass} ${bootStrapClass}`}>
<div className={`${styles.input} ${requiredClass} ${bootStrapClass}`}>
<label htmlFor={this.props.name}>
<FormattedMessage id={`settings-manager.${this.props.name}`} />
</label>
@ -35,13 +35,15 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
value={this.props.value}
>
{map(this.props.selectOptions, (option, key) => (
<FormattedMessage id={`settings-manager.${option.name}`} key={key}>
{(message) => (
<option value={option.value}>
{message}
</option>
)}
</FormattedMessage>
option.name ?
<FormattedMessage id={`settings-manager.${option.name}`} key={key}>
{(message) => (
<option value={option.value}>
{message}
</option>
)}
</FormattedMessage> :
<option value={option.value} key={key}>{option.name}</option>
))}
</select>
</div>
@ -50,17 +52,17 @@ class InputSelect extends React.Component { // eslint-disable-line react/prefer-
}
InputSelect.propTypes = {
addRequiredInputDesign: PropTypes.bool.isRequired,
customBootstrapClass: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
addRequiredInputDesign: PropTypes.bool,
customBootstrapClass: PropTypes.string,
handleChange: PropTypes.func,
name: PropTypes.string,
selectOptions: PropTypes.oneOfType([
PropTypes.array.isRequired,
PropTypes.object.isRequired, // TODO remove
]).isRequired,
target: PropTypes.string.isRequired,
validations: PropTypes.object.isRequired,
value: PropTypes.string.isRequired,
PropTypes.array,
PropTypes.object,
]),
target: PropTypes.string,
validations: PropTypes.object,
value: PropTypes.string,
};
export default InputSelect;

View File

@ -27,3 +27,34 @@
content: "*";
}
}
.input {
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-family: Lato;
-webkit-font-smoothing: antialiased;
> label {
margin-bottom: 0;
font-weight: 500;
text-transform: capitalize;
}
> select {
margin-top: .9rem;
padding-top: 0rem;
padding-left: 1rem;
height: 3.4rem !important;
line-height: 3.2rem;
border: 1px solid #E3E9F3;
border-radius: 0.25rem;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.3rem;
font-family: Lato !important;
background-position: right -1px center;
background-repeat: no-repeat;
background-image: url('../../assets/images/background_input.svg');
}
}

View File

@ -193,15 +193,15 @@ InputText.propTypes = {
deactivateErrorHighlight: PropTypes.bool,
errors: PropTypes.array,
handleBlur: PropTypes.func,
handleChange: PropTypes.func.isRequired,
handleChange: PropTypes.func,
handleFocus: PropTypes.func,
inputDescription: PropTypes.string,
name: PropTypes.string.isRequired,
name: PropTypes.string,
noErrorsDescription: PropTypes.bool,
placeholder: PropTypes.string,
styles: PropTypes.object,
target: PropTypes.string.isRequired,
validations: PropTypes.object.isRequired,
target: PropTypes.string,
validations: PropTypes.object,
value: PropTypes.string,
}

View File

@ -72,12 +72,12 @@ class InputToggle extends React.Component { // eslint-disable-line react/prefer-
}
InputToggle.propTypes = {
customBootstrapClass: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired,
hiddenLabel: PropTypes.bool.isRequired,
customBootstrapClass: PropTypes.string,
handleChange: PropTypes.func,
hiddenLabel: PropTypes.bool,
isChecked: PropTypes.bool,
name: PropTypes.string.isRequired,
target: PropTypes.string.isRequired,
name: PropTypes.string,
target: PropTypes.string,
}
export default InputToggle;

View File

@ -147,17 +147,17 @@ List.propTypes = {
formErrors: PropTypes.array,
handlei18n: PropTypes.bool,
handleListPopUpSubmit: PropTypes.func,
listButtonLabel: PropTypes.string.isRequired,
listButtonLabel: PropTypes.string,
listItems: PropTypes.array,
listTitle: PropTypes.oneOfType([
PropTypes.string.isRequired,
PropTypes.object.isRequired,
]).isRequired,
PropTypes.string,
PropTypes.object,
]),
noListButtonPopUp: PropTypes.bool,
renderRow: PropTypes.oneOfType([
PropTypes.bool.isRequired,
PropTypes.func.isRequired,
]).isRequired,
PropTypes.bool,
PropTypes.func,
]),
}
export default List;

View File

@ -38,9 +38,9 @@ class PluginLeftMenuSection extends React.Component { // eslint-disable-line rea
}
PluginLeftMenuSection.propTypes = {
environments: PropTypes.array.isRequired,
environments: PropTypes.array,
envParams: PropTypes.string,
section: PropTypes.object.isRequired,
section: PropTypes.object,
};
export default PluginLeftMenuSection;

View File

@ -45,13 +45,13 @@ class PopUpForm extends React.Component { // eslint-disable-line react/prefer-st
}
PopUpForm.propTypes = {
renderInput: PropTypes.func.isRequired,
renderInput: PropTypes.func,
renderPopUpForm: PropTypes.oneOfType([
PropTypes.func,
PropTypes.bool,
]).isRequired,
resetToggleDefaultConnection: PropTypes.func.isRequired,
sections: PropTypes.array.isRequired,
]),
resetToggleDefaultConnection: PropTypes.func,
sections: PropTypes.array,
};
export default WithFormSection(PopUpForm); // eslint-disable-line new-cap

View File

@ -69,11 +69,11 @@ class PopUpWarning extends React.Component { // eslint-disable-line react/prefer
PopUpWarning.propTypes = {
dangerMessage: PropTypes.string,
handleConfirm: PropTypes.func.isRequired,
handleConfirm: PropTypes.func,
handleConfirmDanger: PropTypes.func,
isOpen: PropTypes.bool.isRequired,
isOpen: PropTypes.bool,
showDanger: PropTypes.bool,
toggleModal: PropTypes.func.isRequired,
toggleModal: PropTypes.func,
warningMessage: PropTypes.string,
}

View File

@ -131,12 +131,12 @@ class RowDatabase extends React.Component { // eslint-disable-line react/prefer-
}
RowDatabase.propTypes = {
data: PropTypes.object.isRequired,
error: PropTypes.bool.isRequired,
formErrors: PropTypes.array.isRequired,
getDatabase: PropTypes.func.isRequired,
handleDatabaseDelete: PropTypes.func.isRequired,
handleSubmit: PropTypes.func.isRequired,
data: PropTypes.object,
error: PropTypes.bool,
formErrors: PropTypes.array,
getDatabase: PropTypes.func,
handleDatabaseDelete: PropTypes.func,
handleSubmit: PropTypes.func,
};
export default RowDatabase;

View File

@ -92,11 +92,11 @@ class RowLanguage extends React.Component { // eslint-disable-line react/prefer-
RowLanguage.propTypes = {
active: PropTypes.bool,
changeDefaultLanguage: PropTypes.func.isRequired,
handleLanguageDelete: PropTypes.func.isRequired,
listLanguages: PropTypes.object.isRequired,
liStyles: PropTypes.object.isRequired,
name: PropTypes.string.isRequired,
changeDefaultLanguage: PropTypes.func,
handleLanguageDelete: PropTypes.func,
listLanguages: PropTypes.object,
liStyles: PropTypes.object,
name: PropTypes.string,
};
export default RowLanguage;

View File

@ -39,10 +39,10 @@ class SelectOptionLanguage extends React.Component { // eslint-disable-line reac
}
SelectOptionLanguage.propTypes = {
isFocused: PropTypes.bool.isRequired,
onFocus: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
option: PropTypes.object.isRequired,
isFocused: PropTypes.bool,
onFocus: PropTypes.func,
onSelect: PropTypes.func,
option: PropTypes.object,
};
export default SelectOptionLanguage;

View File

@ -21,13 +21,13 @@ const WithFormSection = (InnerComponent) => class extends React.Component {
static propTypes = {
addRequiredInputDesign: PropTypes.bool,
cancelAction: PropTypes.bool,
formErrors: PropTypes.array.isRequired,
handleChange: PropTypes.func.isRequired,
formErrors: PropTypes.array,
handleChange: PropTypes.func,
section: PropTypes.oneOfType([
PropTypes.object,
PropTypes.array,
]),
values: PropTypes.object.isRequired,
values: PropTypes.object,
}
constructor(props) {

View File

@ -7,8 +7,6 @@
import styles from './styles.scss';
const WithInput = (InnerInput) => class extends React.Component { // eslint-disable-line react/prefer-stateless-function
// TODO handle state and props
render() {
return (
<InnerInput