Merge pull request #782 from metasfresh/dev-600

Lookup revamp – collective issue #600

src/assets/css/inputs.css

@@ -454,7 +454,7 @@ input:checked + .input-slider:before {
 }
 
 .input-error {
-    border-color: $brand-danger-color;
+    border-color: $brand-danger-light-color;
 }
 
 .input-error input {
@@ -660,7 +660,81 @@ input:checked + .input-slider:before {
     overflow-y: auto;
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
+    left: 0;
+    top: calc(100% + 1px);
 }
+
+.lookup-wrapper {
+    display: flex;
+    padding: 0;
+    justify-content: space-between;
+}
+
+.raw-lookup-wrapper {
+    display: flex;
+    align-items: center;
+    padding: .3rem .50rem;
+    flex: 1;
+}
+
+.raw-lookup-wrapper .input-dropdown-container  {
+    width: 100%;
+}
+
+.raw-lookup-wrapper.input-icon {
+    flex: 0.05;
+    justify-content: flex-end;
+}
+
+.input-secondary .raw-lookup-wrapper {
+    padding: .1rem .50rem;
+}
+
+.raw-lookup-disabled .input-dropdown-container {
+    cursor: not-allowed;
+}
+
+.raw-lookup-disabled .input-dropdown {
+    cursor: not-allowed;
+}
+
+.raw-lookup-wrapper-bcg:hover {
+    background-color: $brand-border-color;
+}
+
+.input-error .raw-lookup-wrapper-bcg:hover {
+    background-color: $brand-danger-color !important;
+}
+
+.input-error  .raw-lookup-wrapper-bcg:hover .input-dropdown-container .input-dropdown {
+    color: $brand-super-light-color;
+}
+
+.input-error .raw-lookup-wrapper-bcg:hover .input-dropdown,
+.input-error .raw-lookup-wrapper-bcg:hover .input-dropdown input,
+.input-error .raw-lookup-wrapper-bcg:hover .input-dropdown-container {
+    background-color: $brand-danger-color !important;
+    color: $brand-super-light-color;
+}
+
+.raw-lookup-wrapper .input-dropdown-container {
+    min-width: 0;
+}
+
+.lookup-wrapper .input-dropdown-container {
+    position: static;
+}
+
+.lookup-wrapper .input-dropdown-container .input-dropdown{
+    position: static;
+    margin: 0;
+    border-bottom: none;
+}
+
+.lookup-wrapper .meta-icon-down-1 {
+    display: none;
+}
+
 .input-field {
     border: 0;
     width: 100%;
@@ -689,6 +763,16 @@ input:checked + .input-slider:before {
     background-color: $brand-color-primary;
     color: #fff;
 }
+.input-error .input-dropdown-list-option:hover,
+.input-error .input-dropdown-list-option:hover * {
+    color: $brand-font-color;
+    background-color: $brand-danger-color !important;
+}
+.input-error .input-dropdown-list-option.input-dropdown-list-option-key-on,
+.input-error .input-dropdown-list-option.input-dropdown-list-option-key-on * {
+    color: $brand-font-color;
+    background-color: $brand-danger-color !important;
+}
 .input-dropdown-list-option p {
     margin:0;
     overflow: hidden;
@@ -912,7 +996,3 @@ table .rdtPicker table td,
     vertical-align: middle;
     padding: 0;
 }
-.Lookup .input-icon {
-    height: 16px;
-    bottom: 0;
-}

src/assets/css/variables.css

@@ -14,6 +14,7 @@ $brand-primary-color: #1d4776;
 $brand-primary-dark-color: #16365b;
 $brand-primary-light-color: #E6F1FA;
 $brand-danger-color: #f67a89;
+$brand-danger-light-color: #f1e5e7;
 $brand-warning-color: #e5bf26;
 $brand-default-color: #eef2f7;
 

src/components/widget/List/List.js

@@ -13,7 +13,31 @@ class List extends Component {
         super(props);
         this.state = {
             list: [],
-            loading: false
+            loading: false,
+            selectedItem: '',
+            prevValue: ''
+        }
+    }
+
+    componentDidMount(){
+        const {defaultValue} = this.props;
+
+        if(defaultValue) {
+            this.setState({
+                prevValue: defaultValue
+            });
+        }
+    }
+
+    componentDidUpdate(prevProps){
+        const {isInputEmpty} = this.props;
+
+        if(isInputEmpty && prevProps.isInputEmpty !== isInputEmpty) {
+
+            this.setState({
+                prevValue: ''
+            });
+
         }
     }
 
@@ -41,34 +65,69 @@ class List extends Component {
     }
 
     handleSelect = (option) => {
-        const {onChange} = this.props;
-        onChange(option);
+        const {
+            onChange, lookupList, properties, setNextProperty, mainProperty
+        } = this.props;
+        const {prevValue} = this.state;
+
+         if( prevValue !== option[Object.keys(option)[0]] ) {
+             if(lookupList){
+                    onChange(properties[0].field, option);
+
+                    this.setState({
+                        selectedItem: option,
+                        prevValue: option[Object.keys(option)[0]]
+                    });
+                    setNextProperty(mainProperty[0].field);
+            } else {
+                onChange(option);
+            }
+         }
+    }
+
+    handleAutoSelect = (option) => {
+        const {
+            onChange, properties, setNextProperty, mainProperty
+        } = this.props;
+
+        onChange(properties[0].field, option);
+
+        this.setState({
+            selectedItem: option,
+            prevValue: option[Object.keys(option)[0]]
+        });
+        setNextProperty(mainProperty[0].field);
     }
 
     render() {
         const {
             rank, readonly, defaultValue, selected, align, updated, rowId,
-            emptyText, tabIndex, mandatory, validStatus
+            emptyText, tabIndex, mandatory, validStatus, lookupList, autofocus,
+            blur
         } = this.props;
-        const {list, loading} = this.state;
+        const {list, loading, selectedItem} = this.state;
 
         return (
             <RawList
                 list={list}
                 loading={loading}
                 onFocus={this.handleFocus}
                 onSelect={option => this.handleSelect(option)}
+                autoSelect={option => this.handleAutoSelect(option)}
                 rank={rank}
                 readonly={readonly}
                 defaultValue={defaultValue}
-                selected={selected}
+                selected={lookupList ? selectedItem : selected}
                 align={align}
                 updated={updated}
                 rowId={rowId}
                 emptyText={emptyText}
                 tabIndex={tabIndex}
                 mandatory={mandatory}
                 validStatus={validStatus}
+                autofocus={autofocus}
+                lookupList={lookupList}
+                blur={blur}
             />
         )
     }

src/components/widget/List/RawList.js

@@ -22,7 +22,20 @@ class RawList extends Component {
     }
 
     componentDidUpdate = prevProps => {
-        const { list, mandatory } = this.props;
+        const { list, mandatory, defaultValue, autofocus, blur } = this.props;
+
+        if(prevProps.blur != blur){
+            blur && this.handleBlur();
+        }
+
+        if(this.dropdown && autofocus) {
+            this.dropdown.focus();
+            list.length === 1 && this.handleSelect(list[0]);
+        }
+
+        if(prevProps.defaultValue != defaultValue){
+            this.dropdown && this.dropdown.focus();
+        }
 
         if(prevProps.list !== list){
             let dropdown = [];
@@ -110,7 +123,7 @@ class RawList extends Component {
     handleBlur = () => {
         const { selected, doNotOpenOnFocus } = this.props;
 
-        !doNotOpenOnFocus && this.dropdown.blur();
+        !doNotOpenOnFocus && this.dropdown && this.dropdown.blur();
         this.setState({
             isOpen: false,
             selected: selected || 0
@@ -122,14 +135,17 @@ class RawList extends Component {
      * on focus.
      */
     handleClick = (e) => {
-        e.preventDefault();
-        const {onFocus, doNotOpenOnFocus} = this.props;
+        const {lookupList} = this.props;
+        if(!lookupList){
+            e.preventDefault();
+            const {onFocus, doNotOpenOnFocus} = this.props;
 
-        onFocus && onFocus();
+            onFocus && onFocus();
 
-        doNotOpenOnFocus && this.setState({
-            isOpen: true
-        })
+            doNotOpenOnFocus && this.setState({
+                isOpen: true
+            })
+        }
     }
 
     handleFocus = (e) => {
@@ -163,6 +179,20 @@ class RawList extends Component {
         }, () => this.handleBlur())
     }
 
+    handleAutoSelect = (option) => {
+        const {autoSelect} = this.props;
+
+        if(option){
+            autoSelect(option);
+        }else{
+            autoSelect(null);
+        }
+
+        this.setState({
+            selected: (option || 0)
+        }, () => this.handleBlur())
+    }
+
     handleSwitch = (option) => {
         this.setState({
             selected: (option || 0)
@@ -291,6 +321,7 @@ class RawList extends Component {
     }
 
     getRow = (index, option, label) => {
+        const {defaultValue} = this.props;
         const {selected} = this.state;
 
         return (
@@ -300,6 +331,10 @@ class RawList extends Component {
                     (
                         this.areOptionsEqual(selected, option) ?
                         ' input-dropdown-list-option-key-on' :
+                        defaultValue === option[Object.keys(option)[0]] ?
+                        ' input-dropdown-list-option-key-on' :
+                        !defaultValue && !selected && index == 1 ?
+                        ' input-dropdown-list-option-key-on':
                         ''
                     )
                 }
@@ -328,7 +363,8 @@ class RawList extends Component {
     render() {
         const {
             list, rank, readonly, defaultValue, selected, align, updated,
-            loading, rowId, isModal, tabIndex, disabled, mandatory, validStatus
+            loading, rowId, isModal, tabIndex, disabled, mandatory, validStatus,
+            lookupList
         } = this.props;
 
         const {
@@ -377,8 +413,8 @@ class RawList extends Component {
                             readOnly
                             tabIndex={-1}
                             placeholder={defaultValue}
-                            value={selected ?
-                                selected[Object.keys(selected)[0]] : ''}
+                            value={lookupList ? defaultValue : (selected ?
+                                selected[Object.keys(selected)[0]] : '')}
                             onChange={this.handleChange}
                             ref={(c) => this.inputSearch = c}
                             disabled={readonly || disabled}