in public/src/components/channelManagement/MutliSelectTagEditor.tsx [16:94]
padding: spacing(2),
},
}));
interface Option {
label: string;
value: string;
}
const options: Option[] = [
'environment/climate-change',
'environment/climate-crisis',
'environment/environment',
'science/science',
'politics/politics',
'us-news/us-politics',
'australia-news/australian-politics',
'world/world',
'world/europe-news',
'world/russia',
'books/books',
'culture/culture',
'world/coronavirus-outbreak',
'world/race',
'inequality/inequality',
'technology/technology',
'business/business',
'tone/recipes',
].map(id => ({
label: id,
value: id,
}));
interface MultiselectAutocompleteProps {
disabled: boolean;
tagIds: string[] | null;
onUpdate: (tagIds: string[]) => void;
}
const MultiselectAutocomplete: React.FC<MultiselectAutocompleteProps> = ({
disabled,
tagIds,
onUpdate,
}: MultiselectAutocompleteProps) => {
const classes = useStyles();
const [inputValue, setInputValue] = React.useState<string>('');
return (
<div className={classes.container}>
<span style={{ fontSize: '1rem', fontWeight: 'normal' }}>Filter article count by tag</span>
<Autocomplete
id={'multi-seelect-tag'}
multiple
disabled={disabled}
options={options}
getOptionLabel={option => option.label}
value={tagIds?.map<Option>(tag => ({ label: tag, value: tag }))}
inputValue={inputValue}
componentsProps={{
popper: {
modifiers: [
{
name: 'flip',
enabled: false,
},
{
name: 'preventOverflow',
enabled: false,
},
],
},
}}
onInputChange={(event, newInputValue, reason): void => {
if (reason === 'input') {
setInputValue(newInputValue);
}
}}
renderInput={params => (