Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
Fix lookup dropdown behavior, cleaning code #600
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dunkat
Dunkat committed May 10, 2017
1 parent 1ddc620 commit 4acfa2f
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 101 deletions.
4 changes: 3 additions & 1 deletion src/components/widget/List/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -80,6 +80,8 @@ class List extends Component {
mandatory={mandatory}
validStatus={validStatus}
autofocus={autofocus}
lookupList={lookupList}
blur={blur}
/>
)
}
Expand Down
14 changes: 9 additions & 5 deletions src/components/widget/List/RawList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down Expand Up @@ -110,7 +114,6 @@ class RawList extends Component {
}

handleBlur = () => {
console.log('handleBlur');
const { selected, doNotOpenOnFocus } = this.props;

!doNotOpenOnFocus && this.dropdown && this.dropdown.blur();
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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}
Expand Down
98 changes: 11 additions & 87 deletions src/components/widget/Lookup/Lookup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,51 +28,27 @@ 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();
}

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);
}

}

Expand All @@ -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<defaultValue.length && defaultValue[index].field === property){
console.log(properties[nextIndex].field);
if(nextIndex<defaultValue.length && defaultValue[index].field === prop){
this.setState({
property: properties[nextIndex].field
})
return;
} else if(defaultValue[defaultValue.length-1].field === property){
console.log('else-----------------------------');
} else if(defaultValue[defaultValue.length-1].field === prop){
this.setState({
property: ''
})
}

})


}

checkIfDefaultValue = () => {
Expand All @@ -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: ''
});
}
Expand Down Expand Up @@ -194,8 +130,6 @@ class Lookup extends Component {

{
properties && properties.map((item, index) => {
{/*console.log(item);*/}
{
if(item.source === 'lookup'){
return <RawLookup
key={index}
Expand Down Expand Up @@ -231,11 +165,6 @@ class Lookup extends Component {
defaultValue, 'field', item.field
)[0].value;

{/*console.log('----');
console.log(item.field);
console.log(property);*/}


return <div className="raw-lookup-wrapper raw-lookup-wrapper-bcg" key={index}>
<List
dataId={dataId}
Expand All @@ -251,21 +180,16 @@ class Lookup extends Component {
onChange={onChange}
lookupList={true}
autofocus={item.field == property ? true : false}
defaultValue={objectValue[Object.keys(objectValue)[0]]}
isInputEmpty={isInputEmpty}
defaultValue={objectValue ? objectValue[Object.keys(objectValue)[0]] : ''}
setNextProperty={this.setNextProperty}
mainProperty={[item]}
blur={!property?true:false}
/>
</div>
}


}
})
}



{isInputEmpty ?
<div className="input-icon input-icon-lg raw-lookup-wrapper">
<i className="meta-icon-preview" />
Expand Down
9 changes: 1 addition & 8 deletions src/components/widget/Lookup/RawLookup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ class RawLookup extends Component {
list: [],
isInputEmpty: true,
selected: null,
model: null,
loading: false,
oldValue: '',
isOpen: false,
Expand All @@ -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({
Expand All @@ -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();
Expand Down Expand Up @@ -168,7 +163,6 @@ class RawLookup extends Component {
list: [],
isInputEmpty: true,
selected: null,
model: null,
loading: false,
query: ''
});
Expand Down Expand Up @@ -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]];

Expand Down

0 comments on commit 4acfa2f

Please sign in to comment.