aboutsummaryrefslogtreecommitdiffstats
path: root/openecomp-ui/src/nfvo-components/input
diff options
context:
space:
mode:
Diffstat (limited to 'openecomp-ui/src/nfvo-components/input')
-rw-r--r--openecomp-ui/src/nfvo-components/input/ExpandableInput.jsx16
-rw-r--r--openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx23
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Form.jsx19
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/Input.jsx16
-rw-r--r--openecomp-ui/src/nfvo-components/input/validation/ValidationButtons.jsx18
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