adslot-ui/www/examples/ButtonGroupExample.jsx at 740dad51aee0d034252f41075e65610aa874ae19 · Adslot/adslot-ui · GitHub

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
import React from 'react';
import Example from '../components/Example';
import { Button, ButtonGroup, OverlayTrigger, Popover, SvgSymbol } from '../../src';
import { Overlay } from 'react-bootstrap';

class ButtonGroupExample extends React.PureComponent {
  state = {
    isDropdownOpen: false,
  };

  buttonRef = React.createRef();

  render() {
    return (
      <React.Fragment>
        <ButtonGroup bsStyle="success">
          <Button>Approve</Button>
          <Popover triggers="click" placement="bottom" popoverContent="I am a popover on click!">
            <Button>
              <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
            </Button>
          </Popover>
        </ButtonGroup>
        <ButtonGroup bsStyle="danger" inverse={true}>
          <Button>Reject</Button>
          <Popover
            triggers="disabled"
            isOpen={this.state.isDropdownOpen}
            id="popover-2"
            popoverContent="I am a Overlay on click!"
            placement="bottom"
          >
            <Button
              onClick={() =>
                this.setState(prevState => ({
                  isDropdownOpen: !prevState.isDropdownOpen,
                }))
              }
              ref={this.buttonRef}
            >
              <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
            </Button>
          </Popover>
        </ButtonGroup>
        <ButtonGroup bsStyle="primary" dts="button-group">
          <Button dts="button-sign-off">Sign off</Button>
          <Button onClick={() => alert('>I am a Alert on click!')}>
            <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
          </Button>
        </ButtonGroup>
        <ButtonGroup bsStyle="warning" inverse={true} disabled={true}>
          <Button>Disabled</Button>
          <Button>
            <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
          </Button>
        </ButtonGroup>
      </React.Fragment>
    );
  }
}

export const exampleProps = {
  componentName: 'Button Group',
  exampleCodeSnippet: `
  <ButtonGroup bsStyle="success">
    <Button>Approve</Button>
    <Popover triggers="click" placement="bottom" popoverContent="I am a popover on click!">
      <Button>
        <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
      </Button>
    </Popover>
  </ButtonGroup>
  <ButtonGroup bsStyle="danger" inverse={true}>
    <Button>Reject</Button>
    <Popover
      triggers="disabled"
      isOpen={this.state.isDropdownOpen}
      id="popover-2"
      popoverContent="I am a Overlay on click!"
      placement="bottom"
    >
      <Button
        onClick={() =>
          this.setState(prevState => ({
            isDropdownOpen: !prevState.isDropdownOpen,
          }))
        }
        ref={this.buttonRef}
      >
        <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
      </Button>
    </Popover>
  </ButtonGroup>
  <ButtonGroup bsStyle="primary">
    <Button>Sign off</Button>
    <Button onClick={() => alert('>I am a Alert on click!')}>
      <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
    </Button>
  </ButtonGroup>
  <ButtonGroup bsStyle="warning" inverse={true} disabled={true}>
    <Button>Disabled</Button>
    <Button>
      <SvgSymbol className="svg-icon" href="./assets/svg-symbols.svg#caret-down" />
    </Button>
  </ButtonGroup>
  `,
  designNotes: (
    <p>
      <span className="text-bold">Button Groups</span> provides a layout for a two or more buttons to share common style
      and functionality but with independent events.
    </p>
  ),
  propTypeSectionArray: [
    {
      propTypes: [
        {
          propType: 'bsStyle',
          type: 'string, oneOf primary, default, success, info, warning or danger',
          defaultValue: 'default',
        },
        {
          propType: 'inverse',
          type: 'bool',
          note: 'Renders an inverse button. Can be used with bsStyle to create primary inverse buttons.',
          defaultValue: 'false',
        },
        {
          propType: 'disabled',
          type: 'bool',
          note: 'Disables entire button group',
          defaultValue: 'false',
        },
        {
          propType: 'bsSize',
          type: 'string',
          note: 'small, large',
        },
      ],
    },
  ],
};

export default () => (
  <Example {...exampleProps}>
    <ButtonGroupExample />
  </Example>
);