项目作者: OpusCapita

项目描述 :
React dropdown component
高级语言: JavaScript
项目地址: git://github.com/OpusCapita/react-dropdown.git
创建时间: 2018-02-05T13:16:03Z
项目社区:https://github.com/OpusCapita/react-dropdown

开源协议:MIT License

下载


react-dropdown

Description

Describe the component here

Installation

  1. 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.

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

  1. import React from 'react';
  2. import {
  3. DropdownContainer,
  4. DropdownMenu,
  5. DropdownMultiSelect,
  6. } from '@opuscapita/react-dropdown';
  7. export default class ReactView extends React.Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = { checkedItems: List() };
  11. }
  12. componentWillMount() {
  13. this.items = this.initializeItems();
  14. }
  15. onChange = (checkedItems) => {
  16. this.setState({ checkedItems });
  17. }
  18. initializeItems = () => {
  19. const items = [];
  20. for (let i = 0; i < 300; i += 1) {
  21. items.push({ value: i, label: `Item ${i}` });
  22. }
  23. return items;
  24. };
  25. render() {
  26. return (
  27. <div>
  28. <DropdownContainer
  29. id="exampleDropdownContainer"
  30. isOpen
  31. noCaret
  32. title="Dropdown title"
  33. >
  34. <div>
  35. CONTENT
  36. </div>
  37. </DropdownContainer>
  38. <DropdownMenu
  39. id="example"
  40. menuItems={[
  41. {
  42. id: 'item_id_11',
  43. title: 'Item 1, dont\'t close',
  44. onClick: () => console.log('Item 1 clicked'),
  45. disableClosing: true,
  46. },
  47. {
  48. id: 'item_id_12',
  49. title: 'Item 2, with the icon',
  50. onClick: () => console.log('Item 2 clicked'),
  51. icon: <Icon type="indicator" name="ok" width={25} height={25} ></Icon>,
  52. },
  53. {
  54. id: 'item_id_d1',
  55. type: 'divider',
  56. },
  57. {
  58. id: 'item_id_13',
  59. title: 'Item 3',
  60. onClick: () => console.log('Item 3 clicked'),
  61. disabled: true,
  62. },
  63. ]}
  64. />
  65. <DropdownMenu
  66. id="example2"
  67. menuItems={[
  68. {
  69. id: 'item_id_21',
  70. title: 'Item 1',
  71. onClick: () => console.log('Item 1 clicked'),
  72. },
  73. {
  74. id: 'item_id_22',
  75. title: 'Item 2',
  76. onClick: () => console.log('Item 2 clicked'),
  77. },
  78. {
  79. id: 'item_id_d1',
  80. type: 'divider',
  81. },
  82. {
  83. id: 'item_id_23',
  84. title: 'Item 3',
  85. onClick: () => console.log('Item 3 clicked'),
  86. disableClosing: true,
  87. },
  88. ]}
  89. title="Dropdown"
  90. caret
  91. pullRight={false}
  92. />
  93. <DropdownMultiSelect
  94. checkedItems={this.state.checkedItems}
  95. id="exampleDropdownMultiSelect"
  96. items={this.items}
  97. onChange={this.onChange}
  98. defaultPlaceholder="{N} kpl"
  99. ></DropdownMultiSelect>
  100. </div>
  101. );
  102. }
  103. }