diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input')
5 files changed, 59 insertions, 33 deletions
diff --git a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx index be0ebf2bdd..37d79cb72e 100644 --- a/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx +++ b/openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * 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 + * 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. + * 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 PropTypes from 'prop-types'; @@ -36,8 +36,8 @@ class ExpandableInputOpened extends React.Component { this.rawDomNode.focus(); } - componentWillReceiveProps(newProps) { - if (!newProps.value) { + componentDidUpdate() { + if (!this.props.value) { if (!(document.activeElement === this.rawDomNode)) { this.props.handleBlur(); } diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx index f36d999249..21f09e6613 100644 --- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx +++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx @@ -16,9 +16,16 @@ import React from 'react'; import PropTypes from 'prop-types'; import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js'; -import Input from 'nfvo-components/input/validation/InputWrapper.jsx'; +import Input from 'nfvo-components/input/validation/Input.jsx'; class DualListboxView extends React.Component { + constructor(props) { + super(props); + this.availableListRef = React.createRef(); + this.availableListFilterRef = React.createRef(); + this.selectedValuesListFilterRef = React.createRef(); + this.selectedValuesRef = React.createRef(); + } static propTypes = { availableList: PropTypes.arrayOf( PropTypes.shape({ @@ -77,13 +84,13 @@ class DualListboxView extends React.Component { unselectedList, { value: availableListFilter, - ref: 'availableListFilter', + ref: this.availableListFilterRef, disabled: isReadOnlyMode, onChange: value => this.setState({ availableListFilter: value }) }, { - ref: 'availableValues', + ref: this.availableListRef, disabled: isReadOnlyMode, testId: 'available' } @@ -94,13 +101,13 @@ class DualListboxView extends React.Component { selectedList, { value: selectedValuesListFilter, - ref: 'selectedValuesListFilter', + ref: this.selectedValuesListFilterRef, disabled: isReadOnlyMode, onChange: value => this.setState({ selectedValuesListFilter: value }) }, { - ref: 'selectedValues', + ref: this.selectedValuesRef, disabled: isReadOnlyMode, testId: 'selected' } @@ -236,6 +243,12 @@ class DualListboxView extends React.Component { removeAllFromSelectedList() { this.props.onChange([]); } + + // fix for auto-selection of first value in the list on the first render + componentDidMount() { + this.availableListRef.current.input.value = ''; + this.selectedValuesRef.current.input.value = ''; + } } export default DualListboxView; diff --git a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx index b5db67c027..027920c423 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Form.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Form.jsx @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * 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 + * 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. + * 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'; @@ -42,7 +42,8 @@ class Form extends React.Component { cancelButtonText: PropTypes.string, onValidChange: PropTypes.func, onValidityChanged: PropTypes.func, - onValidateForm: PropTypes.func + onValidateForm: PropTypes.func, + btnClassName: PropTypes.string }; constructor(props) { @@ -64,6 +65,7 @@ class Form extends React.Component { submitButtonText, cancelButtonText, children, + btnClassName, ...formProps } = this.props; /* eslint-enable no-unused-vars */ @@ -82,6 +84,7 @@ class Form extends React.Component { cancelButtonText={cancelButtonText} ref={this.setButtonsRef} isReadOnlyMode={isReadOnlyMode} + className={btnClassName} /> )} </form> @@ -159,6 +162,7 @@ export class TabsForm extends Form { onValidChange, onValidityChanged, onDataChanged, + btnClassName, children, ...formProps } = this.props; @@ -176,6 +180,7 @@ export class TabsForm extends Form { cancelButtonText={cancelButtonText} ref={buttons => (this.buttons = buttons)} isReadOnlyMode={isReadOnlyMode} + className={btnClassName} /> )} </form> diff --git a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx index c54d4b660f..f3279b0b6d 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/Input.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/Input.jsx @@ -4,9 +4,9 @@ * 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. @@ -197,11 +197,15 @@ class Input extends React.Component { selectedValues }); } - componentWillReceiveProps(nextProps) { - this.setState({ - value: nextProps.value - }); + + static getDerivedStateFromProps(props, state) { + if (state.value === props.value) { + return null; + } else { + return { value: props.value, ...state }; + } } + onChange(e) { const { onChange, type } = this.props; let value = e.target.value; diff --git a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx index 550989688e..a4397114a0 100644 --- a/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx +++ b/openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx @@ -1,17 +1,17 @@ -/*! - * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved. +/* + * Copyright © 2016-2018 European Support Limited * * 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 + * 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. + * 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. */ /** * Holds the buttons for save/reset for forms. @@ -57,8 +57,12 @@ class ValidationButtons extends React.Component { ) : ( <SVGIcon className="close" name="close" /> ); + let className = 'validation-buttons'; + if (this.props.className) { + className += ' ' + this.props.className; + } return ( - <div className="validation-buttons"> + <div className={className}> {!this.props.isReadOnlyMode ? ( <div> <Button |