summaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
diff options
context:
space:
mode:
authorEinav Weiss Keidar <einavw@amdocs.com>2018-03-20 14:45:40 +0200
committerAvi Gaffa <avi.gaffa@amdocs.com>2018-03-20 13:52:31 +0000
commit7fdf733a64670fceefc3ded35cfa581e1c458179 (patch)
treeb3623ac9a331473830cb0167c0b487f2a176427c /openecomp-ui/src/nfvo-components/input/validation/Form.jsx
parentc7916a4e5955ccc5f0f5252307363b791ec5c7b9 (diff)
Adding Prettier and fixing up eslint version
Issue-ID: SDC-1094 Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input/validation/Form.jsx')
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx272
1 files changed, 151 insertions, 121 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
index 6df0bf9009..62fc29a55c 100644
--- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
+++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx
@@ -19,130 +19,160 @@ import PropTypes from 'prop-types';
import ValidationButtons from './ValidationButtons.jsx';
class Form extends React.Component {
-
- static defaultProps = {
- hasButtons : true,
- onSubmit : null,
- onReset : null,
- labledButtons: true,
- onValidChange : null,
- isValid: true,
- submitButtonText: null,
- cancelButtonText: null
- };
-
- static propTypes = {
- isValid : PropTypes.bool,
- formReady : PropTypes.bool,
- isReadOnlyMode : PropTypes.bool,
- hasButtons : PropTypes.bool,
- onSubmit : PropTypes.func,
- onReset : PropTypes.func,
- labledButtons: PropTypes.bool,
- submitButtonText: PropTypes.string,
- cancelButtonText: PropTypes.string,
- onValidChange : PropTypes.func,
- onValidityChanged: PropTypes.func,
- onValidateForm: PropTypes.func
- };
-
- constructor(props) {
- super(props);
- }
-
-
- render() {
- // eslint-disable-next-line no-unused-vars
- let {isValid, onValidChange, onValidityChanged, onDataChanged, formReady, onValidateForm, isReadOnlyMode, hasButtons, onSubmit, labledButtons, submitButtonText,
- cancelButtonText, 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}
- submitButtonText={submitButtonText}
- cancelButtonText={cancelButtonText}
- 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();
- }
- }
-
+ static defaultProps = {
+ hasButtons: true,
+ onSubmit: null,
+ onReset: null,
+ labledButtons: true,
+ onValidChange: null,
+ isValid: true,
+ submitButtonText: null,
+ cancelButtonText: null
+ };
+
+ static propTypes = {
+ isValid: PropTypes.bool,
+ formReady: PropTypes.bool,
+ isReadOnlyMode: PropTypes.bool,
+ hasButtons: PropTypes.bool,
+ onSubmit: PropTypes.func,
+ onReset: PropTypes.func,
+ labledButtons: PropTypes.bool,
+ submitButtonText: PropTypes.string,
+ cancelButtonText: PropTypes.string,
+ onValidChange: PropTypes.func,
+ onValidityChanged: PropTypes.func,
+ onValidateForm: PropTypes.func
+ };
+
+ constructor(props) {
+ super(props);
+ }
+ render() {
+ /* eslint-disable no-unused-vars */
+ let {
+ isValid,
+ onValidChange,
+ onValidityChanged,
+ onDataChanged,
+ formReady,
+ onValidateForm,
+ isReadOnlyMode,
+ hasButtons,
+ onSubmit,
+ labledButtons,
+ submitButtonText,
+ cancelButtonText,
+ children,
+ ...formProps
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+ 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}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ 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 {submitButtonText, cancelButtonText, 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}
- submitButtonText={submitButtonText}
- cancelButtonText={cancelButtonText}
- ref={buttons => this.buttons = buttons}
- isReadOnlyMode={isReadOnlyMode}/>
- }
- </form>
- );
- }
+ render() {
+ /* eslint-disable no-unused-vars */
+ let {
+ submitButtonText,
+ cancelButtonText,
+ isValid,
+ formReady,
+ onValidateForm,
+ isReadOnlyMode,
+ hasButtons,
+ onSubmit,
+ labledButtons,
+ onValidChange,
+ onValidityChanged,
+ onDataChanged,
+ children,
+ ...formProps
+ } = this.props;
+ /* eslint-enable no-unused-vars */
+ return (
+ <form
+ {...formProps}
+ ref={form => (this.form = form)}
+ onSubmit={event => this.handleFormValidation(event)}>
+ <div className="validation-form-content">{children}</div>
+ {hasButtons && (
+ <ValidationButtons
+ labledButtons={labledButtons}
+ submitButtonText={submitButtonText}
+ cancelButtonText={cancelButtonText}
+ ref={buttons => (this.buttons = buttons)}
+ isReadOnlyMode={isReadOnlyMode}
+ />
+ )}
+ </form>
+ );
+ }
}
export default Form;