openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.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  * Holds the buttons for save/reset for forms.
  18  * Used by the ValidationForm that changes the state of the buttons according to its own state.
  19  *
  20  * properties:
  21  * labledButtons - whether or not to use labeled buttons or icons only
  22  */
  23 import React from 'react';
  24 import PropTypes from 'prop-types';
  25 import i18n from 'nfvo-utils/i18n/i18n.js';
  26 import Button from 'sdc-ui/lib/react/Button.js';
  27 import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
  28
  29 class ValidationButtons extends React.Component {
  30     static propTypes = {
  31         labledButtons: PropTypes.bool.isRequired,
  32         isReadOnlyMode: PropTypes.bool,
  33         submitButtonText: PropTypes.string,
  34         cancelButtonText: PropTypes.string
  35     };
  36
  37     state = {
  38         isValid: this.props.formValid
  39     };
  40
  41     render() {
  42         let submitBtn = this.props.labledButtons ? (
  43             this.props.submitButtonText ? (
  44                 this.props.submitButtonText
  45             ) : (
  46                 i18n('Save')
  47             )
  48         ) : (
  49             <SVGIcon className="check" name="check" />
  50         );
  51         let closeBtn = this.props.labledButtons ? (
  52             this.props.cancelButtonText ? (
  53                 this.props.cancelButtonText
  54             ) : (
  55                 i18n('Cancel')
  56             )
  57         ) : (
  58             <SVGIcon className="close" name="close" />
  59         );
  60         let className = 'validation-buttons';
  61         if (this.props.className) {
  62             className += ' ' + this.props.className;
  63         }
  64         return (
  65             <div className={className}>
  66                 {!this.props.isReadOnlyMode ? (
  67                     <div>
  68                         <Button
  69                             type="submit"
  70                             btnType="primary"
  71                             size="default"
  72                             data-test-id="form-submit-button"
  73                             disabled={!this.state.isValid}>
  74                             {submitBtn}
  75                         </Button>
  76                         <Button
  77                             btnType="secondary"
  78                             type="reset"
  79                             data-test-id="form-close-button">
  80                             {closeBtn}
  81                         </Button>
  82                     </div>
  83                 ) : (
  84                     <Button
  85                         btnType="primary"
  86                         type="reset"
  87                         data-test-id="form-close-button">
  88                         {i18n('Close')}
  89                     </Button>
  90                 )}
  91             </div>
  92         );
  93     }
  94 }
  95 export default ValidationButtons;