Picklist

Reference

• The Picklist component is display dropdown component designed for single or multi-select functionality.
• It uses a Dropdown component and maps options for display and selection.

Props

1. isMultiselect

   • Type: boolean
   • Description: Enables multi-select functionality if true.

2. isDisabled

   • Type: boolean
   • Description: Disables the dropdown if true.

3. fieldValue

   • Type: Array | string
   • Description: The currently selected value(s).

4. options

   • Type: Array
   • Description: The list of options to display in the dropdown.

5. onEdit

   • Type: function
   • Description: Callback triggered when the selected value(s) change.

6. onFocusOut

   • Type: function
   • Description: Callback triggered when the dropdown loses focus.

7. isLoading

   • Type: boolean
   • Description: Displays a loading indicator if true.

8. customStyle

   • Type: object
   • Description: Custom styles for the dropdown.

9. placeholder

   • Type: string
   • Description: Placeholder text for the dropdown.

10. showClearValue

    • Type: boolean
    • Description: Displays a clear button to reset the selection if true.

11. menuPlacement

    • Type: string
    • Default: 'auto'
    • Description: Controls the placement of the dropdown menu (e.g., 'top', 'bottom').

12. isDeactiveOptions

    • Type: boolean
    • Default: true
    • Description: Determines whether disabled options should be included.

Usage Example

function Example(pageContext) {
    const { protrakComponents } = React.useContext(customWidgetContext);
    const { Picklist } = protrakComponents;
    
    const options = [
        { name: 'option1', displayName: 'Option 1', disabled: false },
        { name: 'option2', displayName: 'Option 2', disabled: true },
        { name: 'option3', displayName: 'Option 3', disabled: false },
    ];

    return (
        <Picklist
        isMultiselect={true}
        fieldValue={['option1']}
        options={options}
        onEdit={(newValues) => console.log('Selected:', newValues)}
        placeholder="Select options"
        showClearValue={true}
        />
    );
};

• This renders a multi-select dropdown with options, a placeholder, and a clear button. It logs the selected values on change.