Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

refactor: Autocomplete component in PlaygroundCodeFieldset (#8912)

Browse Source 
Custom context fields that have a list of allowed values, show values with autocomplete list
This commit is contained in:
Min Nyan Lin 2024-12-04 21:37:29 +06:30 committed by GitHub
parent 8fbf7976e6
commit 50929c5e4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundCodeFieldset.tsx
View File

@ -19,6 +19,7 @@ import {
useTheme,
Autocomplete,
type SelectChangeEvent,
Checkbox,
} from '@mui/material';
import debounce from 'debounce';
@ -31,6 +32,9 @@ import {
isStringOrStringArray,
normalizeCustomContextProperties,
} from '../../playground.utils';
import CheckBoxOutlineBlank from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
interface IPlaygroundCodeFieldsetProps {
context: string | undefined;
setContext: Dispatch<SetStateAction<string | undefined>>;
@ -155,7 +159,6 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({
const value = validDate
? parseDateValue(validDate.toISOString())
: parseDateValue(now.toISOString());
return (
<TextField
id='date'
@ -181,23 +184,42 @@ export const PlaygroundCodeFieldset: VFC<IPlaygroundCodeFieldsetProps> = ({
);
if (foundField?.legalValues && foundField.legalValues.length > 0) {
const options = foundField.legalValues.map(({ value }) => value);
return (
<Autocomplete
disablePortal
limitTags={3}
id='context-legal-values'
freeSolo
filterSelectedOptions
multiple={true}
options={options}
disableCloseOnSelect
size='small'
value={resolveAutocompleteValue()}
onChange={changeContextValue}
options={options}
multiple={true}
getOptionLabel={(option) => option}
renderOption={(props, option, { selected }) => {
return (
<li {...props}>
<Checkbox
icon={
<CheckBoxOutlineBlank fontSize='small' />
}
checkedIcon={
<CheckBoxIcon fontSize='small' />
}
sx={(theme) => ({
marginRight: theme.spacing(0.5),
})}
checked={selected}
/>
{option}
</li>
);
}}
sx={{ width: 370, maxWidth: '100%' }}
renderInput={(params: any) => (
renderInput={(params) => (
<TextField {...params} label='Value' />
)}
disableCloseOnSelect={false}
/>
);
}