Merge pull request #51 from suvarnakale/release-1.0.0

Issue #PS-1254 feat: new widget added for multiselect dropdown

src/components/DynamicForm.tsx

@@ -5,6 +5,7 @@ import { Theme as MaterialUITheme } from '@rjsf/mui';
 import { withTheme } from '@rjsf/core';
 import MultiSelectCheckboxes from './MultiSelectCheckboxes';
 import CustomRadioWidget from './CustomRadioWidget';
+import MultiSelectDropdown from './MultiSelectDropdown';
 import { RJSFSchema, RegistryFieldsType, WidgetProps } from '@rjsf/utils';
 import { useTranslation } from 'next-i18next';
 import { Button, Divider } from '@mui/material';
@@ -44,6 +45,7 @@ const DynamicForm: React.FC<DynamicFormProps> = ({
  const widgets = {
  MultiSelectCheckboxes: MultiSelectCheckboxes,
  CustomRadioWidget: CustomRadioWidget,
+ MultiSelectDropdown: MultiSelectDropdown,
  };
  const { t } = useTranslation();
 

src/components/GeneratedSchemas.ts

@@ -149,7 +149,7 @@ export const GenerateSchemaAndUiSchema = (
  if (maxSelections) {
  fieldSchema.maxItems = maxSelections;
  }
- fieldUiSchema['ui:widget'] = 'select';
+ fieldUiSchema['ui:widget'] = 'MultiSelectDropdown';
  }
 
  if (!isMultiSelect && type === 'drop_down') {

src/components/ManageUser.tsx

@@ -460,6 +460,7 @@ const manageUsers: React.FC<ManageUsersProps> = ({
  setOpenFacilitatorModal(false);
  };
 
+ const handleDeleteUser = () => {};
  return (
  <>
  {/* <Header /> */}
@@ -776,6 +777,7 @@ const manageUsers: React.FC<ManageUsersProps> = ({
  userId={userId}
  open={openDeleteUserModal}
  onClose={handleCloseModal}
+ onUserDelete={handleDeleteUser}
  />
  <SimpleModal
  primaryText={t('COMMON.OK')}

src/components/MultiSelectDropdown.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import TextField from '@mui/material/TextField';
+import { WidgetProps } from '@rjsf/utils';
+
+const MultiSelectDropdown: React.FC<WidgetProps> = ({
+ options,
+ value,
+ required,
+ disabled,
+ readonly,
+ onChange,
+ schema,
+}) => {
+ const handleChange = (event: any) => {
+ onChange(event.target.value);
+ };
+
+ const isEnumArray = (items: any): items is { enum: any[] } => {
+ return items && Array.isArray(items.enum);
+ };
+
+ const selectOptions = isEnumArray(schema?.items)
+ ? schema.items.enum.map((val, index) => ({
+ value: val,
+ label: schema.enumNames ? schema.enumNames[index] : val,
+ }))
+ : [];
+
+ return (
+ <TextField
+ select
+ label={schema?.title}
+ value={value || []}
+ onChange={handleChange}
+ variant="outlined"
+ SelectProps={{
+ multiple: true,
+ renderValue: (selected) =>
+ (selected as string[])
+ .map(
+ (val) =>
+ selectOptions?.find((opt: any) => opt.value === val)?.label
+ )
+ .join(', '),
+ }}
+ InputLabelProps={{ required: required }}
+ fullWidth
+ disabled={disabled || readonly}
+ >
+ {selectOptions?.map((option: any) => (
+ <MenuItem key={option.value} value={option.value}>
+ <ListItemText primary={option.label} />
+ </MenuItem>
+ ))}
+ </TextField>
+ );
+};
+
+export default MultiSelectDropdown;