2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
17 import React from 'react';
18 import ValidationButtons from './ValidationButtons.jsx';
20 class Form extends React.Component {
22 static defaultProps = {
32 isValid : React.PropTypes.bool,
33 formReady : React.PropTypes.bool,
34 isReadOnlyMode : React.PropTypes.bool,
35 hasButtons : React.PropTypes.bool,
36 onSubmit : React.PropTypes.func,
37 onReset : React.PropTypes.func,
38 labledButtons: React.PropTypes.bool,
39 onValidChange : React.PropTypes.func,
40 onValidityChanged: React.PropTypes.func,
41 onValidateForm: React.PropTypes.func
50 // eslint-disable-next-line no-unused-vars
51 let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
53 <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
54 <div className='validation-form-content'>
55 <fieldset disabled={isReadOnlyMode}>
59 {hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}
64 handleFormValidation(event) {
65 event.preventDefault();
66 if (this.props.onValidateForm && !this.props.formReady){
67 return this.props.onValidateForm();
69 return this.handleFormSubmit(event);
72 handleFormSubmit(event) {
74 event.preventDefault();
76 if(this.props.onSubmit) {
77 return this.props.onSubmit(event);
82 if (this.props.hasButtons) {
83 this.buttons.setState({isValid: this.props.isValid});
89 componentDidUpdate(prevProps) {
90 // only handling this programatically if the validation of the form is done outside of the view
91 // (example with a form that is dependent on the state of other forms)
92 if (prevProps.isValid !== this.props.isValid) {
93 if (this.props.hasButtons) {
94 this.buttons.setState({isValid: this.props.isValid});
96 // callback in case form is part of bigger picture in view
97 if (this.props.onValidChange) {
98 this.props.onValidChange(this.props.isValid);
101 // TODO - maybe this has to be part of componentWillUpdate
102 if(this.props.onValidityChanged) {
103 this.props.onValidityChanged(this.props.isValid);
106 if (this.props.formReady) { // if form validation succeeded -> continue with submit
107 this.handleFormSubmit();
113 export class TabsForm extends Form {
115 // eslint-disable-next-line no-unused-vars
116 let {isValid, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, onValidChange, onValidityChanged, onDataChanged, children, ...formProps} = this.props;
118 <form {...formProps} ref={(form) => this.form = form} onSubmit={event => this.handleFormValidation(event)}>
119 <div className='validation-form-content'>
122 {hasButtons && <ValidationButtons labledButtons={labledButtons} ref={(buttons) => this.buttons = buttons} isReadOnlyMode={isReadOnlyMode}/>}