communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
67 lines • 3.8 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { FocusZone, FocusZoneDirection, mergeStyles } from '@fluentui/react';
import { insertTableMenuCellButtonSelectedStyles, insertTableMenuCellButtonStyles, insertTableMenuFocusZone, insertTableMenuTitleStyles } from '../../../styles/RichTextEditor.styles';
import { ColumnRowReplaceString, createKey } from '../../../utils/RichTextTableUtils';
import { useTheme } from '../../../../theming';
// This file uses RoosterJS React package implementation with updates to UI components and styles.
const RowColumnInitialValue = 0;
/**
* @private
* Component for the insert table pane
*/
export const RichTextInsertTablePane = (props) => {
const { item, onClick, maxColumnsNumber, maxRowsNumber } = props;
const [column, setColumn] = React.useState(RowColumnInitialValue);
const [row, setRow] = React.useState(RowColumnInitialValue);
const theme = useTheme();
const updateSize = React.useCallback((target) => {
if (target !== undefined && target.dataset.column !== undefined && target.dataset.row !== undefined) {
const column = parseInt(target.dataset.column);
const row = parseInt(target.dataset.row);
if (column >= RowColumnInitialValue &&
column < maxColumnsNumber &&
row >= RowColumnInitialValue &&
row < maxRowsNumber) {
setColumn(column);
setRow(row);
}
}
}, [maxColumnsNumber, maxRowsNumber]);
const onMouseEnter = React.useCallback((e) => {
updateSize(e.target);
}, [updateSize]);
const onTouchStart = React.useCallback((e) => {
updateSize(e.target);
}, [updateSize]);
const onClickButton = React.useCallback(() => {
onClick(createKey(formatRowColumnText(row), formatRowColumnText(column)));
}, [row, column, onClick]);
const items = React.useMemo(() => {
var _a;
const items = [];
for (let i = 0; i < maxRowsNumber; i++) {
for (let j = 0; j < maxColumnsNumber; j++) {
const key = `cell_${i}_${j}`;
const isSelected = j <= column && i <= row;
items.push(React.createElement("button", { className: mergeStyles(insertTableMenuCellButtonStyles(theme), isSelected ? insertTableMenuCellButtonSelectedStyles(theme) : undefined), onClick: onClickButton, key: key, id: key, "data-column": j, "data-row": i, "data-is-focusable": true, onMouseEnter: onMouseEnter, onTouchStart: onTouchStart, "aria-label": formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(i), formatRowColumnText(j)), "data-testid": key }));
}
}
return items;
}, [maxRowsNumber, maxColumnsNumber, column, row, theme, onClickButton, onMouseEnter, onTouchStart, item.text]);
const text = useMemo(() => {
var _a;
return formatText((_a = item.text) !== null && _a !== void 0 ? _a : '', formatRowColumnText(row), formatRowColumnText(column));
}, [column, item.text, row]);
return (React.createElement("div", null,
React.createElement("div", { className: insertTableMenuTitleStyles }, text),
React.createElement(FocusZone, { defaultTabbableElement: `cell_${RowColumnInitialValue}_${RowColumnInitialValue}`, direction: FocusZoneDirection.bidirectional, onActiveElementChanged: updateSize, className: insertTableMenuFocusZone(theme) }, items)));
};
const formatText = (text, row, column) => {
return text.replace(`${ColumnRowReplaceString}`, `${column.toString()} x ${row.toString()}`);
};
const formatRowColumnText = (value) => {
return value + 1;
};
//# sourceMappingURL=RichTextInsertTablePane.js.map