openecomp-ui/src/nfvo-components/input/validation/Form.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import ValidationButtons from './ValidationButtons.jsx';
  19
  20 class Form extends React.Component {
  21
  22         static defaultProps = {
  23                 hasButtons : true,
  24                 onSubmit : null,
  25                 onReset :  null,
  26                 labledButtons: true,
  27                 onValidChange :  null,
  28                 isValid: true,
  29                 submitButtonText: null,
  30                 cancelButtonText: null
  31         };
  32
  33         static propTypes = {
  34                 isValid : React.PropTypes.bool,
  35                 formReady : React.PropTypes.bool,
  36                 isReadOnlyMode : React.PropTypes.bool,
  37                 hasButtons : React.PropTypes.bool,
  38                 onSubmit : React.PropTypes.func,
  39                 onReset : React.PropTypes.func,
  40                 labledButtons: React.PropTypes.bool,
  41                 submitButtonText: React.PropTypes.string,
  42                 cancelButtonText: React.PropTypes.string,
  43                 onValidChange : React.PropTypes.func,
  44                 onValidityChanged: React.PropTypes.func,
  45                 onValidateForm: React.PropTypes.func
  46         };
  47
  48         constructor(props) {
  49                 super(props);
  50         }
  51
  52
  53         render() {
  54                 // eslint-disable-next-line no-unused-vars
  55                 let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
  56                          cancelButtonText, children, ...formProps} = this.props;
  57                 return (
  58                         <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
  59                                 <div className='validation-form-content'>
  60                                         <fieldset disabled={isReadOnlyMode}>
  61                                                 {children}
  62                                         </fieldset>
  63                                 </div>
  64                                 {hasButtons &&
  65                                         <ValidationButtons
  66                                                 labledButtons={labledButtons}
  67                                                 submitButtonText={submitButtonText}
  68                                                 cancelButtonText={cancelButtonText}
  69                                                 ref={(buttons) => this.buttons = buttons}
  70                                                 isReadOnlyMode={isReadOnlyMode}/>}
  71                         </form>
  72                 );
  73         }
  74
  75         handleFormValidation(event) {
  76                 event.preventDefault();
  77                 if (this.props.onValidateForm && !this.props.formReady){
  78                         return this.props.onValidateForm();
  79                 } else {
  80                         return this.handleFormSubmit(event);
  81                 }
  82         }
  83         handleFormSubmit(event) {
  84                 if (event) {
  85                         event.preventDefault();
  86                 }
  87                 if(this.props.onSubmit) {
  88                         return this.props.onSubmit(event);
  89                 }
  90         }
  91
  92         componentDidMount() {
  93                 if (this.props.hasButtons) {
  94                         this.buttons.setState({isValid: this.props.isValid});
  95                 }
  96         }
  97
  98
  99
 100         componentDidUpdate(prevProps) {
 101                 // only handling this programatically if the validation of the form is done outside of the view
 102                 // (example with a form that is dependent on the state of other forms)
 103                 if (prevProps.isValid !== this.props.isValid) {
 104                         if (this.props.hasButtons) {
 105                                 this.buttons.setState({isValid: this.props.isValid});
 106                         }
 107                         // callback in case form is part of bigger picture in view
 108                         if (this.props.onValidChange) {
 109                                 this.props.onValidChange(this.props.isValid);
 110                         }
 111
 112                         // TODO - maybe this has to be part of componentWillUpdate
 113                         if(this.props.onValidityChanged) {
 114                                 this.props.onValidityChanged(this.props.isValid);
 115                         }
 116                 }
 117                 if (this.props.formReady) { // if form validation succeeded -> continue with submit
 118                         this.handleFormSubmit();
 119                 }
 120         }
 121
 122 }
 123
 124 export class TabsForm extends Form {
 125         render() {
 126                 // eslint-disable-next-line no-unused-vars
 127                 let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
 128                 return (
 129                         <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
 130                                 <div className='validation-form-content'>
 131                                                 {children}
 132                                 </div>
 133                                 {hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
 134                         </form>
 135                 );
 136         }
 137 }
 138
 139 export default Form;