[AAI-92 Amsterdam] Update license
[aai/sparky-fe.git] / src / generic-components / input / validation / ValidationForm.jsx
1 /*
2  * ============LICENSE_START=======================================================
3  * org.onap.aai
4  * ================================================================================
5  * Copyright © 2017 AT&T Intellectual Property. All rights reserved.
6  * Copyright © 2017 Amdocs
7  * ================================================================================
8  * Licensed under the Apache License, Version 2.0 (the "License");
9  * you may not use this file except in compliance with the License.
10  * You may obtain a copy of the License at
11  *
12  *       http://www.apache.org/licenses/LICENSE-2.0
13  *
14  * Unless required by applicable law or agreed to in writing, software
15  * distributed under the License is distributed on an "AS IS" BASIS,
16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17  * See the License for the specific language governing permissions and
18  * limitations under the License.
19  * ============LICENSE_END=========================================================
20  *
21  * ECOMP is a trademark and service mark of AT&T Intellectual Property.
22  */
23 /**
24         * ValidationForm should be used in order to have a form that handles it's
25         * internal validation state. All ValidationInputs inside the form are checked
26         * for validity and the styling and submit buttons are updated accordingly.
27         *
28         * The properties that ahould be given to the form:
29         * labledButtons - whether or not use icons only as the form default buttons or
30         * use buttons with labels onSubmit - function for click on the submit button
31         * onReset - function for click on the reset button
32         */
33 import React from 'react';
34 import ValidationButtons from './ValidationButtons.jsx';
35
36 class ValidationForm extends React.Component {
37                 
38                 static childContextTypes = {
39                                 validationParent: React.PropTypes.any,
40                                 isReadOnlyMode: React.PropTypes.bool
41                 };
42                 
43                 static defaultProps = {
44                                 hasButtons: true,
45                                 onSubmit: null,
46                                 onReset: null,
47                                 labledButtons: true,
48                                 onValidChange: null,
49                                 isValid: true
50                 };
51                 
52                 static propTypes = {
53                                 isValid: React.PropTypes.bool,
54                                 hasButtons: React.PropTypes.bool,
55                                 onSubmit: React.PropTypes.func,
56                                 onReset: React.PropTypes.func,
57                                 labledButtons: React.PropTypes.bool,
58                                 onValidChange: React.PropTypes.func
59                 };
60                 
61                 state = {
62                                 isValid: this.props.isValid
63                 };
64                 
65                 constructor(props) {
66                                 super(props);
67                                 this.validationComponents = [];
68                 }
69                 
70                 render() {
71                                 var buttons = (this.props.hasButtons) ?
72                                               <ValidationButtons labledButtons={this.props.labledButtons}
73                                                                  ref='buttons'
74                                                                  isReadOnlyMode={this.props.isReadOnlyMode}/>
75                                                 : null;
76                                 return (
77                                                 <form {...this.props} onSubmit={event => this.handleFormSubmit(event)}>
78                                                                 <div className='validation-form-content'>{this.props.children}</div>
79                                                                 {buttons}
80                                                 </form>
81                                 );
82                 }
83                 
84                 handleFormSubmit(event) {
85                                 event.preventDefault();
86                                 let isFormValid = true;
87                                 this.validationComponents.forEach(validationComponent => {
88                                                 const isInputValid = validationComponent.validate().isValid;
89                                                 isFormValid = isInputValid && isFormValid;
90                                 });
91                                 if (isFormValid && this.props.onSubmit) {
92                                                 this.props.onSubmit(event);
93                                 } else if (!isFormValid) {
94                                                 this.setState({isValid: false});
95                                 }
96                 };
97                 
98                 componentDidUpdate(prevProps, prevState) {
99                                 // only handling this programatically if the validation of the form is done
100                                 // outside of the view (example with a form that is dependent on the state
101                                 // of other forms)
102                                 if (prevProps.isValid !== this.props.isValid) {
103                                                 if (this.props.hasButtons) {
104                                                                 this.refs.buttons.setState({isValid: this.state.isValid});
105                                                 }
106                                 } else if (this.state.isValid !== prevState.isValid) {
107                                                 if (this.props.hasButtons) {
108                                                                 this.refs.buttons.setState({isValid: this.state.isValid});
109                                                 }
110                                                 // callback in case form is part of bigger picture in view
111                                                 if (this.props.onValidChange) {
112                                                                 this.props.onValidChange(this.state.isValid);
113                                                 }
114                                 }
115                 }
116                 
117                 componentDidMount() {
118                                 if (this.props.hasButtons) {
119                                                 this.refs.buttons.setState({isValid: this.state.isValid});
120                                 }
121                 }
122                 
123                 
124                 getChildContext() {
125                                 return {
126                                                 validationParent: this,
127                                                 isReadOnlyMode: this.props.isReadOnlyMode
128                                 };
129                 }
130                 
131                 
132                 /***
133                         * Used by ValidationInput in order to let the (parent) form know
134                         * the valid state. If there is a change in the state of the form,
135                         * the buttons will be updated.
136                         *
137                         * @param validationComponent
138                         * @param isValid
139                         */
140                 childValidStateChanged(validationComponent, isValid) {
141                                 if (isValid !== this.state.isValid) {
142                                                 let oldState = this.state.isValid;
143                                                 let newState = isValid &&
144                                                                 this.validationComponents.filter(
145                                                                                 otherValidationComponent => validationComponent !==
146                                                                                 otherValidationComponent).every(otherValidationComponent => {
147                                                                                 return otherValidationComponent.isValid();
148                                                                 });
149                                                 
150                                                 if (oldState !== newState) {
151                                                                 this.setState({isValid: newState});
152                                                 }
153                                 }
154                 }
155                 
156                 register(validationComponent) {
157                                 this.validationComponents.push(validationComponent);
158                 }
159                 
160                 unregister(validationComponent) {
161                                 this.childValidStateChanged(validationComponent, true);
162                                 this.validationComponents =
163                                                 this.validationComponents.filter(
164                                                                 otherValidationComponent => validationComponent !==
165                                                                 otherValidationComponent);
166                 }
167 }
168
169
170 export default ValidationForm;

© 2017 ONAP. Copyright © The Linux Foundation ®. All Rights Reserved.
The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our Trademark Usage page.
Linux is a registered trademark of Linus Torvalds.
Privacy Policy and Terms of Use