communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
49 lines • 2.14 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { FocusZoneDirection } from '@fluentui/react';
import { insertTableMenuTablePane, toolbarTableButtonStyle } from '../../../styles/RichTextEditor.styles';
import { RichTextInsertTablePane } from './RichTextInsertTablePane';
import { parseKey } from '../../../utils/RichTextTableUtils';
import { RichTextToolbarTableIcon } from './RichTextToolbarTableIcon';
/**
* "Insert table" command bar item for the rich text toolbar
*/
export const richTextInsertTableCommandBarItem = (theme, maxRowsNumber, maxColumnsNumber, strings, onClick) => {
return {
'data-testid': 'rich-text-toolbar-insert-table-button',
key: 'RichTextToolbarInsertTableButton',
text: strings.richTextInsertTableTooltip,
ariaLabel: strings.richTextInsertTableTooltip,
// hide the chevron icon
menuIconProps: {
hidden: true
},
onRenderIcon: () => {
return React.createElement(RichTextToolbarTableIcon, null);
},
buttonStyles: toolbarTableButtonStyle(theme),
canCheck: false,
iconOnly: true,
subMenuProps: {
calloutProps: { isBeakVisible: false },
shouldFocusOnMount: true,
className: insertTableMenuTablePane,
focusZoneProps: { direction: FocusZoneDirection.bidirectional },
items: [
{
key: 'RichTextToolbarInsertTableMenu',
text: strings.richTextInsertTableMenuTitle,
canCheck: false,
onRender: (item) => {
return (React.createElement(RichTextInsertTablePane, { item: item, onClick: (key) => {
const { row, column } = parseKey(key);
onClick(column, row);
}, maxColumnsNumber: maxColumnsNumber, maxRowsNumber: maxRowsNumber }));
}
}
]
}
};
};
//# sourceMappingURL=RichTextInsertTableCommandBarItem.js.map