From 4acfa2f4644ce8533283513d723137bc27b02b9c Mon Sep 17 00:00:00 2001 From: katarzynadunikowska Date: Wed, 10 May 2017 13:52:30 +0200 Subject: [PATCH] Fix lookup dropdown behavior, cleaning code #600 --- src/components/widget/List/List.js | 4 +- src/components/widget/List/RawList.js | 14 ++-- src/components/widget/Lookup/Lookup.js | 98 +++-------------------- src/components/widget/Lookup/RawLookup.js | 9 +-- 4 files changed, 24 insertions(+), 101 deletions(-) diff --git a/src/components/widget/List/List.js b/src/components/widget/List/List.js index 9e9360ab0..079c68b4a 100644 --- a/src/components/widget/List/List.js +++ b/src/components/widget/List/List.js @@ -58,7 +58,7 @@ class List extends Component { render() { const { rank, readonly, defaultValue, selected, align, updated, rowId, - emptyText, tabIndex, mandatory, validStatus, lookupList, autofocus + emptyText, tabIndex, mandatory, validStatus, lookupList, autofocus, blur } = this.props; const {list, loading, selectedItem} = this.state; @@ -80,6 +80,8 @@ class List extends Component { mandatory={mandatory} validStatus={validStatus} autofocus={autofocus} + lookupList={lookupList} + blur={blur} /> ) } diff --git a/src/components/widget/List/RawList.js b/src/components/widget/List/RawList.js index 15794dcdf..af56b96d4 100644 --- a/src/components/widget/List/RawList.js +++ b/src/components/widget/List/RawList.js @@ -24,7 +24,11 @@ class RawList extends Component { } componentDidUpdate = prevProps => { - const { list, mandatory, defaultValue, autofocus } = this.props; + const { list, mandatory, defaultValue, autofocus, blur } = this.props; + + if(prevProps.blur != blur){ + blur && this.handleBlur(); + } (this.dropdown && autofocus) && this.dropdown.focus(); @@ -110,7 +114,6 @@ class RawList extends Component { } handleBlur = () => { - console.log('handleBlur'); const { selected, doNotOpenOnFocus } = this.props; !doNotOpenOnFocus && this.dropdown && this.dropdown.blur(); @@ -298,7 +301,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 { @@ -347,8 +351,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} diff --git a/src/components/widget/Lookup/Lookup.js b/src/components/widget/Lookup/Lookup.js index 24175d33c..1d9a213e8 100644 --- a/src/components/widget/Lookup/Lookup.js +++ b/src/components/widget/Lookup/Lookup.js @@ -28,23 +28,12 @@ class Lookup extends Component { this.state = { isInputEmpty: true, propertiesCopy: getItemsByProperty(properties, 'source', 'list'), - showNextDropdown: false, property: '' } - - // console.log(this.state.propertiesCopy); - // console.log(properties); } componentDidMount() { const {defaultValue, properties} = this.props; - console.log('defaultValue component did mount'); - console.log(defaultValue); - console.log(properties); - - // this.setState({ - // property: properties[0].field - // }) this.checkIfDefaultValue(); } @@ -52,27 +41,14 @@ class Lookup extends Component { componentDidUpdate(prevProps) { const {defaultValue, properties} = this.props; const {property} = this.state; - - // console.log('property'); - // console.log(property); - // if(JSON.stringify(prevProps.defaultValue)!==JSON.stringify(defaultValue)){ - - // defaultValue.map((item, index)=>{ - // const prevIndex = index-1; - // if(prevIndex>-1 && defaultValue[prevIndex].field === property){ - // console.log(properties[index].field); - // this.setState({ - // property: properties[index].field - // }) - // } - - // }) - // } - // console.log('defaultValue'); - // console.log(defaultValue); + const objectValue = property && getItemsByProperty( + defaultValue, 'field', property + )[0].value; - + if(objectValue) { + this.setNextProperty(property); + } } @@ -82,39 +58,23 @@ class Lookup extends Component { }) } - // getNextDropdown=(state)=> { - // this.setState({ - // showNextDropdown: state - // }); - // } - - setNextProperty = (property)=> { + setNextProperty = (prop)=> { const {defaultValue, properties} = this.props; - console.log('setNextProperty'); - console.log(property); - // property && this.setState({ - // property: property - // }); - defaultValue.map((item, index)=>{ const nextIndex = index+1; - if(nextIndex { @@ -124,40 +84,16 @@ class Lookup extends Component { this.setState({ isInputEmpty: false }) - // console.log(item.value); } }); } - // componentDidUpdate(prevProps) { - // const {defaultValue} = this.props; - // console.log(prevProps.defaultValue); - - // if(JSON.stringify(prevProps.defaultValue) !== - // JSON.stringify(defaultValue)){ - // this.checkIfDefaultValue(); - // } - - - // // defaultValue.map(item => { - // // if(item.value){ - // // this.setState({ - // // isInputEmpty: false - // // }) - // // console.log(item.value); - // // } - - // // }); - // } - handleClear = (e) => { - // console.log('handleClear'); const {onChange, properties} = this.props; onChange(properties, null, false); this.setState({ isInputEmpty: true, - property: properties[0].field, property: '' }); } @@ -194,8 +130,6 @@ class Lookup extends Component { { properties && properties.map((item, index) => { - {/*console.log(item);*/} - { if(item.source === 'lookup'){ return } - - - } }) } - - {isInputEmpty ?
diff --git a/src/components/widget/Lookup/RawLookup.js b/src/components/widget/Lookup/RawLookup.js index 8dc0c953d..529a3bc62 100644 --- a/src/components/widget/Lookup/RawLookup.js +++ b/src/components/widget/Lookup/RawLookup.js @@ -22,7 +22,6 @@ class RawLookup extends Component { list: [], isInputEmpty: true, selected: null, - model: null, loading: false, oldValue: '', isOpen: false, @@ -49,9 +48,6 @@ class RawLookup extends Component { const {autoFocus, defaultValue} = this.props; const {isInputEmpty, shouldBeFocused} = this.state; - // console.log('defaultValue'); - // console.log(defaultValue); - if(autoFocus && isInputEmpty && shouldBeFocused){ this.inputSearch.focus(); this.setState({ @@ -74,19 +70,18 @@ class RawLookup extends Component { this.inputSearch.value = select[Object.keys(select)[0]]; handleInputEmptyStatus(false); + setNextProperty(mainProperty[0].field); this.handleBlur(); } else { // handling selection when main is not set or set. - onChange( mainProperty[0].field, select, this.getAllDropdowns ); this.inputSearch.value = select[Object.keys(select)[0]]; handleInputEmptyStatus(false); - // getNextDropdown(true); setNextProperty(mainProperty[0].field); this.handleBlur(); @@ -168,7 +163,6 @@ class RawLookup extends Component { list: [], isInputEmpty: true, selected: null, - model: null, loading: false, query: '' }); @@ -242,7 +236,6 @@ class RawLookup extends Component { const {oldValue} = this.state; if(!filterWidget && !!defaultValue && this.inputSearch) { - // const init = defaultValue[0].value; const init = defaultValue; const inputValue = init[Object.keys(init)[0]];