Open tomaskikutis opened 2 years ago
I have modified the initial interface to support asynchronous mode that is required for selecting locations from a remote geonames API.
I've added another property to the interface - allowMultiple
. When it's not true
, it should only allow one value and display a appropriate UI component, something like this:
The interface doesn't match the one requested in #614
canSelectBranchWithChildren
doesn't receive a branch as an argument~@dzonidoo I tried testing it, but as mentioned in the previous comment, tree select component isn't exported from ui-framework and thus can't be used. It should be exported via app-typescript/index.ts
.
Add "testing" label again when this is fixed.
It looks better @dzonidoo, but there are still issues:
value template
is not provided, it should use option template
import React from 'react';
import {TreeSelect} from 'superdesk-ui-framework/react';
import {ITreeNode} from 'superdesk-ui-framework/react/components/TreeSelect';
type IProps = {};
interface IVocabularyItem {
qcode: string;
name: string;
}
interface IState {
value: Array<IVocabularyItem>;
}
const source = [
{
'name': 'Article (news)',
'qcode': 'Article',
},
{
'name': 'Sidebar',
'qcode': 'Sidebar',
},
{
'name': 'Factbox',
'qcode': 'Factbox',
},
];
function searchOptions(
term: string,
callback: (res: Array<ITreeNode<{name: string; qcode: string;}>>) => void,
): void {
setTimeout(() => {
callback(
source
.filter((item) => item.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
.map((item) => ({value: item})),
);
}, 1000);
}
export class MultiSelectDemo extends React.PureComponent<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
value: [],
};
}
render() {
return (
<TreeSelect
kind="asynchronous"
searchOptions={searchOptions}
value={this.state.value}
onChange={(val) => {
this.setState({value: val});
}}
getLabel={({name}) => name}
getId={({qcode}) => qcode}
selectBranchWithChildren={false}
optionTemplate={(item) => <span style={{color: 'blue'}}>{item.name}</span>}
allowMultiple={true}
/>
);
}
}
✔️ ~One more thing, could you add a prop that would limit search only to a level that is being shown at any time? It's needed in authors select, because showing "editor" role doesn't make sense when it's not clear to which user does it belong.~
@dzonidoo here are the issues I found after latest testing:
searchOptions
must not be called~menu should open to the top if there's not enough space at the bottom (was already reported before)
This doesn't work well in async mode - video
fix flickering - after I finish typing, dropdown results change multiple times - it should only change once
doesn't look fixed - video
a
- network request initiated for a
- search field value set to b
- network request initiated for a
- network request arrives for b
- network request arrives for a
ACTUAL: search results for a
are displayed
EXPECTED: search results for b
are displayed
To reproduce:
@dzonidoo I didn't do much testing yet, but one of the issues I noticed when using it is that when readOnly
is true, appropriate styling isn't being applied like for other fields. image
It needs to work in a generic way, but use cases I'm looking at right now are selecting subjects and authors.
Required features:
IProps
optionTemplate
andvalueTemplate
are needed for custom rendering. For example, when selecting authors, avatars need to be rendered -optionTemplate
would be used for this.valueTemplate
would be used when listing selected values - see authors screenshot.Note: see if you need to do lookups in the implementation. If not, use
Array<ITreeNode<T>>
instead ofITreeWithLookup<T>