@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
97 lines • 2.74 kB
JavaScript
// This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/index.tsx`
// If you make any change here, copy it to above file as well
// and notify about the change in #team-fc-editor-ai-dev channel.
/** @jsx jsx */
import React, { useCallback } from 'react';
import { css, jsx } from '@emotion/react';
import { FabricChannel } from '@atlaskit/analytics-listeners';
import Tooltip from '@atlaskit/tooltip';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
import Button from './styles';
export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
const buttonWrapper = css`
display: flex;
height: 100%;
`;
const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
buttonId,
testId,
className = '',
href,
iconAfter,
iconBefore,
disabled,
selected,
spacing,
target,
children,
hideTooltip,
title,
titlePosition = 'top',
item,
'aria-label': ariaLabel,
'aria-haspopup': ariaHasPopup,
'aria-expanded': ariaExpanded,
'aria-pressed': ariaPressed,
'aria-keyshortcuts': ariaKeyShortcuts,
onClick,
onKeyDown,
onItemClick
} = props;
const handleClick = useCallback((event, analyticsEvent) => {
if (disabled) {
return;
}
if (buttonId) {
analyticsEvent.update(payload => ({
...payload,
action: ACTION.CLICKED,
actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
actionSubjectId: buttonId,
eventType: EVENT_TYPE.UI
})).fire(FabricChannel.editor);
}
if (onClick) {
onClick(event);
}
if (item && onItemClick) {
onItemClick(item);
}
}, [disabled, onClick, onItemClick, item, buttonId]);
const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
const button = jsx(Button, {
id: id,
ref: ref,
appearance: "subtle",
testId: testId,
className: className,
href: href,
iconAfter: iconAfter,
iconBefore: iconBefore,
isDisabled: disabled,
isSelected: selected,
onClick: handleClick,
spacing: spacing || 'default',
target: target,
shouldFitContainer: true,
"aria-expanded": ariaExpanded,
"aria-haspopup": ariaHasPopup,
"aria-label": ariaLabel,
"aria-pressed": ariaPressed,
"aria-keyshortcuts": ariaKeyShortcuts,
onKeyDown: onKeyDown
}, children);
if (!title) {
return button;
}
const tooltipContent = !hideTooltip ? title : null;
return jsx(Tooltip, {
content: tooltipContent,
hideTooltipOnClick: true,
position: titlePosition
}, jsx("div", {
css: buttonWrapper
}, button));
});
export default ToolbarButton;