Documentation

Components

Dropdown

<Dropdown />

Constructor

Dropdown component

Parameters:
Name Type Description
props Props 
The props are the dropdown label's unique id, an optional default value, a message when data is empty, and data.
The setter function liftingDropDownValueUp to update the parent's state with the selected value

Corresponding to the Props interface {
  labelId: string;
  defaultValue?: Combo; // Optional to select the default value of the dropdown
  data: Combo[];
  liftingDropDownValueUp: (value: string) => void; // function lifting state up the selected value
}
The Combo interface {
  value: string; // The value shown in the dropdown
  overrideValue?: string; // Optional to change the title tag's value.
}

Example :
    <Dropdown
      labelId="service-label"
      defaultValue={{ value: "Marketing" }}
      data={[
        { value: "Sales" },
        { value: "Marketing" },
        { value: "Engineering" },
        { value: "Human Resources" },
        { value: "Legal" },
      ]}
      messageIfNoData="No data found"
      liftingDropDownValueUp={handleTextValueChangeDropdown1}
    />

View Source index.tsx, line 37

The corresponding Dropdown

React.ReactElement

Methods

# inner changeIndexInRangedValues(addedPosition) → {number}

Add a value to the current index respecting the list's range values

Parameters:
Name Type Description
addedPosition number

The value to add to the index

View Source index.tsx, line 131

  • The new corresponding index
number

# inner handleBlur(e)

Dropdown blur event (close the dropdown)

Parameters:
Name Type Description
e React.KeyboardEvent.<HTMLElement>

e - The event

View Source index.tsx, line 265

# inner handleClick(e)

Dropdown click event (open or close the dropdown)

Parameters:
Name Type Description
e React.KeyboardEvent.<HTMLElement>

e - The event

View Source index.tsx, line 274

# inner handleKeyDown(e)

Dropdown key down event

Parameters:
Name Type Description
e React.KeyboardEvent.<HTMLElement>

e - The event

View Source index.tsx, line 199

# inner initializeIndex() → {number}

Initialize selected value's index

View Source index.tsx, line 80

  • 0 or the default value's corresponding index
number

# inner initializeOverrideValue() → {string}

Initialize selected override value

View Source index.tsx, line 108

  • The override value or the first value
string

# inner initializeValue() → {string}

Initialize selected value's

View Source index.tsx, line 96

  • The default value or the first one
string

# inner isScrollable(div) → {boolean}

Know if the Div element is scrollable

Parameters:
Name Type Description
div HTMLDivElement

The div to test

View Source index.tsx, line 192

  • Is it scrollable or not
boolean

# inner scrollToSelectedDiv(currentIndex)

Scroll to the selected div tag in the dropdown list

Parameters:
Name Type Description
currentIndex number

currentIndex - The index of selected value in the dropdown list

View Source index.tsx, line 168

# inner setCloseDropdown(boolClose)

Close the dropdown and clear the searching values or open it

Parameters:
Name Type Description
boolClose boolean

Close or toggle the dropdown

View Source index.tsx, line 120

# inner updateValue(newValue, currentIndex?, keepOpened?)

Update the selected value of the dropdown, scroll to it if needed (even on click), and lift state up the selected value

Parameters:
Name Type Description
newValue object

newValue - The new selected value of the dropdown
currentIndex? number

currentIndex - The index of the new value (optional)
keepOpened? boolean

keepOpened - Do we need to keep the dropdown opened (optional, toggle by default)

View Source index.tsx, line 148