From 7fdf733a64670fceefc3ded35cfa581e1c458179 Mon Sep 17 00:00:00 2001
From: Einav Weiss Keidar <einavw@amdocs.com>
Date: Tue, 20 Mar 2018 14:45:40 +0200
Subject: Adding Prettier and fixing up eslint version

Issue-ID: SDC-1094
Change-Id: Ie83ad95a03899345dd90235daf0323cbe3bc6afd
Signed-off-by: Einav Weiss Keidar <einavw@amdocs.com>
---
 .../input/dualListbox/DualListboxView.jsx          | 348 +++++++++++++--------
 1 file changed, 218 insertions(+), 130 deletions(-)

(limited to 'openecomp-ui/src/nfvo-components/input/dualListbox')

diff --git a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
index a689c50778..7ab4c8242c 100644
--- a/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
+++ b/openecomp-ui/src/nfvo-components/input/dualListbox/DualListboxView.jsx
@@ -19,136 +19,224 @@ import SVGIcon from 'sdc-ui/lib/react/SVGIcon.js';
 import Input from 'nfvo-components/input/validation/InputWrapper.jsx';
 
 class DualListboxView extends React.Component {
-
-	static propTypes = {
-
-		availableList: PropTypes.arrayOf(PropTypes.shape({
-			id: PropTypes.string.isRequired,
-			name: PropTypes.string.isRequired
-		})),
-		filterTitle: PropTypes.shape({
-			left: PropTypes.string,
-			right: PropTypes.string
-		}),
-		selectedValuesList: PropTypes.arrayOf(PropTypes.string),
-
-		onChange: PropTypes.func.isRequired
-	};
-
-	static defaultProps = {
-		selectedValuesList: [],
-		availableList: [],
-		filterTitle: {
-			left: '',
-			right: ''
-		}
-	};
-
-	state = {
-		availableListFilter: '',
-		selectedValuesListFilter: '',
-		selectedValues: []
-	};
-
-	render() {
-		let {availableList, selectedValuesList, filterTitle, isReadOnlyMode} = this.props;
-		let {availableListFilter, selectedValuesListFilter} = this.state;
-
-		let unselectedList = availableList.filter(availableItem => !selectedValuesList.find(value => value === availableItem.id));
-		let selectedList = availableList.filter(availableItem => selectedValuesList.find(value => value === availableItem.id));
-		selectedList = selectedList.sort((a, b) => selectedValuesList.indexOf(a.id) - selectedValuesList.indexOf(b.id));
-		return (
-			<div className='dual-list-box'>
-				{this.renderListbox(filterTitle.left, unselectedList, {
-					value: availableListFilter,
-					ref: 'availableListFilter',
-					disabled: isReadOnlyMode,
-					onChange: (value) => this.setState({availableListFilter: value})
-				}, {ref: 'availableValues', disabled: isReadOnlyMode, testId: 'available',})}
-				{this.renderOperationsBar(isReadOnlyMode)}
-				{this.renderListbox(filterTitle.right, selectedList, {
-					value: selectedValuesListFilter,
-					ref: 'selectedValuesListFilter',
-					disabled: isReadOnlyMode,
-					onChange: (value) => this.setState({selectedValuesListFilter: value})
-				}, {ref: 'selectedValues', disabled: isReadOnlyMode, testId: 'selected'})}
-			</div>
-		);
-	}
-
-	renderListbox(filterTitle, list, filterProps, props) {
-		let regExFilter = new RegExp(escape(filterProps.value), 'i');
-		let matchedItems = list.filter(item => item.name.match(regExFilter));
-		let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
-		return (
-			<div className='dual-search-multi-select-section'>
-				<p>{filterTitle}</p>
-				<div className='dual-text-box-search search-wrapper'>
-					<Input data-test-id={`${props.testId}-search-input`}
-						   name='search-input-control' type='text'
-						   groupClassName='search-input-control'
-						   {...filterProps}/>
-					<SVGIcon name='search' className='search-icon'/>
-				</div>
-				<Input
-					multiple
-					onChange={(event) => this.onSelectItems(event.target.selectedOptions)}
-					groupClassName='dual-list-box-multi-select'
-					type='select'
-					name='dual-list-box-multi-select'
-					data-test-id={`${props.testId}-select-input`}
-					disabled={props.disabled}
-					ref={props.ref}>
-					{matchedItems.map(item => this.renderOption(item.id, item.name))}
-					{matchedItems.length && unMatchedItems.length && <option style={{pointerEvents: 'none'}}>--------------------</option>}
-					{unMatchedItems.map(item => this.renderOption(item.id, item.name))}
-				</Input>
-			</div>
-		);
-	}
-
-	onSelectItems(selectedOptions) {
-		let selectedValues = Object.keys(selectedOptions).map((k) => selectedOptions[k].value);
-		this.setState({selectedValues});
-	}
-
-	renderOption(value, name) {
-		return (<option className='dual-list-box-multi-select-text' key={value} value={value}>{name}</option>);
-	}
-
-	renderOperationsBar(isReadOnlyMode) {
-		return (
-			<div className={`dual-list-options-bar${isReadOnlyMode ? ' disabled' : ''}`}>
-				{this.renderOperationBarButton(() => this.addToSelectedList(), 'angleRight')}
-				{this.renderOperationBarButton(() => this.removeFromSelectedList(), 'angleLeft')}
-				{this.renderOperationBarButton(() => this.addAllToSelectedList(), 'angleDoubleRight')}
-				{this.renderOperationBarButton(() => this.removeAllFromSelectedList(), 'angleDoubleLeft')}
-			</div>
-		);
-	}
-
-	renderOperationBarButton(onClick, iconName){
-		return (<div className='dual-list-option' data-test-id={`operation-icon-${iconName}`} onClick={onClick}><SVGIcon name={iconName}/></div>);
-	}
-
-	addToSelectedList() {
-		this.props.onChange(this.props.selectedValuesList.concat(this.state.selectedValues));
-		this.setState({selectedValues: []});
-	}
-
-	removeFromSelectedList() {
-		const selectedValues = this.state.selectedValues;
-		this.props.onChange(this.props.selectedValuesList.filter(value => !selectedValues.find(selectedValue => selectedValue === value)));
-		this.setState({selectedValues: []});
-	}
-
-	addAllToSelectedList() {
-		this.props.onChange(this.props.availableList.map(item => item.id));
-	}
-
-	removeAllFromSelectedList() {
-		this.props.onChange([]);
-	}
+    static propTypes = {
+        availableList: PropTypes.arrayOf(
+            PropTypes.shape({
+                id: PropTypes.string.isRequired,
+                name: PropTypes.string.isRequired
+            })
+        ),
+        filterTitle: PropTypes.shape({
+            left: PropTypes.string,
+            right: PropTypes.string
+        }),
+        selectedValuesList: PropTypes.arrayOf(PropTypes.string),
+
+        onChange: PropTypes.func.isRequired
+    };
+
+    static defaultProps = {
+        selectedValuesList: [],
+        availableList: [],
+        filterTitle: {
+            left: '',
+            right: ''
+        }
+    };
+
+    state = {
+        availableListFilter: '',
+        selectedValuesListFilter: '',
+        selectedValues: []
+    };
+
+    render() {
+        let {
+            availableList,
+            selectedValuesList,
+            filterTitle,
+            isReadOnlyMode
+        } = this.props;
+        let { availableListFilter, selectedValuesListFilter } = this.state;
+
+        let unselectedList = availableList.filter(
+            availableItem =>
+                !selectedValuesList.find(value => value === availableItem.id)
+        );
+        let selectedList = availableList.filter(availableItem =>
+            selectedValuesList.find(value => value === availableItem.id)
+        );
+        selectedList = selectedList.sort(
+            (a, b) =>
+                selectedValuesList.indexOf(a.id) -
+                selectedValuesList.indexOf(b.id)
+        );
+        return (
+            <div className="dual-list-box">
+                {this.renderListbox(
+                    filterTitle.left,
+                    unselectedList,
+                    {
+                        value: availableListFilter,
+                        ref: 'availableListFilter',
+                        disabled: isReadOnlyMode,
+                        onChange: value =>
+                            this.setState({ availableListFilter: value })
+                    },
+                    {
+                        ref: 'availableValues',
+                        disabled: isReadOnlyMode,
+                        testId: 'available'
+                    }
+                )}
+                {this.renderOperationsBar(isReadOnlyMode)}
+                {this.renderListbox(
+                    filterTitle.right,
+                    selectedList,
+                    {
+                        value: selectedValuesListFilter,
+                        ref: 'selectedValuesListFilter',
+                        disabled: isReadOnlyMode,
+                        onChange: value =>
+                            this.setState({ selectedValuesListFilter: value })
+                    },
+                    {
+                        ref: 'selectedValues',
+                        disabled: isReadOnlyMode,
+                        testId: 'selected'
+                    }
+                )}
+            </div>
+        );
+    }
+
+    renderListbox(filterTitle, list, filterProps, props) {
+        let regExFilter = new RegExp(escape(filterProps.value), 'i');
+        let matchedItems = list.filter(item => item.name.match(regExFilter));
+        let unMatchedItems = list.filter(item => !item.name.match(regExFilter));
+        return (
+            <div className="dual-search-multi-select-section">
+                <p>{filterTitle}</p>
+                <div className="dual-text-box-search search-wrapper">
+                    <Input
+                        data-test-id={`${props.testId}-search-input`}
+                        name="search-input-control"
+                        type="text"
+                        groupClassName="search-input-control"
+                        {...filterProps}
+                    />
+                    <SVGIcon name="search" className="search-icon" />
+                </div>
+                <Input
+                    multiple
+                    onChange={event =>
+                        this.onSelectItems(event.target.selectedOptions)
+                    }
+                    groupClassName="dual-list-box-multi-select"
+                    type="select"
+                    name="dual-list-box-multi-select"
+                    data-test-id={`${props.testId}-select-input`}
+                    disabled={props.disabled}
+                    ref={props.ref}>
+                    {matchedItems.map(item =>
+                        this.renderOption(item.id, item.name)
+                    )}
+                    {matchedItems.length &&
+                        unMatchedItems.length && (
+                            <option style={{ pointerEvents: 'none' }}>
+                                --------------------
+                            </option>
+                        )}
+                    {unMatchedItems.map(item =>
+                        this.renderOption(item.id, item.name)
+                    )}
+                </Input>
+            </div>
+        );
+    }
+
+    onSelectItems(selectedOptions) {
+        let selectedValues = Object.keys(selectedOptions).map(
+            k => selectedOptions[k].value
+        );
+        this.setState({ selectedValues });
+    }
+
+    renderOption(value, name) {
+        return (
+            <option
+                className="dual-list-box-multi-select-text"
+                key={value}
+                value={value}>
+                {name}
+            </option>
+        );
+    }
+
+    renderOperationsBar(isReadOnlyMode) {
+        return (
+            <div
+                className={`dual-list-options-bar${
+                    isReadOnlyMode ? ' disabled' : ''
+                }`}>
+                {this.renderOperationBarButton(
+                    () => this.addToSelectedList(),
+                    'angleRight'
+                )}
+                {this.renderOperationBarButton(
+                    () => this.removeFromSelectedList(),
+                    'angleLeft'
+                )}
+                {this.renderOperationBarButton(
+                    () => this.addAllToSelectedList(),
+                    'angleDoubleRight'
+                )}
+                {this.renderOperationBarButton(
+                    () => this.removeAllFromSelectedList(),
+                    'angleDoubleLeft'
+                )}
+            </div>
+        );
+    }
+
+    renderOperationBarButton(onClick, iconName) {
+        return (
+            <div
+                className="dual-list-option"
+                data-test-id={`operation-icon-${iconName}`}
+                onClick={onClick}>
+                <SVGIcon name={iconName} />
+            </div>
+        );
+    }
+
+    addToSelectedList() {
+        this.props.onChange(
+            this.props.selectedValuesList.concat(this.state.selectedValues)
+        );
+        this.setState({ selectedValues: [] });
+    }
+
+    removeFromSelectedList() {
+        const selectedValues = this.state.selectedValues;
+        this.props.onChange(
+            this.props.selectedValuesList.filter(
+                value =>
+                    !selectedValues.find(
+                        selectedValue => selectedValue === value
+                    )
+            )
+        );
+        this.setState({ selectedValues: [] });
+    }
+
+    addAllToSelectedList() {
+        this.props.onChange(this.props.availableList.map(item => item.id));
+    }
+
+    removeAllFromSelectedList() {
+        this.props.onChange([]);
+    }
 }
 
 export default DualListboxView;
-- 
cgit 1.2.3-korg