forked from patternfly/patternfly-react
/
OptionsToggle.js
75 lines (70 loc) · 2 KB
/
OptionsToggle.js
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
import React from 'react';
import PropTypes from 'prop-types';
import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
import { css, getModifier } from '@patternfly/react-styles';
import { fillTemplate } from '../../helpers';
import { DropdownToggle } from '../Dropdown';
function OptionsToggle(props) {
const {
itemsTitle,
optionsToggle,
firstIndex,
lastIndex,
itemCount,
widgetId,
onToggle,
isOpen,
showToggle,
parentRef,
toggleTemplate: ToggleTemplate
} = props;
return (
<div className={css(styles.optionsMenuToggle, getModifier(styles, 'plain'), getModifier(styles, 'text'))}>
<span className={css(styles.optionsMenuToggleText)}>
{typeof ToggleTemplate === 'string' ? (
fillTemplate(ToggleTemplate, { firstIndex, lastIndex, itemCount, itemsTitle })
) : (
<ToggleTemplate firstIndex={firstIndex} lastIndex={lastIndex} itemCount={itemCount} itemsTitle={itemsTitle} />
)}
</span>
{showToggle && (
<DropdownToggle
aria-label={optionsToggle}
onToggle={onToggle}
isOpen={isOpen}
id={`${widgetId}-toggle`}
isSplitButton
className={styles.optionsMenuToggleButton}
parentRef={parentRef}
/>
)}
</div>
);
}
OptionsToggle.propTypes = {
itemsTitle: PropTypes.string,
optionsToggle: PropTypes.string,
firstIndex: PropTypes.number,
lastIndex: PropTypes.number,
itemCount: PropTypes.number,
widgetId: PropTypes.string,
onToggle: PropTypes.func,
isOpen: PropTypes.bool,
parentRef: PropTypes.any,
showToggle: PropTypes.bool,
toggleTemplate: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
};
OptionsToggle.defaultProps = {
itemsTitle: 'items',
optionsToggle: 'Select',
firstIndex: 0,
lastIndex: 0,
itemCount: 0,
widgetId: '',
onToggle: () => undefined,
isOpen: false,
parentRef: null,
showToggle: true,
toggleTemplate: ''
};
export default OptionsToggle;