doodler-ui-test v1.0.0-test

A TEST package for a Select component. Please, DO NOT USE in production code... this package will be removed from npm in the near future.

Installation

npm install doodler-ui-test

Import the Select Component

import Select from 'doodler-ui-test/common/inputs/Select';
import Option from 'doodler-ui-test/common/inputs/SelectOption';

Code Example

<Select name="AssignTo">
  {
    yourData.map((obj) =>
      <Option key={obj.id} value={obj.id}>
        {obj.name}
      </Option>
    )
  }
</Select>

Using a Custom Icon

import CustomSelectIcon from '@material-ui/icons/UnfoldMore';

<Select downArrowIcon={<CustomSelectIcon />} name="AssignTo">
  {
    yourData.map((obj) =>
      <Option key={obj.id} value={obj.id}>
        {obj.name}
      </Option>
    )
  }
</Select>

Customising an Option

<Select name="AssignTo">
  {
    yourData.map((obj) =>
      <Option key={obj.id} value={obj.id}>
        <span className={block.el('avatar').out}></span>
        <span className={block.el('user').out}>{obj.name}</span>
        <span className={block.el('account').out}>{obj.account}</span>
      </Option>
    )
  }
</Select>

Add a Text Filter

import TextField from 'doodler-ui-test/common/inputs/TextField';

const handlerFilterChange = (ev: React.FormEvent<HTMLInputElement>) => {
  // Filter your data here
}

const handleHideOptions = () => {
  // Reset your filtered data state here
}

<Select onHideOptions={handleHideOptions}>
  <Option>
    <TextField onChange={handlerFilterChange} />
  </Option>
  {
    yourFilteredData.map((obj) =>
      <Option key={obj.id} value={obj.id}>
        {obj.name}
      </Option>
    )
  }
</Select>

Custom Theme

<Select className="CustomTheme" name="AssignTo">
  {
    yourData.map((obj) =>
      <Option key={obj.id} value={obj.id}>
        {obj.name}
      </Option>
    )
  }
</Select>

.CustomTheme {
  $theme: rgb(45, 157, 248);
  
  &__select {
    width: 300px;

    .Select__input:hover {
      border-color: $theme;
    }

    &.Select--expanded {

      .Select__input {
        border-color: $theme;
      }
    }
  }
}