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

   1 /*
   2  * Copyright © 2016-2018 European Support Limited
   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 or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  */
  16
  17 import React from 'react';
  18 import PropTypes from 'prop-types';
  19 import ValidationButtons from './ValidationButtons.jsx';
  20
  21 class Form extends React.Component {
  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: PropTypes.bool,
  35         formReady: PropTypes.bool,
  36         isReadOnlyMode: PropTypes.bool,
  37         hasButtons: PropTypes.bool,
  38         onSubmit: PropTypes.func,
  39         onReset: PropTypes.func,
  40         labledButtons: PropTypes.bool,
  41         submitButtonText: PropTypes.string,
  42         cancelButtonText: PropTypes.string,
  43         onValidChange: PropTypes.func,
  44         onValidityChanged: PropTypes.func,
  45         onValidateForm: PropTypes.func,
  46         btnClassName: PropTypes.string
  47     };
  48
  49     constructor(props) {
  50         super(props);
  51     }
  52     render() {
  53         /* eslint-disable no-unused-vars */
  54         let {
  55             isValid,
  56             onValidChange,
  57             onValidityChanged,
  58             onDataChanged,
  59             formReady,
  60             onValidateForm,
  61             isReadOnlyMode,
  62             hasButtons,
  63             onSubmit,
  64             labledButtons,
  65             submitButtonText,
  66             cancelButtonText,
  67             children,
  68             btnClassName,
  69             ...formProps
  70         } = this.props;
  71         /* eslint-enable no-unused-vars */
  72         return (
  73             <form
  74                 {...formProps}
  75                 ref={this.setFormRef}
  76                 onSubmit={this.handleFormValidation}>
  77                 <div className="validation-form-content">
  78                     <fieldset disabled={isReadOnlyMode}>{children}</fieldset>
  79                 </div>
  80                 {hasButtons && (
  81                     <ValidationButtons
  82                         labledButtons={labledButtons}
  83                         submitButtonText={submitButtonText}
  84                         cancelButtonText={cancelButtonText}
  85                         ref={this.setButtonsRef}
  86                         isReadOnlyMode={isReadOnlyMode}
  87                         className={btnClassName}
  88                     />
  89                 )}
  90             </form>
  91         );
  92     }
  93
  94     handleFormValidation = event => {
  95         event.preventDefault();
  96         if (this.props.onValidateForm && !this.props.formReady) {
  97             return this.props.onValidateForm();
  98         } else {
  99             return this.handleFormSubmit(event);
 100         }
 101     };
 102
 103     setButtonsRef = buttons => (this.buttons = buttons);
 104
 105     setFormRef = form => (this.form = form);
 106
 107     handleFormSubmit(event) {
 108         if (event) {
 109             event.preventDefault();
 110         }
 111         if (this.props.onSubmit) {
 112             return this.props.onSubmit(event);
 113         }
 114     }
 115
 116     componentDidMount() {
 117         if (this.props.hasButtons) {
 118             this.buttons.setState({ isValid: this.props.isValid });
 119         }
 120     }
 121
 122     componentDidUpdate(prevProps) {
 123         // only handling this programatically if the validation of the form is done outside of the view
 124         // (example with a form that is dependent on the state of other forms)
 125         if (prevProps.isValid !== this.props.isValid) {
 126             if (this.props.hasButtons) {
 127                 this.buttons.setState({ isValid: this.props.isValid });
 128             }
 129             // callback in case form is part of bigger picture in view
 130             if (this.props.onValidChange) {
 131                 this.props.onValidChange(this.props.isValid);
 132             }
 133
 134             // TODO - maybe this has to be part of componentWillUpdate
 135             if (this.props.onValidityChanged) {
 136                 this.props.onValidityChanged(this.props.isValid);
 137             }
 138         }
 139         if (
 140             this.props.formReady &&
 141             this.props.formReady !== prevProps.formReady
 142         ) {
 143             // if form validation succeeded -> continue with submit
 144             this.handleFormSubmit();
 145         }
 146     }
 147 }
 148
 149 export class TabsForm extends Form {
 150     render() {
 151         /* eslint-disable no-unused-vars */
 152         let {
 153             submitButtonText,
 154             cancelButtonText,
 155             isValid,
 156             formReady,
 157             onValidateForm,
 158             isReadOnlyMode,
 159             hasButtons,
 160             onSubmit,
 161             labledButtons,
 162             onValidChange,
 163             onValidityChanged,
 164             onDataChanged,
 165             btnClassName,
 166             children,
 167             ...formProps
 168         } = this.props;
 169         /* eslint-enable no-unused-vars */
 170         return (
 171             <form
 172                 {...formProps}
 173                 ref={form => (this.form = form)}
 174                 onSubmit={event => this.handleFormValidation(event)}>
 175                 <div className="validation-form-content">{children}</div>
 176                 {hasButtons && (
 177                     <ValidationButtons
 178                         labledButtons={labledButtons}
 179                         submitButtonText={submitButtonText}
 180                         cancelButtonText={cancelButtonText}
 181                         ref={buttons => (this.buttons = buttons)}
 182                         isReadOnlyMode={isReadOnlyMode}
 183                         className={btnClassName}
 184                     />
 185                 )}
 186             </form>
 187         );
 188     }
 189 }
 190
 191 export default Form;