Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

button-menu

v1.10.0arrow_drop_down
v1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
38
VISIBILITY
Public
PUBLISHED
4 days ago
SIZE
24 KB
A Button Menu offers a list of actions or functions that a user can access.
1 contributor
Use button-menu in your project ?
Copied
npm i @bit/nexxtway.react-rainbow.button-menu
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
ButtonMenu/index.js
131 Lines(95 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import React from 'react';
import PropTypes from 'prop-types';
import ButtonIcon from './../ButtonIcon';
import PrimitiveMenu from '../PrimitiveMenu';

/**
 * A Button Menu offers a list of actions or functions that a user can access.
 */
export default function ButtonMenu(props) {
    const {
        icon,
        buttonSize,
        title,
        assistiveText,
        buttonVariant,
        buttonShaded,
        disabled,
        tabIndex,
        onClick,
        onFocus,
        onBlur,
        children,
        ...rest
    } = props;

    return (
        <PrimitiveMenu
            {...rest}
            icon={icon}
            size={buttonSize}
            assistiveText={assistiveText}
            disabled={disabled}
            tabIndex={tabIndex}
            variant={buttonVariant}
            shaded={buttonShaded}
            title={title}
            onClick={onClick}
            onFocus={onFocus}
            onBlur={onBlur}
            trigger={ButtonIcon}
        >
            {children}
        </PrimitiveMenu>
    );
}

ButtonMenu.propTypes = {
    /** The icon to show if it is passed.
     * It must be a svg icon or a font icon. It is a required value. */
    icon: PropTypes.node,
    /** The content of the ButtonMenu. Used to render the menuItem elements
     * when the ButtonMenu is open. */
    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.object]),
    /** The variant changes the look of the button. Accepted variants include base,
     * brand, success, border, border-filled, bare-inverse, and inverse.
     * This value defaults to border-filled. */
    buttonVariant: PropTypes.oneOf([
        'base',
        'brand',
        'success',
        'border',
        'border-filled',
        'border-inverse',
        'inverse',
    ]),
    /** The size of the button. Options include xx-small, x-small, medium, or large.
     * This value defaults to medium. */
    buttonSize: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),
    /** Specify true when the button has a shadow around it.
     * This value defaults to false.
     * Only neutral, brand, destructive and success variant can be shaded. */
    buttonShaded: PropTypes.bool,
    /** The size of the menu. Options include xx-small, x-small, medium, or large.
     * This value defaults to small. */
    menuSize: PropTypes.oneOf(['xx-small', 'x-small', 'small', 'medium', 'large']),
    /** Determines the alignment of the menu relative to the button.
     * Available options are: left, center, right, bottom, bottom-left, bottom-right.
     * This value defaults to left. */
    menuAlignment: PropTypes.oneOf([
        'left',
        'right',
        'bottom',
        'center',
        'bottom-right',
        'bottom-left',
    ]),
    /** If true, the menu is disabled. Disabling the menu prevents users from opening it.
     * This value defaults to false. */
    disabled: PropTypes.bool,
    /** If is set to true, then is showed a loading symbol. */
    isLoading: PropTypes.bool,
    /** Displays tooltip text when the mouse moves over the element. */
    title: PropTypes.string,
    /** A description for assistive sreen readers. */
    assistiveText: PropTypes.string,
    /** Specifies the tab order of an element (when the tab button is used for navigating). */
    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    /** The action triggered when the element is clicked. */
    onClick: PropTypes.func,
    /** The action triggered when the element receives focus. */
    onFocus: PropTypes.func,
    /** The action triggered when the element releases focus. */
    onBlur: PropTypes.func,
    /** A CSS class for the outer element, in addition to the component's base classes. */
    className: PropTypes.string,
    /** An object with custom style applied to the outer element. */
    style: PropTypes.object,
    /** The id of the outer element. */
    id: PropTypes.string,
};

ButtonMenu.defaultProps = {
    icon: null,
    children: null,
    buttonVariant: 'border-filled',
    buttonSize: 'medium',
    buttonShaded: false,
    menuSize: 'xx-small',
    menuAlignment: 'left',
    disabled: false,
    isLoading: false,
    tabIndex: undefined,
    title: undefined,
    assistiveText: undefined,
    onClick: () => {},
    onFocus: () => {},
    onBlur: () => {},
    className: undefined,
    style: undefined,
    id: undefined,
};