cncjs

1
import PropTypes from 'prop-types';
2
import React, { PureComponent } from 'react';
3
import { Button } from '../Buttons';
4
import Dropdown from '../Dropdown';
5
import styles from './index.styl';
6

7
class DropdownButton extends PureComponent {
8
    static propTypes = {
9
      ...Dropdown.propTypes,
10

11
      // One of: 'lg', 'md', 'sm', 'xs'
12
      btnSize: Button.propTypes.btnSize,
13

14
      // One of: 'default', 'primary', 'emphasis', 'flat', 'link'
15
      btnStyle: Button.propTypes.btnStyle,
16

17
      // toggle
18
      toggle: PropTypes.node.isRequired,
19

20
      // Align the menu to the right side of the dropdown toggle.
21
      pullRight: PropTypes.bool,
22

23
      // Whether to prevent a caret from being rendered next to the title.
24
      noCaret: PropTypes.bool
25
    };
26

27
    static defaultProps = {
28
      pullRight: true,
29
      noCaret: true
30
    };
31

32
    render() {
33
      const { btnSize, toggle, style, children, ...props } = this.props;
34

35
      // Split component props
36
      const dropdownProps = {};
37
      const toggleProps = {};
38
      Object.keys(props).forEach(propName => {
39
        const propValue = props[propName];
40
        if (Dropdown.ControlledComponent.propTypes[propName]) {
41
          dropdownProps[propName] = propValue;
42
        } else {
43
          toggleProps[propName] = propValue;
44
        }
45
      });
46

47
      return (
48
        <Dropdown
49
          {...dropdownProps}
50
          style={{
51
            ...style,
52
            float: 'left'
53
          }}
54
          btnSize={btnSize}
55
        >
56
          <Dropdown.Toggle
57
            {...toggleProps}
58
            className={styles.widgetButton}
59
            componentClass="a"
60
          >
61
            {toggle}
62
          </Dropdown.Toggle>
63
          <Dropdown.Menu>
64
            {children}
65
          </Dropdown.Menu>
66
        </Dropdown>
67
      );
68
    }
69
}
70

71
export default DropdownButton;
72