DocSpace-buildtools/web/ASC.Web.Storybook/stories/input/combobox

ComboBox

Description

Custom combo box input

Options have options:

• key - Item key, may be a string or a number
• label - Display text
• icon - Optional name of icon that will be displayed before label
• disabled - Make option disabled
• onClick - On click function

ComboBox perceives all property`s for positioning from DropDown!

If you need to display a custom list of options, you must use advancedOptions property. Like this:

const advancedOptions = (
  <>
    <DropDownItem>
      <RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
    </DropDownItem>
    <DropDownItem>
      <RadioButton value="desc" name="first" label="Z-A" />
    </DropDownItem>
    <DropDownItem isSeparator />
    <DropDownItem>
      <RadioButton value="first" name="second" label="First name" />
    </DropDownItem>
    <DropDownItem>
      <RadioButton
        value="last"
        name="second"
        label="Last name"
        isChecked={true}
      />
    </DropDownItem>
  </>
);

<ComboBox
  options={[]} // An empty array will enable advancedOptions
  advancedOptions={advancedOptions}
  onSelect={option => action("Selected option")(option)}
  selectedOption={{
    key: 0,
    label: "Select"
  }}
  isDisabled={false}
  scaled={false}
  size="content"
  directionX="right"
>
  <Icons.NavLogoIcon size="medium" key="comboIcon" />
</ComboBox>;

Usage

import { ComboBox } from 'asc-web-components';

const options = [
    {
        key: 1,
        icon: 'CatalogEmployeeIcon',  // optional item
        label: 'Option 1',
        disabled: false,              // optional item
        onClick: clickFunction        // optional item
    },
    ...
];

<ComboBox
    options={options}
    isDisabled={false}
    selectedOption={{
            key: 0,
            label: 'Select'
          }}
    dropDownMaxHeight={200}
    noBorder={false}
    scale={true}
    size='content'
    onSelect={option => console.log('selected', option)}
/>

Properties

Props	Type	Required	Values	Default	Description
options	array	✅	-	-	Combo box options
isDisabled	bool	-	-	false	Indicates that component is disabled
noBorder	bool	-	-	false	Indicates that component is displayed without borders
selectedOption	object	✅	-	-	Selected option
onSelect	func	-	-	-	Will be triggered whenever an ComboBox is selected option
dropDownMaxHeight	number	-	-	-	Height of Dropdown
scaled	bool	-	-	true	Indicates that component is scaled by parent
size	oneOf	-	base, middle, big, huge, content	base	Select component width, one of default
advancedOptions	element	-	-	-	If you need display options not basic options