1 | import React from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import classNames from 'classnames';
|
4 | import { DropdownContext } from './DropdownContext';
|
5 | import { mapToCssModules, omit, tagPropType } from './utils';
|
6 |
|
7 | const propTypes = {
|
8 | children: PropTypes.node,
|
9 | active: PropTypes.bool,
|
10 | disabled: PropTypes.bool,
|
11 | divider: PropTypes.bool,
|
12 | tag: tagPropType,
|
13 | header: PropTypes.bool,
|
14 | onClick: PropTypes.func,
|
15 | className: PropTypes.string,
|
16 | cssModule: PropTypes.object,
|
17 | toggle: PropTypes.bool
|
18 | };
|
19 |
|
20 | const defaultProps = {
|
21 | tag: 'button',
|
22 | toggle: true
|
23 | };
|
24 |
|
25 | class DropdownItem extends React.Component {
|
26 | constructor(props) {
|
27 | super(props);
|
28 |
|
29 | this.onClick = this.onClick.bind(this);
|
30 | this.getTabIndex = this.getTabIndex.bind(this);
|
31 | }
|
32 |
|
33 | onClick(e) {
|
34 | if (this.props.disabled || this.props.header || this.props.divider) {
|
35 | e.preventDefault();
|
36 | return;
|
37 | }
|
38 |
|
39 | if (this.props.onClick) {
|
40 | this.props.onClick(e);
|
41 | }
|
42 |
|
43 | if (this.props.toggle) {
|
44 | this.context.toggle(e);
|
45 | }
|
46 | }
|
47 |
|
48 | getTabIndex() {
|
49 | if (this.props.disabled || this.props.header || this.props.divider) {
|
50 | return '-1';
|
51 | }
|
52 |
|
53 | return '0';
|
54 | }
|
55 |
|
56 | render() {
|
57 | const tabIndex = this.getTabIndex();
|
58 | const role = tabIndex > -1 ? 'menuitem' : undefined;
|
59 | let {
|
60 | className,
|
61 | cssModule,
|
62 | divider,
|
63 | tag: Tag,
|
64 | header,
|
65 | active,
|
66 | ...props } = omit(this.props, ['toggle']);
|
67 |
|
68 | const classes = mapToCssModules(classNames(
|
69 | className,
|
70 | {
|
71 | disabled: props.disabled,
|
72 | 'dropdown-item': !divider && !header,
|
73 | active: active,
|
74 | 'dropdown-header': header,
|
75 | 'dropdown-divider': divider
|
76 | }
|
77 | ), cssModule);
|
78 |
|
79 | if (Tag === 'button') {
|
80 | if (header) {
|
81 | Tag = 'h6';
|
82 | } else if (divider) {
|
83 | Tag = 'div';
|
84 | } else if (props.href) {
|
85 | Tag = 'a';
|
86 | }
|
87 | }
|
88 |
|
89 | return (
|
90 | <Tag
|
91 | type={(Tag === 'button' && (props.onClick || this.props.toggle)) ? 'button' : undefined}
|
92 | {...props}
|
93 | tabIndex={tabIndex}
|
94 | role={role}
|
95 | className={classes}
|
96 | onClick={this.onClick}
|
97 | />
|
98 | );
|
99 | }
|
100 | }
|
101 |
|
102 | DropdownItem.propTypes = propTypes;
|
103 | DropdownItem.defaultProps = defaultProps;
|
104 | DropdownItem.contextType = DropdownContext;
|
105 |
|
106 | export default DropdownItem;
|