summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
blob: 98810d1c0d228855fd678d743dbb24c3d318054c (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*!
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing
 * permissions and limitations under the License.
 */

import React from 'react';
import ValidationButtons from './ValidationButtons.jsx';

class Form extends React.Component {

	static defaultProps = {
		hasButtons : true,
		onSubmit : null,
		onReset :  null,
		labledButtons: true,
		onValidChange :  null,
		isValid: true
	};

	static propTypes = {
		isValid : React.PropTypes.bool,
		formReady : React.PropTypes.bool,
		isReadOnlyMode : React.PropTypes.bool,
		hasButtons : React.PropTypes.bool,
		onSubmit : React.PropTypes.func,
		onReset : React.PropTypes.func,
		labledButtons: React.PropTypes.bool,
		onValidChange : React.PropTypes.func,
		onValidityChanged: React.PropTypes.func,
		onValidateForm: React.PropTypes.func
	};

	constructor(props) {
		super(props);
	}


	render() {
		// eslint-disable-next-line no-unused-vars
		let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
		return (
			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
				<div className='validation-form-content'>
					<fieldset disabled={isReadOnlyMode}>
						{children}
					</fieldset>
				</div>
				{hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
			</form>
		);
	}

	handleFormValidation(event) {
		event.preventDefault();
		if (this.props.onValidateForm && !this.props.formReady){
			return this.props.onValidateForm();
		} else {
			return this.handleFormSubmit(event);
		}
	}
	handleFormSubmit(event) {
		if (event) {
			event.preventDefault();
		}
		if(this.props.onSubmit) {
			return this.props.onSubmit(event);
		}
	}

	componentDidMount() {
		if (this.props.hasButtons) {
			this.buttons.setState({isValid: this.props.isValid});
		}
	}



	componentDidUpdate(prevProps) {
		// only handling this programatically if the validation of the form is done outside of the view
		// (example with a form that is dependent on the state of other forms)
		if (prevProps.isValid !== this.props.isValid) {
			if (this.props.hasButtons) {
				this.buttons.setState({isValid: this.props.isValid});
			}
			// callback in case form is part of bigger picture in view
			if (this.props.onValidChange) {
				this.props.onValidChange(this.props.isValid);
			}

			// TODO - maybe this has to be part of componentWillUpdate
			if(this.props.onValidityChanged) {
				this.props.onValidityChanged(this.props.isValid);
			}
		}
		if (this.props.formReady) { // if form validation succeeded -> continue with submit
			this.handleFormSubmit();
		}
	}

}

export class TabsForm extends Form {
	render() {
		// eslint-disable-next-line no-unused-vars
		let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
		return (
			<form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
				<div className='validation-form-content'>
						{children}
				</div>
				{hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
			</form>
		);
	}
}

export default Form;