ArrowSelector

Reference

• The ArrowSelector component is a custom dropdown selector.
• It provides a styled and configurable dropdown menu with additional customization for single-value display and styling.
• Provide a dropdown menu with custom styling and behavior.
• Support both single-select and multi-select modes.

Props

• defaultValues: The currently selected values in the dropdown. For single-select, it is an object. For multi-select, it is an array of selected objects.
• picklistOptions: The list of options available in the dropdown. Each option should be an object with label and value properties.
• isMultiselect: Determines whether the dropdown allows multiple selections (true) or a single selection (false).
• onValueChange: A callback function triggered when the selected value(s) change. It receives the new value(s) as an argument. default value is false
• isDisabled: Disables the dropdown when set to true. default value is false
• style: Custom styles for the dropdown, particularly for the header and icons. It can include properties like headerFontWeight and iconsMarginLeft.

Usage Example

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

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

  const handleValueChange = (newValue) => {
    setSelectedValue(newValue);
    console.log('Selected Value:', newValue);
  };

  return (
    <ArrowSelector
      defaultValues={selectedValue}
      picklistOptions={options}
      isMultiselect={false}
      onValueChange={handleValueChange}
      isDisabled={false}
      style={{ headerFontWeight: 'bold', iconsMarginLeft: '8px' }}
    />
  );
};