react-dropdown

Description

Describe the component here

Installation

npm install @opuscapita/react-dropdown

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

DropdownContainer

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- | | id | number or string | required | Unique HTML id attribute | | title | number, string or element | required | Title of the dropdown | | children | string, element or array | | Content of the dropdown | | disabled | boolean | false | Is dropdown disabled or not | | dropup | boolean | false | Is dropup or dropdown | | isOpen | boolean | false | Is dropdown open by default | | noCaret | boolean | false | If false, caret is show | | onToggle | function | empty function | Callback function for toggle | | pullRight | boolean | false | If false, dropdown is aligned on left, otherwise on right | | style | object | { bsSize: 'xs', bsStyle: 'info' } | Custom style for the dropdown | | useAnchor | boolean | false | If true, title is anchor |

DropdownMenu

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- | | id | number or string | required | Unique HTML id attribute | | menuItems | array of menu items | required | List of the dropdown menu items | | caret | boolean | false | If true, caret is show | | disabled | boolean | false | Is dropdown disabled or not | | dropup | boolean | false | Is dropup or dropdown | | pullLeft | boolean | false | If false, dropdown is aligned on right, otherwise on left | | title | number, string or element | | Title of the dropdown |

DropdownMenu - menuItems prop attributes

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- | | disabled | boolean | | Is dropdown menu item disabled | | disableClosing | boolean | | Is dropdown menu item's closing disabled | | href | string | | Hyperlink of the dropdown menu item | | icon | element | | Icon of the dropdown menu item | | id | number or string | | Unique HTML id attribute | | onClick | function | | Callback function of click | | title | number, string or element | | Title of the dropdown menu item | | type | string | | Enumeration either 'item' or 'divider' |

DropdownMultiSelect

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- | | id | number or string | required | Unique HTML id attribute | | isClearable | boolean | true | If false, selection cannot be empty | | items | array of items | required | Dropdown menu items | | checkedItems | List | empty list | Checked items | | defaultPlaceholder | string | '{N} items selected' | Default placeholder | | onChange | function | empty function | Callback function of checked change | | tabIndex | number or string | 1 | tabIndex attribute |

DropdownMultiSelect - items prop attributes

| Prop name | Type | Default | Description | | ------------------------ | ----------------- | ---------------------------------------- | ---------------------------------------- | | label | string | | Label of the dropdown menu item | | labelPlaceholder | string | | Placeholder of the dropdown menu item | | value | boolean, number or string | | Value of the dropdown menu item |

Code example

import React from 'react';
import {
  DropdownContainer,
  DropdownMenu,
  DropdownMultiSelect,
} from '@opuscapita/react-dropdown';

export default class ReactView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checkedItems: List() };
  }

  componentWillMount() {
    this.items = this.initializeItems();
  }

  onChange = (checkedItems) => {
    this.setState({ checkedItems });
  }

  initializeItems = () => {
    const items = [];
    for (let i = 0; i < 300; i += 1) {
      items.push({ value: i, label: `Item ${i}` });
    }
    return items;
  };

  render() {
    return (
    <div>
      <DropdownContainer
        id="exampleDropdownContainer"
        isOpen
        noCaret
        title="Dropdown title"
      >
        <div>
          CONTENT
        </div>
      </DropdownContainer>
      <DropdownMenu
        id="example"
        menuItems={[
          {
            id: 'item_id_11',
            title: 'Item 1, dont\'t close',
            onClick: () => console.log('Item 1 clicked'),
            disableClosing: true,
          },
          {
            id: 'item_id_12',
            title: 'Item 2, with the icon',
            onClick: () => console.log('Item 2 clicked'),
            icon: <Icon type="indicator" name="ok" width={25} height={25} />,
          },
          {
            id: 'item_id_d1',
            type: 'divider',
          },
          {
            id: 'item_id_13',
            title: 'Item 3',
            onClick: () => console.log('Item 3 clicked'),
            disabled: true,
          },
        ]}
      />
      <DropdownMenu
        id="example2"
        menuItems={[
          {
            id: 'item_id_21',
            title: 'Item 1',
            onClick: () => console.log('Item 1 clicked'),
          },
          {
            id: 'item_id_22',
            title: 'Item 2',
            onClick: () => console.log('Item 2 clicked'),
          },
          {
            id: 'item_id_d1',
            type: 'divider',
          },
          {
            id: 'item_id_23',
            title: 'Item 3',
            onClick: () => console.log('Item 3 clicked'),
            disableClosing: true,
          },
        ]}
        title="Dropdown"
        caret
        pullRight={false}
      />
      <DropdownMultiSelect
        checkedItems={this.state.checkedItems}
        id="exampleDropdownMultiSelect"
        items={this.items}
        onChange={this.onChange}
        defaultPlaceholder="{N} kpl"
      />
    </div>
    );
  }
}