Dropdown

Reference

• The Dropdown component is designed to render a dropdown menu with options, allowing users to select one or multiple values.
• It applies custom styles and configurations through props.

Props

• The Dropdown component accepts the following props:

1. defaultValues (optional):

   • The currently selected value(s) in the dropdown.
   • For single-select, this is an object representing the selected option.
   • For multi-select, this is an array of selected option objects.

2. picklistOptions (required):

   • An array of objects representing the options available in the dropdown.
   • Each object should have the following structure:

     {
       value: 'optionValue', // The value of the option
       label: 'Option Label' // The label displayed in the dropdown
     }

3. isMultiselect (optional, default: false):

   • A boolean that determines whether the dropdown allows multiple selections.
   • If true, the dropdown supports selecting multiple options.

4. customStyle (optional):

   • An object containing custom styles to override the default styles.

5. onValueChange (optional):

   • A callback function triggered when the selected values change.
   • It receives the updated values as an argument.

6. onFocusOut (optional):

   • A callback function triggered when the dropdown loses focus (blur event).

7. isDisabled (optional, default: false):

   • A boolean that determines whether the dropdown is disabled.
   • If true, the dropdown is read-only and cannot be interacted with.

8. components (optional):

   • An object that allows customization of the dropdown's internal components (e.g., custom option rendering).

9. menuPlacement (optional, default: 'auto'):

   • A string that determines the placement of the dropdown menu.
   • Possible values: 'auto', 'top', 'bottom'.

10. placeholder (optional):

    • A string that specifies the placeholder text displayed when no value is selected.
    • Defaults to 'Select an option'.

11. isLoading (optional, default: false):

    • A boolean that determines whether a loading indicator is displayed in the dropdown.
    • Useful for asynchronous data fetching.

12. isClearable (optional):

    • A boolean that determines whether the selected values can be cleared using a clear button.

Usage Example

Example 1: Basic Single-Select Dropdown

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { Dropdown } = protrakComponents;
  const [selectedValue, setSelectedValue] = useState(null);

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
    ];

  const handleValueChange = (newValue) => {
    setSelectedValue(newValue);
  };

  return (
    <Dropdown
      defaultValues={selectedValue}
      picklistOptions={options}
      onValueChange={handleValueChange}
      placeholder="Select an option"
    />
  );
};

• This renders a single-select dropdown with three options.
• The selected value is managed in the selectedValue state.

Example 2: Multi-Select Dropdown

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { Dropdown } = protrakComponents;
  const [selectedValues, setSelectedValues] = React.useState([]);

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
    ];

  const handleValueChange = (newValues) => {
    setSelectedValues(newValues);
  };

  return (
    <Dropdown
      defaultValues={selectedValues}
      picklistOptions={options}
      isMultiselect={true} // pass true 
      onValueChange={handleValueChange}
      placeholder="Select multiple options"
    />
  );
};

• This renders a multi-select dropdown where users can select multiple options.
• The selected value is managed in the selectedValue state.