theluyuan
38ba663466
Some checks failed
Close stale issues and PRs / stale (push) Has been cancelled
123 lines
2.9 KiB
TypeScript
123 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
|
|
import Icon from '../../../icons/components/Icon';
|
|
import Popover from '../../../popover/components/Popover.web';
|
|
|
|
interface IProps {
|
|
|
|
/**
|
|
* Aria label for the Icon.
|
|
*/
|
|
ariaLabel?: string;
|
|
|
|
/**
|
|
* The decorated component (ToolboxButton).
|
|
*/
|
|
children: React.ReactNode;
|
|
|
|
/**
|
|
* Icon of the button.
|
|
*/
|
|
icon?: Function;
|
|
|
|
/**
|
|
* Flag used for disabling the small icon.
|
|
*/
|
|
iconDisabled?: boolean;
|
|
|
|
/**
|
|
* Popover close callback.
|
|
*/
|
|
onPopoverClose: Function;
|
|
|
|
/**
|
|
* Popover open callback.
|
|
*/
|
|
onPopoverOpen: Function;
|
|
|
|
/**
|
|
* The content that will be displayed inside the popover.
|
|
*/
|
|
popoverContent: React.ReactNode;
|
|
|
|
/**
|
|
* Additional styles.
|
|
*/
|
|
styles?: Object;
|
|
|
|
/**
|
|
* Whether the trigger for open/ close should be click or hover.
|
|
*/
|
|
trigger?: 'hover' | 'click';
|
|
|
|
/**
|
|
* Whether or not the popover is visible.
|
|
*/
|
|
visible: boolean;
|
|
}
|
|
|
|
/**
|
|
* Displays the `ToolboxButtonWithIcon` component.
|
|
*
|
|
* @param {Object} props - Component's props.
|
|
* @returns {ReactElement}
|
|
*/
|
|
export default function ToolboxButtonWithPopup(props: IProps) {
|
|
const {
|
|
ariaLabel,
|
|
children,
|
|
icon,
|
|
iconDisabled,
|
|
onPopoverClose,
|
|
onPopoverOpen,
|
|
popoverContent,
|
|
styles,
|
|
trigger,
|
|
visible
|
|
} = props;
|
|
|
|
if (!icon) {
|
|
return (
|
|
<div
|
|
className = 'settings-button-container'
|
|
style = { styles }>
|
|
<Popover
|
|
content = { popoverContent }
|
|
headingLabel = { ariaLabel }
|
|
onPopoverClose = { onPopoverClose }
|
|
onPopoverOpen = { onPopoverOpen }
|
|
position = 'top'
|
|
trigger = { trigger }
|
|
visible = { visible }>
|
|
{children}
|
|
</Popover>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className = 'settings-button-container'
|
|
style = { styles }>
|
|
{children}
|
|
<div className = 'settings-button-small-icon-container'>
|
|
<Popover
|
|
content = { popoverContent }
|
|
headingLabel = { ariaLabel }
|
|
onPopoverClose = { onPopoverClose }
|
|
onPopoverOpen = { onPopoverOpen }
|
|
position = 'top'
|
|
visible = { visible }>
|
|
<Icon
|
|
alt = { ariaLabel }
|
|
className = { `settings-button-small-icon ${iconDisabled
|
|
? 'settings-button-small-icon--disabled'
|
|
: ''}` }
|
|
size = { 16 }
|
|
src = { icon } />
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|