@opuscapita/react-dropdown v2.2.5

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

DropdownMenu

DropdownMenu - menuItems prop attributes

DropdownMultiSelect

DropdownMultiSelect - items prop attributes

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>
    );
  }
}