65 lines
1.7 KiB
JavaScript
65 lines
1.7 KiB
JavaScript
|
import './ToolbarSection.styl';
|
||
|
|
|
||
|
|
import React, { PureComponent } from 'react';
|
||
|
|
|
||
|
|
import ExpandableToolMenu from '../../viewer/ExpandableToolMenu';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import ToolbarButton from '../../viewer/ToolbarButton';
|
||
|
|
import classnames from 'classnames';
|
||
|
|
|
||
|
|
class ToolbarSection extends PureComponent {
|
||
|
|
static defaultProps = {
|
||
|
|
className: '',
|
||
|
|
};
|
||
|
|
|
||
|
|
static propTypes = {
|
||
|
|
buttons: PropTypes.arrayOf(
|
||
|
|
PropTypes.shape({
|
||
|
|
id: PropTypes.string,
|
||
|
|
label: PropTypes.string.isRequired,
|
||
|
|
icon: PropTypes.oneOfType([
|
||
|
|
PropTypes.string,
|
||
|
|
PropTypes.shape({
|
||
|
|
name: PropTypes.string.isRequired,
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
/** Optional: Expandable Tool Menu */
|
||
|
|
buttons: PropTypes.arrayOf(PropTypes.shape({})),
|
||
|
|
})
|
||
|
|
).isRequired,
|
||
|
|
/** Array of string button ids that should show as active */
|
||
|
|
activeButtons: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||
|
|
/** Class for toolbar section container */
|
||
|
|
className: PropTypes.string,
|
||
|
|
};
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const items = this.props.buttons.map((button, index) => {
|
||
|
|
if (button.buttons && Array.isArray(button.buttons)) {
|
||
|
|
return (
|
||
|
|
<ExpandableToolMenu
|
||
|
|
key={`expandable-${index}`}
|
||
|
|
{...button}
|
||
|
|
activeCommand={button.activeButton}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
return (
|
||
|
|
<ToolbarButton
|
||
|
|
key={index}
|
||
|
|
{...button}
|
||
|
|
isActive={this.props.activeButtons.includes(button.id)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={classnames('ToolbarSection', this.props.className)}>
|
||
|
|
{items}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export { ToolbarSection };
|